> #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@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
