caption mittig über image

H

hermanhass

Grünschnabel
hallo
ich möchte gerne ein Menü mit Buttons bauen. Grundgerüst für das Menü ist eine Tabelle(sorry, die floats und inlines lassen mich mit den versch. Explorern verzweifeln). Die einzelnen Zellen sollen folgendes realisieren:
Ich verwende für die Buttons kein Background-Image,sondern ein <img>, damit ich unabhängig von der Grösse der Buttons diese dynamisch anpassen kann.
Diese images sollen vom Text(caption) mittig überlappt werden.

Code: 
<div class="item">
<div class="image">
 <img src="..." width="100" height="20" />
</div>
<div class="caption">
 ...Punkt 1
</div>
</div>
1) wie kann ich diese item-container der Klasse items nebeneinander positionieren, das Image anzeigen lassen und den text(caption) mittig einsetzen?
Mein Ansatz:
.item { position:absolute; width : 120px; display : block;}
.image { position:absolute; left:0; top:0; z-index:1; display: inline;}
.caption { position:absolute; left:0; top:0; z-index:2; display: inline;}

2) könnte ich - wenn es klappt - das ganze duplizieren. mit einem anderen image, um beim mouseover/out ein anderes Container-Div, das erst unsichtbar ist, mit dem orginal austauschen, um einen Hover-Effect zu realisieren?

danke Hermann
 
Hi,

stellst du dir das so vor?
HTML: 
<span class="wrapperBox">
      <img src="[Grafik-URI]" width="100" height="20" alt="" /><span>Caption</span>
</span>
CSS: 
span.wrapperBox img {
display:block;
}
span.wrapperBox span {
position:absolute;
margin-top:-20px; /* Element mit Text wird um 20px nach oben verschoben */
margin-left:20px; /* Element mit Text wird um 20px nach rechts verschoben */
}

mfg Maik
 
Entschuldige, aber mein Mozilla ist sehr bequem, was das aktualisieren angeht.
Einmal raus und rein, jetzt geht es.
ist eine geniale simple Lösung.....
könnte ich auch 2 dieser Blöcke hintereinander setzen, einen auf display:block, den anden auf display:none und bei mouseover/out diese auswechseln. oder ist das auswechseln des Image mit src=.... ei mouseout/over schnell genug?
Ziel: andere Buttons bei hovering
 
nee, alles klar, java behersche ich (im Gegensatz zu CSS).
Ich dachte nur, ein "fertiges" Div "auszutauschen" ist schneller, als die Grafik mit src=''---" zu setzen, da diese ja "geladen" werden muss.
Aber die Images sind nach dem ersten Laden ja im Cache...

Eine letzte Frage noch? kann ich den Text/Caption auch mittig setzen? im Moment sind sie ja linksbündig mit margin.

Ein grosses DANKESCHÖN
 
Ähm, hast du schon mal was vom Bilder vorladen gehört?

Und: Java != Javascript!

Tja, und das mit der horizontalen Zentrierung wird einen "Umstand" geben, da ja entsprechend der Zeichenlänge des Textes der margin-left-Wert gesetzt werden muß, und das dann für jeden Button individuell. "Viel Spaß", sag ich da nur!

Meine persönliche Meinung, wie du dir hier das Entwicklerleben bedeutend einfacher machst: CSS-Rollover :-)

mfg Maik
 
Sorry, mit dem mittig dachte ich an folgenden Trick:
1) den Container mit height und width vorbesetzen, die werte sind bekannt !
2) die Grafik dort reinsetzen mit ebenfalls den dimensionen
3) dann denn text vertikal und horizontal bündig in die gleiche div-grösse
das müsste doch theoretisch gehen oder? wie gesagt, breite und höhe sind fest und bekannt!

kann ich nicht die grafik und den text mit zindex übereinander setzen?
wie gesagt, css null ahnung, aber kann man das nicht so realisieren?
 
Theoretisch geht es schon mit den entsprechenden margin-top- und margin-left-Werten für den Text, wie ich es eingangs demonstriert habe - blos viel zu umständlich, und zu ungenau, was die korrekte Zentrierung betrifft.

Da bist du mit meinem CSS-Tutorial weitaus besser bedient: text-align:center zur horizontalen, und line-height:**px (** = Grafikhöhe) zur vertikalen Zentrierung.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück