Converting tables layout to table-less

**drhowarddrfine** · Feb 14 '08, 04:09 AM

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** · Feb 14 '08, 05:59 AM

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** · Feb 14 '08, 09:57 AM

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** · Feb 14 '08, 12:56 PM

Hi,

Originally posted by 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.

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** · Feb 14 '08, 03:22 PM

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.cs s">
<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:wh ite">Content Here</p>
</div>

</body>
</html>[/HTML]
[code=css]
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(image s/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;
}

[/code]

**Shawn Northrop** · Feb 15 '08, 06:39 PM

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:

Code:

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** · Feb 15 '08, 10:50 PM

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** · Feb 16 '08, 04:50 AM

Welcome back,

Originally posted by Shawn Northrop

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,

Code:

#banner
{vertical-align:bottom;}
<img src="images/top.jpg" alt="" width="850" height="100" id="banner" >

Keep up the good work,
Rawan.

**Shawn Northrop** · Feb 17 '08, 03:46 AM

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** · Feb 17 '08, 04:59 AM

Hi,

Originally posted by Shawn Northrop

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.htm l" onMouseOver="do cument.tg.src=' images/topguy2.jpg'" onMouseOut="doc ument.tg.src='i mages/topguy.jpg'">
<img src="images/band_l.jpg" alt="" width="100"><p> Shows</p></a>[/HTML]

Converting tables layout to table-less

Converting tables layout to table-less

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment