tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
12146
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 31.03.05 18:54 #1
    TiMbO2k Tutorials.de Gastzugang
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    <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
     
  2. 31.03.05 21:38 #2
    Maik Tutorials.de Gastzugang
    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-Code:
    <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 ]
     
  3. 31.03.05 22:45 #3
    TiMbO2k Tutorials.de Gastzugang
    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
     
  4. 01.04.05 05:55 #4
    Maik Tutorials.de Gastzugang
    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.
     
  5. 01.04.05 08:17 #5
    c2uk c2uk ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    335
    Eine Richtung, die Du ausprobieren kannst ist jedem Div display:inline; zu verpassen.
     
  6. 01.04.05 13:32 #6
    TiMbO2k Tutorials.de Gastzugang
    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
     
  7. 01.04.05 13:35 #7
    Maik Tutorials.de Gastzugang
    @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

    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
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken mehrere div Boxen mit fester Breite nebeneinander darstellen-ss.png  
     
  8. 01.04.05 16:06 #8
    TiMbO2k Tutorials.de Gastzugang
    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
     
« Darstellungsfehler in Firefox/Mozilla | CSS für gezeichnete Ebenen in externe Datei auslagern »

Ähnliche Themen

  1. 2 Boxen Nebeneinander und darunter wieder 2 Boxen
    Von FunkFlex im Forum CSS
    Antworten: 4
    Letzter Beitrag: 11.05.10, 17:42
  2. Selectfeld mit fester Breite im IE abgeschnitten
    Von Dustin84 im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 11.05.09, 12:09
  3. div mit fester und variabler Breite
    Von exxe im Forum CSS
    Antworten: 2
    Letzter Beitrag: 23.10.06, 11:57
  4. Div-Boxen nebeneinander
    Von schiese im Forum CSS
    Antworten: 1
    Letzter Beitrag: 08.08.06, 16:28
  5. Div boxen nebeneinander
    Von limk im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.08.05, 19:00