navi einstellung

[Tobias]

Hallo,
ich arbeite gerade an ner PAge und habe das ein oder andere Problem.

Demo

Wie bekomme ich die Navi (also der Text) in die Mitte von der Leiste?
Wie mache ich es, dass beim Hovereffekt die ganze Leiste also von oben nach unten gelb eingefärbt ist und nicht nur der Text-Bg?!

 

[gaby]

Hallo,
ich arbeite gerade an ner PAge und habe das ein oder andere Problem.

Demo

Ich mußte bei mir im Browser erstmal die Farben deaktivieren, um deine Navi überhaupt zu finden. Schwarze Schrift auf dunkelgrauem Hintergrund ist nicht gerade optimal lesbar.

Wie bekomme ich die Navi (also der Text) in die Mitte von der Leiste?

was für eine Mitte? vertikal/horizontal?

btw
selfhtml.de - HTML & CSS Forum: Re: Firefox rückt <ul>-Tag ein

 

[koslowski]

Hi,

du verschachtelst deine divs falsch.
Du brauchst nur ein div#header und die #navi gehört da sicher nicht rein.
mach ein #topnavi ausserhalb vom header.

a braucht display:block und padding. damit vergrößert sich die anklickbare Fläche.
Außerdem braucht a Layout für den IE.

Hier gibts ein Tut für alle Arten von Navis (weiter runter scrollen!).

Du hast auch keinen vernünftigen CSS-Prolog.
Das: * {padding:0; margin:0;} gehört an den Anfang deiner CSS-Datei und noch ein paar andere Kleinigkeiten mehr.
Wie willst du denn sonst effektiv Fehler finden und ausbügeln.

Eine Cond.Comm.-Css hast du ja für alle IE-Versionen. Ich gehe mal davon aus, das du weißt wie du die IE-Hacks für die untersch. IE-Versionen (IE6 u. IE7) innerhalb der CC trennst, damit nur die entspr. IE-Version das zu sehen bekommt, oder??

Du hast ein Bild als header. Wo ist der enstpr. Text dazu im Markup??
Image Replacement Technik ist dir hoffentlich ein Begriff.

Sorry wenn ich dich so angehe, aber du bietest Webdesign gegen Geld an, der hier von dir vorgestellte Status deiner Webdes.-HP macht mir aber nicht den Eindruck, als wüßtest du so genau was du da tust.

koslowski

 

[gaby]

Du hast auch keinen vernünftigen CSS-Prolog.

Würdest du den denn empfehlen?
Der IE im quirks-mode ist nicht so die wahre Freude. ;-)
Und die paar Hanseln, die heute noch den IE-5 benutzen...

a braucht display:block und padding. damit vergrößert sich die anklickbare Fläche.
Außerdem braucht a Layout für den IE.

Ich habs jetzt nicht ausprobiert, aber wenn er die Liste in der horizontalen Mitte haben will, braucht die UL ein display: inline, damit man sie im Elternelement mit 'text-align:center' zentrieren kann.
Dann aber dürfen die a-Elemente kein 'display:block' bekommen.
CMIIW.

Deshalb fragte ich auch, wie er es nun haben möchte, um nicht unnötig etwas zu antworten.
Aber jetzt habe ich es ja doch getan. ;-)

 

[koslowski]

Moin,

Ich habs jetzt nicht ausprobiert, aber wenn er die Liste in der horizontalen Mitte haben will, braucht die UL ein display: inline, damit man sie im Elternelement mit 'text-align:center' zentrieren kann.
Dann aber dürfen die a-Elemente kein 'display:block' bekommen.
CMIIW.
Deshalb fragte ich auch, wie er es nun haben möchte, um nicht unnötig etwas zu antworten.
Aber jetzt habe ich es ja doch getan. ;-)

wenn dann braucht li display:inline und nicht ul.

Er hat die float-variante für horiz. Menüs gewählt und nicht die inline-Variante, deshalb ist display:block für a vollkommen richtig.

Hast du dir nicht den Quelltext und die CSS seines Links angeschaut?
Da stand doch alles.

Folge meinem geposteten Link und informiere dich dort über Darstellung von horiz. Navis.;)

koslowski

 

[gaby]

Moin,

wenn dann braucht li display:inline und nicht ul.

Ja, das auch.
Ich hatte das mal für ein anderes Forum gemacht, bei dem die Navi ursprünglich rechtsbündig ist.

http://gaby77.ga.funpic.de/forum/demo/waagr_zentr_navi.png

aber wie ich jetzt sehe, ist 'display:inline' für UL tatsächlich überflüssig. Danke für den Tip.

Er hat die float-variante für horiz. Menüs gewählt und nicht die inline-Variante, deshalb ist display:block für a vollkommen richtig.

Aber nicht mehr, wenn er das Menü horizontal zentrieren will.

Hast du dir nicht den Quelltext und die CSS seines Links angeschaut?
Da stand doch alles.

Natürlich.
Sonst hätte ich ihm doch nicht den Tip geben können, für UL margin und padding auf 0 zu setzen.
Hast du denn nicht meinen Link im ersten Posting angeklickt?
Da stand doch alles. ;-)

Folge meinem geposteten Link und informiere dich dort über Darstellung von horiz. Navis.;)

koslowski

Das habe ich gemacht, und weiß nun, daß ich bisher immer eine Eigenschaft zuviel deklariert hatte. Thx.

Gruß
gaby

 

[Efchen]

Würdest du den denn empfehlen?
Der IE im quirks-mode ist nicht so die wahre Freude.

koslowski sprach von einem CSS-Prolog und hat sein Beispiel gleich dazu geschrieben, dass er also erstmal alle margins/paddings auf 0 setzt. Was Du meinst, ist der XML-Prolog. Und der ist in der Tat nicht zu empfehlen. Aber darum gehts ja nicht.

aber wenn er die Liste in der horizontalen Mitte haben will ... Deshalb fragte ich auch, wie er es nun haben möchte, um nicht unnötig etwas zu antworten.

Aus der Website geht IMHO hervor, dass er es vertikal haben möchte, weil die Texte der Links ja direkt am unteren Rand kleben.

Gruß,
-Efchen

 

[koslowski]

Hi,

Aber nicht mehr, wenn er das Menü horizontal zentrieren will.
Natürlich.
Sonst hätte ich ihm doch nicht den Tip geben können, für UL margin und padding auf 0 zu setzen.
Hast du denn nicht meinen Link im ersten Posting angeklickt?
Da stand doch alles. ;-)

horizontal zentrieren mit der float-Variante ist genauso möglich.
das geht mit display:table und margin:0 auto; für die ul.
Selbstverständlich mit einigen CC'S für den IE.
Steht aber auch in meinem Link.

Ansonsten klappt das aber auch mit entsprechendem padding/margin für ul oder li (wenn jeder Listenpunkt eine id hat).

* {margin:0 padding:0} gehört an den Anfang einer CSS, damit man das später nicht dauernd definieren muss und für alle Browser die gleichen Startbedingungen gelten.
Deinen Link habe ich angeklickt, aber was dort stand ist imho nicht ausreichend.

koslowski

 

[neuroleptika]

Vertikal zentrieren geht über padding-top und padding-bottom für <a> (display: block nicht vergessen).
Das funktioniert natürlich nur richtig, wenn die umschließenden Elemente (li, ul und div) keine height-Angabe haben.
Der Inhalt sollte die Höhe der Boxen bestimmen. Nicht umgekehrt.
Beispiel html:

<div id="men">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">feedback</a></li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>

Beispiel css:

  * {
margin: 0px;
padding: 0px;
}

body {
font-size: 14px;
}

#men {
background-color: #444444;
}

#men  ul {
list-style: none;
margin-left: 20px;
}

#men  ul:after {
content: "ende";
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/*Haslayout IE 5-7 (autoclear)*/
* html ul {
height: 1%; /* IE 5-6*/
}
* +html ul {
min-height: 1%; /*IE 7*/
}

#men  ul li {
float: left;
}
#men  ul li a {
text-decoration: none;
display: block;
padding: 10px 5px 10px 5px;
color: #FFFFFF
}
#men  ul li a:hover {
background-color: #FFC300;
color: #444444;
}

Das <div id="men"> dient dazu, der gesamten Breite eine Hintergrundfarbe zu geben. Ul nimmt durch seinen gefloateten Inhalt nicht die gesammte, zur Verfügung stehende Breite ein.
Durch den Verzicht auf Höhenangaben und richtig angewendetes clear, drückt der Inhalt von <a> id=men auf die Passende Höhe.

Wenn auch horizontal zentriert werden soll, wird das div auch für den IE bis vers.7 gebraucht.
(display:table; versteht der IE bis Vers.7 nicht).

 

[koslowski]

Mahlzeit,

Vertikal zentrieren geht über padding-top und padding-bottom für <a> (display: block nicht vergessen).
Das funktioniert natürlich nur richtig, wenn die umschließenden Elemente (li, ul und div) keine height-Angabe haben.
Der Inhalt sollte die Höhe der Boxen bestimmen. Nicht umgekehrt.

sehr schön formuliert.:)

(display:table; versteht der IE bis Vers.7 nicht).

völlig richtig, deswegen auch mein Hinweis auf CC's für den IE.
Ist aber alles in dem Link erklärt.;)

Gruß
koslowski

 

[gaby]

* {margin:0 padding:0} gehört an den Anfang einer CSS, damit man das später nicht dauernd definieren muss und für alle Browser die gleichen Startbedingungen gelten.
Deinen Link habe ich angeklickt, aber was dort stand ist imho nicht ausreichend.

IMO ist das nicht zwingend notwendig.
Es ist für Anfänger zu empfehlen, die sich weitgehend vor unerklärlichen IE-Abständen absichern wollen, und für diejenigen, die ein größtmögliches pixelgenaues Design in allen Browsern haben wollen.

Da * {margin:0 padding:0} aber ein exzessives Deklarieren der Abstände erforderlich macht, bläht es das Stylesheet unnötig auf, und macht es unübersichtlicher.

Hier sollte nun jeder Autor die Freiheit haben, Prioritäten nach eigenem Geschmack setzen zu dürfen, entweder zu Beginn alle margins eliminieren, oder bei Bedarf nur die Entsprechenden.
Imo haben beide Varianten ihre Berechtigung und keine der beiden einen Ausschließlichkeitsanspruch.

 

[koslowski]

IMO ist das nicht zwingend notwendig.
Es ist für Anfänger zu empfehlen, die sich weitgehend vor unerklärlichen IE-Abständen absichern wollen, und für diejenigen, die ein größtmögliches pixelgenaues Design in allen Browsern haben wollen.

Da * {margin:0 padding:0} aber ein exzessives Deklarieren der Abstände erforderlich macht, bläht es das Stylesheet unnötig auf, und macht es unübersichtlicher.

Hier sollte nun jeder Autor die Freiheit haben, Prioritäten nach eigenem Geschmack setzen zu dürfen, entweder zu Beginn alle margins eliminieren, oder bei Bedarf nur die Entsprechenden.
Imo haben beide Varianten ihre Berechtigung und keine der beiden einen Ausschließlichkeitsanspruch.

Zwingend notwendig sicher nicht, aber warum empfehlen das praktisch alle Bücher über Webdesign und praktisch alle *CSS-Gurus*
Sind die alle doof und sagen sowas um die Lernenden zu verwirren.

Aufgebläht wird die CSS-Datei dadurch auch höchstens unwesentlich.

Ja, ich möchte das meine Layouts in allen wichtigen Browsern gleich aussehen, sowas nennt sich sauberes Arbeiten.
Schlampiges Arbeiten ist nicht so mein Ding und endlose Fehlersuche auch nicht.

Zurücksetzen der unterschiedlichen browserinternen Vorformatierungen (die sind nämlich von Browser zu Browser verschieden) schafft einfach überall ein gleiches Fundament, von dem aus ich gestalten kann.

Jeder wie er will, ich wünsche dir viel Spaß beim Webdesign mit deiner Einstellung.:lol:

koslowski

 

[gaby]

Zwingend notwendig sicher nicht, aber warum empfehlen das praktisch alle Bücher über Webdesign und praktisch alle *CSS-Gurus*
Sind die alle doof und sagen sowas um die Lernenden zu verwirren.

Aufgebläht wird die CSS-Datei dadurch auch höchstens unwesentlich.

Ja, ich möchte das meine Layouts in allen wichtigen Browsern gleich aussehen, sowas nennt sich sauberes Arbeiten.
Schlampiges Arbeiten ist nicht so mein Ding und endlose Fehlersuche auch nicht.

Zurücksetzen der unterschiedlichen browserinternen Vorformatierungen (die sind nämlich von Browser zu Browser verschieden) schafft einfach überall ein gleiches Fundament, von dem aus ich gestalten kann.

Jeder wie er will, ich wünsche dir viel Spaß beim Webdesign mit deiner Einstellung.:lol:

koslowski

Aha, Du bestimmst also, was saubere und was schlampige Arbeit ist.

Auf diesem unsachlichen Niveau ist jede weitere Diskussion sinnlos.
Wenn du tatsächlich der Meinung bist, es gäbe pixelgenaues Webdesign, ...
Ach, was solls.
Ich wünsche dir ebenfalls viel Spaß beim Webdesign und beim Pixelzählen.

gaby

 

[koslowski]

Hi,

Aha, Du bestimmst also, was saubere und was schlampige Arbeit ist.

nein, ich bestimme das gewiss nicht, der Kunde bestimmt das.

Und wenn das in versch. Browsern verschieden ausschaut dann sagt er:"So a' gschlampertes G'lump zahl i net!"

Und draußen bin ich.:cry:

koslowski

 

[gaby]

Und wenn das in versch. Browsern verschieden ausschaut dann sagt er:"So a' gschlampertes G'lump zahl i net!"

Du solltest schon ein bißchen genauer lesen, was ich schreibe, und mir nichts unterstellen.

entweder zu Beginn alle margins eliminieren, oder bei Bedarf nur die Entsprechenden.

Das heißt doch wohl, daß mein Layout browserübergreifend genauso übereinstimmend (100%-ig gibts sowieso nicht) aussehen kann, wie das Layout desjenigen, der nach einer anderen Methode sein Stylesheet schreibt.
Jeder, wie er mag, oder wie er besser damit klarkommt.
Hauptsache, das Ergebnis sieht in Ordnung aus.
Aber wenn zb Opera zw Überschrift und Fließtext ein Pixel mehr Abstand läßt als andere Browser, würde ich sowas nicht als "gschlampertes G'lump" bezeichnen.
Nur um solche Kleinigkeiten geht es ja.

 

[Efchen]

Sind die alle doof und sagen sowas um die Lernenden zu verwirren.

Es ist ja nicht falsch.

Ja, ich möchte das meine Layouts in allen wichtigen Browsern gleich aussehen, sowas nennt sich sauberes Arbeiten.

Ich glaube das hat nicht mit "sauberem Arbeiten" zu tun. Und IMHO müssen Sites auch nicht in allen Browsern gleich aussehen. Sie müssen nur gut aussehen. Und sauberes Arbeiten ist es erst dann, wenn man wirklich exakt identisches Aussehen erreichen will. Und dann ist diese Deklaration sicher ein sehr zu empfehlendes Werkzeug!

Gruß,
-Efchen