Forum Moderators: not2easy
This is my first post on the CSS side. We are redoing our website and I would love to use CSS, but to me it seems very hard.
Below is basically a template of what I would like to do. Currently, I do exactly this (layout) using tables, but after reading all the negative threads I would like to do this using CSS.
If I can get this example of the tables going in CSS I will be able to convert all our pages because, like I said, all our pages (100+) has this basic design. For those of you interested - we run a travel agent and the design of the page (code example) will be our itineraries for each tour.
The code example shows how ONE day would look ie -
4 columns and 4 rows
Column 1
Row1 = head which will read DAY 1 or MONDAY or s specific DATE
Row2 = The actual itinerary (activities etc etc)
Row3 = The accommodation
Column 2 (note the background image which is just a vertical line)
Row1 = Nothing
Row2 = Aligned Vert-Middle - Small image - always same size - 69x43
Row3 = Aligned Vert-Middle - Small image - always same size - 69x43
Column 3
Row 1 = some text - always just one line (no wrap)
Row 2 = Vert-middle - some text - always just one line (no wrap)
Row 3 = some text - always just one line (no wrap)
Column 4 = nothing - just a spacer
Thats about it. But please note the alignments, background image etc. This is VERY important. The images/icons (column 2, row 2 and 3) must align perfectly with the corresponding text in column1
Also keep in mind that the example code is for only ONE DAY - there could be 20+ days! I would thus just copy and paste the code however many times to create the right amount of days for my itinerary.
Like I said, I currently use tables but "clean it up" a LOT more than what I show in the example, using css for table/font/size etc etc properties.
I would be MOST grateful if anyone can recreate this table using css because that would mean I can change our whole website as such.
Apologies for the long message!
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="62%">Some Text (will always only be 1 line) </td>
<td width="7%" background="vertline.gif"> </td>
<td width="21%"><div align="center">text (will always only be 1 line)</div></td>
<td width="10%"> </td>
</tr>
<tr>
<td width="62%"><p>sdasdasdas</p>
<p>dasd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
<p>asd</p>
<p> </p></td>
<td width="7%" valign="middle" background="vertline.gif"><img src="../../images/icon.gif" width="69" height="43" /></td>
<td><div align="center">text (will always only be 1 line)</div></td>
<td> </td>
</tr>
<tr>
<td width="62%">More Text (will always only be 2 lines) <br />
More Text </td>
<td width="7%" background="vertline.gif"><img src="../../images/icondot.gif" width="69" height="13" /></td>
<td><div align="center">text (will always only be 1 line)</div></td>
<td> </td>
</tr>
</table>
</body>
</html>
Please let me know.....
Perhaps the best place to start is to strip right back to the basic, get rid of all extra tags and presenation info, and the build th estyle sheets up slowly to get a nicely formatted data table.
Then look into laying out complete pages with CSS.
The fact that this one page (my code example) example can help me build my whole website does not mean I want you to do the whole thing.
Anyways, thanks for the response. Who knows, maybe oneday I can help you with something!?
Thanks Benihana, you are saying basically the same as what tedster advised me last week regarding tabular data. And I did what he and you said........ I cleaned up my tables as much as I can - just thought I could clean it even MORE using css, but it seems it's not that easy - or I'll have to really go and sit down and study css as Nadir suggests.
Like I said, I started this thread in response to another which said any table can be "converted" to css. Thought it might be very easy.
Thanks again and have a great day!
If you want more flexibility, then use <divs>. Just don't try to make them into a <table>. A <div> is actually a lot more powerful and flexible than a <table> in many instances, but NOTHING beats a <table> for displaying tabular data.
This is an old argument with huge tanker-trucks of Kool-Aid on all sides.
In any case, this [webmasterworld.com] post may answer some of your questions.
Review some of your approaches to layout as well as document construction. A few points:
Can you tell us WHY you are using an XHTML document type? You may be making it harder than it has to be.
Choosing the best doctype for your site [webmasterworld.com] (by encyclo)
I know you're just using an example, but Never Do This.
<title>Untitled Document</title>
Titles should be unique to the page and relevant to the document content. I know these two are not relevant your problem, but I bring them up because part of converting to compliant documents is starting at the foundation, then as you rebuild, examine each decision and ask yourself, "is there any way to take some of this out and do the same thing?"
Column 2 (note the background image which is just a vertical line)...
<td width="7%" background="vertline.gif"> </td>
Is 7% *always* going to be relevant, and at all resolutions? If this is just a "spacer," it is most likely you will always want it the same size and width regardless of screen resolution. Additionally, you should pull the markup out into your CSS, and use of a non-breaking space is going to vary with the user's text preferences. If you *must* space out a table cell, this is one of the rare ocassions where a fixed object - an image - will work better in the event the user elects to use their own style sheet:
.vert-cells {
width: 7px;
background-image: url(vertline.gif);
background-repeat: repeat-y;
}
<td class="vert-cells"><img src="vertline.gif" width="7" height="1" border="0" alt="keyword-rich alt tag"></td>
Note the use of the dreaded spacer has the additional advantage of working in vital keywords.
Remember one of the primary uses of CSS, to remove and reduce presentational markup. Se the question above, can you take something out and do the same thing?
<td width="21%"><div align="center">text (will always only be 1 line)</div></td>
.line-one {
text-align: center;
width: 21%;
white-space: nowrap;
}
<td class="line-one">text (will always only be 1 line)</td>
In some cases where you want to center a block inside an area, and not center the text within that block, use margin:auto instead of text-align:center.
llmm123 I think there is a couple of misunderstandings going on here, one is the title of the thread, which I will go and change around a bit - because my intial reaction to the thread was the same as Nadirs, so I apologise and will change the thread title..
I actually started this thread in response to a different thread that said that ANY table lay-out can be recreated using CSS.
there two levels of CSS use, one is to take care of formatting and the likes, i.e totally remove styling attributes from the HTML. The next requires knowledge of CSS Positioning
it's OK to recreate a table layout framework in CSS for fun, challenge or learning excercise BUT the reality is you SHOULD NEVER attempt to "recreate/copy" a table design in CSS. CSS is different design mindset and the theory will fail unless you can let go of the "containment" factor.
so if you can clarify, is this following link what you're after Tips to move away from table-based layouts? [webmasterworld.com] or do you want to lose the tables altogether?
Suzy
I take all the points both of you make. I actually think my layout is ok (not the example of course - I just did that in 2 seconds with Dreamweaver - therefor the untiled doc etc).
I started off with the very basic (and messy) table layout and did exactly what you said - cleaned it up using "class=" etc (after advice from tedster). I then went ahead and read more about css vs tables and was under the impression that I could get TOTALLY rid of <table>.
I now understand (correctly I hope) that one can indeed get rid of <table> totally, but in some cases using a table is still ok/better/acceptable -keeping in mind that it should be "cleaned up" as much as possible!
Thanks again - you helped a lot.
LL
Once again my apologies for the title.... I did not mean it like that and actually tried to edit it a while afterwards, but was not allowed (something about too much time has passed to now edit). Thanks for changing the title - I must agree, it now comes across MUCH better :)
Thanks for your advice...... Yes, I did (maybe still do if that is the CORRECT thing to do) want to get totally rid of tables, but as I said in my previous post to cmarshall and rocknbil, I now understand a bit more and in this particular instance I should perhaps use tables BUT clean them up as much as possible. Like they said........ use it, have a look at it and see whether you can do each specific element in a better/simpler/cleaner manner. Start at the basics and work it from there.
I think I am on the right track, no?
Thanks for the link SuzyUK, I will definitely have a look at it....
Like they said........ use it, have a look at it and see whether you can do each specific element in a better/simpler/cleaner manner. Start at the basics and work it from there.I think I am on the right track, no?
I would say so ;) - just remember the <tr> element is an element like any other - and do it bit by bit!
look forward to hearing how you go and don't be afraid to ask!
