div table like desgin

Dragonfire · #1 (**permalink**) 05.05.2012, 19:38

Hi Community,

ich kämpfe seit längeren mit einem CSS, Container, div Probleme.
Schwer zu beschreiben ...

Aussehen soll es so (unter Chrome geht es auch):

http://img6.imagebanana.com/img/07ip...505_192624.jpg

unter FF und IE sieht es lieder so aus:
http://img7.imagebanana.com/img/gs03...505_192743.jpg

Beschreibung:
Ich wollte das verschiedene Div-Container (headline_xxx) mit verschiedener Breite die maximale Breite annehmen. Dazu habe ich den display der Container auf table, table-row, bzw. table-cell gesetzt.

Nun hätte ich gerne einen Abstand zwischen den Zeilen und zum Rand.
Dies ist ja über margin laut HTML Spezifikation nicht möglich.

Meine momentane Lösung über
border-spacing: 0px 5px;
und
padding: 5px 0px;
klappt nicht in allen Browsern.

Hat wer eine Idee?
Gibt es irgendwo eine gute Quelle zum nachlesen?
Falls wer eine besseren Vorschlag hat, der nicht auf JavaScript zurückgreift
(auch für andere Teile des Dokuments) bin ich ihm sehr Dankbar

Site:
http://www.dinkypage.com/148066
Hier der Quelltext:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Center # Test</title>
    <style type="text/css">
    .nc_large_box{
        margin: 5px;
        padding: 3px;
        background-color: #b9b9b9;
    }

    .nc_small_box_wrapperLeft{
        width: 50%;
        float: left;
    }

    .nc_small_box_wrapperRight{
        width: 50%;
        float: left;
        clear: left;
    }

    .nc_small_box{
        padding: 3px;
        margin: 0px 5px 5px 0px;
        background-color: #b9b9b9;
    }

    .nc_notifications{
        display: table;
        width: 100%;
        border-spacing: 0px 5px;
        padding: 0px 5px;
    }

    .nc_notification{
        display: table-row;
    }

    .nc_small_boxes{
        margin: 5px 0px 0px 5px;
    }

    .nc_head{
        display: table-cell;
        font-weight: bold;
        padding: 3px;
        background-color: #b9b9b9;
    }

    .nc_text{
        display: table-cell;
        width: 100%;
        padding: 3px;
        background-color: #b9b9b9;
    }
    </style>
  </head>
  <body>
    <div class="design_content_content">
      <h2>
        Headline
      </h2>
      <div>
        <div class="nc_large_box">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
          et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
          Lorem ipsum dolor sit amet.
        </div>
        <div class="nc_large_box">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
          et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
          Lorem ipsum dolor sit amet.
        </div>
      </div>
      <div class="nc_notifications">
        <div class="nc_notification">
          <span class="nc_head">headline_9:</span><span class="nc_text">Lorem
          ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_56789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_9:</span><span class="nc_text">Lorem
          ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_uvw123456789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_123456789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_uvw123456789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_123456789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_456789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_456789:</span><span class=
          "nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit
          amet</span>
        </div>
      </div>
      <div class="nc_small_boxes">
        <div class="nc_small_box_wrapperRight">
          <div class="nc_small_box">
            <h3>
              Headline
            </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="nc_small_box_wrapperLeft">
          <div class="nc_small_box">
            <h3>
              Headline
            </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="nc_small_box_wrapperRight">
          <div class="nc_small_box">
            <h3>
              Headline
            </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="nc_small_box_wrapperLeft">
          <div class="nc_small_box">
            <h3>
              Headline
            </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
  </body>
</html>

[HTML] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title - Pastebin.com

dazzle89 · #2 (**permalink**) 07.05.2012, 13:08

Ich verstehe das Problem nicht. Du möchtest Abstände zwischen den Zeilen und zum Rand? Die hast du doch in beiden Screenshots.

Ich rate einfach mal drauf los.

Füg bei den Styles folgendes hinzu:

Code:

* {
   margin: 0;
   padding: 0;
}

heiko_rs · #3 (**permalink**) 07.05.2012, 13:44

In Deinem Fall schaffen auch weiße borders Abstände. Und die verursachen, auf die Zellen angewandt, auch keine Boxmodelle-Konflikte (wie jetzt mit width:100%; der Tabelle).

Dragonfire · #4 (**permalink**) 07.05.2012, 14:14

Danke auf jedenfall ...
Das mit den Borders ist eine gute Idee ...
Werde ich nachher mal umsetzten.

Der untere Teil mit dem div (wrapper) der wieder div enthält kann man nicht anders lösen, oder?

@dazzle89:
Die Screenshots unterscheiden sich ...
Bei FF, IE ist die Kante rechts nicht sauber ...
Ab der dritten Box ragt es rechts hinaus ...

heiko_rs · #5 (**permalink**) 07.05.2012, 14:41

Zitat:

Zitat von Dragonfire

Der untere Teil mit dem div (wrapper) der wieder div enthält kann man nicht anders lösen, oder?

Ginge auch per table-Prinzip, oder was meinst Du?

Dragonfire · #6 (**permalink**) 07.05.2012, 14:57

K...
dann hätte man pro Zeile ein div gespart ...

Was sollte man denn bevorzugen?

heiko_rs · #7 (**permalink**) 07.05.2012, 15:27

%-Breiten, mit Ausnahme des Wertes 100%, bergen immer das Risiko von indifferenten Rundungen in den verschiedenen Browsern, d.h. das ganze Konstrukt kann damit (je nach Browser) auch mal einige Pixel zu breit oder zu schmal ausfallen (im Vergleich zu den übrigen Elementen mit voller Breite).

Das kann man zwar im Prinzip z.B. mit prophylaktischer Überbreite und overflow: hidden; für das Elternelement lösen, aber ob das geht bzw. sinnvoll ist, kommt auf's konkrete Design an.

Außerdem musst Du ohne table-Lösung erstmal das (wahrscheinlich unerwünschte) Verhalten ungleich hoher Spalten ändern, das auftreten wird, wenn ein div mal weniger Inhalt hat als das daneben stehende.

Ob ich mir das alles antun würde, nur um ein div zu sparen, weiß ich nicht. Evtl. ist die Frage eher, ob das Ganze auch im IE < 8 laufen bzw. identisch aussehen soll oder nicht.

In Deinem konkreten Fall wäre das Ganze allerdings einfach, auch im IE < 8. Gleich hohe Spalten bekommst Du folgendermaßen:

1. Ein Element, das alle divs umgibt, bekommt Grau als bg-Farbe (overflow: hidden; kann, muss aber nicht)
2. Alle divs floaten links mit 50% Breite und haben eine weiße border-top
3. Jedes linke div cleart links und bekommt eine weiße border-right
4. Jedes rechte div bekommt border-left und einen entsprechenden negativen margin-left (das schiebt die borders übereinander, so dass das Resultat immer komplett bis unten reicht), sowie zum Ausgleich der allgemeinen Überbreite (durch 50% plus seitliche border) auch einen negativen margin-right

Evtl. nimmst Du auch jeweils geringfügig weniger als 50%, damit von beiden divs möglichst gleich viel zu sehen ist (der Unterschied ist aber auch so nur minimal).

Der IE < 8 bekommt dann noch ein inline-block-Verhalten, und stellt das Ganze dann genau so dar wie der Rest.

Dragonfire · #8 (**permalink**) 07.05.2012, 15:44

Vielen dank werde das nachher mal ausprobieren

###

Bin endlich mal zum ausprobieren gekommen,
danke ...
der mittlere Teil ist nun überall so wie gewünscht,
dank border an den Zellen ...

###

Habe mal versucht, den Vorschlag umzusetzen:

Zitat:

Zitat von heiko_rs

1. Ein Element, das alle divs umgibt, bekommt Grau als bg-Farbe (overflow: hidden; kann, muss aber nicht)
2. Alle divs floaten links mit 50% Breite und haben eine weiße border-top
3. Jedes linke div cleart links und bekommt eine weiße border-right
4. Jedes rechte div bekommt border-left und einen entsprechenden negativen margin-left (das schiebt die borders übereinander, so dass das Resultat immer komplett bis unten reicht), sowie zum Ausgleich der allgemeinen Überbreite (durch 50% plus seitliche border) auch einen negativen margin-right

Evtl. nimmst Du auch jeweils geringfügig weniger als 50%, damit von beiden divs möglichst gleich viel zu sehen ist (der Unterschied ist aber auch so nur minimal).

Ich kann in den small_box_wraperX kein padding setzen,
aus welchem Grund auch immer ...

Center # Test

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title>
      Center # Test
    </title>
    <style type="text/css">
    
.design_content_content{
    background-color: #dfdfdf;
}
    
.nc_large_box{
    margin: 5px;
    padding: 3px;
    background-color: #b9b9b9;
}

.nc_small_box_wrapperLeft{
    width: 50%;
    clear: left;
    float: left;
    background-color: #b9b9b9;
    border-top: 5px solid #dfdfdf;
}

.nc_small_box_wrapperRight{
    width: 50%;
    float: left;
    background-color: #b9b9b9;
    margin-left: -5px;
    margin-right: -5px;
    border: 5px solid #dfdfdf;
    border-bottom-width: 0px;
    border-right-width: 0px;
}

.nc_small_box{
    padding: 3px;
    margin: 0px 5px 5px 0px;
    background-color: #b9b9b9;
}

.nc_notifications{
    display: table;
    width: 100%;
}

.nc_notification{
    display: table-row;
}

.nc_small_boxes{
    margin: 0px 5px 0px 5px;
}

.nc_head{
    display: table-cell;
    font-weight: bold;
    background-color: #b9b9b9;
    padding: 3px;
    border: 5px solid #dfdfdf;
    border-bottom-width: 0px;
}

.nc_text{
    display: table-cell;
    width: 100%;
    background-color: #b9b9b9;
    padding: 3px;
    border: 5px solid #dfdfdf;
    border-left-width: 0px;
    border-bottom-width: 0px;
}
    </style>
  </head>
  <body>
    <div class="design_content_content">
      <h2>
        Headline
      </h2>
      <div>
        <div class="nc_large_box">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="nc_large_box">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
      </div>
      <div class="nc_notifications">
        <div class="nc_notification">
          <span class="nc_head">headline_6789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_w123456789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_3456789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_uvw123456789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_uvw123456789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_3456789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
        <div class="nc_notification">
          <span class="nc_head">headline_23456789:</span><span class="nc_text">Lorem ipsum <span style="color:red;">dolor</span> sit amet</span>
        </div>
      </div>
      <div class="nc_small_boxes">
        <div class="nc_small_box_wrapperLeft">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="nc_small_box_wrapperRight">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="nc_small_box_wrapperLeft">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="nc_small_box_wrapperRight">
          <h3>
            Headline
          </h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
  </body>
</html>

heiko_rs · #9 (**permalink**) 09.05.2012, 09:35

Es ist noch nicht so, wie es sein soll, was Du auch siehst wenn links & rechts mal unterschiedlich hoch sind.

Dragonfire · #10 (**permalink**) 09.05.2012, 21:21

Leider ...
also einmal das height-Problem,
was du angesprochen hast:

Center # Test

und das padding Problem:

Center # Test

Also das height-Probleme kann ich fast lösen,
aber auch nur mit meiner Ansicht zu vielen div's und
rechts bekomme ich den Abschluss nicht hin ...
was habe ich da falsch gemacht?

Center # Test

mit div table's geht es so wie alles soll

Center # Test

Sollte ich also lieber den table 'Modus' nehmen, oder wie geht es sonst geschickt?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
Myspace problem... Rechte Säule verschiebt sich im IE.	calledmarcel	CSS	1	27.02.2009 09:12