zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie positioniert man eine Listenbasierte Navigation am unteren Rand eines divs?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.08.2012, 12:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2012
Beiträge: 14
papalapap befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.08.2012, 12:35
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.08.2012, 16:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von papalapap Beitrag anzeigen

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 07.08.2012, 16:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2012
Beiträge: 14
papalapap befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 07.08.2012, 17:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von papalapap Beitrag anzeigen
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.08.2012, 17:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2012
Beiträge: 14
papalapap befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank Gaby, jetzt klappts!
Mit Zitat antworten
Antwort

Stichwörter
navigation, navigationsmenü, positionierung, positionierung text

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Text am unteren Rand eines Divs plazieren RancoR CSS 2 30.08.2011 17:20
Kriege meine 4 Divs nichts richtig positioniert Clubnite CSS 5 06.04.2010 07:01
Navigation auf verschiedene Divs aufgeteilt seelefant Barrierefreiheit 2 10.02.2007 19:45
Vertikale Ausrichtung eines DIVs in einem dynamischen DIV vamac CSS 7 15.08.2005 13:10
inline-liste am unteren ende eines divs ratterobert CSS 4 13.06.2004 17:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:43 Uhr.