Hallo,
ich möchte ein Menü (ungeordnete Liste) mit Seperatoren gestalten. Es soll prinzipiell so aussehen:

Link 1
-----------------
Link 2
-----------------
Link 3
-----------------
Link 4

Die gestrichelten Linien sollen die Seperatoren darstellen, die ich mittels <hr /> realisieren möchte, ALLERDINGS wird die Darstellung im IE dadurch total seltsam: die Höhe der <li> bzw. <a>-Bereiche ist deutlich größer als in allen anderen Browsern!!! Warum ist das so, wie kann ich das verhindern? Gibt es andere sinnvolle (semantische) Lösungen für solche Seperatoren?

<ul>
<li><a href="" title="">Link 1 </a></li>
<li><hr /></li>
<li><a href="" title="">Link 2 </a></li>
<li><hr /></li>
<li><a href="" title="">Link 3 </a></li>
<li><hr /></li>
<li><a href="" title="">Link 4 </a></li>
</ul>


ul { margin: 0; padding:0; list-style-type:none; }
li { margin:0; padding:0; }
li a { display:block; padding:2px; background:#ddd; width:99%; }
li hr { height:1px; border:0; color:#333; background:#333; margin:0; padding:0; }

Warum ist das so, wie kann ich das verhindern? Gibt es andere sinnvolle (semantische) Lösungen für solche Seperatoren?
- IE eben ^^
- verhindern kannst dus per
* html ul#dein_menu a {
height : 1%;
}
viel schöner ist imho ohne hr, einfach nur per border ... (problem tritt auch dort auf).

warum diese krücke mit <hr>?
li
{
padding-bottom: 5px;
border-bottom: 1px dashed #000;
}

gruß
peter

ich glaub der IE würd auf diese zu großen Abstände verzichten, wenn man im Quelltext keine Umbrüche macht - aber wer will das schon, den Quelltext kannst dann ja kaum (eigentlich gar nicht mehr) noch lesen :dontknow:

Das ist das schöne wenn man DOM in PHP nutzt um das html zu erzeugen - such ich nen fehler oder so im Quelltext dann
$dom->formatOutput = true;
stimmt das html und es geht ans Layout:
$dom->formatOutput = false;
;)

an deiner stelle würd ich divs nehmen die ne border-bottom haben

hrs stinken mal extrem in nem menü

Ok, dann werde ich es wohl mit div's machen... nicht schön, aber einfach :)

Danke!

@Kropff: ich will nach dem letzten Menüitem kein border-bottom haben und auch keine .first/.last-Klassen verwenden, sonst wär deine Möglichkeit natürlich die günstigste

Original geschrieben von RanzigeMilch
an deiner stelle würd ich divs nehmen die ne border-bottom haben

hrs stinken mal extrem in nem menü Das sowieso - aber ich dachte dass muss ich nicht nochmal erwähnen :D

EDIT:
jetzt seh ichs erst - warum nochmal divs da drin? - reicht doch völlig im li oder a-Tag je nachdem :dontknow:

Original geschrieben von miguel_rkc
@Kropff: ich will nach dem letzten Menüitem kein border-bottom haben und auch keine .first/.last-Klassen verwenden, sonst wär deine Möglichkeit natürlich die günstigste Was spricht da dagegen? :confused:

Stell dir vor, du hast später mal ne Designänderung und willst keine Trennlinien mehr haben - dann kannst sämtlichen Quellcode durchgehen und die hr's rausschmeissen (oder die Divs deren Sinn ich ned versteh) - so müsstest nur aus deinem CSS die Border-Eigenschaft abändern - fertig.

Original geschrieben von Quetschi
Was spricht da dagegen? :confused:

Stell dir vor, du hast später mal ne Designänderung und willst keine Trennlinien mehr haben - dann kannst sämtlichen Quellcode durchgehen und die hr's rausschmeissen (oder die Divs deren Sinn ich ned versteh) - so müsstest nur aus deinem CSS die Border-Eigenschaft abändern - fertig.

Damit hast du natürlich auch wieder recht... Kommando zurück und ab in den Feierabend :) Danke nochmal.

Alles klar - kostet ein Feierabendbier :D

:beer:

also mit divs meinte ich erst gar keine liste zu benutzen:D
da kann man denn so schön per css mi background bei hover usw arbeiten
also in verbindung mit css eigentlich der bequemste weg und es schaut gut aus (wenn man des style-sheet net komplett aus der tonne geholt hat)

Original geschrieben von RanzigeMilch
also mit divs meinte ich erst gar keine liste zu benutzen
Ist ja Unfug.
Eine Navigation ist eine Auflistung von Links.

hmpf nur weils ne auflistung ist muss mans net als liste dastellen...
worauf aber glaube ich alle hinauswollen ist, daß er n ordentliches stylesheet anlegen soll:D

Original geschrieben von RanzigeMilch
hmpf nur weils ne auflistung ist muss mans net als liste dastellen...
Kommt drauf an, ob man HTML strukturell sinnvoll nutzen will - oder nur irgendwelchen Quark erstellen will, der mit HTML syntaktische Ähnlichkeit besitzt, semantisch aber Unfug ist.
worauf aber glaube ich alle hinauswollen ist, daß er n ordentliches stylesheet anlegen soll:D
Worauf ich hinaus will ist, dass CSS auf semantisch sinnvollem HTML aufsetzt. Ohne das kannst du es gleich in die Tonne kloppen.

...semantisch ist eine horizontale Abgrenzung mittels <hr />, so wie ich es ursprünglich vor hatte, wohl das sinnvollste. Funktioniert nur leider wegen dem IE nicht :mad:

das ist mir schon klar
aber nur weil man ein menü nicht mit listen dastellt ist das noch lange nicht semantisch unsinnvoller HTML-Code

@ersteller: ich denke nicht das bei einem kleinen schmalen menü ne abgrenzung mit hrs semantisch sinnvoll ist....

Original geschrieben von RanzigeMilch
aber nur weil man ein menü nicht mit listen dastellt ist das noch lange nicht semantisch unsinnvoller HTML-Code
Jeder HTML-Code, bei dem nicht die Elemente gewählt werden, die die Struktur der jeweiligen Inhalte bestmöglich wiedergeben, rangiert zwischen suboptimal bis sinnfrei.

Und "divs für ein Menü" tendieren deutlich zu letzterem.

tja das sehe ich nunmal ganz anders

Original geschrieben von RanzigeMilch
tja das sehe ich nunmal ganz anders Mit welcher Begründung :confused:

Eine Navigation stellt man nunmal am vernünftigsten in einer Liste dar - guck dir mal eine Seite an wo die Navi mit divs aufgebaut ist und ohne auch nur ein einziges Element des Quellcodes mit CSS zu formatieren und schau dir dann die gleiche Seite mal an, wo die Navi mit ner Liste gemacht ist und du wirst (solltest) verstehen was semantisch richtig ist.

und hr's zur Abgrenzung der Links untereinander zu nutzen hat mit Semantik ebenfalls nix tun - hier wird einfach nur ein html-Element vollkommen zweckentfremdet.

man ist gestalterisch freier als bei einer liste
ich verstehe das ja schon das eine liste auch als liste geschrieben werden sollte.
aber ich hatte jetzt schon öfter den fall, daß auf grund der gestaltung divs vorteilhafter waren.

und wie die seite aussieht wenn man css deaktiviert interessiert mich ehrlich gesagt n furz

Original geschrieben von RanzigeMilch
man ist gestalterisch freier als bei einer liste
Ist eigentlich Unfug.
aber ich hatte jetzt schon öfter den fall, daß auf grund der gestaltung divs vorteilhafter waren.
Wollen wir sagen, du hattest schon öfters den Fall, dass du eine Liste nicht so formatiert bekommen hast, wie du es haben wolltest ...?
und wie die seite aussieht wenn man css deaktiviert interessiert mich ehrlich gesagt n furz
Schön, deine Sache.

Dann überlege dir aber bitte, ob du dich nicht einfach heraushältst, wenn sich hier Leute darüber unterhalten wollen, wie man HTML sinnvoll einsetzt.

ähm ja schon klar
begründe doch mal wie es unfug ist..:)

Wurde doch schon erwähnt :)

Es ist unfug einen bestimmten Inhalt als etwas anderes auszuzeichnen als er eigentlich ist.

Oder meinst weil wahsaga gesagt hat das die Behauptung Unfug ist dass man mit den divs freier in der Gestaltung sei? - was kriegst den mit divs hin, was nicht mit ner Liste möglich wäre?

Original geschrieben von Quetschi
und hr's zur Abgrenzung der Links untereinander zu nutzen hat mit Semantik ebenfalls nix tun - hier wird einfach nur ein html-Element vollkommen zweckentfremdet.

...dies wiederum sehe ich nicht so. Wenn ich eine horizontale Linie als Abgrenzung haben will, dann _kann_ nichts semantisch näher dran sein als <hr />... wie auch immer, meine Lösung ist nun folg.:


<ul>
<li><a href="" title="">Link 1</a></li>
<li><hr /></li>
<li><a href="" title="">Link 2</a></li>
<li><hr /></li>
<li><a href="" title="">Link 3</a></li>
<li><hr /></li>
<li><a href="" title="">Link 4</a></li>
</ul>


ul {list-style-type:none; margin:0; padding:0;}
li {margin: 0;line-height: 0;}
li a {display:block; min-height:30px; line-height:30px; vertical-align:middle;}
* html li a { height: auto !important; height: 20px; line-height: 20px;}
hr {margin 0; padding:0;}

ähm ja schon klar
begründe doch mal wie es unfug ist..man, das ist nicht nur eigentlich unfug, das ist einfach nur müll. jeder, der sich in dem bereich, in den das hier reinläuft, (semi)professionell bewegt, verwendet dafür eine liste - weil es nun mal eine auflistung von links ist. gestalterisch sind dir dabei keine grenzen gesetzt - im gegenteil. ich behaupte mal, daß sich eine liste noch einfacher gestalten läßt, als irgendein div-brei. außerdem: form follows function!
meine Lösung ist nun folg.:das ist suboptimal. wenn ich die css deaktiviere, will ich keinerlei gestalterische mittel mehr sehen. semantisch ists natürlich genauso sinnfrei.

ähem,
kleine Frage zu dem Thema:
finde erstmal das die Fraktion die sagt: eine Link Menu stellt eigentlich eine Liste von Links dar und sollte daher mit einer Liste dargestellt werden :D natürlich recht hat....

Aber wenn ich einen horizontale Navigation haben will muß ich die li's ja display:inline setzen. Damit verliere ich aber leider die Möglichkeit den Menupunkten eine definierte Höhe & Breite zu geben.

Wie löst ihr das denn?

mh ich will dir jetzt einfach mal unterstellen das du zuwenige (semi)professionelle kennst um von allen sprechen zu können.
ich kenne nämlich auch einige die das nicht machen.

zu dem anderen
ein div ist einfach ein kasten der frei gestaltet werden kann.
eine liste nicht die benötigt eine Aufzählung bzw eine geordnete struktur.
allein deshalb würde ich dochmal sagen sind bei einem div weniger grenzen im gestaltungsbereich.

belehrt mich eines besseren aber die argumente von oben lass ich net gelten:D
zumindest stimme ich euch zu das im normalfall (bitte keine diskussion obs nen normalfall gibt) eine liste die einfachere und vermutlich auch bessere lösung ist

aber ich denke da wurde hier jetzt auch genug diskutiert, der threadersteller hat genug sinnvolle vorschläge bekommen um sein problem zu beheben. wenn er sich jetzt doch für etwas sinnfreies entscheidet (wie das definiert ist überlass ich jedem selbst) ist das sein bier.

(semi)professionelle

Die Amateure... (http://www.spiegel.de)

Wer verbricht eigentlich so was (und wird dafür auch noch bezahlt)

Original geschrieben von RanzigeMilch
mh ich will dir jetzt einfach mal unterstellen das du zuwenige (semi)professionelle kennst um von allen sprechen zu können.
ich kenne nämlich auch einige die das nicht machen.
Dann liegt bei denen die Betonung vermutlich viel mehr auf dem "semi" ...

zu dem anderen
ein div ist einfach ein kasten der frei gestaltet werden kann.
eine liste nicht die benötigt eine Aufzählung bzw eine geordnete struktur.
Schon wieder gibst du Quark von dir.

Eine Liste "benötigt" keine Aufzählung, sondern sie wird per Default mit einer solchen (Nummerierung, Bullets, ...) dargestellt.
Wenn du das nicht willst - dann sagst du das dem Browser einfach per CSS (http://de.selfhtml.org/css/eigenschaften/listen.htm), und weg sind sie.

Und ja, margins/paddings haben UL/OL und LI per default auch noch (und je nach Browser in unterschiedlichen Ausprägungen) - willst du nicht, dann mach sie weg ...
allein deshalb würde ich dochmal sagen sind bei einem div weniger grenzen im gestaltungsbereich.
Ist und bleibt Unfug (sehe das jetzt bitte mal ein ...)



Original geschrieben von mcmurphy
Aber wenn ich einen horizontale Navigation haben will muß ich die li's ja display:inline setzen. Damit verliere ich aber leider die Möglichkeit den Menupunkten eine definierte Höhe & Breite zu geben.
Entweder die LIs floaten lassen, oder display:inline-block (letzteres wird aber bisher erst vom Opera zufriedenstellend unterstützt).

wahrscheinlich eine praktikantin, die weiss, wie man im dw templates zusammenklickt.

gottogott (http://validator.w3.org/check?uri=www.spiegel.de)

gruß
peter

Entweder die LIs floaten lassen
THX@wahsaga

allein deshalb würde ich dochmal sagen sind bei einem div weniger grenzen im gestaltungsbereich.
du mußt nur weniger ie-hacks einsetzen, weil der bei css-formatierten listen definitiv rumzickt. aber auch das läßt sich regeln.

gruß
peter

@RanzigeMilch

Lassen wir deine Einstellung, dass es dir wurscht ist wie eine html-seite unformatiert aussieht wurscht ist nochmal kurz weg... :)

Nun stell dir eine Navi-Struktur vor, die zu den verschiedenen Punkten der Navigation auf oberster Ebene weitere Unterpunkte enthält.

Setze solch eine Navigation einmal mittels einer unsortierten Liste um und einmal mit Div(s). Die Struktur der Navi wird bei der Lösung mit der unsortierten Liste auch dann noch klar erkennbar sein (auch für nen SuMa-Bot) - bei der Div-Lösung wohl kaum noch - damit sollte klar wann man von sinnvoll eingesetztem html sprechen kann und wann nicht.

(semi)professionell kann sich IMHO wer nennen, der die gegebenen Möglichkeiten sinnvoll einsetzt - manche meinen vielleicht, dass man "professionelle" an exorbitant hohen Preisen oder am dicksten Mercedes oder sonstwas erkennt - dabei ist es eigentlich viel einfacher.


EDIT:
zu den hr's als trennlinien in ner Navi:

Auszug aus Selfhtml (http://de.selfhtml.org/html/text/trennlinien.htm)
Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.Eine Navi stellt IMHO sehr wohl einen zusammengehörigen Textabschnitt dar (auch wenn man grafisch Abgrenzungen haben will) - folglich haben hr's da drin nix verloren.

hab das letzte mal um 1999 mit hrs gearbeitet, aber hat der ie da nicht fürchterliche probleme bei formatierung?

@RanzigeMilch
da würdest du dir doch eigentlich widersprechen, da die grenzen der gestaltung deutlich enger gezogen sind.

gruß
peter

@wahsaga: mh ok ich bin von einem falschen standpunkt ausgegangen.
möchte aber dann auch erklärend betonen (und jedem dens net interessiert mitteilen) das in meinen fällen eine listen formatierung mehr arbeit gemacht hätte als divs zu formatieren (für ein menü)

aber ja nachdem ich drüber nachgedacht habe sind dank css wohl bei beiden ähnlich wenig grenzen gesetzt.


@quetschi: ich verstehe was du sagen möchtest mag deine begründung aber net:)

und dabei lasse ich mich jetzt nicht beirren es gibt genug professionelle die es nicht so bzw oft anders machen (mist hier gibts net den auktions-smily)

@kropff entweder hat deine aussage gerade keinen sinn oder ich will sie gerade nicht verstehn:confused:

ob du ne Begründung magst oder ned - du konntest bis jetzt weder argumentativ noch anhand von nachvollziehbaren Beispielen vom Gegenteil überzeugen :)

2 Leute denen man in Sachen html/css getrost alles glauben kann:
- Eric Meyer
- wahsaga (lies dich mal durch dieses Forum - es scheint als kenne er jeden CSS-Bug den nur irgendein Browser haben kann)

Beide verwenden unsortierte Listen für Navi's und ich glaube die haben ihre Gründe dafür ;)

2 sind mir zu wenig:p

immer diese grundsatzdiskussionen :kotz:

wer tabellen verwenden will, solls machen, mir ists zu blöd. wer sein menu in divs klatschen will - von mir aus.

ich will, daß maschinen die logische struktur meiner seiten möglichst gut verstehen, darum verwende ich für listen listen, und keine bedeutungslosen container.

probiers mal aus - es ist (strukturell) viel einfacher als verschachtelte divs und auch viel einfacher und schöner - und auf ästhetik kommts ja wohl im code auch an ;) - als du denkst