<div> layout killing me (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Pleiades -> <div> layout killing me (3/15/2008 23:52:11)

Hi guys,

I used to do all my layouts in tables and thought it's time to go for <div> instead.
Here is what I have so far: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>test</title>
</head>

<body>
<div id="container">
<div id="f1"><img border="0" src="images/f1.jpg" width="132" height="83"></div>
<div id="f2"><img border="0" src="images/f2.jpg" width="132" height="83"></div>
</div>
</body> 

</html>


based on this style sheet: 

body {
  text-align: center;
  background-color: #05305b;
  }

#container {
  margin: 0 auto;
  width: 750px;
  height: 618px;
  text-align: left;
  background-image: url(images/xyz.jpg);
  background-repeat: repeat-n;
  }
  
#f1 {
  position: relative;
  width: 132px;
  height: 83px;
  top: 164px;
  left: 36px;
  z-index:1;
}

#f2 {
  position: relative;
  width: 132px;
  height: 83px;
  top: 273px;
  left: 36px;
  z-index:2;
}


It worked great, until I added the second image #f2 which is exactly 83px below of where it is supposed to be.
Based on what I read in tutorials I was under the impression that the two images are supposed to line up based on the top left corner of the container div. So I'm not sure why #f1 is causing #f2 to be somewhere else.

Did I do something wrong in the code???
Thanks for all your help



Tailslide -> RE: <div> layout killing me (3/16/2008 4:05:34)

What exactly are you trying to achieve? It looks like you just want the images under each other but I'm not sure.

Not sure why you've got two divs there - are they just to contain the images? If so then they're unnecessary - apply classes to the images themselves.

You've also got position:relative in the two rules for the div which should only be used if you're positioning something absolutely within the div which you're not. Plus you've got z-index there which won't do what you think it will.

If you just want the images one on top of the other then just leave them like that: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>test</title>
</head>

<body>
<div id="container">
  <img  src="images/f1.jpg" width="132" height="83" />
  <img  src="images/f2.jpg" width="132" height="83" />
</div>
</body> 

</html>


*{margin:0;   padding:0;  }
body {
  text-align: center;
  background-color: #05305b;
  }

#container {
  margin: 0 auto;
  width: 750px;
  text-align: left;
  background-image: url(images/xyz.jpg);
  background-repeat: no-repeat;
  }

#container img {margin:10px 0 10px 0;border:0;}


If you want the images one after the other then add in clear:left or clear:right to the image rule.

Other issues:

With the page itself - don't have border="0" in the image tag put it in the css. Also if you're using the XHTML doctype then you need to add the forward slash before the closing ">".

With the CSS - add in the zeroing for margins and padding at the start of the stylesheet - then add it back in where necessary to individual rules. This is because every browser has different defaults so it's easier to remove them.

Also - don't set a height for the container div. You can't know how long it's going to be. People might make the text-size of the page bigger in which case it would overflow your container div. Let it grow and contract naturally.

Don't use position relative unless you're using position absolute too and keep that down to a minimum as it's too easy to get wrong at least when you're starting out.

If you need to position items on the page - use floats and margins. They look harder but actually they're not.

Don't stick everything into a div. Use divs where you need to to divide up the page (e.g. sidebar, contents, footer). You don't need to apply them to everything - you can reference the images via their containing div (e.g. #container img {blah}) or when you've got more stuff on the page you can give the image a class to reference it specifically.

Also - the two divs you've got there were called f1 and f2 - that's not very intuitive when you look at it later. Better to call them something useful like "sidebar" or "contents". Then it makes more sense.

The thing is, to be completely honest - it's difficult to tell you what to do with this tiny bit of code because you'll then add in more markup and it will need to change.

The approach I use is to have the content there first (even if it's just Lorem Ipsum) - you must have an idea of the content before you start! Then add in the semantic tags around that content such as paragraphs, lists, headings and where necessary divs to divide up the page into logical bits.

Then I add the style rules in the stylesheet to manage the content. I re-use a basic skeleton stylesheet every time so I don't need to re-write all the boring stuff. If I can't then reference bits of the page directly using what's already there I'll then add in classes where necessary.

You'll have problems if you try to do one bit - style it, do another bit - style it... it'll turn you grey!

The other thing is (sorry, honestly I'm not lecturing!) to ensure that you are checking as you go along in at least Firefox (first browser to check), Opera, IE7 and IE6. Build for Firefox, check in Opera and fix for IE.

I'm not sure where you're getting your tutorials from but I'd highly recommend http://www.htmldog.com and http://www.cssbasics.com.



Pleiades -> RE: <div> layout killing me (3/16/2008 4:51:15)

Hi, thanks for replying.

I'll try to describe what I had in mind when I started this:
I have a background picture that is 750px by 618px that I want to center on the top of the page.
Based on the layout there are two images that change on a weekly base (f1.jpg and f2.jpg) and they have to stay exactly where I tried to put them in the css file. The page won't get any longer because the content would be in a third <div> that uses overflow.

So basically it would come down to a centered background image and three layers/divs above it that always stay the same in size and don't move around on different screen sizes.

Can this be done?



Tailslide -> RE: <div> layout killing me (3/16/2008 4:59:10)

Sure - you still don't need the divs [:D]

Do you have a link to the live site so I can see what the images are etc?



Pleiades -> RE: <div> layout killing me (3/16/2008 15:57:04)

okeedokee, I think I came up with something that seems to do the trick on Opera, FF and IE and W3C validated as XHTML Transitional.
The only thing that was missing to validate as XHTML Strict was the <div align="center"> tag that keeps it all together. Every time I tried to put something similar in the css file it would throw the layout off in FF and Opera and everyhting would be on the let side.

Here is what I have: 

body {
margin: 0px;
background-color: #05305b;
}

table.one {
border-collapse: collapse;
text-align: left;
padding: 0px;
width: 750px;
height: 618px;
background-image: url(images/xyz.jpg);
background-repeat: no-repeat;
}

#f1 {
position: absolute;
width:132px;
height:83px;
margin-left: 35px;
top: 164px;
border: 0;
}

#f2 {
position: absolute;
width:132px;
height:83px;
margin-left: 35px;
top: 273px;
border: 0;
}

#f3 {
position: absolute;
width:132px;
height:83px;
margin-left: 35px;
top: 382px;
border: 0;
}

#f4 {
position: absolute;
width:132px;
height:83px;
margin-left:35px;
top:491px;
border: 0;
}

#co {
position: absolute;
text-align: left;
width:450px;
height:262px;
overflow: auto;
margin-left:256px;
top:273px;
font-family: arial, sans-serif; font-size: 10pt; color: #000000; text-decoration: none;
}


and 

<!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" xml:lang="en" lang="en"> 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>test</title>
</head>

<body>
<div align="center">
<table class="one">
<tbody>
<tr><td>
<div id="f1"><img src="images/f1.jpg" alt="img" /></div>
<div id="f2"><img src="images/f2.jpg" alt="img" /></div>
<div id="f3"><img src="images/f3.jpg" alt="img" /></div>
<div id="f4"><img src="images/f4.jpg" alt="img" /></div>
<div id="co">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque 
porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
voluptas nulla pariatur?"</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque 
porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
voluptas nulla pariatur?"</p>
</div>
</td></tr>
</tbody>
</table>
</div>

</body>

</html>


Now if there was any way to replace the table with a div and get the same effect, I'd be a happy camper.
Does anybody have an idea how I could go about that?

Thank you



Tailslide -> RE: <div> layout killing me (3/16/2008 16:07:19)

There's always a way - give me a minute.



Tailslide -> RE: <div> layout killing me (3/16/2008 16:32:48)

Ok here you go:

Linky

Valid XHTML 1.0 Strict no tables, no align=center, no unnecessary divs.

I obviously don't have the background image but I've lined it up exactly as per your version.

(note - I've removed the stylesheet link in the test page and stuck all the styles in the document head - obviously you want to use the stylesheet itself! I've also used the same image for all 3 images)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.800293E-02