[TYPO3-german] Re: Menü mit Bildern statt GMENU oder Textmenü

[JoH asenau]

> #manufacturers li
> {
> display: inline;
> }
> 
> #manufacturers li a
> {
> display: block;
> }
> 
> #manufacturers li a span
> {
> /* margin-top: 100px; */
> }

Das kann so nicht funktionieren, weil

a) das display:inline der li-tags vom display:block der a-tags aufgehoben wird (die Kacheln stehen also untereinander)
und b) der Text natürlich mitten in den a-tags steht, weil Du den im span-tag bisher nicht verschiebst

Ohne float oder zumindest display:inline-block wirst Du da nicht weiter kommen.
Letzteres klappt aber im IE nur für Elemente, die per Default vom Typ "inline" sind.

li {
    display:block;
    float:left;
}

a {
    display:block;
    width:62px;
    height:62px;
    overflow:hidden;
}

span {
    line-height:1000px;
}

Das sollte eigentlich reichen. Die Hintergründe sollten dann ins a-tag, dann kannst Du sogar ohne spezielle Hacks ein hover bis runter zum IE6 realisieren:

entweder mit zwei Bildern

.kachel1 a {
    background:url(../whatever/blah.jpg) no-repeat top left;
}

.kachel1 a:hover {
    background:url(../whatever/blah_over.jpg) no-repeat top left;
}

oder mit nur einem Bild:

.kachel1 a {
    background:url(../whatever/blah.jpg) no-repeat;
    background-position: top left;
}

.kachel1 a:hover {
    background-position: bottom left;
}

HTH

Joey

PS:  Sowas findest Du aber eigentlich als Mini-Tutorial an jeder dritten Ecke im Web ;-)

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your gob sometimes!)
Dieter Nuhr, German comedian
Xing: http://contact.cybercraft.de
Twitter: http://twitter.com/bunnyfield
TYPO3 cookbook (2nd edition): http://www.typo3experts.com