von Table zu sauberen CSS

[|23|]

wie kann man soetwas in css umsetzen:

		        <table width="95%" cellpadding="0" cellspacing="0" class="marggin10">
		                <tr height="30">
		                <td width="20" background="img/box/links_oben.jpg"></td>
		                <td background="img/box/mitte_oben.jpg"><font style="font-size:14px; color:#525049;"><b><?php echo $top ?></b></font></td>
		                <td width="10" background="img/box/rechts_oben.jpg"></td>
		                </tr>
		                <tr>
		
		                <td width="20" background="img/box/links_unten.jpg" style="background-repeat:repeat-x;"></td>
		                <td background="img/box/mitte_unten.jpg" style="background-repeat:repeat-x;" valign="top"><br>
		
		                <table width="90%" cellpadding="0" cellspacing="2" border="0">
		         		<br><?php echo $text ?> 
		                </table><br>
		
		                </font></td>
		                <td width="10" background="img/box/rechts_unten.jpg" style="background-repeat:repeat-x;"></td>
		                </tr>
		        </table>

Das Bild unten zeit was es darstellt. Leider bekomme ich es nicht hin. Lieder habe ich keine idee wie ich das in css umsetzen kann bei der Tabelle Arbeite ich mit paar Bildern die das ganze darstellen. Jemand von euch ideen für mich?

Gruß

Rafael

Zitat von |23|

Leider bekomme ich es nicht hin

was hast du denn bisher probiert? find ich n büschn dürftigen auftakt.

[|23|]

Zitat von ingo

was hast du denn bisher probiert? find ich n büschn dürftigen auftakt.

#box
{
	background:#ffffff url(img/box/top_box.jpg)  repeat-X;
	margin: 10px;
	padding: 10px;
	width: 300px;
	background: #fffff;
	border-width: 1px;
}

Lieder habe ich keine idee wie ich die beiden anderen Grafiken an Links oben und Rechts oben binden kann.

[Boris]

Welche "beiden" Grafiken? Meinst du die Ränder der Box? Deine Box hat doch eh eine feste Breite, ich würde den Verlauf + oberer Rand + Seitenränder als Bild einsetzen (Hintergrund), den Rest via Text (Willkommen, etc).

[|23|]

Zitat von Boris

Welche "beiden" Grafiken? Meinst du die Ränder der Box? Deine Box hat doch eh eine feste Breite, ich würde den Verlauf + oberer Rand + Seitenränder als Bild einsetzen (Hintergrund), den Rest via Text (Willkommen, etc).

ja das habe ich auch vor. Aber meine Box soll später keine Feste größe haben. Hier mal die Grafiken:

[Boris]

Auch nicht schwer. Wir brauchen dazu zwar ein 2. DIV, aber eine bessere Lösung gibt es für deinen Fall nicht

Erstell eine Grafik, die den linken + oberen Rand + Verlauf enthält und mach diese 1600 Pixel breit (den oberen Rand + Verlauf entsprechend in die Länge ziehen).

Die packst du ins 1. DIV. In das 2. DIV legst du dann den rechten Rand (nach rechts positioniert).

<div id="erstebox"><div id="rechterrandundinhalt">blabla</div></div>

Man könnte das 2. DIV vermeiden und das Bild auch in ein H1 legen (Willkommen), aber das ginge nur, wenn der Text da drunter nicht bei den Linien liegen würde.

[|23|]

Zitat von Boris

Auch nicht schwer. Wir brauchen dazu zwar ein 2. DIV, aber eine bessere Lösung gibt es für deinen Fall nicht

Erstell eine Grafik, die den linken + oberen Rand + Verlauf enthält und mach diese 1600 Pixel breit (den oberen Rand + Verlauf entsprechend in die Länge ziehen).

Die packst du ins 1. DIV. In das 2. DIV legst du dann den rechten Rand (nach rechts positioniert).

<div id="erstebox"><div id="rechterrandundinhalt">blabla</div></div>

Man könnte das 2. DIV vermeiden und das Bild auch in ein H1 legen (Willkommen), aber das ginge nur, wenn der Text da drunter nicht bei den Linien liegen würde.

ich weiß irgendwie nicht genau wie du das meinst und kann es mir auch irgendwie nicht vorstellen.
Habe die ganze zeit rum versucht. Aber das was raus kommt ist nicht das Ziel.

hier der CSS:

#content {
	float: left;
	text-align: left;
	width: 714px;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
}
#box_top
{
	background:#ffffff url(img/box/top_left.jpg);
	margin: 10px;
	width: 400px;
	height: 63px;
}
#box_down
{
	background:url(img/box/top_right.jpg);
}

und der HTML tag:

		<div id="content">
		<div id="box_top"><h1>fsdfsdfdsf</h1></div><div id="box_down"></div>
		</div>

Gibt es den nich irgendwie sowas:

border-right: url(img/box/top_left.jpg);
border-right: url(img/box/top_left.jpg);

oder so ?

[Boris]

Du hast es nur falsch verschachtelt

So wäre es richtig:

<div id="content">
	<div id="box_top">
	<div id="box_down">
		<h1>fsdfsdfdsf</h1>
		<p>Und der ganze Inhaltskrams</p>
	</div>
	</div>
</div>

Stell dir die DIVs als Klarsichtfolien vor, wo auf jedem DIV ein Bild ist und die du einfach übereinander legst. So funktioniert das

Nimm auch das height: 63px; raus, sonst gibts Probleme.

[|23|]

Zitat von Boris

Du hast es nur falsch verschachtelt

So wäre es richtig:

<div id="content">
	<div id="box_top">
	<div id="box_down">
		<h1>fsdfsdfdsf</h1>
		<p>Und der ganze Inhaltskrams</p>
	</div>
	</div>
</div>

Stell dir die DIVs als Klarsichtfolien vor, wo auf jedem DIV ein Bild ist und die du einfach übereinander legst. So funktioniert das

Nimm auch das height: 63px; raus, sonst gibts Probleme.

Erst einmal besten dank für diesen Tipp. Leider, bringt das nicht den Richtigen Erfolg gebracht. Ich kann mir auch nicht vorstellen wie das gehen soll

Gruß

rafael

[Boris]

Ähm, du musst schon einstellen, dass er den rechten Rand *nicht* kacheln und er rechts plaziert werden soll *g*

background:url(img/box/top_right.jpg) top right no-repeat;

[|23|]

Zitat von Boris

Ähm, du musst schon einstellen, dass er den rechten Rand *nicht* kacheln und er rechts plaziert werden soll *g*

background:url(img/box/top_right.jpg) top right no-repeat;

ahhh, besten dank für diese infos, ich mercke, ich muss noch viel lernen

[belimo]

Zitat von Boris

Erstell eine Grafik, die den linken + oberen Rand + Verlauf enthält und mach diese 1600 Pixel breit (den oberen Rand + Verlauf entsprechend in die Länge ziehen).

Boris hat doch einen 1900-Bildschirm oder ???