My div tags being read backwards or me being stupid

Sciisere2

08-04-2011, 11:13 AM

Ok so I have made quite a few websites by modifying templates and such but I thought for once I would have a go at making one from scratch. I will admit however that it has been about 6 months since I did any coding so it is probably a stupid mistake.
Basicly I am using dreamweaver and I have written my code and in the liddle preview box everything looks ok. From top to bottom it is 'title' then 'image fader' but for some reason when I save and preview it it puts them the opposite way around.

html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" media="screen"/>
</head>

<body>
<div id="header">
<p> Testtext title probz will end up a picture<br />
_____________________________________________<br />
Where my css menu will go
</p>
</div>

<div id="imgbox">
<p>
This is where my Image fader thing will go
</p>
</div>

</body>

</html>

css

/* CSS Document */

body {
font-size:100%;
font-family:'century gothic' ;
text-align:left;
background:#ffffff;
}

#header {
height:66px;
width:80%;
background:#FFFFFF;
margin:0 auto 0 auto;
position:fixed

}

#imgbox {
height:66px;
width:80%;
background:#FFFFFF;
margin:0 auto 0 auto;
position:fixed;

I realise there isnt alot of code because I wanted to sort this and i have been battling with it a few hours now. Any help or explanation would be appreciated. Thanks

vikram1vicky

08-04-2011, 11:28 AM

You have define same code for both IDs (#imgbox and #header).

Both are overlapping each other thats why 1 is not visible.

If you are using Positioning with both as fixed. You must define and top and left properties too. Otherwise botn are taking top and left as 0 by default.

:)

Try following code for example and see the change:

#header {
height:66px;
width:80%;
background:#FFFFFF;
margin:0 auto 0 auto;
position:fixed;

}

#imgbox {
height:66px;
width:80%;
background:#FFFFFF;
margin:0 auto 0 auto;
position:fixed;
top:100px;}

Sciisere2

08-04-2011, 11:41 AM

This worked perfect thank you. I made a nooby assumption that it would place it below it because one was after the other. Thanks :D

vikram1vicky

08-04-2011, 12:16 PM

This worked perfect thank you. I made a nooby assumption that it would place it below it because one was after the other. Thanks :D

You are welcome :)

Following are some links which will help you understanding CSS positioning and box model:

http://www.w3.org/TR/CSS2/box.html

http://css-tricks.com/1191-absolute-relative-fixed-positioining-how-do-they-differ/

http://css-tricks.com/2841-the-css-box-model/

http://css-tricks.com/7323-box-sizing/

http://www.barelyfitz.com/screencast/html-training/css/positioning/