tag:forum.selfhtml.org,2005:/selfNavigationsleiste und float:left – SELFHTML-Forum2005-12-30T16:50:34Zhttps://forum.selfhtml.org/self/2005/dec/30/navigationsleiste-und-float-left/911518#m911518opi2005-12-30T14:40:39Z2005-12-30T14:40:39ZNavigationsleiste und float:left<p>Hallo,</p>
<p>kann mir wer weiterhelfen? Ich habe ein Div-Element als linke<br>
Navigationsleiste.</p>
<pre><code class="block language-html">
#navigation {
width:12em;
margin:1em 1em 0 1em;
text-align:left;
float:left;
}
#navigation ul {
list-style:none;
margin:0; padding:0;
}
#navigation li {
margin:0.4em;
}
#navigation li a {
text-decoration:none;
color:#3A3C69;
}
#navigation li a:hover {
text-decoration:underline;
}
#navigation span {
font-size:0.8em;
font-weight:bold;
}
</code></pre>
<p>Nun fließt der Text auch so weit um das Element herum, aber wie kann<br>
ich es erreichen, dass der Text und alle weiteren Elemente bis zum<br>
Ende der Seite auf gleicher Höhe bleiben?</p>
<p>So ist es im Moment:</p>
<p>----- Text<br>
| | Text<br>
| | Text<br>
----- Text<br>
Text<br>
Text</p>
<p>Aber ich hätte es gerne so:</p>
<p>----- Text<br>
| | Text<br>
| | Text<br>
----- Text<br>
Text<br>
Text</p>
<p>Kann ich das Div-Element für die Navigationsleiste so definieren,<br>
dass es immer bis zum Ende der Seite reicht, auch wenn man Scrollen<br>
muss? Oder muss ich ein weiteres Div-Element (right:0;) für den<br>
gesamten weiteren Inhalt der Seite erstellen? Also so ...</p>
<p>+-------------+<br>
| DIV HEADER |<br>
+-------------+<br>
+---++--------+<br>
| D || |<br>
| I || |<br>
| V || DIV |<br>
| || |<br>
| N || INHALT |<br>
| A || |<br>
| V || |<br>
+---+| |<br>
| | |<br>
| | |<br>
+----+--------+</p>
<p>Und wäre eine Tabelle deprecated - wie man so schön sagt?</p>
<p>Mir ist noch aufgefallen, dass sich andere Elemente, wie zum Beispiel<br>
Div's, sich nicht ganz richtig verhalten. Wenn ich ein Div-Element<br>
und eine Tabelle mit einer Weitenangabe von 60% definiere, dann<br>
befinden sie sich horizontal nicht auf gleicher Höhe.</p>
<p>----- ------------<br>
| | | DIV 60% |<br>
| | ------------<br>
| |<br>
| | -----------------<br>
| | | TABLE 60% |<br>
| | -----------------<br>
-----</p>
<p>Ist das ein Bug (IE 5.5)? Mit Opera und Firefox klappt das und die<br>
Elemente werden horizontal auf gleicher Höhe angezeigt, also so ...</p>
<p>----- -----------------<br>
| | | DIV 60% |<br>
| | -----------------<br>
| |<br>
| | -----------------<br>
| | | TABLE 60% |<br>
| | -----------------<br>
-----</p>
<p>Greez,<br>
opi</p>
<div class="signature">-- <br>
Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|<br>
</div>
https://forum.selfhtml.org/self/2005/dec/30/navigationsleiste-und-float-left/911519#m911519Zeromancerzeromancer007-selfhtml@yahoo.de2005-12-30T15:10:22Z2005-12-30T15:10:22ZNavigationsleiste und float:left<p>Hallo opi,</p>
<blockquote>
<p>kann mir wer weiterhelfen? Ich habe ein Div-Element als linke<br>
Navigationsleiste.</p>
</blockquote>
<blockquote>
<pre><code class="block language-html"></code></pre>
</blockquote>
<p>Brauchst du nicht!</p>
<blockquote>
<p>#navigation {</p>
</blockquote>
<p>Besser:<br>
ul#navigation {</p>
<blockquote>
<p>list-style:none;</p>
</blockquote>
<p>padding:0;<br>
width:12em;<br>
margin:1em 1em 0 1em;<br>
text-align:left;<br>
float:left;</p>
<blockquote>
<p>}</p>
</blockquote>
<p>div#inhalt {<br>
margin-left:breite_deiner_navigationsliste_oder_ein_bisschen_mehr;</p>
<p>}</p>
<blockquote></blockquote>
<pre><code class="block">
<ul id="navigation">
....
</ul>
<div id="inhalt">
.....
</div>
Mit freundlichen Grüßen,
André
</code></pre>
https://forum.selfhtml.org/self/2005/dec/30/navigationsleiste-und-float-left/911520#m911520opi2005-12-30T15:14:18Z2005-12-30T15:14:18ZNavigationsleiste und float:left<p>Hallo,</p>
<blockquote>
<p>div#inhalt {<br>
margin-left:breite_deiner_navigationsliste_oder_ein_bisschen_mehr;</p>
</blockquote>
<p>Ok. Sowas dachte ich mir schon.</p>
<p>Gibt es denn auch so etwas wie "height:*", so dass das Element bis<br>
zum Ende des Elternelements reicht?</p>
<p>Greez,<br>
opi</p>
<div class="signature">-- <br>
Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|<br>
</div>
https://forum.selfhtml.org/self/2005/dec/30/navigationsleiste-und-float-left/911521#m911521jeanlucpicard2005-12-30T16:50:34Z2005-12-30T16:50:34ZNavigationsleiste und float:left<blockquote>
<p>Gibt es denn auch so etwas wie "height:*", so dass das Element bis<br>
zum Ende des Elternelements reicht?</p>
</blockquote>
<p>In absolut positionierten Elementen kann man die obere Kante mit "top" und die untere mit "bottom" angeben. Setzt man "bottom:0;", reicht das Elemet genau bis zum Ende.<br>
Funktioniert allerdings nicht im IE (nur mit einem expression()-Workaround) und nicht richtig im Opera.<br>
Ich hatte nämlich dieses Problem: <a href="https://forum.selfhtml.org/?t=120571&m=774325" rel="noopener noreferrer">https://forum.selfhtml.org/?t=120571&m=774325</a></p>