nicht angemeldet
Vertikales Menu + Ausrichtung bottom
Hallo,
ich habe ein kleines Problem mit meinem vertikalen Menu bzw. mit dessen Ausrichtung.
Ich habe folgenden Html-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="link_zum_css" />
</head>
<body>
<ul class="horizontalMenu">
<li><a href="http://www.heise.de/">Partner</a></li>
<li>|</li>
<li><a href="http://www.heise.de/">Newsletter</a></li>
<li>|</li>
<li><a href="http://www.heise.de/">Kontakt</a></li>
<li>|</li>
<li><a href="http://www.heise.de/">Impressum</a></li>
<li>|</li>
<li>Suchen</li>
<li><form><input /></form></li>
</ul>
</body>
</html>
und dazu gehörig folgendes CSS
ul.horizontalMenu {
padding : 0px;
margin : 0px;
height : 42px;
overflow : hidden;
text-align : right;
}
ul.horizontalMenu li {
display : inline;
list-style-type : none;
vertical-align : bottom;
}
ul.horizontalMenu li form {
display : inline;
}
Was ich gerne hätte, wäre eine Ausrichtung der li-Elemente nach "rechts unten". Irgendwie stehe ich auf dem Schlauch und kriegs nicht hin.
Ahjo die Höhe des ul-Elements ist leider so vorgegeben und fest, daran kann ich nichts ändern.
Leider hat mir die Suche bisher auch noch nicht viel weitergeholfen, aber wahrscheinlich hab ich nicht richtig gesucht.
Vielleicht kann mich jemand in die richtige Richtung schubsen.
Gruß Ben
-
hi,
<li><a href="http://www.heise.de/">Partner</a></li>
<li>|</li>Was ist das denn?
Ein Trennzeichen ist doch kein eigenständiger Menüpunkt - oder was bitte kann ich darüber aufrufen?
<li>Suchen</li>
<li><form><input /></form></li>Was ist das denn?
Die Funktionsbeschreibung "Suchen" und das Eingabefeld gehören doch wohl zusammen.
Was ich gerne hätte, wäre eine Ausrichtung der li-Elemente nach "rechts unten". Irgendwie stehe ich auf dem Schlauch und kriegs nicht hin.
Wo rechts unten?
Meinst du vielleicht, dass du die _Inhalte_ der LIs rechts unten ausrichten willst?
Für die horizontale Ausrichtung nutze text-align für inline-Elemente bzw. ein margin-left:auto/margin-right:0.
Die vertikale Ausrichtung wird schwieriger, da vertical-align bei Listenelementen natürlich nicht wirken darf.
Da könnte evtl. ein entsprechendes padding-top, oder auch eine entsprechende line-height weiterhelfen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
<li><a href="http://www.heise.de/">Partner</a></li>
<li>|</li>Was ist das denn?
Ein Trennzeichen ist doch kein eigenständiger Menüpunkt - oder was bitte kann ich darüber aufrufen?
Nichts. Ich wollte das Trennzeichen farblich abheben und um das auf die Schnelle zu erreichen habe ich sowas gebastelt. Was würdest du hier eher vorschlagen?
<li>Suchen</li>
<li><form><input /></form></li>Was ist das denn?
Die Funktionsbeschreibung "Suchen" und das Eingabefeld gehören doch wohl zusammen.
Ja, auch das stimmt natürlich. Auch hier hat die Ansicht nicht so gepasst, wie ich das wollte, also habe ich hier sowas zusammengeschustert. Das wollte ich noch ändern.
Was ich gerne hätte, wäre eine Ausrichtung der li-Elemente nach "rechts unten". Irgendwie stehe ich auf dem Schlauch und kriegs nicht hin.
Wo rechts unten?
Meinst du vielleicht, dass du die _Inhalte_ der LIs rechts unten ausrichten willst?
Für die horizontale Ausrichtung nutze text-align für inline-Elemente bzw. ein margin-left:auto/margin-right:0.
Jo, das hatte ich im CSS vergessen. Die Ausrichtung nach Rechts ist kein Problem. Wobei auch da mir eine Tabelle nen Strich durch die Rechnung macht, aber das ist nicht das Problem momentan.
Die vertikale Ausrichtung wird schwieriger, da vertical-align bei Listenelementen natürlich nicht wirken darf.
Das ist klar.
Da könnte evtl. ein entsprechendes padding-top, oder auch eine entsprechende line-height weiterhelfen.
Padding-top hilft mir hier denke ich nicht weiter, da die Abstände nach oben unterschiedlich sind durch das Inputfeld. Vielleicht irre ich mich hier aber auch.
Und meine Versuche zu line-height waren bisher auch nicht erfolgreich. Zumindest sehe ich absolut keine Veränderung, egal wo ich eine line-height angebe.
Um das ganze mal zu verdeutlichen ein Bild.
So soll das ganze aussehen. Mit ner Tabelle krieg ich das ganze recht einfach hin. Aber das würde ich gerne vermeiden.
Gruß Ben
-
hi,
So soll das ganze aussehen.
Listenelemente display:inline, UL text-align:right ...?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Begrüßung ('Hallo'),
das ganze könnte auch so aussehen:
ul{ ... } li{ display:block; float:left; } a{ display:block; float:left; width:xxem; ... } .clear{ clear:both; }<ul> <li><a href="">Link 1</a> ... <li><a href="">Link n+</a><div class="clear"></div></li> </ul>Hoffe es ist so alles korrekt. Kannst es ja einmal ausprobieren.
Wahsaga schaut bestimmt auch einmal drüber, und sagt mir sicher was man da besser machen könnte oder?AufWiedersehen ('Vielen Dank'),
LG
--
kEv*
------
kevin
geboren am: o8.o7.2oo6
Gewicht: 3660g
---
SELFCODE:
---
sh:( fo:| ch:? rl:° br:^ ie:{ mo:| va:) de:] zu:) ss:| ls:[ js:|
---
-
Hi,
erstmal danke für deinen Vorschlag.
Aber er hat ein paar Haken, die ich so nicht haben will. Erstensmal brauch ich ein float: right, dann müßte ich aber die Navigation genau umgekehrt aufschreiben, dazu dann noch die fixe Breite, die ich auch nicht haben will. Ausserdem lößt das auch nicht das Problem, dass ich die vertikale Ausrichtung damit nicht hinbekomme.
Gruß Ben
-
-
Listenelemente display:inline, UL text-align:right ...?
So habe ich das schon gemacht, das ist mir auch klar, dann sieht das ganze aber wie folgt aus:
Wie gesagt, rechts ausrichten habe ich kein Problem, aber die vertikale Ausrichtung insbesondere vom Inputfeld kriege ich nicht hin.
Noch dazu soll das ganze ja am unteren Rand ausgerichtet sein, sprich etwa 8px vom unteren Rand entfernt. Sprich so ne Art padding: auto 10px 8px 0px, was aber so nicht geht.
Gruß Ben
-
hi,
So habe ich das schon gemacht, das ist mir auch klar, dann sieht das ganze aber wie folgt aus:
Wie gesagt, rechts ausrichten habe ich kein Problem, aber die vertikale Ausrichtung insbesondere vom Inputfeld kriege ich nicht hin.
Du willst also alle LI-Inhalte vertikal am bottom oder auf der baseline ausrichten?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Du willst also alle LI-Inhalte vertikal am bottom oder auf der baseline ausrichten?
Ja fast. Eigentlich will ich, dass die LI-Inhalte mit text-bottom ausgerichtet werden und dazu die LIs selber eine bottom-Ausrichtung bekommen bezüglich des Eltern-ULs.
Hmm, ist des eigentlich noch Deutsch, was ich da fabriziert habe? ...
Danke für deine Hilfe und Gruß
Ben
-
-
-
-
-