By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,936 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

Converting tables layout to table-less

P: 67
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
Feb 14 '08 #1
Share this Question
Share on Google+
10 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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. :)
Feb 14 '08 #2

P: 67
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
Feb 14 '08 #3

P: 67
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?
Feb 14 '08 #4

just a feeling
P: 87
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.
Feb 14 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
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
  1. body{
  2.     margin:0 auto;
  3.     width:850px;
  4.     background-color:#000
  5.     }
  6. div.top {
  7.     width:850px;
  8.     height:170px;
  9.     border-color:red;
  10.     border-style:solid;
  11. }
  12. #top-guy{
  13.     float:right;
  14.     }
  15. #jf{
  16.     float:left;
  17.     }
  18. div.bg {
  19.     width:850px;
  20.     background-image:url(images/bg.jpg);
  21.     background-repeat:no-repeat;
  22.     height:530px;
  23.     z-index: 1;
  24.     border-color:#FF9999;
  25.     border-style:solid;
  26. }
  27. div.menu {
  28.     float:left;
  29.     width:250px;
  30.     height:500px;
  31.     z-index: 2;
  32.     border-color:#33CC00;
  33.     border-style:solid;
  34. }
  35. .menu img{
  36.     clear:both;
  37.     float:left;
  38.     }
  39.  
  40.  
Feb 14 '08 #6

P: 67
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
  1. body{
  2.     margin:0 auto;
  3.     width:850px;
  4.     background-color:#000
  5.     }

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 :)
Feb 15 '08 #7

P: 67
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.
Feb 15 '08 #8

just a feeling
P: 87
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
  1. #banner
  2. {vertical-align:bottom;}
  3. <img src="images/top.jpg" alt="" width="850" height="100" id="banner" >
Keep up the good work,
Rawan.
Feb 16 '08 #9

P: 67
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.
Feb 17 '08 #10

just a feeling
P: 87
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]
Feb 17 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.