|
|||
Layout Frage von Anfänger
Hallo,
ich bin absoluter css-Laie, müsste aber dringend wissen, wie man das Layout so definiert, das der eigentliche Homepageinhalt mittig steht und links und rechts der gleiche Abstand ist. Also das soll dann so aussehen wie zum Beispiel hier Danke für jeden Tipp Ramira Geändert von Ramira (22.04.2009 um 13:18 Uhr) |
Sponsored Links |
|
|||
Einfach um den gesamten Inhalt der Seite einen div legen und als id den Namen inhalt vergeben.
Im body der Seite also: <div id="inhalt> Hier kommt der gesamte Inhalt der Seite rein. </div> Im CSS Bereich folgendes notieren: div#inhalt { margin: 0 auto; } Wenn die Breite eingeschränkt werden soll der Inhalt wieder an der linken Seite beginnen soll folgendes notieren: div#inhalt { margin: 0 auto; width:800px; text-align: left; } Hier wurde der Anzeigebereich auf eine Breite von 800 Pixeln reduziert. Hoffe es hilft. Gideon |
Sponsored Links |
|
|||
Hallo Gideon,
ja genau das meinte ich, aber leider klappt es nicht. Komischer Weise wird die Seite im Firefox so angezeigt, im IE aber nicht, sondern linksbündig. Hier mal meine css............vielleicht beißt sich da ja etwas * { margin: 0; padding: 0; } body { background: #2a3742 url(images/bg.jpg) repeat-x top center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #eee; } a { text-decoration: none; color: #c0ffff; } a:hover { text-decoration: underline; color: #A3D74F; } #wrap { margin: 0 auto; width: 800px; } #header { height: 200px; background: #2a3742 url(images/bgtest2.jpg) no-repeat; } #header h1 { font-size: 28px; letter-spacing: -1px; padding: 35px 0 0 20px; color: #fff; } #header h1 a { color: #fff; text-decoration: none; font-weight: 100; letter-spacing: -2px; } #header h1 a:hover { color: #A3D74F; } #header h2 { font-size: 19px; color: #e30000; padding: 5px 0 0 20px; letter-spacing: -1px; font-weight: 100; } h2 { color: #f2d376; } #content { padding: 0 20px; } .right { float: right; width: 530px; text-align: justify; padding-top: 20px; font-size: 14px; } .right h2 { font-size: 18px; font-weight: 100; height: 30px; line-height: 30px; } .right h2 a { text-decoration: none; color: #f2d376; } .right h2 a:hover { color: #fff; } .left { float: left; width: 260px; padding-top: 10px; } .left h2 { margin: 10px 0 0 0; padding-left: 10px; height: 30px; line-height: 30px; color: #fff; font-size: 13px; } .left ul { padding: 10px 0 15px 3px; list-style-type: none; } .left ul li a { text-decoration: none; font-weight: 600; font-size: 13px; } .left ul li a:hover { } #footer { text-align: center; font-size: 11px; color: #eee; margin-top: 40px; border-top: 1px dotted #A2D84C; padding-top: 10px; padding-bottom: 10px; } #footer a { color: #eee; } #footer a:hover { color: #aaa; } Wie man sieht ist es ein free css template, welches ich gern an meine Bedürfnisse anpassen möchte. (wrap ist bei mir der Inhalt |
|
|||
Sorry. War zu voreilig
(Beitrag leer editiert) Edit2: Hmm - was ist denn nun genau falsch. Ich kann nichts falsches erkennen. Außer, dass es im IE6 etwas verrutscht. Geändert von regloh (22.04.2009 um 20:50 Uhr) |
|
|||
Der gute alte IE spinnt also wieder, ergänze deine Formatierung für den body:
body { background: #2a3742 url(images/bg.jpg) repeat-x top center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #eee; } wie folgt: body { background: #2a3742 url(images/bg.jpg) repeat-x top center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #eee; padding: 0; text-align: center; } Dadurch wird der IE gezwungen alles was sich im body befindet zentriert darzustellen. Den wrap: #wrap { margin: 0 auto; width: 800px; } ergänzt du wie folgt: #wrap { margin: 0 auto; width: 800px; text-align: left; } Alles was im wrap steht wird linksbündig ausgerichtet. Gideon |
|
|||
Genau! das wars
padding: 0; text-align: center; im body und schon ging es........ puuuh schwere Geburt für mich DANKE !!!!!! nur komisch das ich bereits eine ähnliche Seite erstellt habe, bei der ich díesen Zusatz im body nicht brauchte |
|
|||
@uwehamburg
Wenn du das #wrap {text-align: center} so geschrieben hättest #wrap {text-align: center;}, hätte der wrap zumindest den Inhalt zentriert dargestellt. Ohne ; macht er null. Gideon |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layout selbst coden - Hilfe ! | kgsbm | CSS | 3 | 25.03.2008 20:25 |
Layout | matwic | CSS | 2 | 12.03.2008 11:58 |
Kleine Anfänger Frage - Links zu weit unten bzw. Farbwechsel | -jeseiX- | CSS | 4 | 03.06.2007 13:53 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 23:40 |
Frage zu CSS Layout | ignore | CSS | 1 | 07.05.2007 18:02 |