Seite 1 von 3
Problem mit Div-Layout
Verfasst: 11.02.2007 19:04
von Lohgock-Trainer
Hi,
Ich habe ein neues Problem mit einem Div-Layout. Ich möchte nun eine linke Spalte die immer 160px breit sein soll. Die andere soll den Restpaltz einnehmen. Mit einem Tabellen-Layout ist dies kein Problem allerdings kmom ich mit dem Div-Laout nicht klar.
Verfasst: 11.02.2007 19:46
von S2B
Versuch mal sowas:
Code: Alles auswählen
<div style="float: left; width: 160px">
links
</div>
<div style="margin-left: 160px">
rechts
</div>
Verfasst: 11.02.2007 19:47
von fanrpg
Code: Alles auswählen
<div style="width:100%;">
<div style="width:160px; float:left; margin-right:2px;">
Linke Spalte
</div>
<div style="width:auto; float:right;">
Rechte Spalte
</div>
</div>
Das sollte an sich funktionieren.
Verfasst: 11.02.2007 20:17
von Lohgock-Trainer
Danke, S2B's Variante klappt fabelhaft. Ist dies auch mit einem 3 Spalten LAyout möglich ni dem die 3. Spalte ebenfalls 160px haben soll?
Verfasst: 11.02.2007 20:45
von Pyramide
Verfasst: 15.02.2007 21:44
von Lohgock-Trainer
Design läuft ganz gut, nur im IE gibt es ein Problem.
Code: Alles auswählen
<div id="topbar">Topbar</div>
<div id="nav-l">
<img src="001.png" />
<div class="navlink"><a href="./news.php">Link 1</a></div>
<div class="navlink">Link 2</div>
<img src="002.png" />
</div>
<div id="nav-r">
<img src="002.png" />
<div class="navlink">Picture of Me</div>
</div>
<div id="main">
<p>Text auf der Inhaltseite</p>
<p>Natürlich kommt hier noch mehr ;)</p>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="footer">Copyright</div>
Code: Alles auswählen
#nav-l {
float: left;
width: 160px;
border: 1px solid #000000;
background: #006699;
color: #FFFFFF;
}
#nav-r {
float: right;
width: 160px;
border: 1px solid #000000;
background: #006699;
color: #FFFFFF;
}
#main {
margin-left: 170px;
margin-right: 170px;
border: 1px solid #000000;
padding: 2px;
background: #CCCCCC;
}
#footer {
width: auto;
border: 1px solid #000000;
background: #006699;
color: #FFFFFF;
margin: 5px;
}
.navlink {
font-size: 11px;
}
.navlink a:link, .navlink a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
}
.navlink a:hover {
background: #0099CC;
text-decoration: none;
}
.navlink a:active {
background: #0099CC;
text-decoration: none;
}
Doch nun kann man im IE nicht mehr die Links in der nav-l oder nav-r. Woran liegt das und was kann man tun?
Hier mal ein Link
Verfasst: 16.02.2007 18:57
von S2B
Ich kann jetzt im Moment nur mutmaßen, aber versuch doch mal, die rechte Box über die linke Box zu schreiben.
Verfasst: 16.02.2007 21:16
von Lohgock-Trainer
Wie genau?
Verfasst: 16.02.2007 21:50
von S2B
Code: Alles auswählen
<div class="nav_r">
[...]
</div>
<div class="nav_l">
[...]
</div>
Verfasst: 16.02.2007 21:57
von Lohgock-Trainer
bringt nichts, warum sollte es auch?