|
|||
Problem mit Umsetzung eines Layouts
Hallo liebe Community,
bisher habe ich meine Layouts hauptsächlich mit Tabellen umgesetzte, bin nun aber dabei vollständig zu CSS überzugehen. Gerade komme ich jedoch nicht weiter. Dieses Grdundlayout soll umgesetzt werden: Logischerweise geht es um die beiden grünen Balken. Der schwarze Bereich wird mal 900px breit. Genau über und unter dem schwarzen Bereich soll in den grünen Bereichen Text stehen. Der restliche grüne Teil des Balkens nach rechts bzw links soll leer bleiben und einfach nur bis zum rand gehen. Wie kann man diese beiden grünen Balken umsetzen? Würde mich über Hilfe sehr freuen. Gruß Christian |
Sponsored Links |
|
||||
Nimm ein <div>, packe da rein <div> für grün-oben, schwarz und grün-unten.
Gib dem äußeren Div die Breite von 900px, #schwarz keine Breite, #oben und #unten eine größere Breite als 900px, wobei #unten mit "margin-left:-100px" über den Rand von #wrap gezogen wird. Sieht dann ungefähr so aus: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, table, td, tr, th, a, div { margin: 0 ; padding: 0 ; } #wrap { margin:0 auto; border:1px solid red; width:900px; height:600px; } #oben { width:1000px; background: green; height:100px; } #schwarz { background: #000; height:400px; } #unten { width:1000px; background: green; height:100px; margin-left:-100px; } </style> </head> <body> <div id="wrap"> <div id="oben"></div> <div id="schwarz"></div> <div id="unten"></div> </div> </body> </html> Damit in den überstehenden Bereich von #oben und #unten kein Element platznimmt, musst du noch padding-left bzw. padding-right vergeben und die Breite anpassen. Gibt natürlich auch andere Versionen, da ist dann statt dem negativen Abstand #schwarz einfach kleiner als #wrap, #oben und #unten genauso groß.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ Geändert von Crizzo (24.01.2009 um 20:18 Uhr) |
Sponsored Links |
|
|||
Danke BlackHawk für deine Antwort.
Also das war noch nicht ganz so wie ich es wollte, aber dank deinem Gerüst, hab ichs jetzt geschafft. Scheint so auch wunderbar zu funktionieren. Getestet mit FF und IE 6. Wär nett wenn mir mal noch jemand sagt, gut, so kann man es ohne Probleme machen.... Quelltext: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, table, td, tr, th, a, div { margin: 0 ; padding: 0 ; } #wrap { margin: 0 auto; text-align:center; border:1px solid red; width:100%; height:600px; } #oben { width:100%; background: green; height:35px; margin-left:50%; } #wrapper { margin: 0 auto; text-align:center; width:900px; } #schwarz { margin: 0 auto; text-align:center; background: #000; width: 900px; height:400px; } #unten { width:100%; background: green; height:35px; margin-left:-50%; z-index:0; } #untenb { width:900px; background: red; height:35px; margin: 0 auto; text-align:center; z-index:2; margin-top: -35px; } </style> </head> <body> <p> </p> <div id="wrap"> <div id="oben"></div> <div id="untenb"></div> <div id="schwarz"></div> <div id="unten"></div> <div id="untenb"></div> </div> </body> </html> Chris |
|
||||
Zitat:
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
||||
Das solltest du selbst testen können.
Hiermit z.B. sind alte Internet Explorer testbar: Install multiple versions of IE on your PC | TredoSoft An ältere Opera, Safari und Firefox sollte man recht einfach kommen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
||||
Oder gleich Virtual PC installieren und die kostenlosen XP (mit IE6) Images von Microsoft ziehen.
Download details: IE App Compat VHD Dann kannst Du auch gleich eure Firmenwebseite checken weil die sieht im IE7 nicht ganz korrekt aus
__________________
Geändert von In4matiker (24.01.2009 um 21:55 Uhr) |
|
|||
Hallo nochmal,
habe jetzt noch ein Problem das ich mir nicht erklären kann: Der div "mitte" hat einen hintergrund zugewiesen bekommen. Der wird aber nur angezeigt, wenn ich dem div eine Höhe zuweise. Warum? Hier der Quelltext: Code:
<!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> <title>Eipper-DA-Personalservice GmbH - [*pagetitle*]</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="de" /> <!-- BASE AENDERN!! <base href="http://www.eipper-da-personalservice.de" /> --> <script type="text/javascript" src="/assets/repository/slimbox/js/mootools.js"></script> <script type="text/javascript" src="/assets/repository/slimbox/js/slimbox.js"></script> <link rel="stylesheet" href="/assets/repository/slimbox/css/slimbox.css" type="text/css" media="screen" /> <!-- STYLESHEET EINRICHTEN!! <link rel="stylesheet" href="/screenstyle.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/printstyle.css" type="text/css" media="print" /> --> <link rel="shortcut icon" href="http://eipper.seel-media.de/favicon.png" type="image/png" /> <link rel="icon" href="http://eipper.seel-media.de/favicon.png" type="image/png" /> <style type="text/css"> /* GRUNDGERÜST */ html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, table, td, tr, th, a, div { margin: 0 ; padding: 0 ; } body { background-color:#EBF0F1; } #page { margin: 0 auto; text-align:center; width: 100%; } #oben { width:100%; background: green; height:35px; margin-left:50%; } #mitte { margin: 0 auto; text-align:center; width: 900px; background-image:url(/assets/images/tpl/bg.gif); background-repeat:repeat-y; } #unten { width:100%; background: green; height:35px; margin-left:-50%; clear:left; } #contentoben { margin: 0 auto; text-align:center; width:900px; background: red; height:35px; margin-top: -35px; } #contentunten { margin: 0 auto; text-align:center; width:900px; background: red; height:35px; margin-top: -35px; } /* LAYOUT MITTE */ div#inhalt { float:right; width:593px; height: 100%; padding:20px; margin-left:15px; text-align: left; border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; } div#newsletter { float:left; width:228px; padding:10px; border: 1px solid #D4D4D4; border-top: 0px solid #D4D4D4; background-color: #FFFFFF; background-image:url(/assets/images/tpl/newsletter.png); background-repeat:no-repeat; text-align: left; } div#ticker { float:left; clear:left; width:250px; background:#FF8539; text-align: left; } </style> </head> <body> <p> </p> <div id="page"> <div id="oben"></div> <div id="contentoben"></div> <div id="mitte"> <div id="wrapper"> <div id="inhalt"> <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p> <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p> <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column fil ler make silly make text text fill make very filler column very </p> <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p> </div> </div> <div id="newsletter"> <strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly fil ler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </div> <div id="ticker"> <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fillsilly column very </p> </div> </div> <div id="unten"></div> <div id="contentunten"></div> </div> </body> </html> Geändert von Seel-Media (24.01.2009 um 23:56 Uhr) |
|
||||
Klick
Der Container #mitte wächst nicht mit, da die inneren "floats" ihn nicht ausdehnen. Dir fehlt ein "clear".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
Code:
#oben { width:100%; background: green; height:35px; margin-left:50%; } Nimm noch die Breitenangabe width:100% raus, sie verursacht in allen geprüften Browsern eine ellenlange horizontale Scrollleiste. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mitwachsender Content und Footer Problem | Bentham | CSS | 5 | 19.09.2010 12:49 |
IE 7: Zoom Problem, Höhen Problem, Text problem | Cu Chullain | CSS | 4 | 02.09.2010 14:56 |
PNG in IE Problem mit der Mauserkennung (klickbar oder nicht) | Angélique | CSS | 13 | 16.03.2010 19:20 |
Stu Nicholls Galerie - Problem bei Umsetzung | rockpianist | CSS | 16 | 30.10.2009 21:20 |
Problem mit Background-Color im FireFox | to.ni | CSS | 2 | 31.08.2004 12:13 |