✔ Div Position falsch

[aargau]

Hallo zusammen
Ich weis nicht ob HTML die richtige Kategorie ist, oder ob es schon mehr ins CSS geht.

Ich habe das Problem das ich auf den Bilder in meiner Galerie anzeigen möchte ob darauf ein Namensschild (Fotopin) oder ein Kommentar ist. Nun hab ich aber das Problem das bei Bilder welche höher dafür schmaler sind dies nicht im Bild sinder zur hälfte auf der Tabelle angezeigt wird.
Aussehen tut es so: http://marcovolt.info/div_fehler.JPG

Der Code: (ist mit PHP gemischt)

<td width=\"141\" height=\"141\" align=\"center\" valign=\"middle\">
		
		<div style='position:relative;'><div style=\"width:5px; height:5px; position:absolute; left:5px; top:0px; z-index:1;\">www</div><a href=\"link...\"><img src=\"bild.jpg\" border=\"0\"></a></div>" ;

Ich hoffe ihr wisst was ich meine und könnt mir helfen.

 

[Maik]

Hi,

die Startposition des DIVs ist nicht falsch, denn sie beginnt, wie von dir festgelegt, in den Tabellenzellen bei left:5px.

 

[aargau]

Ok klingt Logisch. Nun wie schaffe ich das dass Div dem Bild angepasst wird? Oder geht es ev. einfacher wenn ich halt noch eine Tabelle um das Bild mache, so das er dan die Absolute Position von da berechnet? Kenn mich mit Div`s noch nicht so aus, mache das meiste mit Tabellen

 

[Sanfan]

So, wie das Bespielbild aussieht, ist das DIV deinen Galleriebildern angepasst. Am einfachsten machst du mal ne border um das äussere DIV, dann kannst du dir sicher sein. Ansonsten schieb doch das IMG einfach an den linken Rand, dann steht dieses www wieder überm Bild, falls es das ist, was du bezwecken willst.

 

[aargau]

Hab mal schnell den Hintergrund des DIVs geändert und es ist genau so gross wie die Zelle der Tabelle Nun ja das Bild auf die Linke seite schieben möchte ich eigentlich nicht, da es sonst nicht mehr so gut aussieht wenn die Bilder zu klein sind.

 

[Maik]

Hi,

ein Blockelement, wie z.B. das div-Element, richtet seine Breite immer am Elternelement aus.

Wie wäre es, wenn du alternativ zur Tabelle, die Galerie mit einer Liste auszeichnest?

ul#gallery {
list-style:none;
margin:0;
padding:0;
}

ul#gallery li {
float:left;
margin:10px;
}

ul#gallery a img { 
display:block;
}

<ul id="gallery">
    <li><div style="position:relative;"><div style="width:5px; height:5px; position:absolute; left:5px; top:0px; z-index:1;">www</div><a href="#"><img src="..." border="0"></a></div></li>
    <li><div style="position:relative;"><div style="width:5px; height:5px; position:absolute; left:5px; top:0px; z-index:1;">www</div><a href="#"><img src="..." border="0"></a></div></li>
    <li><div style="position:relative;"><div style="width:5px; height:5px; position:absolute; left:5px; top:0px; z-index:1;">www</div><a href="#"><img src="..." border="0"></a></div></li>
    <li><div style="position:relative;"><div style="width:5px; height:5px; position:absolute; left:5px; top:0px; z-index:1;">www</div><a href="#"><img src="..." border="0"></a></div></li>
    <li><div style="position:relative;"><div style="width:5px; height:5px; position:absolute; left:5px; top:0px; z-index:1;">www</div><a href="#"><img src="..." border="0"></a></div></li>
</ul>