|
|||
Ungewollter Abstand zwischen DIV Container
Hi Ihr,
Ich bin gerade dabei, ein altes HTML-Tabellen Design auf CSS umzumünzen, und sitze nun schon seit Stunden vor dem Problem, das ich den Abstand zwischen zwei DIV-Containern nicht auf null bekomme - sprich es blitzt dort immer der schwarze Hintergrund hervor. Desweiteren geht der Border nicht um den kompletten "Wrapper". Vielleicht bin ich ja auch nur blind und der Fehler ist für den CSS Profi sofort ersichtlich? Dies ist das alte Design, sprich das ist mein Ziel: Dies ist der aktuelle Status. Zwischen Hundebilder und Nav one, two ist eine schwarze Linie,- resultierend, denke ich mal, aus einem Abstand zwischen den Elementen. Desweiteren geht der Border nicht weiter bei Fuss two. Hier nochmal der Sourcecode: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hopsinaut.de Layout</title> <style type="text/css" media="screen"> body{ background: #fff; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 11px; } #wrapper { width : 600px; margin : 50px auto; border : 2px solid #000; background-color : #000000; } #container { clear : both; width : 600px; padding : 0; margin : 0; border : 0; } #clinks { top : 0; float : left; padding : 0; margin : 0; border : 0; height : 100%; width : 200px; } #crechts { top : 0; float : right; padding : 0; margin : 0; border : 0; background : #ffffff; height : 100%; width : 400px; } #links1 { float : left; background : #333333; height : 30px; width : 200px; text-align : center; font-weight : bold; } #nav { float : right; background : #ffcc00; height : 30px; width : 400px; text-align : center; font-weight : bold; } #links2 { float : left; background : #000000; height : 30px; width : 200px; } #fuss { float : right; background : #ffcc00; height : 30px; width : 400px; text-align : center; font-weight : bold; } h4 { font-size : 15px; border-bottom : 1px dashed #000; } p { text-align : justify; } p.source { font-size : 10px; } p.source:before { content : 'Quelle: '; } </style> </head> <body> <div id="wrapper"> <div id="container"> <img src="logo.gif" alt="Hopsinaut.de Logo" height="100" width="200" border="0" /><img src="header.gif" alt="Hopsinaut.de - Die Seite mit dem Hund." height="100" width="400" border="0" /></div> <div id="container"> <img src="pic_03.gif" alt="Hopsi schüttelt sich" height="100" width="200" border="0" /><img src="pic_02.gif" alt="Hopsi schläft" height="100" width="200" border="0" /><img src="pic_01.gif" alt="Hopsi auf Achse" height="100" width="200" border="0" /></div> <div id="links1"> nav ONE </div> <div id="nav"> nav TWO </div> <div id="container"> <div id="clinks" align="center"> <img src="sagt_01.jpg" alt="Hopsi sagt" height="100" width="100" border="0" /> </div> <div id="crechts" align="center"> <img src="impress.gif" alt="Impressum, Haftungsausschluss, Kopierrecht" height="300" width="300" border="0" /> </div> </div> <div id="container"> <div id="links2"> <img src="pfoten.gif" alt="Pfoten" height="30" width="200" border="0" /> </div> <div id="fuss"> FUSS TWO </div> </div> </div> </body> </html> Liebe Grüße! Tim |
Sponsored Links |
Sponsored Links |
|
|||
Ja, der Fehler besteht danach leider immernoch, sowohl die Zwischenräume sowie auch der eingeschränkte Border :-/ Woran kann das nur liegen? Habe mit margin und padding die Nacht auch schon ordentlich herumprobiert, leider ohne Erfolg.
|
|
||||
Lass mal alle rechts floatenden elemente nicht mehr floaten. Das ist überflüssig. Gib ihnen einfach einen margin-left der der breite der links floatenden elemente entspricht.
EDIT: Welchen sinn hat das clear:both; in den containern?
__________________
[SIGPIC][/SIGPIC] |
|
|||
Lücken:
http://www.carsten-protsch.de/zwisch...e/luecken.html Den floats innerhalb der Elemente #container fehlt das clear. Siehe FAQ Punkt 2 Validier deinen Code! Eine ID darf pro Dokument nur genau einmal vorkommen. Das veraltete align-Attribut brauchst du nicht. Und nimm bitte XHTML1.0, kein 1.1. http://schneegans.de/web/xhtml/ |
|
|||
Boah, wahnsinn, danke für die vielen Tipps!
Ich werde versuchen alles umzusetzen und denke auch das der Fehler dort in den angesprochenen Punkten zu finden ist. Danke für die Lehrstunde! Tim |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |