Grafik hinter Liste (menü)

[Ricc220773]

Moin,

ich möchte auf meiner Seite die Links nicht in die zwei Linien (hr) packen, sondern mit einer Grafik hinterlegen. Sie soll nur aus einem Farbverlauf ähnlich der Hintergrundgrafik bestehen. Nun mein Problem: Wie bekomme ich sie hinter die Liste der Links? Binde ich ins <ul> eine Hintergrundgrafik ein wird sie nicht angezeigt und im <li> ist sie nur hinter der Schrift zu sehen. Sie soll aber über die gesamte breite gehen. Kriege das einfach nicht hin.

Gruß Ricc

 

[threadi]

Die Liste (<ul>) selbst müsste über die gesamte Breite gehen, ebenso die <li>'s. Den Text darin (also die Links in dem Fall) kannst Du dann mittels padding positionieren. So passt dann auch ein Bild auf der gesamten Breite in die <li>'s. Stichwort: setze margin und padding auf 0.

 

[Ricc220773]

Danke. Habe <ul> auf 100% gesetzt und die Grafik wird angezeigt. Müsste jetzt noch alle Abstände einstellen, damit die Links genau in der Mitte sitzen. Meine Idee wirkt aber optisch absolut nicht, lasse es also lieber.
Nun weiß ich aber wenigstens wie es funkioniert.

Danke trotzdem für die schnelle Hilfe

 

[neuroleptika]

Eigentlich gehört <ul> gecleart.

Die ul enthält nur gefloatete Elemente. Deshalb hat sie keine Höhe.
Die (gefloateten) <li>s drücken <ul> nicht auseinander.
Du mußt clearen um das zu ändern.
Es gibt leider keine valide Möglichkeit um ein clearendes Element zwischen
dem letzten <li> und dem </ul> zu schieben.
Mit css kannst du ein Inhalt an <ul> anhängern und den clearen:

.headerlinks:after {
display: block;
content: "floatende";
[COLOR="DarkRed"][B]clear: both;[/B][/COLOR]
height: 0;
visibility: hidden;
}

Jetzt müßte die Grafik in <ul> zu sehen sein.
Nur im Internetexplorer bis Vers.7 ist davon noch nichts zu sehen. Er kennt erst ab Vers.8 (beta) :after.
Allerdings hat IE5 bis IE7 so eine art Bug (schimpft sich Layout) den du ausnützen kannst:

/*IE5-IE6:*/
* html .headerlinks {
height: 1px;
}

/*IE7:*/
* +html .headerlinks {
min-height: 0;
}

Diese Angaben lösen Im IE5-7 Layout aus. Die <ul> verhält sich als ob sie gecleart wurde.
* html wird Nur von IE5-IE6 interpretiert.
* +html nur von IE7 (und IE5. Spielt hier aber keine Rolle, da er min-height nicht kennt)

Nun reicht es <ul> ein background-image zu geben.

 

[Ricc220773]

Mensch Neuro, bei Dir steht erfahrener Benutzer und bei mir nur Benutzer

War mit meinem letzten Beitrag wahrscheinlich schneller als Du mit Deiner sehr ausführlichen Hilfe. Es sieht einfach Jauche aus und ich lasse lieber die Linien.

Gibst Dir aber wirklich Mühe anderen bei Problemen zu helfen.