[CSS] Darstellungsproblem bei Navigation

  • Ersteller Ersteller Mr. Snoot
  • Erstellt am Erstellt am
M

Mr. Snoot

Gast
Hio,

ich häng die HTML-Datei einfach mal an. Problem, nach der 6. Zeile kommt eine Lücke, die ich nicht wegbekomme.

Hat da jemand ne Idee?
 

Anhänge

Hallo,

ich habe mir soeben einmal deinen Code angeschaut und mich über den Sinn oder Unsinn der Verwendung von Listen gefragt. ;)
Auf jeden Fall habe ich diesen einmal um einiges vereinfacht und von den Listen befreit, wie auch von der durch diese hervorgerufenen Lücke befreit.
Das entsprechende File findest du im Anhang.

MfG mh1001

/Edit: Der erste Versuch war schon einmal nichts, da der Firefox "padding" und "margin" etwas anders behandelt als der Internet-Explorer. ;) Jetzt sollte es aber gehen.
 

Anhänge

Zuletzt bearbeitet:
mh1001 schrieb:
ich habe mir soeben einmal deinen Code angeschaut und mich über den Sinn oder Unsinn der Verwendung von Listen gefragt. ;)

Hallo Ihr beiden,

@mh1001
Unsinn Listen zu benutzen ist es wohl kaum. Es ist semantisch der einzig sinnvolle Weg ein Menü darzustellen. Wenn Du ein Listen-Menü mal mit abgeschaltetem Stylesheet betrachtest, und das mit der Darstellung von zusammenhangslosen Div-Containern vergleichst, wirst Du sehen warum.

@Gauder
Ändere bei "#navcontainer ul" einfach "margin-left" und "padding-left" in "margin" und "padding".

MfG
Alex
 
GaNyMeD schrieb:
[...] @mh1001
Unsinn Listen zu benutzen ist es wohl kaum. Es ist semantisch der einzig sinnvolle Weg ein Menü darzustellen. Wenn Du ein Listen-Menü mal mit abgeschaltetem Stylesheet betrachtest, und das mit der Darstellung von zusammenhangslosen Div-Containern vergleichst, wirst Du sehen warum. [...]
Stimmt, von dieser Seite habe ich es gar nicht gesehen. Wobei bis auf die Listenpunkte und der eingerückten "subnav"-Punkte auch kein Unterschied zwischen den beiden Varianten liegt, aber auf jeden Fall ein guter Einwand. :daumen:
Die Zahl der Benutzer, welche ohne CSS-Unterstützung durch das Internet surfen, sollte aber auch nicht mehr so hoch sein. ;)
Auf jeden Fall sollte sich aber bei dieser Variante der Code um einiges kompakter fassen lassen und einige browserspezifische Hacks ersparen.

MfG mh1001
 
Zuletzt bearbeitet:
GaNyMeD schrieb:
@Gauder
Ändere bei "#navcontainer ul" einfach "margin-left" und "padding-left" in "margin" und "padding".
Ah ja, wunderbar. Danke.

Das waren wohl noch Reste aus der vorherigen Darstelleung :)

@ mh1001: deine Variante sieht zwar einzeln so aus, wie es aussehen soll, aber irgendwie zerschießt mir dass das komplette Design drumherum :freak: :)

Aber nu gehts ja, merci.
 
So, da bin ich wieder...

Das Menü klappt ja wie gesagt, allerdings stimmt die Darstellung nicht wenn ich rechts daneben noch ne zweite Box hinmache.

Im Firefox hat die rechte Box einen anderen Abstand nach oben, als das Menü.
Bei beiden ist margin-top identisch; und der IE und Opera machen das auch wie gewünscht.

Ich dachte mir schon, dass das evtl. mit den Boxen darüber und darunter zu tun hat, also raus damit. Aber nix, FF zeigts immernoch falsch an.

Dann dacht ich mir, kann's ja fast nur am Menü liegen, dass die rechte Box nicht richtig ausgerichtet wird, also einfach ne leere Box statt Menü reingesetzt. Aber nix, FF zeigts immernoch falsch an.

Dann habe ich alles, was es noch beeinflussen könnte raus. Zum Schluss hatte ich quasi nur noch zwei Boxen im CSS Teil, und #Box1 #Box2 via <div id="Box#"> im Body eingebunden. Aber nix, FF zeigts immernoch falsch an.

Das kann doch wohl nicht wahr sein!?
 

Anhänge

Hallo Gauder,

Firefox rendert nicht falsch, er hält schlichtweg die Spezifikationen des W3C strenger ein.

Als Anhang findest Du einen mehr oder weniger schmutzigen Workaround. Es wäre aber von Vorteil zu wissen was Du überhaupt erreichen möchtest, bzw. wie Du Dir das Endprodukt vorstellst.

Wenn Du weißt, was Du willst, findest Du z.B. unter folgendem Link Anleitungen für mehrspaltige CSS-Layouts. Das sollte Dir erstmal weiterhelfen.

MfG
Alex
 

Anhänge

GaNyMeD schrieb:
Es wäre aber von Vorteil zu wissen was Du überhaupt erreichen möchtest, bzw. wie Du Dir das Endprodukt vorstellst.
Ganz einfach, die Boxen sollen den gleichen Abstand vom oberen Rand haben. Das was noch drumherum ist usw. steht schon (ist aber noch streng geheim ;)) :)

Werde das mal mit dem Workaround testen. Danke!

edit: also im IE stimmt das nun gar nicht mehr; da wird der Inhalt jetzt 20px unter dem Menü angezeigt. Opera und FF machens dafür richtig.
 
Zuletzt bearbeitet:
Zurück
Oben