| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 2 of 2
-
Sep 28, 2004, 03:31 #1SitePoint Member
- Join Date
- Sep 2004
- Location
- France
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
mimic a 100%-wide table with CSS divs and spans
Hello ! I hope someone can help me here. I try to do this with divs and spans :
<table width="100%">
<tr width="100%">
<td><a href="#" style="display:block">Item1</a></td>
<td>Item2</td>
<td>Item3</td>
</table>
Every cell is a <a> block and the row stretches at 100% of the container.
Is there a way to do this in CSS without any table ?
-
Sep 28, 2004, 13:44 #2The CSS Clinic is open
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 39,016
- Mentioned
- 129 Post(s)
- Tagged
- 3 Thread(s)
Hi,
Well css isn't that clever at reproducing this specific table behaviour but here are a couple of exmples that come close.
Or more seomatically using lists but it gets a lilte more complicated.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> div {background:#ccc;clear:both;height:1.5em} div.odd {background:blue} a { width:33.2%; float:left; color:#000; height:100%; } a:hover{background:#ffffcc} </style> </head> <body> <div><a href="#">Item1</a><a href="#">Item2</a><a href="#">Item3</a></div> <div class="odd"><a href="#">Item1</a><a href="#">Item2</a><a href="#">Item3</a></div> <div><a href="#">Item1</a><a href="#">Item2</a><a href="#">Item3</a></div> </body> </html>
Hope that helps.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> div {background:#ccc;clear:both;height:1.5em} div.odd {background:blue} ul, li { margin:0; padding:0; list-style:none; } li {display:inline} li a { width:33%; float:left; color:#000; height:100%; } li a:hover{background:#ffffcc} </style> </head> <body> <div> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> </div> <div class="odd"> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> </div> <div> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> </div> </body> </html>
Paul
Bookmarks