|
CSS - Converting From A Table Layout
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? Similar TutorialsI'm a relative CSS newbie. I'm trying to convert an image heavy fireworks table created layout to all CSS for a friend. The designs not great but I'm trying to match it best i can Here's the comp... <a href="http://www.beardenfoundation.org/newpage.html">http://www.beardenfoundation.org/newpage.html</a> And here's my first stab at it... <a href="http://www.timmanteau.com/redo/redo_css.htm">http://www.timmanteau.com/redo/redo_css.htm</a> Can anyone give me a suggestion as the best way to approach this. I was thinking a fixed width, 3 column layout with a header and footer. Then I would place a repeating background image in each column to keep the look. How can I get the 3 columns to size to 100%. Any advice would be greatly appreciated. Thanks Tim hi guys I've begun trying so I finally can leave <tables> I've started trying with a little opensource template, and now want to be how much correct I am... The following image shows the original design, also with the layers division I've created I'd like to know if I'm going ok with this initial design, or which would you modify, and so on. Then I'll follow up the thread with the code, so I can see if I learned correctly Thanks a lot in advance, Can someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables. I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page Code:
<TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%" border="0" align="center">
<tr>
<td><form action="" method="post" name="form1">
Login <br>
<input name="login" type="text" id="login" size="12" maxlength="6">
<br>
Password:</span><br>
<input name="pass" type="password" id="pass" size="12">
<br>
<input type="submit" name="Submit" value="Submit">
</form></td>
</tr>
</table></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top> <IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
</TR>
</TABLE>
Any help please??? Hi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP Code: <!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" xml:lang="en" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. 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! 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 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;
}
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? 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>
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>
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? 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 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> 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 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 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? 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 So does anyone use div tags only and no tables at all? Not even for tabular data? |
|||||||