nicht angemeldet
2-Spalten-Layout
Hallo!
Ich habe ein 2-Spalten-Layout mit CSS erstellt (mit "unechten Spalten" damit die Navigationsleiste sich an das Inhaltsfenster anpasst).
Hier der Code der Seite:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Haupttext-->
<div id="wrapper">
<div id="left"> Navigation<br>
Navigation<br>
Navigation<br>
</div>
<div id="right">
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
</div>
</div> </div>
<!-- Ende Haupttext-->
</body>
</html>
Und das zugehörige Stylesheet:
#wrapper { background: url(green.gif) repeat-y left;}
#left {background-color:#B5D8A9; width:150px; float:left;}
#right {background-color:#B5B899; margin-left: 200px; margin-right:30px; font-family: VERDANA,ARIAL,HELVETICA; text-align: justify;}
#main {position: absolute; width:900px; z-index:1; right: 50%; height: auto; left: 50%; margin-left: -450px;background-color:#FFFFFF;}
Mein Problem ist nun folgendes:
Ab dem 5. "Test" werden alle weiteren Reihen ohne Abstand nach links angezeigt, währenddessen bei dem 1. - 4. Test ein geringer Abstand nach links vorhanden ist. Wie bekomme ich diesen Abstand nun weg? Bzw. wie kann das 5. "Test" wie die vorherigen ausgerichtet werden? Ich hoffe, mein Problem ist verständlich.
Viele Grüße,
Sascha
-
Hallo,
im Firefox werden Text (bzw. Test) in einer Reihe untereinander angezeigt. Im IE 6.0 werden sie angezeigt wie von dir beschrieben.
Ab wo das "Problem" beginnt hängt von der linken Spalte ab. Je weniger Zeilen die hat, desto eher bzw. höher beginnend verrutscht der Text in der rechten Spalte.
Die Ursache ist, das die linke und rechte Spalte im wrapper (bzw. main, der dir wohl verlustig gegangen ist) gegeneinander stoßen, weil der Platz nicht ausreicht. Unterhalb der linken Spalte besteht das Problem nicht mehr und im IE rutscht der Text der rechten Spalte dann etwas weiter nach links.
DIVs sind Blockelemente, die den Platz der gesamten Zeile einnehmen wollen. So ist es ihnen von Geburt bestimmt. Den linken DIV hast du in der Breite beschnitten, den rechten nicht. Deshalb versucht der rechte DIV die gesamte Breite einzunehmen.
Du musst den rechten DIV also auch in der Breite (width) begrenzen, z. B. auf 650px. Genau auf 750px solltest du nicht gehen, dann hat der IE wieder Schwierigkeiten, der nimmt gerne etwas Leerraum. Sonst verrutscht der rechte DIV unterhalb des linken, was sicherlich auch nicht dein Streben ist. Wie breit du den rechten DIV machen kannst must du ausprobieren.
Gruss
MrMurphy
-
Vielen Dank! Mit der Breite für den Inhaltsbereich funktioniert es.
Gruß,
Sascha
-