...

View Full Version : How to replace table row to css



boogily
12-17-2010, 03:50 AM
I have something I wish to display like (simplified)


<div style="width:608px;">
<tr>
<td width=15 height=15>leftimage.png</td>
<td background=#000></td>
<td width=15 height=15>rightimage.png</td>
</tr>
</div>

But in CSS, I always seem to run into the background color issue. The .pngs have to show transparency. The issue is getting the middle layer to stretch via the width of the parent div as well. Either the background color spans everything, ruining my .pngs or it doesn't span dynamically. Tables would work, but I hate tables. I want fully semantic CSS that works with IE even.

Excavator
12-17-2010, 05:05 AM
Hello boogily,
Look at what some margins can do for you -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: 100% Verdana, Geneva, sans-serif;
color: #999;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
overflow: auto;
font-size: 0.8em;
line-height: 15px;
}
#leftImg, #rightImg {
height: 15px;
width: 15px;
display: block;
}
#leftImg {
float: left;
background: #0f0;
}
#rightImg {
float: right;
background: #fff;
}
#header_content {
margin: 0 15px;
text-align: center;
background: #00f;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="path/to/leftimg.png" alt="description" id="leftImg" />
<img src="path/to/rightimg.png" alt="description" id="rightImg" />
<div id="header_content">
Header stuff in here
<!--end header_content--></div>
<!--end header--></div>
<!--end container--></div>
</body>
</html>

boogily
12-17-2010, 07:49 AM
Thank you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum