Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning DIVs over an image

    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

    Code:
    <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;image=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>
    Code:
    * {
    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...
    Code:
    www.jordinsparks.cc/mediafiles/sos.flv&amp;backcolor=000000&amp;frontcolor=FFFFFF&amp;lightcolor=FFFFFF&amp;screencolor=000000&amp;controlbar=none&amp;image=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
    Code:
    #menuwrapper {
    float:left;
    clear: left;
    margin-right:2px;
    }
    You have no DocType. See the links in my sig.

    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I love you!! Thank you SO much! That did the trick! One issue though, now the menu and news divs won't come up to their original place...

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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Veton View Post
    I love you!! Thank you SO much! That did the trick! 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 but overflow:auto; does not give good results.
    Try this instead:
    Code:
    * {
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot! That fixed it; and adding a DocType now. Thanks a bunch!!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
     <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •