|
CSS - How To Make Table Like Layout With Pure Css
hi
I am shifting to web 2.0 therefore learning a lot of things that I used to do with tables. Now I have a task to make a form and also display text in parallel style e.g Name User Name ------- Rating stars Email User Email ------- Balance amount to accomplish this in tables we might make two cells to hold Name, EMail in one and Rating and Balance in the second then in each CELL further rows and cells for each entity e.g Name User Name how can we display this kinda info using pure CSS? I found a website online http://www.compare-voip.net/viatalk.php there towards the bottom you can see how the email and rating stats are displayed in two columns, this is done with tables though I want to do the same with CSS only thanks in advance Similar TutorialsI am wondering which is the best way to display a flash header with a pure css layout. This is the way that I have it now and it works fine but I am new to web design and figured that if I am going to do it I should do it the right way. The css: Code: #master {
width: 770px;
margin: 10px auto;
position: relative;
padding: 0;
border: 1px solid #566;
border-top: 1px solid #566;
background-color: #FFFFFF;
overflow: hidden;
}
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #566;
width: 100%;
}
The html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pure CSS Test Page</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css">
</head>
<body>
<div id="master">
<div id="masthead">
<td>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="770" height="200">
<param name="movie" value="../../images/header.swf">
<param name="quality" value="High">
<embed src="../images/header.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="160" height="160"></object>
</td>
<div id="breadCrumb">
<a href="#">breadcrumb</a> /
</div>
</div>
Is there a better way to display the flash document? Also, should I create another layout div, say #flashheader? One last question. Is this the proper way to center the page? Hi, I am trying to wrap my head around a certain layout that I want to create. Hear is a link to a mockup of what it would look lik... I am curious if it is possible to add an element like the one I have marked with a "?". If so could you please share with me some further details. REgards Chad CSS newb here and this is my first full CSS page layout ever, so go easy. Some of the page elements do not stretch properly to match the page content. I also tried to add a few bits to make a sticky footer, and in doing so I sort of confused myself as to where the problem is. Here's a link to the page: http://www.crackin.com/cbled/index.html and here's the code: Code:
body {font: 75% Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;margin: 0;padding: 0;text-align: center;color: #000000;height: 100%;}
html {height: 100%;}
* html #nonFooter {height: 100%;}
.oneColFixCtr #nonFooter {width: 923px;background: #FFFFFF;margin: 0 auto;border: none;text-align: left;position: relative;min-height: 100%;z-index:3;}
.oneColFixCtr #content {padding: 0 0 56 0; height:auto;}
#mainlayout {position:relative;left:0px;top:0px;width:923px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:303px;width:366px;height:409px;}
#navbarbreak {position:absolute;left:231px;margin-top:10px;width:2px;height:95%;background-color:#BBB; z-index:2;}
#pagecontent {position:absolute;left:253px;top:303px;width:650px;height:10px;}
#navbar {position:absolute;left:0px;top:303px;width:233px;height:350px;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-info {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link3 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link4 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}
#footer {position:relative;width: 923px;margin: -56px auto 0 auto;z-index:4;}
#footer-left {position:absolute;left:31px;top:0px;width:18px;height:56px;}
#footer-bg {position:absolute;left:49px;top:0px;width:825px;height:56px;background-color:#329428}
#footer-right {position:absolute;left:874px;top:0px;width:18px;height:56px;}
#greenbreak-z {z-index:1;}
#greenbreak {position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}
#page-edges-a {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
#page-edges-b {position:relative;margin:0 auto;width:923px;height:100%;}
#mainbg-leftvert {position:absolute;left:-16px;top:0px;width:16px;height:100%;background:url(images/mainbg_leftvert.png);background-repeat:repeat-y;}
#mainbg-rightvert {position:absolute;left:923px;top:0px;width:16px;height:100%;background:url(images/mainbg_rightvert.png);background-repeat:repeat-y;}
#clear {clear:both;}
-->
</style></head>
<body class="oneColFixCtr">
<div id="nonFooter">
<div id="content">
<div id="mainlayout">
<div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
<div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
<div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
<div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
<div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
<div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
<div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>
<div id="navbar">
<div id="navbar-home"><a href="#">home </a></div>
<div id="navbar-info"><a href="#">company info </a></div>
<div id="navbar-link3"><a href="#">link3 </a></div>
<div id="navbar-link4"><a href="#">link4 </a></div>
<div id="navbarbreak"></div>
</div>
<div id="pagecontent" align="justify">
<p>Lorem ipsum, etc etc...</p>
</div>
</div>
</div>
</div>
<!--PAGE DROPSHADOW-->
<div id="page-edges-a">
<div id="page-edges-b">
<div id="mainbg-leftvert"></div>
<div id="mainbg-rightvert"></div>
</div>
</div>
<!--GREEN BACKGROUND-->
<div id="greenbreak-z">
<div id="greenbreak"></div>
</div>
<!--FOOTER-->
<div id="footer">
<div id="footer-left"><img src="images/footer_left.gif" width="18" height="56" alt=""></div>
<div id="footer-bg"></div>
<div id="footer-right"><img src="images/footer_right.gif" width="18" height="56" alt=""></div>
</div>
</body>
</html>
Any help is much appreciated. I want to wrap a few items in a container and have them laid out horzontal and not flow vertically. suggestions ? Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #FFFF00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
width: 100%;
}
table {
border: 0px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
#columnleft {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: left;
}
#columnright {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: right;
}
#footer {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
#clearfooter {
clear: both;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position:relative; */
}
#main {
margin: 0px;
padding: 0px;
width: 79.8%; /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #FFFFFF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
float: left;
}
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
/* min-height: 80%; */ /* Might not be needed, it's an IE Hack... */
background-color: #FF0000;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>
<body>
<div id="header">Header Text</div>
<div id="wrapper">
<div id="columnleft">Left Text</div>
<div id="main">Center Content</div>
<div id="columnright">Right Text</div>
</div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html>
Thanks, FletchSOD im trying to make the switch from tables to css. I want to have a table with 2 colums so my css is as follows: Code: #mainbody
{
width: 800px;
border: #8FADB4 1px solid;
margin: 0 auto
}
#left
{
float: left;
position: absolute;
width: 325px;
background-color: #8FADB4;
}
#content
{
float: right;
width: 475px;
}
main body is what the whole code sits in, left is the left column and content is the right column. I then use the following code: Code: <div id="mainbody"> <div id="left"><p>left column</p></div> <div id="content"><p>content section</p></div> </div> the problem is that if i type a lot of content into the content section then the left column does not grow vertically, nor does the main body. How do i change this to act like a table where the column would grow?! thanks Hey mates, How can I make this layout work (A table, 2 tr , 2 td in each tr, 1st td in each row has differen width than other tds above or below it. So basically the 20% doesnt work) I tried using class for each td but they seem to overwrite eachother. Any hints? Code: <table>
<tr>
<td width= "50%"> column 1 </td>
<td> column 2 </td>
</tr>
<tr>
<td width= "20%"> column 1 </td>
<td> column 2 </td>
</tr>
</table>
I am trying to layout a simple table in CSS and have numerous issues; the first and most confusing is why the computer header I am working on currently is not displaying correct. When I look at the computer style in chrome it shows that the height is computing to 31px which is correct but if I measure the image in Photoshop it is only drawing at 17px... if anyone could help I would appreciate it! I was going to post a link to the test page which has all the code cleanly displayed along with the images they use but I guess that is not allowed. I have copied the offending CSS code below. I use it by nesting one div inside another starting with table_head_left and working my way down. Code:
.table_head_left
{
background-image: url(fx/images/tbl_hl.png);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding-left: 14px;
height: 31px;
}
.table_head_right
{
background-image: url(fx/images/tbl_hr.png);
background-position: top right;
background-repeat: no-repeat;
background-attachment: fixed;
padding-right: 14px;
height: 31px;
}
.table_head_center
{
background-image: url(fx/images/tbl_ht.png);
background-position: top center;
background-repeat: repeat-x;
background-attachment: fixed;
height: 31px;
text-align: center;
}
Hi all, I'm trying to complete my first table-less layout and I have run into a couple of issues that I haven't been able to solve. In the past I would have done this with tables and would have had no problem. Please help! See my fledgling steps below. Question #1: In Fire Fox I get big gaps between my header div and my main div and my main div and my footer div. This doesn't happen in IE7. What's up with this? Question #2: I would like my content div to expand to 100% of the screen. In the past I could have done this with a height=100% in a <TR> tag. How do I do it with CSS? Thanks a ton! - Andy P.S. I'm sorry if these are total newbie questions that get answered all the time. Think of it as an opportunity to look really smart and awe me with you brilliance ;-) Code: <!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
margin: 0;
padding: 0;
background-color: #0F1144;
text-align: center;
}
#wrapper{
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 820px;
text-align: left;
}
#header{
padding: 0;
margin: 0;
border: 0;
background-color: yellow;
height: 75px;
width:820px;
}
#main{
margin: 0;
padding: 0;
border: 0;
width:820px;
background-color: blue;
}
#navigation{
float: left;
background-color: #FFFFFF;
margin: 0;
padding: 0;
border: 0;
width: 260px;
}
#content{
border: 0;
margin: 0 0px 0 260px;
padding: 0 0 0 0;
width: 560px;
background-color: green;
}
#footer{
clear: both;
padding: 0;
margin: 0;
height: 50px;
background-color: red;
width:820px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><p>header</p></div>
<div id="main">
<div id="navigation"><p>navigation</p></div>
<div id="content">
<p>I wish this div would expand vertically to fill the whole screen!</p>
<p>I wish this div would expand vertically to fill the whole screen!</p>
<p>I wish this div would expand vertically to fill the whole screen!</p>
<p>I wish this div would expand vertically to fill the whole screen!</p>
</div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>
i'm trying to get rid of my tables. i have a test site i am making and i have 2 questions. first, how do i make the footer attach at the bottom, and then how do i make the main part stretch all the way down to the footer (between the tabs and the footer)? the web site is at gegg dot bandsondemand dot com slash test thanks! Please look at this page - http://www.jimstrans.com/diagnosis.asp I've been working hard to get this table laid out and would appreciate some help with something. If you look at the table in IE all looks just as I want it to look. Now look at it in FF and you will see that the text (in the paragraphs w/ class of "cellp" do not align with the checkboxes, but rather are pushed down 2-3 pixels. I guess I could live with this but would really like to know why they are not aligning at the top with the checkbox. Also, does the way I laid this out code wise look ok? Was it neccessary to use the <p> in the td? Could I have put an absolute position on the input boxes (top left), a fixed width on the cells w/ a left padding to indent the text? I'd be curious to know what you think? I know that there has to be a better way to do this than they way I did it with all sorts of "marging-left's". I was hoping there was an efficient way to do this without using a table or the table-layout properties. Code: <h1>Current Natoinal Average Rates*</h1> <p class="rateheader">Bus Types<label style="margin-left: 200px; ">Transfer</label><label style="margin-left: 45px; ">5 Hours</label><label style="margin-left: 45px; ">Day Rate</label></p> <p class="ratewhite">Deluxe Motor Coach<label style="margin-left: 145px; ">$230</label><label style="margin-left: 60px; ">$350</label><label style="margin-left: 60px; ">$735</label></p> <p class="ratepurple">Minibus<label style="margin-left: 220px; ">$175</label><label style="margin-left: 58px; ">$275</label><label style="margin-left: 62px; ">$600</label></p> <p class="ratewhite">Schoolbus<label style="margin-left: 205px; ">$120</label><label style="margin-left: 57px; ">$200</label><label style="margin-left: 64px; ">$400</label></p> <p class="ratepurple">Entertainer<label style="margin-left: 201px; ">N/A</label><label style="margin-left: 65px; ">N/A</label><label style="margin-left: 72px; ">$800</label></p> <p class="ratewhite">Executive<label style="margin-left: 211px; ">N/A</label><label style="margin-left: 63px; ">$600</label><label style="margin-left: 64px; ">$1200</label></p> <p class="ratepurple">Trolley<label style="margin-left: 227px; ">$360</label><label style="margin-left: 56px; ">$550</label><label style="margin-left: 65px; ">$870</label></p> <p class="ratewhite">Double Decker<label style="margin-left: 180px; ">$400</label><label style="margin-left: 57px; ">$600</label><label style="margin-left: 64px; ">$950</label></p> <p class="ratepurple">Van<label style="margin-left: 242px; ">$150</label><label style="margin-left: 57px; ">$250</label><label style="margin-left: 66px; ">$500</label></p> <p class="ratewhite">*Rates vary from city to city. Run a search for specific rates in your area.</p> Hello, I currently have a Table layout that uses 2 <td>s to display a picture in the left <td> and text in the right <td> so something like this: Code: <tr> <td>Image</td> <td>Text about the Image</td> </tr> Is there a way to rebuild this using DIV tags. I have had so much luck using Code: <DIV> <ul> <li>Image Text</li> <li>Image Text</li> </ul> The problem with this is the text doesn't display properly - It either displays underneath the image, or if I use "vertical-align:text-top", it aligns the top line of the text to the top of the image and then displays the rest of the text underneath the image. Any suggestions would be welcome if there is any way around this? My current HTML looks like this... Code: <table width="90%" align="center"> <tr class="gen_small" height="25"> <td colspan="5"><b>Test Category</b></td> </tr> <tr class="gen_small" height="50"> <td width="50" align="center"><img src="./templates/images/forum_open.gif" border="0"></td> <td><b><a href="view_forum.php?f=1">Test Forum</a></b><br>This is a test forum</td> <td width="200" align="right"></td> <td width="50" align="center"></td> <td width="50" align="center"></td> </tr> </table> I have some ideas on how to get a similar layout but how do i ensure the distances specified by the widths are also kept intact? What is your take on using "table-layout:fixed" property? I'm using tables strictly for data output, not for layout. Is it a good practice to use it? I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks. Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer: http://brentonboy.com/misc-pages/layouttest.html I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements: Must be a simple solution with as few HTML elements as possible. Must look and behave the same as the example table. Thus: When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else. Do not make use of CSS hacks or any other hacks. All code must be valid. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too. Must work flawlessly in every browser, just as the table does. Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong! Hello, I have a perl script, and would normally do this with tables, but since tables are such a BAD THING ™ I've been trying to this with CSS, and I've spent too long on it thus far, so I'm looking for a bit of an assist Code: +----+-------------+--------------+ | id | date 1 | date 2 | | | | | +----+-------------+--------------+ what's the best way to accomplish this? --Ax So does anyone use div tags only and no tables at all? Not even for tabular data? my site is totally based on tables. there is one huge table, which outlines the area for the header, left panel menus, right panel boxes, and the footer. inside those, the header is another table, the left panels are another table, each panel being a new row, the right panel boxes are the same thing, and the footer is a table just like the header. that is what every page is like. where on earth do i start? here is what i'm thinking so far, but i need confirmation because i have never done this befo header is just a regular div left panel menus are a div that floats left right content panels is a div that floats right footer is just a regular div will that work? can any1 specify if i need any other css that the float to make this work? |
|||||||