CSS div's

[amiw]

Below is a snippet of code, how would I use CSS and div's to replicate this code. Any help would be greatly appreciated


<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="81" valign="top"><div align="left"><img src="/images/test.gif" alt="test" width="216" height="81"></div></td>
<td height="81" valign="middle"><!--#include virtual="/banner/banner.asp"--></td>
</tr>
<tr>
<td height="22" colspan="2" background="/images/newnavbar.jpg"><div align="center"><img src="/images/linksnav.gif" width="600" height="22" border="0" usemap="#Map" alt="navigation"></div></td>
</tr>
<tr>
<td height="19" width="381">&nbsp;&nbsp;<%= formatDateTime(now,1) %></td>
<td height="19" width="405">&nbsp; </td>
</tr>
</table>

 

[BabyJeffy]

Which part of the table are you having problems with? Paste up the new code you have to date, and we can start from there.

Jeff

 

[amiw]

<table><tr>
<td height="81" valign="top"><div align="left"><img src="/images/test.gif" alt="test" width="216" height="81"></div></td>
<td height="81" valign="middle"><!--#include virtual="/banner/banner.asp"--></td>
</tr>
</table>

The code above is the real issue I'm not sure about, one table with a table row with 2 cells? How would I convert that into styles?

As I've been writing this I've just thought of something,

CSS Code:

div#left {
position: absolute;
left: 0px;
top: 0px;
height: 81px;
width: 216px;
background-color:#FFF;
}

div#right {
position: absolute;
left: 216px;
top: 0px;
height: 81px;
text-align: right;
vertical-align: middle;
background-color:#FFF;

}

Code

<div id="left">
<img src="/images/test.gif" alt="test" width="216" height="81">
</div>

<div id="right">
<!--#include virtual="/banner/banner.asp"-->
</div>

How's my code?

 

[Vragabond]

Bad. This is how I would do it:

<style type="text/css">

#title {
  height: 81px;
  background: #fff url(/images/test.gif) top left no-repeat;
  text-align: right;
  padding-left: 216px;  
}

</style>

<div id="title">
  <!--#include virtual="/banner/banner.asp"-->
</div>

 

[amiw]

Lol!! I guess there's alway more than one way to skin a cat.
thanks I'll test your code out.

 

[ChrisHirst]

also a CSS "table" in thread215-1069248

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[amiw]

Vragabond what was so "bad" with my attempt? It'd be good to know so that I can learn from it.

 

[ChrisHunt]

The danger, when converting a table-based layout to CSS, is to get so hung up on what's in each <td> that you miss the bigger picture. A whole succession of <div>s positioned with CSS isn't a huge improvement on the equivalent <tr>s and <td>s.

You need to try to take a step back and think "what am I trying to achieve here?". In this case we want an area covering the width of the page, with a picture on the left and some content on the right. Using a single <div> with a background image and some padding to stop the content overlaying it is an elegant solution.

I think Vrag's a little unfair. Your solution isn't bad, but his is better.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

I will not go as far as some people and say that [tt]absolute[/tt] positioning is evil, however I will say that it is best avoided if not absolutely necessary. If you produced a code with absolute positioning, step back, review and rethink the whole thing. Is there another way you can accomplish the same? If you find an alternative solution, it is usually better. Here's why:

Absolute positioning is taken out of the flow of the document. Let's compare website with a book. Non-positioned (statically) or relatively positioned elements are the regular text in a book, while absolute positioning would be sticky notes you mark pages or paragraphs with. As you know, the layout of the book does not change if you put the sticky notes in -- no matter how big or how much space they take, they just float above (over) the text. If you need to insert a new paragraph in the book however, you will not be using sticky notes, as you want your new paragraph to push the rest of the content rather hanging over it. Because you usually want things in your page to interact (this element starts when that one ends, etc), it is not good to compose a page with sticky notes that are completely unaware of each other. Hope it sheds some light on the whole positioning topic.

 

[ChrisHunt]

More to the point, the implementation of absolute positioning in some browsers was/is rather buggy. Working around the bugs makes positioning even more complicated than it already is...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd