Hilfe bei CSS-Menü mit <li> und <ul>

[luksn]

Hallo,
ich bin gerade dabei meine erste Website zu erstellen, die auch irgendwann mal benutzt wird.

Ich habe nun ein Problem mit meinem Menü!

Also zur Erklärung habe ich unten noch screens aus firefox, ie und einen, der zeigt wie sein soll, angefügt....

Ich weiß, da ist noch viel anderes falsch, aber mir geht es erstmal nur um das Menü, das irgendwie abgestuft wird.

Meine Seite

Ich bräuchte einen Rat, was ich im Code falsch gemacht habe!

#edit: außerdem werden jeweils eine grafik nicht angezeigt.... :confused

[hero-master]

Hi

Du musst einige Regeln beachten:
1. Wer float sagt, muss auch clear sagen
2. Vrdefinierte Innen- und Außenabstände bei Blockelementen. Um diese einmal außer Kraft zu setzen, einfach den Schnipsel oben in die CSS-Datei packen:
[code]* {margin:0; padding:0}

3. Container hängen in der Höhe nicht voneinander ab und sind bei nicht konkret angegebener Höhe nur so hoch, wie sein Inhalt.

4. Verpass nicht den Links im Menu oben ein float:left, sondern den Listenpunkten (dazu gehrört dann natürlich noch eine Breite). Gib den Links ein display:block; und eine Breite (für den IE).

5. Warum der Content ganz recht ist? float:right; ist die Antwort
Gib dem Content am besten auch ein float:left; und einen linken Außenabstand. (siehe auch oben den Link)

Wenn du das machst, dann sieht das schon ein wenig anders aus, ob es perfekt aussieht kann ich dir dann nicht sagen. Falls nicht:
Schau nach, ob du den Blockelementen die benötigte Breite zugewiesen hast und ob du das flaot: auch wieder gecleart hast

[luksn]

boah vielen dank für die mühe, da mach ich mich jetzt mal ran!

melde mich soblad ich das alles überprüft und korrigiert habe!

[luksn]

So ich habe meine Seite jetzt fast so, wie ich sie haben will!

Was noch nicht klappt ist die Beschriftung des Menüs! Die Schrift ist mitten
auf den Buttons... und ich krieg sie da nicht weg. Ich wollte sie
eigentlich über die Bilder haben, aber wenn ich das mit margin oder
padding versuche, dann bezieht sich das immer auch auf den ganzen Button!

Also wie kriege ich die Schrift nach oben?

Dann wüsste ich auch gerne, obe es soetwas wie "min-height" gibt, was
auch andere Browser als der IE unterstützen. Da ich zurzeit keine andere
Lösung sehe, als mit <br> aufzufüllen!

luksn.

[hero-master]

Hi luksn
Dein Menuproblem ist recht einfach zu lösen:
Du hast den Listenpunkten eine Zeilenhöhe gegeben (line-height:75px). Somit ist der Text auch immer vertikal in der Mitte, wenn er einzeilig ist.
Gib den Listenpunkte einfach eine einfache Höhe und die Hintergrundbilder verschiebst du einfach von oben um 20-30px:

li {
float: left;
width:65px;
height: 75px;
}
li#home a{
background-image: url(bilder/home-normal.jpg) no-repeat 0 25px;
}

die Eigenschaft min-height versteht jeder Browser, nur gerade der IE nicht, zumindestens auf dem PC. Soweit ich weiß hat Boris auch mal erzählt, dass der Safari das auch nicht kapiert
Somit gibst du dem IE einfach eine Höhe (height) und den anderen Browsern eine Mindesthöhe (min-height)

[luksn]

Vielen dank für die schnelle Antwort!

Oh dann hab ich das mit min-height genau verdreht!

Zitat von hero-master

die Hintergrundbilder verschiebst du einfach von oben um 20-30px:

wie das gerade blockiert glaub ich...

Zitat von hero-master

li#home a{
background-image: url(bilder/home-normal.jpg) no-repeat 0 25px;
}

was sind das für angaben? was bewirken die? also no-repeat ist klar, aber brauch ich das?

[hero-master]

Zitat von luksn

was sind das für angaben? was bewirken die? also no-repeat ist klar, aber brauch ich das?

Damit vershiebst du das Hintergrundbild um 25px nach unten:
Das ist background-position:
url(....) background-repeat horizontale Position vertikale Position
url(....) no-repeat 0 25px

PS: ob du das brauchst musst du schauen. mach das mal mit dem line-heightweg und siehs dir an

[luksn]

So ich habs!

li {
float: left;
width:65px;

}

li a {
display: block;
height: 75px;
text-align:center;

}

li#home a{
background-image: url(bilder/home-normal.jpg);
}

So hab ich das jetzt gelöst. Die Positionierung war garnichmehr notwendig!
Vielen Dank nochmal für die Geduld!

Muss jetzt noch die andere Liste in der Subnavi anpassen dann klappts hoffentlich...