HTML Frage

U

User 968

Huhu,

ich habe 3 Bilder, alle gleich groß, die will ich nebeneinander haben. Kein Problem. Aber darunter will ich unter jedem Bild 1 Wort Text platzieren, und zwar genau mittig unter jedem Bild. Wie mach ich das denn?

<img src="images/mood.jpg"></a>   <img src="images/mood.jpg"></a>   <img src="images/mood.jpg"></a><br>
BUSINESS   CASUAL   SPORT

So hab ich das in meiner Ahnungslosigkeit gemacht. Die Bildchen sind nebeneinander und mit diesem   ein wenig auseinandergerückt. Aber ich bekomme die 3 Wörter nicht exakt mittig drunter!!?
 
U

User 3205

Vor kurzem hatte ich auch das Problem. Hier etwas ausführlicher wie ich es gelöst habe:

Code:
<!--Bilderkisten Vorschau Anfang-->
<div id="alle_kisten">

<p class="bildkiste">
<!-- <img class="blockbild">-->
<a href="#" onClick="dv.showDV(bild1);return false;">
<img class="blockbild" border="0" width="150" height="113" alt="" src="bildbild.jpg">
</a>
<span>text
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</span>
</p>


<p class="bildkiste">
<!-- <img class="blockbild">-->
<a href="#" onClick="dv.showDV(bild1);return false;">
<img class="blockbild" border="0" width="150" height="113" alt="" src="Blabla.jpg">
</a>
<span>text
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</span>
</p>


<p class="bildkiste">
<!-- <img class="blockbild">-->
<a href="#" onClick="dv.showDV(bild1);return false;">
<img class="blockbild" border="0" width="150" height="113" alt="" src="bild.jpg">
</a>
<span>Text
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</span>
</p>
</div>
<!--Bilderkisten Vorschau Ende-->


->Und in der CSS Datei:

Code:
#alle_kisten {
width : 498px;
margin : auto;
}
.bildkiste {
float : left;
width : 159px;
background-color : #edeae9;
border-left : 1px solid #ffffff;
padding-top : 2px;
padding-right : 2px;
padding-left : 2px;
padding-bottom : 2px;
}
.bildkiste .blockbild {
display : block;
margin : auto;
}
.bildkiste span {
display : block;
width : 150px;
margin : auto;
}

Versuchs mal;)

EDIT: Das Javascript kannst Du logischerweise auslassen :)
 
Zurück
Oben