tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von djheke
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
787
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 24.11.11 10:25 #1
    Avatar von _voodoo
    _voodoo _voodoo ist offline
    Registriert seit
    May 2002
    Ort
    50.59° Nord 11.21° Ost
    Beiträge
    1.837
    Hallo liebes Forum,
    ich habe hier ein Problem mit css Boxen, das ich so grad nicht gelöst bekomme
    HTML-Code:
    <style>
div.box
{
width:250px;
float:left;
border: solid 1px #000;
font-size:150px;
text-align:center;
}
div.container
{
width:600px;
}
</style>
<!-- (...) //-->
<div class="container">
<div class="box" style="height: 250px">1</div>
<div class="box" style="height: 350px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box" style="height: 250px">4</div>
</div>
    Was ich möchte, ist dass Box 3 die Lücke nach oben zur 1 schließt und aufrückt.

    Ist denn sowas ohne größeren Aufwand überhaupt möglich?

    Ich danke euch für die Hilfe
     
    »
    Zitieren Zitieren
  2. 24.11.11 10:39 #2
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Also, wenn eine Box 250px breit ist und dein umschließender Container nur 600px hat, wird es nichts.

    Nimm die width-Angabe für .container raus. Oder du passt die Breite neu an. Wenn ich dich richtig verstanden habe, sollen jeweils 3 Boxen nebeneinander stehen.
    So ergibt sich für .container folgende Breite.

    3 x 250px + 2 x 3px Border link/rechts = 750px + 6px = 756px.Möchtest du später noch Außen- und Innenabstände, mußt du diese auch berücksichtigen.
     
    Zitieren Zitieren
  3. 24.11.11 10:54 #3
    Avatar von _voodoo
    _voodoo _voodoo ist offline
    Registriert seit
    May 2002
    Ort
    50.59° Nord 11.21° Ost
    Beiträge
    1.837
    Ich habe den Container bewusst 600px breit gemacht, damit 2 Boxen nebeneinander angezeigt werden.
    Mein Ziel ist es, die Boxen vertikal aneinander zu bringen, also den selben Abstand zueinander wie horizontal.
    Code :
    1
2
3
4
5
6
7
8
9
10
11

    +------------+  +------------+
|            |  |            |
|            |  |            |
+------------+  |            |
+------------+  |            |
|            |  +------------+
|            |  +------------+
|            |  |            |
|            |  |            |
|            |  +------------+
+------------+
     
    »
    Zitieren Zitieren
  4. 24.11.11 15:00 #4
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    So geht's.

    Wenn du CSS3 nutzen möchtest, kannst du auch den auskommentierten Selektorblock nutzen. Dafür brauchst du dann keine neue Klasse.
    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
35
36
37

    .box {
 width:250px;
 float:left;
 border: solid 1px #000;
 font-size:150px;
 text-align:center;
 background:#aaa;
 margin-top:10px ;
}
 
/*
.box:nth-child(2n){ 
 float:right; 
 background:#ade;
}
*/
 
.rechts {
 float:right;
 background:#ade;
}
 
.container {
 width:514px;
 float:left;
 background:#ddd;
 padding:10px 10px 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="height: 250px">1</div>
<div class="box rechts" style="height: 350px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box rechts" style="height: 250px">4</div>
</div>

    Beispiel
    Geändert von djheke (24.11.11 um 15:24 Uhr)
    _voodoo bedankt sich. 
    Zitieren Zitieren
  5. 24.11.11 17:30 #5
    Avatar von _voodoo
    _voodoo _voodoo ist offline
    Registriert seit
    May 2002
    Ort
    50.59° Nord 11.21° Ost
    Beiträge
    1.837
    CSS3 ist doch noch nicht fertig gestellt und einheitlich in allen Browsern implementiert?

    Danke schonmal für deinen Code, das schaut sehr inspirierend aus!
    Was passiert aber, wenn Zwei Boxen in der "linken Spalte" eine geringere Höhe haben, als eine Box rechts ... *klick*
     
    »
    Zitieren Zitieren
  6. 24.11.11 18:28 #6
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Na dann mach es so
    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
35
36
37
38
39
40
41

    .box {
 width:250px;
 border: solid 1px #000;
 font-size:50px;
 text-align:center;
 background:#aaa;
 margin-bottom:10px;
}
 
#links {
 float:left;
}
 
#rechts {
 float:right;
}
 
.container {
 width:514px;
 float:left;
 background:#ddd;
 padding:10px 10px 0 10px;
}
 
<div class="container">
 
<div id="links">
<div class="box" style="height: 150px">1</div>
<div class="box" style="height: 500px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box" style="height: 300px">4</div>
</div>
 
<div id="rechts">
<div class="box" style="height: 300px">5</div>
<div class="box" style="height: 100px">6</div>
<div class="box" style="height: 400px">7</div>
<div class="box" style="height: 300px">8</div>
</div>
 
</div>
    hier
    Geändert von djheke (24.11.11 um 18:35 Uhr)
     
    Zitieren Zitieren
  7. 29.11.11 15:30 #7
    Avatar von Zack
    Zack Zack ist offline cookies vader
    Registriert seit
    Oct 2007
    Ort
    hier und dort
    Beiträge
    258
    Zitat Zitat von _voodoo Beitrag anzeigen
    CSS3 ist doch noch nicht fertig gestellt und einheitlich in allen Browsern implementiert?
    Wenn es nach den Browserherstellern geht, wird CSS 3 niemals fertig sondern einfach immer weiter entwickelt. In allen aktuellen Browsern, ja auch IE!!, werden sehr viele Eigenschaften schon unterstütz. Dazu gehören auch die tollen neuen Selectoperatoren .
     
    Und was lernen wir darauf? Es niemals versuchen! (Homer Jay Simpson)
    127.0.0.1 Home! Sweet Home!

    Ich würde mich über eine Bewertung meiner Beiträge freuen!
    Zitieren Zitieren
« print.css Problem(e) ... (Es wird nur eine Seite gedruckt - abgeschnitten) | Scrollbar für Firefox verändern »

Ähnliche Themen

  1. SVG-Datei in verschieden große .jpg oder .png speichern.
    Von Matthias_Mac im Forum Java
    Antworten: 1
    Letzter Beitrag: 11.05.09, 11:53
  2. drei Boxen richtig floaten und Anordnen
    Von Xtler im Forum CSS
    Antworten: 3
    Letzter Beitrag: 13.04.08, 19:18
  3. Überlappende Div-Boxen anordnen lassen
    Von taris_gedar im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 10.04.07, 13:05
  4. Boxen anordnen
    Von marciboy im Forum CSS
    Antworten: 25
    Letzter Beitrag: 25.03.06, 13:02
  5. Boxen anordnen
    Von marciboy im Forum PHP
    Antworten: 20
    Letzter Beitrag: 25.03.06, 12:20