div mittig zentrieren

No3x · 6 April 2008

Ich möchte den div gerne genau mittig (x) und unten am Rand haben (y). Warum geht es so nicht und wie korrigiere ich den Fehler?
sieht so aus im Moment(nicht mittig):

hier mein CSS:

Code:

    #lang    {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0px;
    margin-bottom: 0px;
    width: 188px;
    height: 44px;
    background: transparent url('./imageset/copyright.gif') no-repeat;
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
    color: #cccccc;
}

rayvez · 6 April 2008

wenn du das div immer in der mitte haben willst hilft dir vll margin-left: auto;
und margin-right: auto; weiter

No3x · 6 April 2008

wenn ich es wie beschrieben mache also

margin-left: auto;,margin-right: auto; einfüge verändert sich nichts. :? kapier ich ned. ^^

und dann noch das Problem mit unten an den Rand setzen.

Brauche Hilfe.

threadi · 6 April 2008

Da du das div (?) mit position: fixed versehen hast bewirkt ein margin gar nichts. Deine Angaben für bottom und left sind imho richtig - wichtig wäre hier dein gesamter Quellcode?!

No3x · 6 April 2008

html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="verify-v1" content="H22+ATpUfYPbCdDwo74H/9Nx9zx/2Uq34tPqnTf3hDI=" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="cache">
<meta name="robots" content="INDEX,FOLLOW">
<meta http-equiv="content-language" content="de">
<meta name="description" content="No3x Homepage">
<meta name="keywords" content="noex,No3x,website,homepage,kontakt,erfahren,über">
<meta name="author" content="No3x">
<meta name="publisher" content="Selethisgroup">
<meta name="copyright" content="by Selethisgroup">
<meta name="audience" content="Alle">
<meta name="page-type" content="Private Homepage">
<meta name="page-topic" content="Medien">
<meta http-equiv="reply-to" content="[email protected]">
<meta name="creation_date" content="2008-03-03">
<meta name="revisit-after" content="1 days">
<meta name="siteinfo" content="robots.txt">
<title>Index</title>
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<br />
<div id="lang">

</div>
<div id="seite">
  <div id="header">
<p class="head"> <img border="0" src="/style/imageset/klammer/klammer_left.png" alt="[" />  <a href="/index.php"><img border="0" src="/style/imageset/Chalkwork/Icons/logo.png" alt="[No3x]" /></a>    No3x - Im Aufbau  <img border="0" src="/style/imageset/klammer/klammer_right.png" alt="]" /> </p>
  </div>
<div id="navi">
<p class="navi"> Home</p>
</div>

   <div id="steuerung">
    <tr>
        <td><a href="/index.php">Home</a></td>                    <img border="0" src="../style/imageset/halter/halter.png" alt="|" />
        <td><a href="../content/about.php">Über mich</a></td>   <img border="0" src="../style/imageset/halter/halter.png" alt="|" />
        <td><a href="/forum" target="_blank">Forum</a></td>        <img border="0" src="../style/imageset/halter/halter.png" alt="|" />
    </tr>
  </div>
  <div id="inhalt">
     <p class="überschrift1">Willkommen auf meiner Homepage!</p>
      Wie du sehen kannst ist die Site noch ziemlich leer. Das wird sich aber in nächster Zeit ändern.
      <br />
      Der meiste Text steht bis jetzt im Impressum. ^^
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>

   <div id="fussbereich">
      2008 by No3x &amp; Selethis/Selethisgroup || design by No3x &copy; || <a href="../content/impressum.php">Impressum</a>
  </div>
  
  </div>
  <div id="stats">
<script language="JavaScript" src="http://js.stats.de/j/0000060652"></script>
<script language="JavaScript">
rs_subpage = 0;
rs_pagename = "";
rapidstats(60652);
</script>
<noscript>
<a href="http://www.stats.de/?x=60652" target="_blank">
<img src="http://srv1.stats.de/l/0000060652?js=0&subpage=0&pagename=" border="0" alt="">
</a>
</noscript>
</div>
</body>
</html>

CSS

Code:

   body {
      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
      background-color: #303030;

    }

    * {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color:#666666;
      margin:0;
      padding:0;
    }
    a {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color: #444444;
      line-height: 8pt;
      margin: 0;
      padding: 0;
    }

    a:hover {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color: #999999;
      line-height: 8pt;
      margin: 0;
      padding: 0;
      border-bottom-style: none;
    }

    #seite {
       width:760px;
       margin:0px auto;
       margin-top: 80px;
       text-align:center;
       border:1px solid #000000;
    }
    
    #header {
      font-family: "Verdana", sans-serif;
      padding: 20px;
      background-image:url(./imageset/header/streifen.gif);
    }
    
    #navi {
      text-align:left;
      height: 8;
      background-color: #191919;

    }
    .navi {
      font-family: "Verdana", sans-serif;
      font-size: 9pt;
    }

    #inhalt {
      background-image:url(./imageset/inhalt/streifen+extra.gif);
      width: 760px;
    }

    #steuerung   {
      width: 760px;
      background-color: #1f1f1f;
      text-align:left;
      border-bottom-style: ridge;
      }

    #fussbereich {
      font-size: 12pt;
      text-align: centre;
      clear: both;
      background-color:lightblue; 
      width: 760px;
      height: 20px;
      background-image:url(./imageset/header/streifen.gif);
    }    

    .head {
      font-size: 30pt;
      font-family: "Verdana", sans-serif;
      color: #990000;
      margin:0;
      padding:0;
    }
    /* LINKS */

    a[href^="http:"] {
    background: transparent url('./imageset/outside/outside.gif') 100% 50% no-repeat;
    padding-right: 10px;
    }



    a[href^="http://n**.de"],
    a[href^="http://www.n**.de"] {
    background: transparent;
    padding-right: 0px;
    }

    .off {
      font-size: 40pt;
      font-family: "Verdana", sans-serif;
      text-align: centre;
      color: red;
      margin:0;
      padding:0;
      }

    .ueberschrift1 {
      font-size: 19pt;
      font-family: "Verdana", sans-serif;
      color: black;
      margin:0;
      padding-top: 8px;
    }

    .haftungsausschluss {
      font-size: 7pt;
      font-family: "Verdana", sans-serif;
      color: black;
      margin:0;
      padding:0;
    }
    
    #lang    {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    width: 188px;
    height: 44px;
    background: transparent url('./imageset/copyright.gif') no-repeat;
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
    color: #cccccc;
}

    #stats    {
    position: fixed;
    top: auto;
    right: auto;
    left: -200px;
    bottom: -200px;
    width: 100px;
    height: 24px;
    background-color: ;
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
    color: #cccccc;
}

Efchen · 7 April 2008

Moin moin,

Du schreibst "left:50%;". Wie willst Du auf diese Weise etwas horizontal zentrieren, das breiter als 0 Pixel ist?

Übrigens ist die Art und Weise des zentrierens gefährlich. Wenn Du angibst left:50%; und dann das fehlende margin-left:<breite des zu zentrierenden Elements / 2>; dann rutscht das Element links raus, wenn dar Browserfensterinnenbereich schmaler ist, als das zu zentrierende Element. Und nach links scrollen kann kein Browser.

Gruß,
-Efchen

nichtsgeht · 7 April 2008

Efchen schrieb:
Du schreibst "left:50%;". Wie willst Du auf diese Weise etwas horizontal zentrieren, das breiter als 0 Pixel ist?

Indem margin auf ein negativen Wert gesetzt wird

Code:

.bereich {
 position: absolute;
 top: 50%; 
 left: 50%; 
 margin: -111px -333px; 
 width: 222px; 
 height: 666px;
}

Also margin halbe Größe des DIV-Bereiches im negativen Bereich

Efchen · 7 April 2008

Tach.

nichtsgeht schrieb:
Indem margin auf ein negativen Wert gesetzt wird

Klar. Aber das hat eben im Originalcode gefehlt.

Also margin halbe Größe des DIV-Bereiches im negativen Bereich

Was aber auch zu den von mir beschriebenen Problemen führt.

Gruß,
-Efchen

nichtsgeht · 7 April 2008

Efchen schrieb:
Was aber auch zu den von mir beschriebenen Problemen führt.

Da gebe ich dir recht

No3x · 7 April 2008

ich Habe mich vielleicht etwas unverständlich augedrückt.
Dieser Layer soll mitscrollen (deswegen position: fixed; ) und immer in der Mitte der Seite sein. Außerdem soll er immer Am Unteren Rand sein.

/edit: Im Moment geht es ja so wie ich es will aber es ist eben nicht Mittig und nicht am unteren Rand.
www.noex.kilu.de

nichtsgeht · 7 April 2008

Setze mal html und body auf 100%

Code:

html, body { height: 100%; }

Damit der IE auch damit klar kommt, zusätzlich

Code:

* html #lang {position:absolute;}

No3x · 7 April 2008

wo muss ich das hinschreiben? :lol:

nichtsgeht · 7 April 2008

In deiner CSS-Datei

No3x · 7 April 2008

sieht leicht verschoben aus.

nichtsgeht · 7 April 2008

Jaq, left ist auf 50%, nun mußt du noch ein margin-left von der halben breite der DIV-Breite setzen, also

Code:

#lang    {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0px;
    margin-left: [COLOR=Red]-94px;[/COLOR]
    margin-right: auto;
    margin-bottom: 0px;
    width: 188px;
    height: 44px;
    background: transparent url('./imageset/copyright.gif') no-repeat;
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
    color: #cccccc;
}

Übrigens, setze mal dieses ans ende der CSS-Datei

Code:

* html #lang {position:absolute;}

Sonst übernimmt der IE das nicht ;)

Efchen · 7 April 2008

nichtsgeht schrieb:
Jaq, left ist auf 50%, nun mußt du noch ein margin-left von der halben breite der DIV-Breite setzen

Ach nee, echt? Ich könnte schwören, das hab heute morgen schonmal gesagt :-)

SCNR,
-Efchen

nichtsgeht · 7 April 2008

Hast du, aber wurde noch nicht in der Tat umgesetzt.

No3x · 7 April 2008

Im IE sieht es bereits gut aus. Aber FF scheint es nicht so richtig anzunehmen, es ist alles links-zentriert.

Was soll ich tuen?

@Efchen: Sorry aber ich wusste nicht wie ich es ändern soll.

nichtsgeht · 7 April 2008

Ändere mal die ersten 3 Positionen wie folgt:

Code:

   * {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color:#666666;
      margin:0;
      padding:0;
    }

    body {
      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
      background-color: #303030;
      height: 100%;
      position:absolute;
    }
    
    html, body { 
    height: 100%; 
    [COLOR=Red]margin: 0 auto;[/COLOR]
    }

Die änderung habe ich rot markiert. Und das * {...} setze mal an den anfang.

No3x · 7 April 2008

also bei mir tuts im FF nicht funktionieren.

Code:

  * {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color:#666666;
      margin:0;
      padding:0;
    }



  body {
      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
      background-color: #303030;
      height: 100%;
      position:absolute;
    }
    
    html, body { 
    height: 100%; 
    margin: 0 auto;
    }
    
    * html #lang {position:absolute;}
    
      a {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color: #444444;
      line-height: 8pt;
      margin: 0;
      padding: 0;
    }

    a:hover {
      font-size: 12pt;
      font-family: "Verdana", sans-serif;
      color: #999999;
      line-height: 8pt;
      margin: 0;
      padding: 0;
      border-bottom-style: none;
    }

    #seite {
       width:760px;
       margin: 0px auto;
       margin-top: 80px;
       text-align:center;
       border:1px solid #000000;
    }
    
    #header {
      font-family: "Verdana", sans-serif;
      padding: 20px;
      background-image:url(./imageset/header/streifen.gif);
    }
    
    #navi {
      text-align:left;
      height: 8;
      background-color: #191919;

    }
    .navi {
      font-family: "Verdana", sans-serif;
      font-size: 9pt;
    }

    #inhalt {
      background-image:url(./imageset/inhalt/streifen+extra.gif);
      width: 760px;
    }

    #steuerung   {
      width: 760px;
      background-color: #1f1f1f;
      text-align:left;
      border-bottom-style: ridge;
      }

    #fussbereich {
      font-size: 12pt;
      text-align: centre;
      clear: both;
      background-color:lightblue; 
      width: 760px;
      height: 20px;
      background-image:url(./imageset/header/streifen.gif);
    }    

    .head {
      font-size: 30pt;
      font-family: "Verdana", sans-serif;
      color: #990000;
      margin:0;
      padding:0;
    }
    /* LINKS */

    a[href^="http:"] {
    background: transparent url('./imageset/outside/outside.gif') 100% 50% no-repeat;
    padding-right: 10px;
    }



    a[href^="http://noex.kilu.de"],
    a[href^="http://www.noex.kilu.de"] {
    background: transparent;
    padding-right: 0px;
    }

    .off {
      font-size: 40pt;
      font-family: "Verdana", sans-serif;
      text-align: centre;
      color: red;
      margin:0;
      padding:0;
      }

    .ueberschrift1 {
      font-size: 19pt;
      font-family: "Verdana", sans-serif;
      color: black;
      margin:0;
      padding-top: 8px;
    }

    .haftungsausschluss {
      font-size: 7pt;
      font-family: "Verdana", sans-serif;
      color: black;
      margin:0;
      padding:0;
    }
    
    #lang    {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0px;
    margin-left: -94px;
    margin-right: auto;
    margin-bottom: 0px;
    width: 188px;
    height: 44px;
    background: transparent url('./imageset/copyright.gif') no-repeat;
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
    color: #cccccc;
}
}

    #stats    {
    position: fixed;
    top: auto;
    right: auto;
    left: -200px;
    bottom: -200px;
    width: 100px;
    height: 24px;
    background-color: ;
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
    color: #cccccc;
}

div mittig zentrieren

Mitglied

Neues Mitglied

Mitglied

Moderator

Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied