horizontale menüleiste zentrieren ...

[hokage555]

ich stehe grad mal wieder vor einem anscheinend unlösbaren problem ^^

dameine links blockelemente sind, die in linie angezeigt werden, verhalten sie sich auch wie blockelemente. d.h. sie nehmen feste breiten und höhenangaben an.

so auch das ul, welches auf grund der gewüsnchten viewportanpassung keine breite erhält und somit automatisch 100% der möglichen breite einnimmt. daher kann man es mit margin:0 auto; auch nicht zentrieren...

eine lösung wäre aus allem inlineelemente zu amchen, die man dann mit text-align:center; zentrieren könnte. aber dann würden meine button ja nur noch als textlinks angezeigt, da sie ja keine breiten und höhenangaben mehr annehmen ...

ich denke meine zwickmühle ist somit klar xD
nun bin ich nicht gerade der css operprofi
daher hoffe ich einfach mal, dass es dennoch für mein problem irgendeine lösung gibt und mir einer von euch helfen kann

grüße hokage

 

[hokage555]

lol

ich hab eine lösung gefunden xD
anscheinend kombiniert das wunderelement display:inline-block; sowohl inline eigenschaften, als auch block eigenschaften xD

fakt ist, dass ich dem umgebenden ul, was eine breite von 100% hat einfach nur ein text-align:center; gegeben habe und jetzt sind alle button zentriert.

bei normalen blockelementen hätte diese methode ja nicht funktioniert xD

danke trotzdem an diejenigen, die sich schon gedanken gemacht haben ;-)

grüße

 

[Efchen]

Ich bin mir ziemlich sicher, dass inline-block zumindest im IE6 nicht funktionieren wird...oder?

 

[prm]

Damit sollte es für die meisten Browser klappen:
Horizontale Zentrierung einer gefloateten Listen-Navigation

 

[hokage555]

Ich bin mir ziemlich sicher, dass inline-block zumindest im IE6 nicht funktionieren wird...oder?

ich denke da könntest du recht haben, aber warum ich kein float nehmen kann, möchte habe ich in dem anderen thread ja schon erklärt. und außerdem ist es nur eine frage der zeit bis dieses element sich etabliert.
das ist leider ja immer die schwierigkeit. eine morderne website abwertskompatibel zu machen.

womöglich lasse ich die vertikale navi aber auch ganz weg, so dass ich statt display:inline-block; meine horizontale navi einfach floate und dann evtl. die methode von prm einsätze.

bis dato bin ich so jedoch schonmal zu frieden ;-)

danke nochmal an ech beide ;)

grüße hokage

*edit: efchen, oder würdest du mir generell von der nutzung von display:inline-block abraten, da zu viele menschen noch <=IE6 haben und somit das menu nicht richtig angezeigt wird? natürlich wäre es für diese dann mit float benutzerfreundlicher, aber im gegenzug kann ich die vertikale menuleiste nicht realisieren...
was würdest du machen?

 

[prm]

Ich glaube, jetzt habe ich gerade eine Lösung für dein Layout gefunden:

Versuch's mal damit:

#wrapper{
width:90%;
margin:0 auto;
position: relative;
}

#navi-vertikal{
width:9em;
list-style-type:none;
padding:5px;
border:1px solid #0066CC;
background-color:#fff;
}

#seite{
max-width:1200px;
position: absolute;
left:13em;
top: 50px;
min-height:500px;
margin-bottom: 30px;
}

Damit musst du die Vertikalnavi nicht floaten und kannst bei der Horizontalnavi floaten und clearen.
(Hab's aber noch nicht komplett durchgetestet)

 

[hokage555]

ja das könnte funktionieren denke ich

ich werde es auf alle fälle mal austesten

danke dir ;-)

*edit: hab es gerade getestet und es klappt wunderbar xD. allerdings verursacht die absolute positionierung einen völlig sinnfreien horizontalen scrollbalken, da kein inhalt aus dem viewport recht.
daher würde ich den gerne verstecken xD
mit welcher css eigenschaft geht das?

 

[Efchen]

außerdem ist es nur eine frage der zeit bis dieses element sich etabliert.
das ist leider ja immer die schwierigkeit. eine morderne website abwertskompatibel zu machen.

Eben. Wenn das der IE6 heute nicht kann, kann er das auch morgen noch nicht.
Und da IE6 das beste ist, was Du für Win2K oder weniger bekommst, und Windows Update unter XP beim IE7 wohl ft versagt, wird die Zahl derer mit IE6 noch lange schön hoch bleiben...

 

[prm]

allerdings verursacht die absolute positionierung einen völlig sinnfreien horizontalen scrollbalken, da kein inhalt aus dem viewport recht.

Stell' bitte nochmal einen Link zur aktuellen Seite rein.

 

[hokage555]

hi leute,

@efchen: das habe ich mir schon fast gedacht ... ;-)

daher habe ich jetzt auch versucht einen mittelweg zu gehen. die float variante mit der absoluten positionierung, habe ich auf grund der scrollleiste nochmal hinten an gestellt.
display:inline-block; sollte jetzt sowohl in IE7 als auch in IE6 funzen.
das habe ich durch einge css hacks hinbekommen, die diese eigenschaft simulieren.
allerdings habe ich halt keinen IE6 ^^
IE7 klappt wunderbar, aber vll. kann mir 1er von euch sagen, wie das mit dem 6er aussieht ;-) ???
einziges problem ist jetzt noch der FF2, aber in diesem fall glaube ich wird der großteil schon auf 3 geupdated haben, da mozilla mittlerweile den support schon eingestellt hat. da ist es also nur noch eine frage der zeit, bis der FF3 standard ist.

so kommen wir zu den links.

link1: variante mit display:inline-block und css hack (bitte einmal in IE6 testen)

Startseite

link2: variante mit gefloatetem navi und position:absolute; scrollbalken nervt ^^

Startseite

prm evtl. findest du auch da ja noch eine lösung, denn ich denke benutzerfreundlicher ist diese methode schon ;-)

der IE8 hat ja einen IE7 modus. hat der FF3 eig. auch einen FF2 modus?
nein, oder?

grüße hokage

 

[Efchen]

IE7 klappt wunderbar, aber vll. kann mir 1er von euch sagen, wie das mit dem 6er aussieht ;-) ???

Klar doch, Check Browser Compatibility, Cross Platform Browser Test - Browsershots kann das!

einziges problem ist jetzt noch der FF2, aber in diesem fall glaube ich wird der großteil schon auf 3 geupdated haben

Die Leute, die noch FF2 haben, interessieren sich nicht für den Großteil.
Auf meinem Linux-Arbeitsplatz hab ich auch nur FF2, weil ich FF3 nicht installieren kann.

da ist es also nur noch eine frage der zeit, bis der FF3 standard ist.

Solche Gedanken mache ich mir nie. Wenn jemand mit einem alten Browser kommt, wird er schon seinen Grund haben. Wenn der Browser etwas nicht kann, was nicht notwendig für die Nutzbarkeit ist, dann hat der Nutzer natürlich Pech. Wenn ich mit einem alten Browser ein Problem habe, was die Nutzbarkeit beeinträchtigt, muss ich eine Alternative anbieten.
"Standard" in dem Sinne gibts nicht, vor allem weil M$-Fanatiker immer sagen, alles was von M$ kommt, ist Standard und FF & Co sind nur Alternativen.

 

[prm]

Zum Scrollbalken:
OK, du hast den Mangel dieses Konstrukts entdeckt. Er war mir bisher aber nicht bekannt.

Er tritt immer dann auf, wenn die Summe der Link-Breiten größer ist als 50% der Gesamtbreite des übergeordneten Elements.
Und zwar deshalb, weil die ul-Liste ja 50% nach rechts verschoben ist. Da bleibt sie auch generell stehen und benötigt "nicht sichtbaren Platz".
lediglich die Links werden zwecks Zentrierung zurückverschoben.

Habe das auch beim Link zu Stu Nicholls ausprobiert: Wenn ein Link mehr dazu kommt, tritt der Scrollbalken in Erscheinung. Muss noch nachsehen, ob das nur im IE so ist, oder auch im FF.

Eine saubere Lösung dazu fällt mir momentan nicht ein.
Eine "unsaubere" Hilfslösung wäre, die Navi-Breite auf 50% zu begrenzen. Das hat dann aber zur Folge, dass links und rechts je 25% an Platz ungenutzt bleibt.

 

[hokage555]

ja dann liegt es wohl an der zentrierung der gefloateten links...
die unsaubere lösun dinde ich jetzt nicht so toll, da dann ja meine links ziemlich klein sein müssen, damit der platz ausreicht...

@efchen: auf der von dir geposteten seite finde ich aber unter windows gar keinen IE. ich sehe dort nur alle möglichen anderen browser, wie chrome, FF, opere, safari u.s.w.

zur FF2 problematik. ich habe mich erkundigt und anscheinend gibt es dafür auch eine hack-lösung via css.
da leidet aber anscheinend ein wenig die semantik drunter, denn der inhalt in den listenpunkten (li) muss anscheinend nochmal in einem div stehen. setze mich damit allerdings nochmal etwas genauer auseinander und versuche auch für FF2 eine geeignete lösung zu finden.

jetzt muss ich halt nur immernoch wissen, ob meine seite mittlerweile im IE6 richtig angezeigt wird ^^
bzw. das menu (darum geht es ja ^^)

efchen vll. stelle ich mich auf dieser seite auch nur ein wenig dumm an xD
kannst du mir nochmal sagen, wo ich da den IE6 finde? oder kannst du kurz selber überprüfen, ob das menu richtig dargestellt wird?

hier nochmal der link:

Startseite

danke schonmal für die hilfen ;-)

grüße hokage

 

[_Thor_]

auf der von dir geposteten seite finde ich aber unter windows gar keinen IE. ich sehe dort nur alle möglichen anderen browser, wie chrome, FF, opere, safari u.s.w.

4. Spalte, MSIE 3.0 bis MSIE 8.0, wofür steht wohl MSIE ;)

 

[hokage555]

omfg

danke dir thor ^^

ich hab immer nach einem I gesucht ^^
alles andere irwie ausgeblendet.
was schreiben die da auch noch microsoft davor xD



dann wollen wir mal sehen ...

 

[_Thor_]

;)
Wenn du getestet hast, sag mir mal bitte, ob das bei dir auch so ewig lange dauert, bis die Ergebnisse da sind. Bei mir dauert das teilweise länger als 30 Minuten.

 

[hokage555]

ja ich bin hier grad auch schon drann^^
hab alle browser außer FF2 und IE6 rausgenommen und es dauert angeblich 30 min.
die sind jetzt in ein paar min abgelaufen, dann schau ich mal^^
sag dir nochmal bescheid, wie lange das jetzt im einzlenen gedauert hat.

hab dann so noch eine frage zu meinem header pic.
ich hab dem jetzt eine mindestbreite gegeben, weil es sonst unkenntlich wird ^^ svg habe ich noch nicht genutzt. evtl. geht es auch gar nicht, weil mein pic zu aufwendig wird...

auf jden fall wollte ich fragen, ob ich dem content und der navi, dann auch eine mindestbreite geben soll (die gleiche, wie dem header)

dann würde halt ab einer bestimmten größe ein horizontaler scrollbalken enstehen.

lasse ich es so, entsteht der balken trotzdem, aber ich kann ohne zu scrollen den inhalt und das menu komplett sehen ...

was würdet ihr machen?

*edit: so die screens sind da (gute halbe stunde)
FF2 kam das erwartete ergebnis und im ie6 funzt das menu auch. allerdings hat der 6er ein problem mit der headergrafik...
das problem tritt auch manchmal beim ie7 auf und eig. immer im safari.
liegt schätzungsweise am akalieren der rastergrafik ...
kann ich diese verzerrung irwie verhindern?

hier zu sehen:

http://browsershots.org/screenshots/5561540a7331bc0dc427eca0381dac39/

danke für eure hilfe ;-)