tag:forum.selfhtml.org,2005:/self Navigationsleiste und float:left – SELFHTML-Forum 2005-12-30T16:50:34Z https://forum.selfhtml.org/self/2005/dec/30/navigationsleiste-und-float-left/911518#m911518 opi 2005-12-30T14:40:39Z 2005-12-30T14:40:39Z Navigationsleiste 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#m911519 Zeromancer zeromancer007-selfhtml@yahoo.de 2005-12-30T15:10:22Z 2005-12-30T15:10:22Z Navigationsleiste 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#m911520 opi 2005-12-30T15:14:18Z 2005-12-30T15:14:18Z Navigationsleiste 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#m911521 jeanlucpicard 2005-12-30T16:50:34Z 2005-12-30T16:50:34Z Navigationsleiste 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>