XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Wie positioniert man eine Listenbasierte Navigation am unteren Rand eines divs? (http://xhtmlforum.de/showthread.php?t=67919)

papalapap 07.08.2012 13:15

Wie positioniert man eine Listenbasierte Navigation am unteren Rand eines divs?
 
Ich hab folgendes HTML für die Navigation:

HTML-Code:

<nav><ul id="nav_1">
        <li><a href="Tutorials">Tutorials</a></li>
        <li><a href="News">News</a></li>
</nav></ul>

und folgendes CSS:

Code:

#nav_1 {       
        margin-left: 0.9%;
}

#nav_1 li {
        list-style: none;
        float: left;
        margin-left: 0.1%;
}

#nav_1 a {
        background-color: white;
        color: #000032;
        display: block;
        font-size: 40px;
        text-decoration: none;
}

Die navigation befindet sich in einem 100 pixel hohem div.

Ich würde sie gerne am unterem Rand davon haben.

Wie mach ich das?

andir 07.08.2012 13:35

Im Zweifel das Element ul positionieren:

position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

oder ein margin-top mitgeben oder oder :)

gaby 07.08.2012 17:35

Zitat:

Zitat von papalapap (Beitrag 519342)

Die navigation befindet sich in einem 100 pixel hohem div.

Ich würde sie gerne am unterem Rand davon haben.

Wie mach ich das?


Hallo,

Das DIV relativ positionieren, und die Navi absolut mit der `bottom`-Eigenschaft.

BTW
Hast du auch berücksichtigt, daß der IE-8 und noch einige andere ältere Browser, dein "<nav>" noch nicht implementiert haben?

papalapap 07.08.2012 17:44

Wenn ich das Element ul positioniere werden die beiden Links übereinander angezeigt.

Wenn ich ein margin-top einstelle wird der ganze div (in dem sich die Navigation befindet) 60px nach unten geschoben.

<nav> muss gar nicht implementiert sein, da hab ich nix drauf angewendet, ich habe alles direkt auf die ul angewendet. Das ist nur für suchmaschinen. Aber das dass tag und sein end-tag beide vor dem tag bzw. dem end-tag der ul standen ist mir mittlerweile aufgefallen und ich habs korrigiert ;)

gaby 07.08.2012 18:08

Zitat:

Zitat von papalapap (Beitrag 519351)
Wenn ich das Element ul positioniere werden die beiden Links übereinander angezeigt.

Dann gib der Ul eine Breite, sinnvollerweise in 'em', anstatt in 'px', damit auch bei größerer Schrift noch alle Links in die Box passen.

Zu Testzwecken ist auch ein Rahmen um die Elemente nützlich, damit du deren Ausmaß und Position erkennen kannst.

papalapap 07.08.2012 18:34

Vielen Dank Gaby, jetzt klappts!


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:17 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023