div zentrieren

Ambience · Beitrag von **Ambience** » 03.02.2008 18:13

Hallo Leute,

ich habe gerade ein Problem.. und zwar will ich von tables auf div umsteigen... Leider schaff ich es nicht, den wrapper zu zentrieren:

css:

Code: Alles auswählen

body  { margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        background-color: #47b5ff;
      }
      
.wrapper  { background-image: url(images/wrapper_bg.jpg);
            background-repeat: repeat-y;
            position: center;
          }

html:

Code: Alles auswählen

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Startseite</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
  <div class="wrapper">
    <div class="footer">TEST</div>
  </div>
  </body>
</html>

Ambience · Beitrag von **Ambience** » 03.02.2008 21:07

Sorry für nochmal post..

Momentan bin ich soweit:

css:

Code: Alles auswählen

body {
	padding:0;
	margin:0;
	background-color:#47b5ff;
	color:#515151;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	}
	
#background {
	padding:0;
	position:absolute;
	margin: 0 auto;
	width:100%;
	height: 100%;
	background-image:url(images/wrapper_bg.jpg);
	background-repeat:repeat-y;
	}

img {
	border:0;
}

#main {
	position:relative;
	margin: 20% auto 0 auto;
	background-color:#FFFFFF;
	border: 1px #a1b097;
	width:782px;
	height:215px;
}

html:

Code: Alles auswählen

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>xxx :: Startseite</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="background">
		<div id="main">
		
			Das ist der Main TRAKAKAKAKAKAKAKAKAKAKAKAKKKKKKKKKKKKKKKKKKKKKKKKKhDas ist der Main TRAKAKAKAKAKAKAKAKAKAKAKAKKKKKKKKKKKKKKKKKKKKKKKKKhDas ist der Main TRAKAKAKAKAKAKAKAKAKAKAKAKKKKKKKKKKKKKKKKKKKKKKKKKhDas ist der Main TRAKAKAKAKAKAKAKAKAKAKAKAKKKKKKKKKKKKKKKKKKKKKKKKKhDas ist der Main TRAKAKAKAKAKAKAKAKAKAKAKAKKKKKKKKKKKKKKKKKKKKKKKKKhDas ist der Main TRAKAKAKAKAKAKAKAKAKAKAKAKKKKKKKKKKKKKKKKKKKKKKKKKh
		</div>
		<!-- main -->
	</div><!-- background -->
  </body>
</html>

Wie bekomme ich das Div mit der ID background zentriert? .- Ich krieg das einfach nicht hin

Beitrag von **S2B** » 03.02.2008 21:35

Entweder margin: auto in Verbindung mit einer width-Angabe oder text-align: center für Text etc. Beim ersten darfst du dann aber kein position: absolute verwenden...

Ambience · Beitrag von **Ambience** » 03.02.2008 22:49

Vielen Dank, ich hab es nun geschafft.. Fast läuft es so wie ich es will..

Ich hab nurnoch ein Problem..

Ich habe ein input feld und danach gleich ein button.. der button sollte eigentlich auf die höhe des input feldes, aber der streubt sich irgendwie...

Damit du besser den überblick hast, hab ich mal den kompletten code hier rein:

css:

Code: Alles auswählen

     
#search_box { background-image: url(images/search_bg.jpg);
              background-repeat: no-repeat;
              width: 532px;
              height: 68px;
              margin: 35px auto;
              text-align: left;
            }
            
#search_field { width: 430px;
                height: 15px;
                margin-left: 10px;
                margin-top: 16px;
                border: 1px;
                border-style: inset;
                color: #054376; }

html:

Code: Alles auswählen

  
    <!--  Gesamter Inhalt  -->
    <div style="width:802px;margin:0px auto;text-align:center;background-image: url(images/wrapper_bg.jpg);">
    <!-- Die SuchBox -->
    <div id="search_box">
      <input type="text" name="searched" maxlength="100" id="search_field" /> <img src="images/search_button.gif" alt="Suchen starten" id="test" /><br />Erweiterte Suche
    </div>
   </div>

So sieht es im Moment aus (bisschen verschandelt wegen Copyright..)
Die höhenunterschiede bitte bemerken *drauf hinweist*:

So ist es falsch:
[ externes Bild ]

So ist es richtig:
[ externes Bild ]

Mit freundlichem Gruß
Ambience

Beitrag von **Pyramide** » 03.02.2008 22:59

Das Limit für Code liegt übrigens immer noch bei 30 Zeilen... [kb=knigge#code]Posten von Code[/kb].

Ambience · Beitrag von **Ambience** » 03.02.2008 23:03

Lol, ja ok ich werds ändern... das mitm knigge bestätigen find ich jetzt gemein...

Bitte aber trotzdem um hilfe..

Danke

Beitrag von **S2B** » 03.02.2008 23:07

Gib dem Button ein margin-top: 16px, dann sollte es passen.

Ambience · Beitrag von **Ambience** » 03.02.2008 23:18

Hallo,

leider Nein. Wenn ich das mache schiebt er einfach das input und den button nochmal um ca. 3-5 pixel runter...

Edit: Habe es jetzt mit einem z-index und manueller positionierung gemacht.

Vielen Dank nochmal S2B