• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit DIV Container nebeneinander

M

mr_transistor

Neues Mitglied
Hallo!

ich habe folgendes problem:
ich habe 2 DIV Container, die jeweils 480px breit sind. und einen abstand zwischen den beiden von 12px haben. Die gesamtbreite des hauptcontainers ist 984px.

ich möchte darunter 4 DIV Container positionieren.
jedes der div container ist 230px breit. es sollen immer 2 container unter einem 480 breiten Container ausgerichtet sein.

Zusätzlich möchte ich in jedem der Container mit einem Padding-left von 10px einen Text setzen.

Jetzt habe ich das Problem,dass mir immer die letzte Box umbricht...

Irgendwie habe ich einen Rechenfehler dabei

#zwei_oberenboxen{
margin-top: 15px;
width: 984px;
height: 300px;
}

#obereboxlinks{
float:left;
width:480px;height:300px;
padding-right: 12px;
}

#obereboxrechts{
float:left;
margin-left: 12px;
width:480px;height:300px;
}


#box1{
float:left;
padding-top: 10px;
padding-left: 10px;
width:230px;height:300px;
}

#box2{
float:left;
margin-left: 10px;
padding-top: 10px;
padding-left: 10px;
margin-right: 12px;
width:230px;height:300px;

}

#box3{
float:left;
padding-top: 10px;
padding-left: 10px;
width:230px;height:300px;
}

#box4{
float:left;
padding-top: 10px;
margin-left:10px;
width:230px;height:300px;
}

Vielen Dank für Eure Hilfe
mr_transistor
 
Hallo,

normal ist dies eine Frage an das css-forum.

Normal müsste es gehen, wohlmöglich hast du noch weitere angaben im css gemacht.

hier ein kleines codebeispiel welches das ganze "einfacher" löst:


html:
Code: 
<div id="over">
   <div class="box480">
   </div>

   <div class="box480">
   </div>

   <div class="box230">
   </div>

   <div class="box230">
   </div>

   <div class="box230">
   </div>

   <div class="box230">
   </div>
</div>
css:
Code: 
div {  border:1px solid; }
#over { width: 984px; height: 100%; }
.box480 { width: 480px; height: 300px; margin-left: 12px; }
.box230 { width: 230px; height: 300px; margin-left: 12px; }
Bedenke, dass der innenabstand mit padding gemacht wird, der außenabstand mit margin.

Gruß
Loon3y
 
Warum so viele feste Größen? Die Viewports Deiner Besucher sind auch alle unterschiedlich, bestimmt gibts auch viele, deren Viewport kleiner als 984px breit ist (die Auflösung ist ja eh irrelevant). Und außerdem kann man ja noch die Schriftgröße variabel einstellen, das zerschießt auch oft genug pixelgenaues Layout...

Aber wenn Du unbedingt pixelgenau rechnen musst, dann bedenke, dass die Breite eines Elements sich errechnet aus margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.

Das ist das CSS Box Model.
 
hallo!

danke für deine codestücke, jedoch habe ich hier genau das gleiche problem!
durch das margin-left:12px wird genau bei der linken 480er box ein linker rand von 12px gemacht, dies soll aber nicht sein, erst zwischen den beiden.

das gesamtgebilde soll so sein, dass oben die beiden großen boxen sind und darunter jeweils 2 boxen damit dies einen gleichen abstand ergibt.

was meint ihr dazu?

nochmals zu den 984px. ich habe aussen einen gesamtcontainer mit der breite von 984 aufgezogen, da ich das gesamtgerüst zentriert darstellen möchte da auch noch andere boxen (header und footer hier integriert sind.)
bzgl. der height von 100% gebe ich vollkommen recht hier eine absolute px angabe zu machen ist nicht so gut.

lg bis bald
mr_transistor
 
hallo!

ich habe jetzt nochmals den code modifiziert, jedoch schliessen die bixen in der mitte etc. nicht genau ab, wenn ich die boxen mit einem bild genau 480x300 bzw 230x300 als hintergrundbild hinterlege und den border wegnehme tritt dies auf. (die bilder sind genau in der größe)
Code: 
div {  border:0px solid; }
#over { width: 984px; height: 100%; }
.box480 {float:left; width: 480px; height: 300px; 
}
.box4802 {float:right; width: 480px; height: 300px; 
}
.box2301 { float:left; width: 230px; height: 300px;}
.box2302 { float:left;width: 230px; height: 300px; margin-left: 20px; }
.box2303 {float:left;width: 230px; height: 300px; margin-left: 20px; }
.box2304 {float:left;width: 230px; height: 300px; margin-left: 20px; }

wo habe ich noch einen denkfehler??

danke für eure hilfe
mr_transistor
 
Wenn jede Box einen padding-left-Wert von 10px hat, dann sind die großen Boxen 490px und die kleinen 240px breit.

Lass mal zunächst das margin weg.

Zwischen den beiden großen Boxen verbleibt bei 984px Gesamtbreite ein Abstand von 4px: 984 -(2x490)
Ausgehend von einer 490er Box sind die beiden kleinen darunter inkl. Padding je 240px breit.
Somit bleibt zwischen ihnen ein äußerer Zwischenabstand von 10px.

Zwischen der zweiten und dritten kleinen Box muss der Abstand dann wie oben wieder 4px sein.
 
mr_transistor schrieb:
durch das margin-left:12px wird genau bei der linken 480er box ein linker rand von 12px gemacht, dies soll aber nicht sein, erst zwischen den beiden.
Zum Vergrößern anklicken....
Abstände und Ränder gehören immer zum Element dazu. Durch ein margin-left wird ein Element nach links um den entsprechenden Wert verbreitert. Da kannst Du wollen, dass das nicht so ist, so viel Du willst, das ist nunmal so :-)

nochmals zu den 984px. ich habe aussen einen gesamtcontainer mit der breite von 984 aufgezogen, da ich das gesamtgerüst zentriert darstellen möchte da auch noch andere boxen (header und footer hier integriert sind.)
Zum Vergrößern anklicken....
Das Zentrieren hat nichts mit der fixen Größenangabe zu tun. Auch mit width:30% oder widht:48em kann man ein Element zentrieren.
 
hallo und guten morgen!

wie ich sehe hab ich hier einen kleinen fehler in meiner realisierung...

wie löse ich dann das problem am elegantesten? wie ich schon oben geschrieben haben habe ich es mit 2 oben situierten boxen der breite 480 (so groß sind die hintergrundgrafiken) und unten 3 boxen mit jeweils 230 breite (auch wieder hintergrundgrafiken) zu tun.
diese sollen so angeordnet sein, dass unter den großen boxen immer 2 boxen mit der aussenkannte passend positioniert sind.

das ganze design soll immer zentriert zu bildschirm erscheinen.

weiters wollte ich mit dem padding folgendes bewirken, da ich innerhalb den boxen text einfügen möchte wollte ich den innenrand verwenden.
(ist es hier besser nochmals div container innnerhalb der boxen zuverwenden? bzw. 2 container (für überschrift bzw. dann unorderd list oder text...)

danke für eure hilfe
lg
mr_transistor
 
mr_transistor schrieb:
wie löse ich dann das problem am elegantesten?
Zum Vergrößern anklicken....

steht mehrfach oben. :-)

das ganze design soll immer zentriert zu bildschirm erscheinen.
Zum Vergrößern anklicken....
zentriert wird mit "margin:0em auto;" und zuweisen einer "width"

weiters wollte ich mit dem padding folgendes bewirken, da ich innerhalb den boxen text einfügen möchte wollte ich den innenrand verwenden.
Zum Vergrößern anklicken....
wenn du, wie in deinem beispiel, ein <div> außenrum hast, kannst du den elementen innerhalb ein padding geben. Sprich..

html:
Code: 
<div id="box">
   <h2>Hallo du</h2>
   <p> ich bin der text </p>
</div>
css:
Code: 
#box h2 { padding: 1em; font-size: 1.4em; }
#box p { padding: 0.5em 1em; }
Natürlich kannst du auch standardmäßig für alle elemente "p" oder "h2" die werte festlegen, so wie in diesem beispiel würde es nur für alle elementen innerhalb der "box" die werte übernommen werden.


Gruß
Loon3y
 
hallo!

danke für deine rückmeldung!

jedoch habe ich ja noch das problem mit dem padding, wie prm angesprochen hat bei der box2304 dass diese nicht ganz rechts abschliesst. oder auch bei anderen angaben bricht die 4 box darunter um.

die breite der 984px kommt daher da die headergrafik 984px breit ist.
den divcontainer über alle 5 boxen (2 x 480 und 4x230) war deswegen gewählt. soll ich diesen wegnehmen?

lg vielen dank
mr_transistor
 
zum verständnis:

wenn ich 4 boxen nebeneinander aufgeteilt mit margin-right:20x; aufteile komme ich schön hin (border: 0px) sobald ich aber padding-left:10px in einer box mache bricht die 4 box um.

sollte ich in jede box 2 div container mit height und weight:auto machen um meine texte zu setzen? oder würdet ihr das anders lösen?

wenn ich das padding wie loon3y vorschlägt setze habe ich auch die umbrücke der 4 box.

lg und danke für die hilfe
mr_transistor
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben