|
||||
richtig clearen - ich bin zu doof
Ich versuche mich gerade darin, in einer Webseite einen Container zu zentrieren und in diesen eine rechts ausgerichtete Textbox zu stellen. Links von der Textbox soll die Hauptnavi stehen, unterhalb des Containers eine Subnavigation, so wie hier:
Nun muss ich die rechts gefloatete Textbox wieder clearen, damit ich dann mit einem negativen margin-top die Navi im linken Bereich hochziehen kann. Ich hatte das gestern auch mit dem Clearfix versucht, hab das aber gar nicht hinbekommen. Ich müsste den Clearfix doch zusammen in einer Klasse mit meiner "textbox" bringen, damit er die Textbox nach Abschluss cleart, oder? Oder hab ich das Tut doch gänzlich falsch verstanden. Auf jeden Fall hat es bei mir nicht funktioniert. Nun ja, also hab ich es mit der unschöneren Variante versucht und einfach ein clearendes div eingesetzt. IE und FF lassen sich auch überreden, der Opera allerings akzeptiert nach dem clear mein negatives margin-top nicht? Warum hab ich allerdings keine Ahnung. Hier nochmal das Dilemma als Webseite Und nun der Code: CSS Code:
* { margin:0; padding:0; } html, body { height:100%; } body { background-color: #FD9E1A; text-align:center; /* horizontal centering for IE Win quirks */ } #distance { width:1px; height:50%; background-color: #FD9E1A; margin-bottom: -192px; float: left; } #container { margin:0 auto; position:relative; text-align:left; height: 383px; width: 614px; clear:left; background: #FFFFFF url('img/bg1.jpg') no-repeat; } #textfeld { background-color: #FFFFFF; filter: Alpha(opacity=60); opacity: .6; float:right; width: 270px; height: 304px; overflow: auto; font-family: "Tahoma", Verdana, Arial; font-size: 12px; color: #660400; margin: 29px 30px 0px 10px; padding: 10px; clear:left; } h1 { font-family: "Tahoma", Verdana, Arial; font-size: 12px; color: #660400; text-decoration: none; } .clear { clear: both; } /* Navigation Innen*/ .navigation { margin: -17px 0px 0px 40px; } .navigation li { list-style-type: none; display: inline; } .navigation a { font-family: "Tahoma", Verdana, Arial; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } .navigation a:hover { text-decoration: underline; } /* Formatierung für den Navigationstextes außerhalb des Links */ .navtext { font-family: "Tahoma", Verdana, Arial; font-size: 11px; font-weight: bold; color: #FFFFFF; } /* Navigation Home und Impressum */ .navigation2 { margin: 32px 0px 0px 488px; } .navigation2 li { list-style-type: none; display: inline; } .navigation2 a { font-family: "Tahoma", Verdana, Arial, sans-serif; font-size: 11px; font-weight: bold; color: #FED8A3; text-decoration: none; } .navigation2 a:hover { text-decoration: underline; } /* Formatierung für den Navigationstextes außerhalb des Links */ .navtext2 { font-family: "Tahoma", Verdana, Arial; font-size: 11px; font-weight: bold; color: #FED8A3; } HTML Code:
<body> <!-- variabler Container --> <div id="distance"></div> <!-- Beginn Hauptbox --> <div id="container"> <!-- Beginn Textfeld --> <div id="textfeld"> <h1>Lorem ipsum dolor sit</h1><br /> <p>Lorem ipsum dolor ...</p><br /> <p>Lorem ipsum dolor ...</p><br /> <p>Lorem ipsum dolor ...</p><br /> <!-- Ende Textfeld --> </div> <div class="clear"></div> <!-- Hauptnavigation --> <ul class="navigation"> <li class="navtext"><a href="index.htm">Vita</a> |</li> <li class="navtext"><a href="index.htm">Galerie</a> |</li> <li class="navtext"><a href="index.htm">Ausstellung</a> |</li> <li class="navtext"><a href="index.htm">Kontakt</a></li> </ul> <!-- Subnavigation --> <ul class="navigation2"> <li class="navtext2"><a href="index.htm">Home</a> |</li> <li class="navtext2"><a href="index.htm">Impressum</a></li> </ul> <!-- Ende Hauptbox --> </div> </body> |
Sponsored Links |
|
|||
Hi,
hast Du schon mal versucht, dem clear-Element eine minimale Höhe zuzuweisen? Code:
.clear { font-size: 1px; line-height: 0em; height: 0; clear: both;} Quaese
__________________
Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Linksbündiges Image clearen ohne clear? | akb | CSS | 1 | 09.04.2007 10:44 |
Floaten, Clearen, Spalten | pixmax | CSS | 11 | 05.10.2006 18:47 |
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig | nick | CSS | 6 | 19.08.2006 03:02 |
Richtig clearen/floaten | oSonnYo | CSS | 2 | 10.06.2006 21:25 |
Bin neu hier und hab Probleme... | Karlo | CSS | 6 | 31.07.2003 20:57 |