T
TiMbO2k
Hallo, ich versuche gerade meine Gallery etwas ansprechender zu gestalten.
Ich will dazu jedes Bild in eine Box mit einer festen Breite packen und diese dann zentrieren. In dieser Box soll dann das Bild angezeigt werden. Später will ich dadurch dann noch eine Bildunterschrift ermöglichen etc.. Soweit so gut. Habe das soweit auch alles hinbekommen nur das einzigste Problem ist nun, dass ich die Boxen nicht zentriert bekomme.
Weiterhin fließen die Bilder auch immer aus der Hauptbox (mainbox) raus wenn ich nicht overflow:auto angebe. Muss das so sein, denn Text fließt ja nicht raus?
Hier der HTML Code mit den CSS Eigenschaften:
Vielleicht kann mit jemand nen Lösungsansatz geben.
Gruß, Tim
Ich will dazu jedes Bild in eine Box mit einer festen Breite packen und diese dann zentrieren. In dieser Box soll dann das Bild angezeigt werden. Später will ich dadurch dann noch eine Bildunterschrift ermöglichen etc.. Soweit so gut. Habe das soweit auch alles hinbekommen nur das einzigste Problem ist nun, dass ich die Boxen nicht zentriert bekomme.
Weiterhin fließen die Bilder auch immer aus der Hauptbox (mainbox) raus wenn ich nicht overflow:auto angebe. Muss das so sein, denn Text fließt ja nicht raus?
Hier der HTML Code mit den CSS Eigenschaften:
Code:
<style type="text/css">
.mainbox
{
width:300px;
text-align:center;
border:1px dotted lightgrey;
overflow:auto;
padding: 2px;
}
.imagebox
{
width: 60px;
margin:4px;
padding:5px;
border:1px solid black;
float:left;
}
</style>
<div class="mainbox">
<div class="imagebox"><img src="." width="50" height="50"></div>
<div class="imagebox"><img src="." width="50" height="50"></div>
<div class="imagebox"><img src="." width="30" height="50"></div>
<div class="imagebox"><img src="." width="50" height="50"></div>
<div class="imagebox"><img src="." width="30" height="50"></div>
<div class="imagebox"><img src="." width="50" height="50"></div>
<div class="imagebox"><img src="." width="50" height="50"></div>
<div class="imagebox"><img src="." width="50" height="50"></div>
<div class="imagebox"><img src="." width="30" height="50"></div>
</div>
Vielleicht kann mit jemand nen Lösungsansatz geben.
Gruß, Tim