zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden richtig clearen - ich bin zu doof

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.01.2007, 10:31
Benutzerbild von Tagträumer
DAU
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2006
Ort: Potsdam
Beiträge: 59
Tagträumer befindet sich auf einem aufstrebenden Ast
Standard 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>&nbsp; |</li>
		<li class="navtext2"><a href="index.htm">Impressum</a></li>
	</ul>
<!-- Ende Hauptbox -->
</div>
</body>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.01.2007, 10:54
Neuer Benutzer
neuer user
 
Registriert seit: 30.11.2006
Beiträge: 9
Quaese befindet sich auf einem aufstrebenden Ast
Standard

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;}
Ciao
Quaese
__________________
Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.01.2007, 10:57
Benutzerbild von Tagträumer
DAU
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2006
Ort: Potsdam
Beiträge: 59
Tagträumer befindet sich auf einem aufstrebenden Ast
Standard

Hey danke, das funktioniert.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:52 Uhr.