✔ Box stylen

[GN911]

Hallo,

wie bekomme ich die Box so hin wie auf dem Bild?

<style type="text/css">
<!--
  * { margin: 0; padding: 0; }
  .box { overflow: hidden; width: auto; background: #fff url(top.gif) repeat-x top left; height: 1%; padding: 25px 0; margin: 1px 0; }
  * html > body .box { float: left; overflow: visible; }
  .boxcontent { margin: 25px 12px; }
  .boxfootershadow { height: 25px; background: #fff url(bottom.gif) repeat-x bottom left; }
-->
</style>

<div class="box">
  <div class="boxcontent">
    ContentBox 1
  </div>
  <div class="boxfootershadow"></div>
</div>

<div class="box">
  <div class="boxcontent">
    ContentBox 2
  </div>
  <div class="boxfootershadow"></div>
</div>

Gruß GN911

 

[Maik]

Hi,

wenn ich die Browserinterpretationen deines Codes mit dem Sollzustand-Schnappschuß vergleiche, und deine fehlende Ausführung, wo es bei der Umsetzung nun klemmt, mit dem Grafik-Anhang "slideIn.gif" in Verbindung bringe, lautet die Lösung wohl:

<div class="box"><img src="slideIn.gif" alt="">
  <div class="boxcontent">
    ContentBox 1
  </div>
  <div class="boxfootershadow"></div>
</div>

<div class="box"><img src="slideIn.gif" alt="">
  <div class="boxcontent">
    ContentBox 2
  </div>
  <div class="boxfootershadow"></div>
</div>

* { margin: 0; padding: 0; }
.box { overflow: hidden; width: auto; background: #fff url(top.gif) repeat-x top left; height: 1%; margin: 1px 0; }
.box img { float: right; }
.boxcontent { clear: both; margin: 0 12px; padding: 15px; border: 1px solid #666;  /* Rahmen dient hier nur zur Visualisierung der Boxengrenzen */ }
.boxfootershadow { height: 25px; background: #fff url(bottom.gif) repeat-x bottom left; }

Da dies von mir jetzt aber nur eine Mutmaßung ist, worauf du hier überhaupt hinaus willst, gilt natürlich: "Alle Angaben ohne Gewähr!"

In diesem Zusammenhang solltest du vielleicht mal interessehalber den Artikel Wie man Fragen richtig stellt lesen, um zu gewährleisten, dass dein Anliegen vom Leser auch nachvollziehbar ist, und es mangels näherer Angaben, Beschreibungen, Erläuterungen zum Sachverhalt nicht zu Mißverständnissen kommt.

Und was hat es denn mit dem Selektor "* html > body .box" auf sich?

Ich frag nur, weil der Star-HTML-Hack "* html" in der Browsergemeinde ausschließlich vom IE/Win (im "Standardsmode" bis einschließlich dem IE6, im "Quirksmode" auch vom IE7) interpretiert, jedoch der Kind-Selektor ">" von den "überholten" IE-Versionen (<7) überhaupt nicht unterstützt wird, und der IE7 sich wiederum im "Quirksmode" wie seine Vorgänger verhält, und den Kind-Selektor plötzlich nicht mehr kennt. Somit wird von keiner IE-Version diese CSS-Regel im HTML-Dokument angewendet.

mfg Maik

 

[GN911]

Hallo Maik,

sorry das ich mein Anliegen nicht richtig beschrieben habe.
Das ist aber das was ich brauche.
Das height: 1%; muss aber noch raus.

Ist das so Browser-kompatibel?

* { margin: 0; padding: 0; }
.box { overflow: hidden; width: auto; background: #fff url(top.gif) repeat-x top; margin: 1px 0; }
.box img { float: right; margin-right: 10px; }
.boxcontent { clear: both; margin: 0 12px; }
.boxfootershadow { height: 25px; background: #fff url(bottom.gif) repeat-x bottom left; }

Gruß GN911

 

[Maik]

Mit der height:1%-Deklaration funktioniert das Modell bei mir gleichermaßen, wie ohne sie ;-)

Und ja, das Stylesheet ist browserkompatibel.

mfg Maik

 

[GN911]

Hi Maik,

dank dir, ich gebe nen Bier aus


Gruß GN911

 

[GN911]

Hallo,

im IE 6 gibt es doch ein Problem: .box { margin: 1px 0; }
Zwischen den Boxen sollen 2px Zwischenraum sein, also obrigen Eintrag.
Im IE 6 klatsch er die Boxen aneinander?

*html .box { margin: 1px 0; } klappt nicht

Gruß GN911

 

[Maik]

Hi,

Das height: 1%; muss aber noch raus.

Ist das so Browser-kompatibel?

* { margin: 0; padding: 0; }
.box { overflow: hidden; width: auto; background: #fff url(top.gif) repeat-x top; margin: 1px 0; }
.box img { float: right; margin-right: 10px; }
.boxcontent { clear: both; margin: 0 12px; }
.boxfootershadow { height: 25px; background: #fff url(bottom.gif) repeat-x bottom left; }

Hallo,

im IE 6 gibt es doch ein Problem: .box { margin: 1px 0; }
Zwischen den Boxen sollen 2px Zwischenraum sein, also obrigen Eintrag.
Im IE 6 klatsch er die Boxen aneinander?

*html .box { margin: 1px 0; } klappt nicht

Dann schließen wir hier den Kreis ;-)

* { margin: 0; padding: 0; }
.box { overflow: hidden; width: auto; background: #fff url(top.gif) repeat-x top; margin: 1px 0; }
* html .box { height:1%; }
.box img { float: right; margin-right: 10px; }
.boxcontent { clear: both; margin: 0 12px; }
.boxfootershadow { height: 25px; background: #fff url(bottom.gif) repeat-x bottom left; }

mfg Maik

 

[GN911]

Morgen Maik,

danke funktioniert....


GN911