# overlay layout with one big picture and DIVS on top



## emopoops (Jan 27, 2009)

im having troubles. this is what ive done: 
im made a large image with boxes as u can see here :
http://socialemo.com/clique/
and ive set position:absolute for these different divs.
theres a total of 6 divs.
and ive added to the css or whatever its called like left:60px and right:777px or whatever looked good on MY COMPUTER.

i even was like oh im going to check my other browsers to see if the divs are in the right place on them too. and there was this thing they are not the same positioning.
but "pretty" close.
so i checked firefox, gooogle chrome, flock, and ie to make this layout so far.
and i always thot the whole time i was making it maybe there was a different way to do it so its exact in all browsers... but i didnt know how... andSTILL DONT.
then
i checked two other computers in my house.
it wasnt like the browsers difference of positioning.
this was like wayyyyyy more off.

my screen is widescreen i dont know if that matters.
but my brother computer is too and its still way off from mine
and my moms pc is NOT widescreen and its way off like my brothers.
i dont know what to do
way off being... i dont know if its like it for any of u people that are going to read this..
but the about section was like in the links section.
like WAYYYYY OFFF.
shifted to the right. my computer is vista and theres is xp
but is there
a
way
*to position
the divs
so they are in the right area
FOR ALL COMPUTERS And BROWSERS.?*


----------



## tomdkat (May 6, 2006)

emopoops said:


> but is there
> a
> way
> *to position
> ...


Yep, there sure is. 

First, make sure you use *valid* HTML. 

Here is a test case that should get you started:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Using CSS to position DIVs over a background image</title>

  <style type="text/css">
#container {
  border: 1px solid black;
  background-image: url(bg.png);
  background-repeat: no-repeat;
  display: block;
  width: 555px;
  margin-right: auto;
  margin-left: auto;
  background-position: center top;
  height: 700px;
  color: white;
  position: relative;
}
.top-box {
  display: block;
  width: 88px;
  height: 100px;
  padding-right: 5px;
  padding-left: 5px;
  top: 150px;
  color: black;
  background-color: silver;
}
#link-box {
  border: 1px solid #e91286;
  color: black;
  position: absolute;
}
#about-box {
  border: 1px solid #99ff99;
  margin-left: 150px;
  position: absolute;
}
#rawr-box {
  border: 1px solid #ccccff;
  margin-left: 300px;
  position: absolute;
}
#blah-box {
  border: 1px solid #00c6ff;
  position: absolute;
  margin-left: 452px;
}
#user-box {
  border: 1px solid white;
  display: block;
  position: absolute;
  left: 50px;
  top: 400px;
  height: 285px;
  padding-right: 5px;
  padding-left: 5px;
  width: 140px;
  color: white;
}
#about-them-box {
  border: 1px solid #0094ff;
  display: block;
  position: absolute;
  top: 410px;
  left: 280px;
  height: 275px;
  padding-right: 5px;
  padding-left: 5px;
  width: 225px;
}

  </style>
</head>
<body style="color: rgb(0, 0, 0); background-color: black;" alink="#000099" link="#000099" vlink="#990099">

<div id="container">
<div class="top-box" id="link-box">links</div>
<div id="about-box" class="top-box">about</div>
<div id="rawr-box" class="top-box">rawr</div>
<div id="blah-box" class="top-box">blah</div>
<div id="user-box">user</div>
<div id="about-them-box">about-them</div>
</div>

</body>
</html>
```
Attached is a screenshot of the above HTML in Safari 4 beta on Windows XP Pro.

Peace...


----------



## emopoops (Jan 27, 2009)

wow thats amazing literally all in the same position!
thx!
but wtf is the top-box classthingy? i dont understand that one. just wondering.

why do u need two: an id and class i dont get it i thought u could put all the information into one either a class or an id

ok and is it the display:block and position:absolute what makes it stay in the same position in all browsers ect...
and the background-image
and the top center 
?
or is there more that makes it stay in the same spot?


----------



## tomdkat (May 6, 2006)

emopoops said:


> but wtf is the top-box classthingy? i dont understand that one. just wondering.


Well, if you look at the definition of the "top-box" class, you will see the style rules that apply to the elements assigned that class. The boxes at the top of the image are all the same distance from the top, they are all the same height and width. So, rather than define those attributes repeatedly, I assign those to a class and assign the class to the appropriate elements.



> why do u need two: an id and class i dont get it i thought u could put all the information into one either a class or an id


The id is needed to target specific elements while the class is used to define style rules applied to elements assigned to that class. If you look again at the elements of class "top-box", you will see they have different left offsets. This is because each box is a different distance from the left side of the "container" DIV. So, each top box needs its own left offset even though the box itself is the same distance from top of the "container" DIV and is the same height and width.



> ok and is it the display:block and position:absolute what makes it stay in the same position in all browsers ect...
> and the background-image
> and the top center
> ?
> or is there more that makes it stay in the same spot?


The absolute positioning (position: absolute) controls the placement of the elements over the background image. The trick here is I made the background image the background of the "container" DIV, and not the background of the page itself. Then, I used absolute positioning of DIVs _inside_ the "container" DIV, which means those DIVs will be positioned in absolute locations within the "container" DIV. If the "container" DIV changes dimension, the absolute positions will be off. Since the "container" DIV is centered on the page, all of the elements contained in it will appear in the center of the page. The DOCTYPE forces the browser into "standards" mode, meaning it should strictly adhere to the W3 HTML and CSS standards which maximizes the potential for consistent behavior across modern browsers. The above HTML behaves consistently in Safari 4 beta, Opera 10 alpha, Firefox 3.0.6, Google Chrome 1.0.154.48, and IE7 all running on my Windows XP Pro (SP2) system.

I developed the above HTML using the Kompozer web design tool and didn't write any of the CSS by hand. Due to a quirk in Kompozer, I had to touch the raw HTML some in order to create the DIVs I needed.

Peace...


----------



## emopoops (Jan 27, 2009)

ok ok i get it now thx!


----------

