Verschachtelte Divs, border, margin erzeugt falsche anzeige

[Milchknilch]

Hallo  Ihr spezialisten,

ich bin knapp davor mit dem Kopf durch die Wand zu rennen. Und bevor ich danach zum Arzt muss, schau ich erstmal hier vorbei.

Ich habe 4 verschachtelte Divs wie folgt:

<div id='container_bg_top'>
  <div id='container_bg_bottom'>
   <div id='container_main'>
    <div id='container_navi'>
     </div>

<div id='container_sidebar_right'>
    </div>

<div id='container_content'>

</div>
    <br /><br />
    <div id='container_footer'>
    </div>
   </div>
  </div>
 </div>

-------CSS-----------------------------------------

body
{
 margin: 0px;
 padding: 0px;
 background: #ffffff url(images/bg_body.jpg) top center repeat-y;
 font-family: Arial, 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', Trebuchet, sans-serif;
 font-size: 12px;
 color: #333333;
 border: 10px solid #ff0000;
}

#container_bg_top
{
 width: 100%;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 background: transparent url(images/bg_top.jpg) top center no-repeat;
 outline: 1px solid #ff0000;
}

#container_bg_bottom
{
 width: 100%;
 margin: 0px;
 background: transparent url(images/bg_bottom.jpg) bottom center no-repeat;

}

#container_main
{
 width: 700px;
 margin: 0px auto;
}

#container_navi
 {
  width: 360px;
  height: 280px;
 }

--------------------------------------------------

Das Problem ist nun folgendes
gebe ich in container navi einen margin-top an, so wendet Opera und Firefox (mit denen arbeite ich momentan)  den margin auf das div container_bg-top an... Das macht meiner meinung nach überhaupt keinen sinn. Die margin angabe in container_bg_top hat absolut keine auswirkungen mehr...

Aber jetzt kommts, wenn das container_bg_top div eine border von min1 px bekommt, dann funktioniert alles wie es soll

Ich wäre sehr dankvar, wenn mir das einer schlüssig erklären könnte. Ich bin mit meinem Css echt am Ende.

Gruß Milchknilch

[J.P.]

ich bin knapp davor mit dem Kopf durch die Wand zu rennen. Und bevor ich danach zum Arzt muss, schau ich erstmal hier vorbei.

Geht mir ähnlich, siehe meinen letzten Beitrag ;-(

Du sagst mit Border gehts ?
Dann mach doch einen transparenten/unsichtbaren border.

Aber wahrscheinlich willst du keine Lösung, sondern so wie
ich auch, das Problem verstehen.

Ich äreger mich auch dauernd über CSS und dennoch finde
ich es toll. Nur sollte man jemand eine komplett neue
Version ala newcss schreiben  damit wirklich mal
die Grundgedanken umgesetzt werden könnten.

Auch wenn ich die Fans von CSS jetzt ärgere, CSS zum Kotzen
wenn es um hochwertiges Design geht. Jaja jetzt kommen
wieder die Aussagen guck dir das mal an und das und das...

JA , es gibt schöne Seiten nur mit CSS, aber der Aufwand dahinter
steht im kompletten Gegensatz zu dem was CSS eigentlich
können sollte, nämlich alles einfacher und flexibler.

Bestes Beispiel ist doch der beliebte ZENGARDEN,
Nix mit eine Million Design und alle passen auf,
eine HTMLDatei. Von wegen , die schönen sind nur durch
Hintertürchen, Pseudoklassen und externe Grafiken entstanden.
Die anderen gleichen sich wie ein Ei dem anderen mit Ausnahme
der Position und Farbe und Hintergrundgrafik. Das kann auch JS.

Ich ärgere mich ja nur darüber, weil ich mich immer wieder
dazu hinreissen lasse, alles in CSS machen zu wollen und
am Ende sehe, es geht doch nur vernünftig als Kombi
mit Tabellen.

*Wollte ich mal loswerden, jetzt gehts mir besser ;-)

[Felix Riesterer]

Liebe(r) J.P., lieber Milchknilch,

Ihr Beiden schreibt leider absolut unsemantischen Code. Diese DIV-Suppe ist nicht wirklich sinnvoll. Nutzt doch die zur Verfügung stehenden (X)HTML-Elemente, um Euren Inhalt semantisch auszuzeichnen! Dann entfallen einige sinnfreie DIVs, und das CSS wird dadurch noch griffiger, weil nicht alles eine Klasse oder ID braucht, um "angesprochen" zu werden!

Was ist denn an einer semantischeren Struktur wie der folgenden so schwer?

<div id="container">  
   <div id="content">  
      <h1>Überschrift (Thema)</h1>  
      <p>Einleitungstext...</p>  
      <h2>Kapitel</h2>  
      <p>Inhalt...</p>  
   </div>  
   <div id="navigtion">  
      <h2>weitere Links</h2>  
      <ul>  
         <li><a href="">11</a></li>  
         <li><a href="">12</a></li>  
         <li><a href="">13</a></li>  
      </ul>  
   </div>  
</div>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Ingo Turski]

Hi,

JA , es gibt schöne Seiten nur mit CSS, aber der Aufwand dahinter
steht im kompletten Gegensatz zu dem was CSS eigentlich
können sollte, nämlich alles einfacher und flexibler.

Für dich vielleicht - weil Du noch nicht genügend Erfahrung hast.
Was CSS hin und wieder kompliziert macht, ist das Umschiffen der mangelnden CSS-Fähigkeiten des IE. Nicht selten brauchte ich allein dazu mehr Zeit, als für das Erstellen der in standardkonformen Browsern korrekt angezeigten Seite.

Bestes Beispiel ist doch der beliebte ZENGARDEN,
Nix mit eine Million Design und alle passen auf,
eine HTMLDatei. Von wegen , die schönen sind nur durch
Hintertürchen, Pseudoklassen und externe Grafiken entstanden.

Das sind nunmal die Mittel von CSS - warum sollte man sie nicht nutzen?

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

ich bin knapp davor mit dem Kopf durch die Wand zu rennen. Und bevor ich danach zum Arzt muss, schau ich erstmal hier vorbei.

@Milchknilch:
Schön, dich vorher nochmal zu sehen; hinterher gibst du sicher einen unappetitlichen Anblick.

Nur sollte man jemand eine komplett neue
Version ala newcss schreiben  damit wirklich mal
die Grundgedanken umgesetzt werden könnten.

Nein, mit CSS 2.0 (ja ich meine 2.0, nicht 2.1!) lassen sich schon sehr viele Sachen beschreiben, wenn es nur Nutzerprogramme geben würde, die das alles umsetzen würden.

Bestes Beispiel ist doch der beliebte ZENGARDEN,
[…] Von wegen , die schönen sind nur durch
Hintertürchen, Pseudoklassen und externe Grafiken entstanden.

“Requirements: We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public.” [CSSZENGARDEN]

Das kann auch JS.

?? Was hat JavaScript damit zu tun?

am Ende sehe, es geht doch nur vernünftig als Kombi
mit Tabellen.

Alles, was mit Tabellen geht, geht auch mit anderen HTML-Elementen. (CSS-fähiges Nutzerprogramm vorausgesetzt).

*Wollte ich mal loswerden, jetzt gehts mir besser ;-)

Klar, hast dich ja eines Haufens Unsinn aus deinem Kopf entledigt. ;-)

See ya up the road,
Gunnar

[MudGuard]

Hi,

Ich habe 4 verschachtelte Divs wie folgt:

Warum?

gebe ich in container navi einen margin-top an, so wendet Opera und Firefox (mit denen arbeite ich momentan)  den margin auf das div container_bg-top an...

Natürlich. Sie halten sich an die Vorgaben von CSS.

Die margin angabe in container_bg_top hat absolut keine auswirkungen mehr...

Doch, durchaus, wenn sie groß genug ist.

Aber jetzt kommts, wenn das container_bg_top div eine border von min1 px bekommt, dann funktioniert alles wie es soll

Auch das ist das zu erwartende Verhalten.

Ich wäre sehr dankvar, wenn mir das einer schlüssig erklären könnte.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

cu,
Andreas

[Milchknilch]

Hallo Andreas,

Wow ich bin platt, ich hätte fast meine Hand dafür ins Feuer gelegt, dass das ein Bug ist. Danke für den Link.

Bleibt nur noch eine Frage übrig, für was? Wer denk sich den so einen (sorry) Schwachsinn aus? Gibt es tatsächlich Fälle wo das Sinn macht?