CSS - Possible To Layout This Table With Css?

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 &nbsp; Text</li>
<li>Image &nbsp; 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?

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>

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!

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?

Hello,

I have a perl script, and would normally do this with tables, but since tables are such a BAD THING &trade; 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

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?

I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs.

I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems!

Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O )

Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE.

I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is:

Code:

body {
 background: #EFF7FF url(bg.gif);
 text-align:center;
 padding:0;
 }

#outer {
 border:5px double #234B77;
 width:650px;
 padding:0px;
 margin:0px;
 }

#hdr {
 width:650px;
 height:151px;
 background: #21558C;
 }

#bar {
 width: 650px;
 height:90px;
 background: #ADD7EF url(rainbowsitedesign_2x1.gif);
 border:solid #000000;	
 border-width:0px;
 padding-top: 37px;
 text-align:left;
 }

#bodyblock {
 position:relative;
 background: #ADD7EF url(backgroundforsite.gif);
 width:650px;
 padding:0;
 }

#l-col {
 float:left;
 background: #ffffff url(white.gif);
 color: #333333;
 width:140px;
 border-left: 1px solid #234B77;
 border-right: 1px solid #234B77;
 border-top: 1px solid #234B77;
 border-bottom: 1px solid #234B77;
 margin-top:10px;
 margin-bottom:10px;
 margin-left:5px;
 margin-right:5px;
 }

#coltop {
 height: 42px;
 background: #3971B5 url(tabletop.gif);
 color: #000;
 text-align: center;
 padding:10px;
 font-size: 105%; 
 font-weight: bold;
 color:#1A3958;
 }
 
 #cont {
 width:485px;
 background: #ffffff url(white.gif);
 border-left:1px solid #234B77;
 border-right:1px solid #234B77;
 border-top:1px solid #234B77;
 border-bottom:1px solid #234B77;
 text-align:left;
 margin-top:10px;
 margin-bottom:10px;
 margin-right:5px;
 font-size: 100%; 
 font-weight: normal;
 color:#1A3958;
 }
 
#contentop {
 width:485px;
 height:42px;
 background: #3971B5 url(tabletop.gif);
 color: #333333;
 border-left:0px solid #234B77;
 border-right:0px solid #234B77;
 border-top:0px solid #234B77;
 border-bottom:1px solid #234B77;
 margin:0px;
 text-align: center;
 padding:10px;
 font-size: 105%; 
 font-weight: bold;
 color:#1A3958;
 }
 
#ftr {
 width:650px;
 height:25px;
 background:#346EB4;
 color: #333333;
 border: 0px solid #000000;
 margin:0;
 }
 
#ftr2 {
 width:650px;
 height:25px;
 background:#346EB4;
 border: 0px solid #000000;
 margin:0;
 }
#ftr3 {
 width:650px;
 height:99px;
 background: #346EB4 url(websitedesign.gif);
 border: 0px solid #000000;
 margin:0;
 padding-top: 20px;
 }
#home {
 width:50px;
 height:10px;
 border: 1px solid #000000;
 margin:0;
 }
p:first-letter {
 font-size: 120%; 
 font-weight: bold;
 }
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }

a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }

a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }

a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }

a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }

a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }

#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }

Here are the two pages:

With doctype:
http://rainbowsitedesign.com/withdoctype.html

Without it:
http://rainbowsitedesign.com/nodoctype.html

How can I fix both my browser problems and my doctype problems? Any help is app!

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 all,

Ooooohhh, I think I have a good one... I am trying to eliminate every single table on my site. I have ONE more page to go.

http://www.bartlett-family.net/chri...cstrategy2.html is what the original layout, with tables. I need to replace it with a table-less version.

I'm attempting that at http://www.bartlett-family.net/chri...icstrategy.html.

I've run into a problem.
Notice on the first page how S, D, H, & P are all supposed to be different colors. That works out fine when, like in the row for "8" all the items are the same (in that case, "H"). But it just won't work when there's any combination of H, S, D, & P.

Have a look at my CSS and source. Can anyone think of a method to solve my dilemna here?

Should I be using lists of some kind instead?

Chris

I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9.

It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up.

It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be.


Here is the code (this is not the whole code--this is the code I think would effect the layout):

body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, sans-serif;
}
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
#sidebar2 {
float: left;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
top: 1px;
}
#main {
width: 100%;
margin-top: 10px;
}
#sidebar {
float: right;
width: 220px;
background-color: #256290;
margin: 0;
padding: 0;
color: white;
}

Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (:

Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs:

Code:

___________________
|Image 1 |Text    |
|Image 2 |Text    |
|        |Text    |
|        |Text    |
-------------------

Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'.

Outer 'table' style: None (just a plain <div>)
Images 'cell' style: height:100%;float:left
Text 'cell' style: height:100%

Here's the full code if you want it:

Code:

<div>
  <div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
      <img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
  <div style="height:100%"> [div 2] Shows text on the right <br>
      <br>
    continues downwards no matter how much text appears<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    Even down here [/div2] <br>
  </div>
</div>

This works great in i.e. but not mozilla, anyone have any ideas?

I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine.

In the image I attached, "1" is the final result I am trying to get.

The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes.

In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it.

Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution!

Anyone got any ideas that isn't Javascript based? Thanks!

I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted.

This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first.

Nadalitian@VFEmail.net

April 18th, 2004