...

View Full Version : Positioning DIVs over an image



Veton
11-15-2009, 07:58 PM
I am currently coding my new layout for my site JordinSparks.cc.

In order to use image maps, I have to include my header in the index.php file. When I do that, the DIVs that are supposed to be on my header image fall down below the image. When I had the header in my css file, I didn't have this problem. I have no idea what to do, I tried a bunch of stuff, but in order for me to use image maps, the header has to be in my index file so I can put the "usemap" tag in it.

http://www.jordinsparks.cc/images/layouts/3/index.php
http://www.jordinsparks.cc/images/layouts/3/style.css


<html>
<head>
<style type="text/css">

.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}

</style>

<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
<link href="style.css" type=text/css rel=stylesheet>
</head>
<body><div id="wrapper"><div id="header"><img src="images/header.png" usemap="#Map" border="0"><map name="Map" id="Map"><area shape="rect" coords="57,5,93,22" href="01" /><area shape="rect" coords="133,5,224,21" href="#" /><area shape="rect" coords="255,4,342,23" href="#" /><area shape="rect" coords="382,3,427,24" href="#" /><area shape="rect" coords="473,5,537,22" href="#" /><area shape="rect" coords="583,5,640,23" href="#" /><area shape="rect" coords="684,7,732,22" href="#" /><area shape="rect" coords="783,5,836,22" href="#" /></map>


<div style="position:relative;left:348px;top:35px;width:190px;height:148px"><img src="images/button02.png" style="padding-bottom:2px;border-bottom:1px dotted #e2e2e2"><div id="video"><center><embed src="http://www.jordinsparks.cc/mediafiles/Player.swf" bgcolor="FFFFFF" allowscriptaccess="always" allowfullscreen="true" flashvars="file=http://www.jordinsparks.cc/mediafiles/sos.flv&amp;backcolor=000000&amp;frontcolor=FFFFFF&amp;lightcolor=FFFFFF&amp;screencolor=000000&amp;controlbar=none&amp;imag e=images/sospreview.png?height=100&amp;width=150&amp;stretching=exactfit" width="150" height="100"></center></div>
</div><div style="position:relative;float:left;left:5px;top:47px;width:331px;height:108px"><img src="images/button03.png" style="padding-bottom:2px;border-bottom:1px dotted #e2e2e2"><div id="welcome">Welcome to <color>JordinSparks.cc</color>, also known as <color2>Jordin Source</color2>, your number one source for everything on <color3>Grammy-nominated</color3> singer <color2>Jordin Sparks</color2>! The site has been <color3>your premier source</color3> for Jordin Sparks since <color>August 2007</color>, celebrating over 2 years online! Stick with us, as we plan to bring you <color2>all the latest news</color2>, recent <color2>photos</color2> and all the exclusive <color2>media</color2>. </div></div><div style="position:relative;float:right;right:160px;top:47px;width:190px;height:112px"><img src="images/button01.png" style="padding-bottom:2px;border-bottom:1px dotted #e2e2e2"><div id="official"><center><a href="http://www.jordinsparks.com" target="_blank"><img src="images/official01.png" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"></a><br><a href="http://www.sparkstown.com" target="_blank"><img src="images/official02.png" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"></a></center></div></div></div>

<div id="menuwrapper"><img src="images/menuup.png"><div id="menu"><img src="images/jscc.png"><br><img src="images/button04.png" style="padding-bottom:2px;border-bottom:1px dotted #e2e2e2"></div><img src="images/menudown.png"><br></div>

<div id="news"><img src="images/newsup.png"><div id="newspost"><div id="newstitle">This is a test title!</div>
This is the story. hello hehe.<br>
This is the story. hello hehe.<br>
This is the story. hello hehe.<br><br><p class="postdate">Posted on <font style="color:#626577">10.27.09</font> by Veton in <color3>Veton Rocks</color3></p></div><img src="images/newsdown.png"></div>

<div id="footer">&nbsp;</div></div>
</body>
</html>


* {
padding:0px;
margin:0px;
}

body {
background: #434343;
font-family:Tahoma;
font-size:8pt;
color: #909090;
text-align: justify;
}

#wrapper {
width:900px;
margin-left:auto;
margin-right:auto;
}

#header {
margin-left:auto;
margin-right:auto;
margin-bottom:2px;
width: 900px;
height: 312px;
}

#welcome {
background: #e2e2e2;
width:331px;
padding:4px;
margin-top:2px;
overflow:auto;
top:-400px;
}

html>body #welcome {
width: 323px;
}

#official {
background: #e2e2e2;
width:190px;
padding:10px;
margin-top:2px;
overflow:auto;
}

html>body #official {
width: 170px;
}

#video {
background: #e2e2e2;
width: 190px;
padding:10px;
margin-top:2px;
padding-bottom:13px;
overflow:auto;
}

html>body #video {
width:170px;
}

#footer {
clear:both;
}

i, em {
color: #626577;
}

b, strong {
color: #8d6a5f;
}

u {
color: #c0c0c0;
}

color {
color: #6a6a6a;
}

color2 {
color: #626577;
}

color3 {
color: #8d6a5f;
}

#news {
float:right;
}

#menuwrapper {
float:left;
margin-right:2px;
}

#menu {
width:331px;
background: #c1c1c1;
padding-left:16px;
padding-right:16px;
height:700px;
}

html>body #menu {
width:309px;
}

#newspost {
color:#707070;
width:557px;
background: #d6d6d6;
padding-left:16px;
padding-right:16px;
height:200px;
}

html>body #newspost {
width:525px;
}

#newspost .postdate {
color: #909090;
text-align:right;
}

#newstitle {
overflow:hidden;
}

#newstitle .title {
float:left;
background: #e7e7e7;
color: #909090;
font: 10pt "Tahoma";
text-transform: uppercase;
letter-spacing:2px;
text-align:center;
width:550px;
padding-top:2px;
padding-bottom:4px;
}

html>body #newstitle .title {
width: 526px;
height: 16px;
}

.date {
float:left;
background: #626577;
color: #ffffff;
font: normal 10pt "Arial Black";
text-align:center;
width: 102px;
height: 22px;
padding-left:4px;
padding-top:4px;
padding-right:4px;
padding-bottom:4px;
}

html>body .date {
width: 98px;
height: 18px;
}

.comments {
float:left;
background: #2e2e2e;
color: #ffffff;
font: normal 10pt "Arial Black";
text-align:center;
width:46px;
height: 22px;
padding-left:4px;
padding-top:4px;
padding-right:4px;
padding-bottom:4px;
}

html>body .comments {
width:42px;
height: 18px;
}

Excavator
11-15-2009, 08:14 PM
Hello Veton,
You can bring them back up with negative margins. Your code is a little difficult to edit what with all the inline styles but these changes highlighted in red will give you a start...
www.jordinsparks.cc/mediafiles/sos.flv&amp;backcolor=000000&amp;frontcolor=FFFFFF&amp;lightcolor=FFFFFF&amp;screencolor=000000&amp;controlbar=none&amp;imag e=images/sospreview.png?height=100&amp;width=150&amp;stretching=exactfit" width="150" height="100"></center></div>
</div>

<div style="position: relative; float: left; left: 5px; top: -265px; width: 331px; height: 108px;"><img src="images/button03.png" style="border-bottom: 1px dotted rgb(226, 226, 226); padding-bottom: 2px;"><div id="welcome">Welcome to <color>JordinSparks.cc</color>, also known as <color2>Jordin Source</color2>, your number one source for everything on <color3>Grammy-nominated</color3> singer <color2>Jordin Sparks</color2>! The site has been <color3>your premier source</color3> for Jordin Sparks sinc



#menuwrapper {
float:left;
clear: left;
margin-right:2px;
}

You have no DocType. See the links in my sig.

.

Veton
11-15-2009, 08:23 PM
I love you!! Thank you SO much! That did the trick! :D One issue though, now the menu and news divs won't come up to their original place...

http://www.jordinsparks.cc/images/layouts/3/

Excavator
11-15-2009, 08:56 PM
I love you!! Thank you SO much! That did the trick! :D One issue though, now the menu and news divs won't come up to their original place...

http://www.jordinsparks.cc/images/layouts/3/

It appears to be some form of uncollapsing margin (http://nopeople.com/CSS/uncollapsing-margin/index.html) but overflow:auto; does not give good results.
Try this instead:
* {
padding:0px;
margin:0px;
}

body {
background: #434343;
font-family:Tahoma;
font-size:8pt;
color: #909090;
text-align: justify;
}

#wrapper {
width:900px;
margin-left:auto;
margin-right:auto;
}

#header {
margin-left:auto;
margin-right:auto;
margin-bottom:2px;
width: 900px;
height: 312px;
overflow: hidden;
}

#welcome {
background: #e2e2e2;
width:331px;
padding:4px;
margin-top:2px;
overflow:auto;
top:-400px;
}

Excavator
11-15-2009, 08:59 PM
While overflow:hidden; does seem to bandaid your site for FF, it may not fix it in other browsers.

You MUST add a DocType for cross browser compatability.

Read every link in my sig below. Well, the first 4 anyway.

Veton
11-15-2009, 09:11 PM
Thanks alot! That fixed it; and adding a DocType now. Thanks a bunch!! :)

Excavator
11-15-2009, 09:22 PM
If you check that in the validator you'll see a lot of errors. Try starting out with this, you'll need to add your code inside the body tags -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}

</style>

<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
<link href="style.css" type="text/css" rel="stylesheet" />

</head>
<body>
insert the rest of your site here
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum