Einmal mehr: ungwollte Abstände

[IBeRKa]

Ahoy zusammen,

alles, was ich bisher im Forenarchiv zu dem Thema gefunden habe, das mich hier beschäftigt, ist dieser Thread:
http://forum.de.selfhtml.org/archiv/2006/9/t136073/#m883466

Aber der trifft es auch nicht richtig.

Ich habe ein paar ineinandergeschachtele Block-Elemente (DIV), die pixel-/passgenau vertikal aneinander angrenzen sollen.
Das tun sie auch.
...solange sie keine weiteren Block-Elemente enthalten, die einen margin haben.

Ich habe es mit zwei verschiedenen Verschachtelungs-Strukturen versucht, das Ergsbnis ist nur marginal unterschiedlich.

--- Struktur 1: -----------------------
<style type="text/css">
div#d13_wrapper {
 padding-top:   20px;
 background-image:  url("wrapper_a.gif"); /* */
 background-repeat:  no-repeat;
}
div#d13_wrapper div.bottom {
 padding-bottom:   30px;
 background-image:  url("wrapper_c.png"); /* */
 background-position:  bottom;
 background-repeat:  no-repeat;
}
div#d13_wrapper div.body {
 background-image:  url("wrapper_b.png"); /* */
 background-repeat:  repeat-y;
}
</style>
<div id="d13_wrapper"><div class="bottom"><div class="body">
 <div id="d13_content">
  <h1>Ja, das ist ein Problem!</h1>
 </div>
</div></div></div>
--- End 1 -----------------------

--- Struktur 2 (even worse): -----------------------
<style type="text/css">
div.d13_navigation_block .top {
 height:    15px;
 background-image:  url("menue_a.png");
 background-repeat:  no-repeat;
}
div.d13_navigation_block div.body {
 padding:   0 10px;
 background-image:  url("menue_b.png");
 background-repeat:  repeat-y;
}
div.d13_navigation_block div.bottom {
 height:    25px;
 background-image:  url("menue_c.png");
 background-position:  left bottom;
 background-repeat:  no-repeat;
}
</style>
<div class="d13_navigation_block"><div class="top"></div><div class="body">
 <p>Text...</p>
</div><div class="bottom"></div></div>
--- End 2 -----------------------

In der Praxis:
http://test.iberka.com/entwurf_tp/index.htm

So, was hab ich nun nicht bedacht, falsch gemacht, nicht gewußt, übersehen?
Es reicht ein Link, wo ich es nachlesen kann.

Gruß und Dank im Voraus,
Rüdiger

[Rüdiger]

Ahoy,

ich darf es - diesmal sauber formatiert - nochmal versuchen?

Alles, was ich bisher im Forenarchiv zu dem Thema gefunden habe, das mich hier beschäftigt, ist dieser Thread. Aber der trifft es auch nicht richtig.

Ich habe ein paar ineinandergeschachtele Block-Elemente (DIV), die pixel-/passgenau vertikal aneinander angrenzen sollen.
Das tun sie auch.
...solange sie keine weiteren Block-Elemente enthalten, die einen margin haben.

Ich habe es mit zwei verschiedenen Verschachtelungs-Strukturen versucht, das Ergsbnis ist nur marginal unterschiedlich.

--- Struktur 1: -----------------------

  
<style type="text/css">  
[code lang=css]  
div#d13_wrapper {  
  padding-top:        20px;  
  background-image:   url("wrapper_a.gif"); /* */  
  background-repeat:  no-repeat;  
}  
div#d13_wrapper div.bottom {  
  padding-bottom:       30px;  
  background-image:     url("wrapper_c.png"); /* */  
  background-position:  bottom;  
  background-repeat:    no-repeat;  
}  
div#d13_wrapper div.body {  
  background-image:   url("wrapper_b.png"); /* */  
  background-repeat:  repeat-y;  
}  

</style>
<div id="d13_wrapper"><div class="bottom"><div class="body">
  <div id="d13_content">
   <h1>Ja, das ist ein Problem!</h1>
  </div>
 </div></div></div>
[/code]
--- End 1 -----------------------

--- Struktur 2 (even worse): -----------------------

  
<style type="text/css">  
[code lang=css]  
div.d13_navigation_block .top {  
  height:             15px;  
  background-image:   url("menue_a.png");  
  background-repeat:  no-repeat;  
}  
div.d13_navigation_block div.body {  
  padding:            0 10px;  
  background-image:   url("menue_b.png");  
  background-repeat:  repeat-y;  
}  
div.d13_navigation_block div.bottom {  
  height:               25px;  
  background-image:     url("menue_c.png");  
  background-position:  left bottom;  
  background-repeat:    no-repeat;  
}  

</style>
<div class="d13_navigation_block"><div class="top"></div><div class="body">
  <p>Text...</p>
 </div><div class="bottom"></div></div>
[/code]
 --- End 2 -----------------------

...und hier das ganz in der Praxis

So, was hab ich nun nicht bedacht, falsch gemacht, nicht gewußt, übersehen?
Es reicht ein Link, wo ich es nachlesen kann.

[dey]

Hallo,

div.d13_navigation_block div.body {
  padding:            0 10px;
  background-image:   url("menue_b.png");
  background-repeat:  repeat-y;

border:1px solid green;

du hast irgendeine Problem mit der Abgrenzung.
Mit der border über FF editcss eingefügt richtet sich alles, wie gewünscht aus.
Mit nem hübschen grünen Rand, paßt segr gut in deinen Style.
Vielleicht hilft es dir trotzdm auf den richtigen Weg!?

bydey

[Detlef G.]

Hallo IBeRKa

Alles, was ich bisher im Forenarchiv zu dem Thema gefunden habe, das mich hier beschäftigt, ist dieser Thread. Aber der trifft es auch nicht richtig.

Dazu gibt es reichlich Treffer im Archiv, wenn man den richtigen Suchbegriff verwendet, allerdings kennt man diesen nur, wenn man die Ursache des Problems weiß.

Auf Wiederlesen
Detlef