✔ mehrere div Boxen mit fester Breite nebeneinander darstellen

Status
Nicht offen für weitere Antworten.
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:
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
 
Hallo,

da du nicht erwähnt hast, wievele DIVs nebeneinander angezeigt werden sollen, sich in deinem HTML-Source 9 Demo-DIVs .imagebox befinden, poste ich mal einen Lösungsvorschlag für 3 DIVs pro Zeile.

In diesem CSS-Modell habe ich das DIV .mainbox zeilenweise in drei gleich breite DIVs .leftbox , .middlebox sowie .rightbox unterteilt, und in diesen DIVs jeweils das DIV .imagebox mit der Grafik eingebettet:

HTML: 
<html>
<head>
<title></title>

<style type="text/css">
<!--
div.mainbox
{
position: absolute;
border: 1px solid #000000;
width: 300px;
}

div.leftbox
{
width: 99.3px;
float: left;
padding: 0;
text-align: center;
}

div.middlebox
{
width: 99.3px;
float: left;
padding: 0;
text-align: center;
}

div.rightbox
{
width: 99.3px;
float: left;
padding: 0;
text-align: center;
}

div.imagebox
{
width: 60px;
margin: 5px 18.5px;
border:1px solid black;
}

div.imagebox img
{
margin: 5px 5px;
}

div.clearboth
{
clear: both;
font-size: 0px;
line-height: 0px;
}
-->
</style>

</head>
<body>

<div class="mainbox">

<div class="leftbox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="middlebox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="rightbox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="clearboth">&nbsp;</div>

<div class="leftbox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="middlebox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="rightbox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="clearboth">&nbsp;</div>

<div class="leftbox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="middlebox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="rightbox">
<div class="imagebox"><img width="50" height="50"></div>
</div>

<div class="clearboth">&nbsp;</div>

</div><!-- END .mainbox -->

</body>
</html>
[ Browsercheck: FireFox 1.0.2, IE 5.5, Mozilla 1.6, NN 7.0, Opera 7.23 ]
 
Hi, vielen Dank für deinen Lösungsansatz. Ich wollte die ganze Geschichte so dynamisch wie möglich halten. Das soll heißen, dass ich die Mainbox habe und darin eine unbestimmte Zahl an Imageboxen habe. Diese Imagboxen sollen nun zentral in der Mainbox angezeigt werden. Je nachdem wie viele Imageboxen reinpassen werden in einer "Zeile" dargestellt ansonsten fänge eine neue "Zeile" an. Im Prinzip so ähnlich wie bei Text, der in der neuen Zele weiterfließt.

Es ist im Prinzip das selbe, als wenn ich eine Mainbox habe und darin nun belibig viele img Tags reinsetze. So hab ich es auch bisher gelöst allerdings habe ich nun das Problem, dass ich auch Bilder habe die schmaler sind. Es sollen aber alle Bilder in einem gleichgroßem "Rahmen" angezeigt werden. Von der Sache her wie eine Art Raster oder Tabelle.

Ich bezweilfe aber langsam, dass es so funktioniert wie ich mir das vorstelle. Eine Lösung wäre noch je nach Bildart (schmal oder normal) den Aussenabstand nach links und rechts im img Tag anzugeben.

Gruß, Tim
 
Hallo,

eine flexible Anzahl von unterschiedlich breiten und dennoch zentrierten DIVs pro Zeile lässt sich meines Wissens nicht realisieren.

Entweder legst du ein mehrspaltiges Raster für das DIV .mainbox an, so wie ich es gestern abend vorgestellt habe, um die DIVs horizontal zu zentrieren, oder du lässt die DIVs ohne Raster floaten, was dann aber ein ungleichmässiges Erscheinungsbild zur Folge hat - Stichwort: unterschiedliche Grafikbreiten.
 
Hi, ich hab es jetzt so gemacht, dass ich die div Boxen floaten lasse und ihnen eine feste Breite zuteile. Damit klappt es halt so wie gewünscht nur leider nicht zentriert aber darauf muss ich dann wohl verzichten. Bei inline Elementen habe ich das Problem, dass ich ihnen keine feste Breite zuordnen kann.

Vielen Dank für eure Hilfe.

Gruß, Tim
 
@c2uk: dein Tipp ist grundsätzlich nicht schlecht, denn er zentriert die DIVs automatisch und einwandfrei.

Leider erzeugt das display: inline; in den Gecko-Browsers (FireFox, Mozilla, NN) ein Problem mit dem Rahmen und/oder der Hintergrundfarbe für die DIVs -> siehe angehängte Grafik :mad:

Habe den DIVs mit height: 60px; eine feste Höhe gegeben, hilft auch nicht weiter... Und display: block; für die Grafiken zerschiesst im FireFox, Mozilla & NN das Layout komplett.

Anmerkung: Inline-Elemente dürfen nach der selfHTML - Elementreferenz ja auch keine Block-Elemente enthalten ;-]
 

Anhänge

  • ss.png
    ss.png
    2 KB · Aufrufe: 762
Hi, genau das hab ich ja auch schonmal ausprobiert und das selbe Ergebnis gehabt ;-). Ich glaube ich kann damit aber gut leben, dass die Boxen nicht zentriert sind. Hauptsache ist eigentlich, dass sie alle die gleiche Größe haben.

Desweiteren ist mir bei meinen bisherigen Projekten aufgefallen, dass CSS zwar grundsätzlich enorme Möglichkeiten bietet aber vieles einfach nicht so funktioniert wie es von der Logik her funktionieren müsste. Ist jetzt nicht speziell auf dieses Beispiel bezogen aber ich hatte schon viele Momente wo etwas nicht funktionierte wie es normalerweise sollte. Liegt leider auch immer daran, dass die Browserhersteller die Standards manchmal etwas locker interpretieren. Gerade bei dem Boxenmodell fällt das am meisten ins Gewicht. Egal, ich hatte nur mal kurz das Bedürfniss meinen "Frust" abzulassen.

Vielen Dank nochmal für eure Bemühungen und Hilfe!

Gruß, Tim
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück