PDA

View Full Version : how to make this table in css



char
Mar 18th, 2010, 07:14 PM
hi there how do i got about making an table layout like this in to css
http://www.imagechicken.com/uploads/1268936122072137200.png

i want to put many off them on an page like that i have all ready set out

i can understand you need three class and box eg the with the iamge in to be an float:left;

but i just cant seem to work out anymore any help with me great as when i do it the divs seem to drop below the iamge

cheers for your help

BubikolRamios
Mar 18th, 2010, 07:50 PM
Do post link to what you have, or code, otherwise nobody will help you.

MrEnder
Mar 18th, 2010, 09:27 PM
easy ;) hope it helps


<html>
<style type="text/css">

div { border: 1px solid black; }
td {

border: 0px solid black;

}
.innerDiv {

height: 90px;
width: 99.5%;

}
</style>
<div>
<table>
<tr>
<td>
<img src="" alt="111" width="100px" height="100px" />
</td>
<td width="100%">
<div class="innerDiv"></div>
</td>
</tr>
</table>
</div>
</html>

Excavator
Mar 18th, 2010, 09:54 PM
Hello char,
Good for you for changing from tables to divs!
Have a look at this example -
<!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 {
background: #9C9;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
}
* {
margin: 0;
padding: 0;
}
#content {
width: 760px;
margin: 30px auto;
padding: 20px;
overflow: auto;
background: #999;
}
.imgCapWrapper {
width: 490px;
margin: 0 10px 10px 0;
padding: 0 10px 0 0;
float: left;
clear: left;
overflow: auto;
text-align: left;
border: 1px solid #F00;
font-size: 0.7em;
}
.thumbone {
float: left;
margin: 5px;
background: #eee;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
<div class="imgCapWrapper">
<img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" alt="2010 Ram" class="thumbone" />
<h3>My 2010 Dodge Ram</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<!--end imgCapWrapper--></div>
<div class="imgCapWrapper">
<img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" alt="2010 Ram" class="thumbone" />
<h3>My 2010 Dodge Ram</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<!--end imgCapWrapper--></div>
<div class="imgCapWrapper">
<img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" alt="2010 Ram" class="thumbone" />
<h3>My 2010 Dodge Ram</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<!--end imgCapWrapper--></div>
<div class="imgCapWrapper">
<img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" alt="2010 Ram" class="thumbone" />
<h3>My 2010 Dodge Ram</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<!--end imgCapWrapper--></div>
<!--end content--></div>
</body>
</html>

That's based on this demo (http://nopeople.com/CSS/image%20captions/index.html).

rnd me
Mar 20th, 2010, 02:04 PM
setting display to "inline-block" creates a box that behaves somewhat like a table cell.
the result itself acts "inline", but give it a specific width, and the contents inside will wrap.
use "inline-block" only on block level elements (like div) for full ie compatibility.