Hjalp med CSS table

Hur pa basta sat kan man gora en content halder i CSS med foljande utgangs bild?

Den skall vara flexibel for olika hojd och bredd.

http://www.qandgo.se/spirit_20/table.html

:OO

du har massor med element i en table som du kan använda för att få till den grejen. table, thead, tfoot, tbody plus alla tr och th/td. Lite svårt att ge ett exempel på hur man ska märka upp det när jag inte ser någon data.

mv icaaq

Oma du bara gor en exempel pa hur du dkulle gora da??

om ingen hjälpt dig ikväll så kan jag nog fixa ihop ett exempel. har lite mycket att göra just nu :)

mv icaaq

nu har jag fixat den i html. Men skuille behova hjalp att amvandla sa mycket som mojligt till CSS.

http://www.qandgo.se/spirit_20/table.html

det är ju bara att flytta "Style" i en css och namnge det till en klass...CSS:

.box {
	background: #FFFFFF url('images/box_mid_b.png') repeat-x top left;
}

.box .tl {
	height:5px;
	width:4px;
	background: url('images/box_top_l.png') no-repeat;
}
.box .t {
	background: url('images/box_top_b.png');
}

.box .tr {
	height:5px;
	width:4px;
	background: url('images/box_top_r.png') no-repeat;
}
.box .l {
	background: url(images/box_mid_l.png);
	width: 4px;
}

.box .r {
	background: url(images/box_mid_r.png);
	width: 4px;
}

.box .bl {
	height:5px;
	width:4px;
	background: url('images/box_foot_l.png') no-repeat;
}

.box .b {
	background: url('images/box_foot_b.png');
}

.box .br {
	height:5px;
	width:4px;
	background: url('images/box_foot_r.png') no-repeat;
}

och html:

<table cellspacing="0" class="box" style="width:350px">
	<tr>
		<td class="tl"></td>
		<td class="t"></td>
		<td class="tr"></td>
	</tr>
	<tr>
		<td class="l"></td>
		<td>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			<br><br>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			<br><br>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
		</td>
		<td class="r"></td>
	</tr>
	<tr>
		<td class="bl"></td>
		<td class="b"></td>
		<td class="br"></td>
	</tr>		
</table>

Jag hade personligen försökt lösa detta med ren <div> och CSS istället för att blanda in tabeller med i leken. detta är inte direkt tabell data som du lista i dina tabeller..

TACK!!!!!!!!!!!!!!!!!!!!!!!

<div class="box" style="width:350px">
	<div class="tl"><img src="tl.gif"></div>
	<div class="tr"><img src="tr.gif"></div>
	<div class="content">
		Other Content in here
	</div>
	<div class="bl"><img src="bl.gif"></div>
	<div class="br"><img src="br.gif"></div>
</div>

.box{
	background: url('bg.gif') repeat-x;
	position: relative;
	border: 1px solid #e0e0e0;
}
.box .content{
	padding:5px;
}
.tl, .bl{
	 float:left;
	 position:relative;
}
.tr,.br {
	float:right;
	position:relative;
}
.tl img, .tr img, .bl img, .br img{
	position:absolute;	
}
.tl img {
	top:-1px;
	left:-1px;
}
.tr img {
	top:-1px;
	right:-1px;
}
.br img{
	bottom:-1px;
	right:-1px;
}
.bl img {
	bottom:-1px;
	left:-1px;
}

Hade ett gamalt exempel hur man kan göra det med div + css istället för tabeller... (gjort så den passar dina bilder mm, I hope...