Converting tables layout to table-less

Shawn Northrop

Hey everybody. I am trying to convert a website that was built using tables into one with using div tags. Not as easy as i thought. Heres the site
http://www.jeanneflight.com/JF -- CSS layout
http://www.jeanneflight.com/JF/tables -- table layout

My problems relating to first link:
1 Internet explorer crashes
2 The background image for the second div does show up
3 Alignment: The First Div contains 3 images. In the css file I needed to add border = 0px; otherwise the image at the top would be placed on the complete right side of the page, and the text underneath the banner on the complete left side. The second div should be beneath the first though the images are not a complete line beneath one another.

Any other helpful comments on how to approach this code would be appreciated.

Thanks,
Shawn

drhowarddrfine

HTML/CSS does not make any browser crash. If IE is crashing, it's doing it on its own.

If you want to declare xhtml then you should use xhtml and not an older, deprecated form of html. So validate your html and css for that list of errors and when I wake up in the morning I might have time to play with this. :)

Shawn Northrop

Thanks, im using dreamweaver as a code editor and it through the xhtml automatically, i switched to transitional and the code is validating. Though i still am having the error with the image alignment

Shawn Northrop

I made a little more progress.

I created a div(class=bg) which holds the background image. Nested inside this are 2 divs, menu and content.I want to have them side by side inside of the div(class=bg). Instead they are stacking above one another.

With firefox my background image does not appear (works in safari).

Also, Should i be using XHTML, Strict, or Transitional? Transitional seemed to removed my errors for validation, and strict removed most except for the align="" attributes. Would i be expected to know one over the other in a professional environment?

just a feeling

Hi,

I made a little more progress.
I created a div(class=bg) which holds the background image. Nested inside this are 2 divs, menu and content.I want to have them side by side inside of the div(class=bg). Instead they are stacking above one another.

add float:left to div.menu and it should work.

Also, Should i be using XHTML, Strict, or Transitional? Transitional seemed to removed my errors for validation, and strict removed most except for the align="" attributes.

Any new web pages should be created using Strict DTD. It's more solidly future-proof. Transitional allows deprecated elements in the markup such as font and align.

HTH,
Rawan.

drhowarddrfine

This simplifies things a bit.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jeanne Flight</title>
</head>
<body>

<div class="top">
<img src="2_files/topguy.jpg" alt="" id="top-guy">
<img src="2_files/top.jpg" alt="">
<img src="2_files/jf.jpg" alt="" id="jf">
</div>
<div class="bg">
<div class="menu">
<img src="2_files/band_l.jpg" alt="">
<img src="2_files/dl_l.jpg" alt="">
<img src="2_files/pic_l.jpg" alt="">
<img src="2_files/merch_l.jpg" alt="">
</div>
<p style="color:white">Content Here</p>
</div>

</body>
</html>[/HTML]

Expand|Select|Wrap|Line Numbers

 
body{

    margin:0 auto;

    width:850px;

    background-color:#000

    }

div.top {

    width:850px;

    height:170px;

    border-color:red;

    border-style:solid;

}

#top-guy{

    float:right;

    }

#jf{

    float:left;

    }

div.bg {

    width:850px;

    background-image:url(images/bg.jpg);

    background-repeat:no-repeat;

    height:530px;

    z-index: 1;

    border-color:#FF9999;

    border-style:solid;

}

div.menu {

    float:left;

    width:250px;

    height:500px;

    z-index: 2;

    border-color:#33CC00;

    border-style:solid;

}

.menu img{

    clear:both;

    float:left;

    }

Shawn Northrop

Thanks, its alot closer to what im looking for. I think i understand most of the changes. Im assuming this centers the content with a width of 850px:

Expand|Select|Wrap|Line Numbers

 body{

    margin:0 auto;

    width:850px;

    background-color:#000

    }

I put some space between the 4 menu images, though i'm sure there is a better way to approach that as well.

Also, the background image is still not appearing in firefox.

If you get a chance and could take a look at the bgimage problem as well as some advice on the 4 images i would appreciate it.

Thanks for all your help, i think I'm learning something.... slowly :)

Shawn Northrop

Fixed the background image!!!

One more thing i noticed, there seems to be a space between the banner and the image that says jeanne flight underneath. I tried a few things border:none margins:0px; padding:0px; none of these seem to work.

just a feeling

Welcome back,

i think I'm learning something.... slowly :)

Noooo. You’re getting better every day.

Fixed the background image!!!

GREAT! GOOD WORK!

One more thing i noticed, there seems to be a space between the banner and the image that says jeanne flight underneath. I tried a few things border:none margins:0px; padding:0px; none of these seem to work.

Add this,

Expand|Select|Wrap|Line Numbers

 #banner

{vertical-align:bottom;}

<img src="images/top.jpg" alt="" width="850" height="100" id="banner" >

Keep up the good work,
Rawan.

Shawn Northrop

Thanks, that fixed that problem. I am almost finished with the layout just a couple more questions.

1)The top div and 2nd div do not seem to be aligning correctly. The faded yellow line should be closer (up) to the image that says jeanneflight. If i add a border to the divs they align correctly. Without the border they will align if there is enough content to squish them together. Check out the photos page vs the other pages.

2)I need to align the 4 text links next to the images on the left and am not sure how to do this.

just a feeling

Hi,

1)The top div and 2nd div do not seem to be aligning correctly. The faded yellow line should be closer (up) to the image that says jeanneflight. If i add a border to the divs they align correctly. Without the border they will align if there is enough content to squish them together. Check out the photos page vs the other pages.

Set margin and padding to 0.

2)I need to align the 4 text links next to the images on the left and am not sure how to do this

Remember that Images are inline elements. So, float the image to left ( u already did that ) and specify it's width. Then, put the text between <p> tags.
[HTML]<a href="sadie.html" onMouseOver="document.tg.src='images/topguy2.jpg'" onMouseOut="document.tg.src='images/topguy.jpg'">
<img src="images/band_l.jpg" alt="" width="100"><p>Shows</p></a>[/HTML]

Converting tables layout to table-less

Post your reply

Similar topics