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

[Hahnefeld Bjoern]

Joey, mein Retter :)

Besten Dank für deine Mithilfe. Die Darstellung passt jetzt auf jeden Fall. Aber bedauerlicherweise ist keiner der Links anklickbar. Es erscheint nur die Grafik. Das ist natürlich optisch tolerierbar, aber nicht funktionell :(


-----Ursprüngliche Nachricht-----
Von: typo3-german-bounces at lists.typo3.org im Auftrag von JoH asenau
Gesendet: Sa 25.9.2010 10:23
An: typo3-german at lists.typo3.org
Betreff: [TYPO3-german]  Re: Menü mit Bildern statt GMENU oder Textmenü
 
> #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
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german