Auf Thema antworten 2026

Beitrag

<blockquote data-quote="_tnt_" data-source="post: 2053163" data-attributes="member: 19533">AW: div in div horizontal zentrierenVielen Dank für deine Antwort. Ich habe das jetzt mal probiert.HTML:[CODE]&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;title&gt;FotoPort&lt;/title&gt;&lt;link href=&quot;style.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;container&quot;&gt;&lt;!-- -----|----- HEADER -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Header&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;!-- -----|----- Ende-HEADER -----|----- --&gt;&lt;!-- -----|----- MAIN -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;eins&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Eins&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;zwei&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Zwei&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;drei&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Drei&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;vier&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Vier&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;fuenf&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Fuenf&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;sechs&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Sechs&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;!-- -----|----- Ende-MAIN -----|----- --&gt;&lt;!-- -----|----- FOOTER -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Footer&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;!-- -----|----- Ende-FOOTER -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/CODE]CSS:[CODE]body{&nbsp; &nbsp; background: rgb(0, 0, 0);&nbsp; &nbsp; color: rgb(255, 255, 255);&nbsp; &nbsp; font-family: sans-serif;&nbsp; &nbsp; font-size: 15px;}#container{&nbsp; &nbsp; width: 900px;&nbsp; &nbsp; margin: 0px auto;}#header{background: rgb(30, 30, 30);}#main{&nbsp; &nbsp; margin: 20px auto;}#footer{&nbsp; &nbsp; background: rgb(30, 30, 30);}#eins, #zwei, #drei, #vier, #fuenf, #sechs{&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; background: rgb(14, 14, 14);}#eins{&nbsp; &nbsp; float: left;}#zwei{&nbsp; &nbsp; float: left;}#drei{&nbsp; &nbsp; float: left;}#vier{&nbsp; &nbsp; clear: both;&nbsp; &nbsp; float: left;}#fuenf{&nbsp; &nbsp; float: left;}#sechs{&nbsp; &nbsp; float: left;}#footer{clear: both;}h1{padding: 0px;margin: 0px;}[/CODE]Jetzt meine Fragen:1) Wo kommt der Abstand zwischen Header und Main (Kacheln) her? Ich glaube das hängt mit dem main margin 20px zusammen. Nur warum ist dann kein Abstand zwischen Footer und Main?2) Die Kacheln sind aber noch immer nicht im Main zentriert. Wie kriegt man das hin?3) Passt der Aufbau soweit mit den floats?4) Muss ich auf etwas aufpassen, wenn ich mit padding und margin arbeite? Kann es sein das es zu Browser Schwierigkeiten kommen kann?Vielen Dank schonaml.Gruß</blockquote>

[QUOTE="_tnt_, post: 2053163, member: 19533"] [b]AW: div in div horizontal zentrieren[/b] Vielen Dank für deine Antwort. Ich habe das jetzt mal probiert. HTML: [CODE] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>FotoPort</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="container">  <div id="header"> <h1>Header</h1> </div>   <div id="main"> <div id="eins"> Eins </div> <div id="zwei"> Zwei </div> <div id="drei"> Drei </div> <div id="vier"> Vier </div> <div id="fuenf"> Fuenf </div> <div id="sechs"> Sechs </div> </div>   <div id="footer"> <h1>Footer</h1> </div>  </div> </body> </html> [/CODE] CSS: [CODE] body{ background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 15px; } #container{ width: 900px; margin: 0px auto; } #header{ background: rgb(30, 30, 30); } #main{ margin: 20px auto; } #footer{ background: rgb(30, 30, 30); } #eins, #zwei, #drei, #vier, #fuenf, #sechs{ width: 200px; height: 200px; background: rgb(14, 14, 14); } #eins{ float: left; } #zwei{ float: left; } #drei{ float: left; } #vier{ clear: both; float: left; } #fuenf{ float: left; } #sechs{ float: left; } #footer{ clear: both; } h1{ padding: 0px; margin: 0px; } [/CODE] Jetzt meine Fragen: 1) Wo kommt der Abstand zwischen Header und Main (Kacheln) her? Ich glaube das hängt mit dem main margin 20px zusammen. Nur warum ist dann kein Abstand zwischen Footer und Main? 2) Die Kacheln sind aber noch immer nicht im Main zentriert. Wie kriegt man das hin? 3) Passt der Aufbau soweit mit den floats? 4) Muss ich auf etwas aufpassen, wenn ich mit padding und margin arbeite? Kann es sein das es zu Browser Schwierigkeiten kommen kann? Vielen Dank schonaml. Gruß [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?