Listenausrichtung

[PhoenixFG]

Hi!

Ich hab in einem HTML-Dokument u.a. am linken Rand mit Hilfe von <div> eine Ebene deklariert. In dieser Ebene soll mal das Navigationsmenü liegen. Dieses wird mittels <lu> und <li> und dem Attribut "block" dargestellt. Mein Problem ist nun, dass sich die Liste partout nicht mittig in der Ebene ausrichten lässt. Sie liegt immer leicht rechts von der Mitte. Auch wenn ich diese Liste linksbündig ausrichten will, liegt sie nicht direkt am Rand sondern ca. 1cm davon weg (1280er Auslösung). Ich hab aber nirgends einen Rand definiert bzw. bin ich mir nicht dessen bewusst. Wie bekomm ich das Teil jetzt in die Mitte?

Hier ein Auszug aus dem Stylesheet:

.nav {
border: 1px dashed #201465;
position: relative;
width: 19%;
height: 65%;
top: 30%;
overflow: auto;
font-family: "JP Hand", Verdana, Arial, sans-serif;
font-style: italic;
color: #6600CC;
}
ul {
font-family: "JP Hand", Verdana, Arial, Helvetica, sans-serif;
font-size: 150%;
color: #380381;
margin-top: 1%;
}
li {
font-family: "JP Hand", Verdana, Arial, Helvetica, sans-serif;
font-size: 150%;
color: #380381;
display: block;
text-align: center;
}


MfG

[Nase]

Hi,

also, zu erst hab ich dein Problem garnicht bemerkt, da dein Container sowohl vertikale als auch horizontale Scrollbalken hatte. Deshalb solltest du auf Prozentangaben verzichten, gerade beim Menu.

Wenn du einfach nur margin: 0px; in der ul-Klasse ergänzt, sollte es gehen.

[PhoenixFG]

Das mit den Scrollbalken stimmt, wenn das Fenster klein genug ist. Allerdings habe ich Angaben so bemessen, dass bei einem maximierten Fenster unter 1024x768 noch keine Balken zu sehen sind. Bei höheren Auflösungen skaliert das Menü dann entsprechend. Ohne Prozentangaben dürfte das nicht gehen.

Das hinzufügen von "margin: 0px;" bringt nicht viel. Es wird eigentlich nur meine Abgabe "margin-top: 1%;" außer Kraft gesetzt.

Ich hab mal noch probiert das "text-align: center;" in der li-Klasse durch "text-align: right" zu ersetzen. Und siehe da, die komplette Liste klebt am rechten Rand des Containers.

Dieser ungewollte Rand existiert also nur an der linken Seite.

MfG

[Nase]

Ich glaube ich verstehe dich falsch, aber das hier sieht doch mittig aus:

[PhoenixFG]

Hab mal paar Screenshots gemacht:

Das Menü in Originalgröße:

http://www.PhoenixFG.de/test01.gif

Und ein Gerüst der Seite verkleinert und etwas eingefärbt:

http://www.PhoenixFG.de/test02.jpg

Die Überschrift im Menü wurde mittels <p> eingebunden. Bei der funktioniert komischerweise das Attribut text-align: center;

Ich habe sowohl <ul> als auch <li> mal noch mit "List-style-image: none;" versehen, weil ich irgendwie das Numerierungssymbol im Verdacht habe. Ich habe es zwar ausgeblendet, aber offenbar ist es noch vorhanden.

Ich möchte die Liste gern unterschiedlich verwenden können. Einmal als "block" und einmal als "inline". Gibt es da eine Alternative zu <ul> und <li>.

MfG

[PhoenixFG]

So, hab mal noch paar Webseiten studiert und bin letztendlich auf die Lösung gekommen.

Klasse ul muss noch folgendes Attribut hinzugefügt werden:

margin-left: 0;
padding-left: 0;

und schon klappt es. Erst dann wird das Numerierungssymbol komplett ignoriert.

MfG

[Endorphine]

http://www.w3.org/TR/REC-CSS2/generate.html#lists

Hätte da nicht auch ein simples list-style: none; zum Erfolg geführt?
A value of 'none' for the 'list-style' property sets both 'list-style-type' and 'list-style-image' to 'none':

UL { list-style: none }

The result is that no list-item marker is displayed.

Edit: Das dem Browser mit auf 0 gesetztem Rand und Wattierung einzuprügeln halte ich nicht für eine gute Idee. Teste mal, ob list-style: none; zum gleichen Ergebnis führt. Das Problem könnte durch die custom-Schriftart entstehen, die vielleicht gar keinen bullet vorsieht. Eine temporäre Umstellung auf sans-serif oder eine andere Schriftart bringt möglicherweise Klarheit, wo das Problem liegt. :)

[PhoenixFG]

Hi!

Also mit

list-style: none;

hatte ich schon vorher probiert. Habs auch jetzt normal getestet, bringt nicht den gewünschten Effekt.

Mit der ersten Fallback-Schriftart Verdana (müsste bei jedem Win dabei sein), klappt das auch nicht.

Meine Infos hab ich von dieser Seite (http://www.subotnik.net/style/list-box-test.html) .

MfG