flexible Box mit Rundungen und Schatten

[andy1304]

Hallo zusammen,

ich steh irgenwie komplett auf dem Schlauch und finde einfach den Fehler nicht. Ich will eine Box erstellen, die eine feste Breite hat, jedoch in der Höhe flexibel ist - je nach Inhalt. Um die Box gibt es einen Rahmen mit "runden Ecken" und Schatten an der rechten Seite und unten. Dazu habe ich 3 Grafiken erstellt, welche als Hintergrundbilder eingebaut sind. Die obere und untere Grafik umfasst jeweils die Rundungen, die mittlere nur die rechte und linke Linie sowie den Schatten.

Hier mein Code dazu:

<div class="box770">
    <div class="box1_top">
        <div class="box1_middle">
            <div class="box_content">Hier der Inhalt</div>
            <div class="box1_bottom"></div>
        </div>
    </div>
</div>

Und das CSS:

.box770 {
    width: 773px;
}
.box_content {
    padding: 20px 20px 20px 20px
}
.box1_top {
    background: url(../images/box1_top.jpg) no-repeat top;
  }
.box1_middle {
    background: url(../images/box1_middle.jpg) repeat-y ;
}
.box1_bottom {
    background: url(../images/box1_bottom.jpg) no-repeat bottom;
 }

Ich bekomme einfach nicht die obere und untere Grafik angezeigt. Gebe ich der class box1_bottom eine Höhe, wird zumindest diese angezeigt, die obere weiterhin nicht. Würde mich freuen, wenn jemand eine Idee hat, die mir da weiter hilft.
Danke und viele Grüße
Andy

 

[MyBad]

AW: flexible Box mit Rundungen und Schatten

Du musst für box_top und box_bottom eine Höhe angeben. Und zwar so hoch, wie auch die Grafik ist.

 

[andy1304]

AW: flexible Box mit Rundungen und Schatten

Danke für Deine Antwort. Mit der Höhenangabe für box_bottom funktioniert es ja. Aber leider nicht mit box_top. Diese wird trotz Höhenangabe nicht angezeigt.

 

[Master-B]

AW: flexible Box mit Rundungen und Schatten

Bei mir gehts so:

...
.box1_top {
    background: url(../images/box1_top.jpg) no-repeat top;
	 height:10px;
  }
...
.box1_bottom {
    background: url(../images/box1_bottom.jpg) no-repeat bottom;
	 height: 10px;
 }

<div class="box770">
    <div class="box1_top"></div>
        <div class="box1_middle">
            <div class="box_content">Hier der Inhalt</div>
        </div>
    <div class="box1_bottom"></div>
</div>

 

[andy1304]

AW: flexible Box mit Rundungen und Schatten

Oh man. Manchmal sieht man den Wald vor lauter Bäumen nicht. Den div hinter box1_top schließen - und schon klappts. Danke Euch!

 

[Doitsu]

AW: flexible Box mit Rundungen und Schatten

.. hat den Nachteil, dass oben ein gewisser Abstand entsteht, da ich neicht weiss wie die Grafiken genau aussehen, ist es schwer zu sagen wie schlimm es ist.
Ein anderer loesungsweg waere den box_top Container in den box_middle zu packen, da du sonst das Hintergrundbild ueberdeckst.

Sprich:

<div class="box770">
	<div class="box1_middle">
		<div class="box1_bottom">
    			<div class="box1_top">
            			<div class="box_content">Hier der Inhalt</div>
			</div>
		</div>
	</div>
</div>

 

[MegaAdi]

AW: flexible Box mit Rundungen und Schatten

Schaut euch mal DIESE Webseite an. Ich denke das wäre auch ne Überlegung wert

Gruß Adrian

 

[Master-B]

AW: flexible Box mit Rundungen und Schatten

Boxen mit Rundungen sind, auch ohne CSS3, garnicht so schwer. Du brauchst nur eine (1) Grafik, in der Oben, Mitte und Unten ist.
Per CSS verschiebst du die Grafik.

Auf dieser Webseite -> Hermann Sprenger GMBH habe ich es auch so gelöst.

Die Grafik -> http://teppichkante.de/psd-tutorials/main_box.png hat nur 701 Byte!
CSS:

.mainbox_top {
	width:630px;
	height:10px;
	background: transparent url(Pfad_zur_Grafik/main__box.png) no-repeat -10px 0px;
	}
.mainbox {
	width:590px;
	padding:0 50px 0 20px;
	background: transparent url(Pfad_zur_Grafik/main__box.png) repeat-y -1310px 0px;
	}
.mainbox_bottom {
	width:630px;
	height:10px;
	background: transparent url(Pfad_zur_Grafik/main__box.png) no-repeat -660px 0px;
	}

Code:

<div class="mainbox_top"></div>
	<div class="mainbox">
		<p> INHALT </p>
	</div>
<div class="mainbox_bottom"></div>

 

[andy1304]

AW: flexible Box mit Rundungen und Schatten

Guten Morgen,

danke Euch für die Tipps. Da sind interessante Ansätze dabei, die ich mir mal anschauen werde.

@Doitsu: Einen Abstand kann ich im FF nicht feststellen, muss das aber noch in anderen Browsern testen.

Ich wünsche Euch einen sonnigen Samstag.