Grow your CSS skills. Land your dream job.

CSS graphic rollover inside a div nested inside a div

  • # May 16, 2008 at 11:04 am

    What I’m trying to do is nest a CSS graphic rollover inside a div nested inside another div:

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Jeff Steiman Production Design Online Print Portfolio Site</title>
    <link href="jeff.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">

    <!–div header begin–>
    <div id="header"><table width="707" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/headerLeft.jpg" /></td>
    <td><img src="images/headerMiddle.jpg" width="224" height="109" /></td>
    <td><img src="images/headerRight.jpg" width="248" height="109" /></td>
    </tr>
    </table>
    </div> <!–end div header–>
    <div id="header2"></div>

    <!–end of horizontal picture section –>

    <div id="left">
    <!–div id="nav"–>

    <div class="btnHome"><a href="index.html" target="_self" border="0"></a></div>
    </div>

    <div id="navBtnAboutUs">
    <!–div id="nav"–>
    <div class="btnAboutUs"><a href="lc_About.html" target="_self" border="0"></a></div>
    </div>

    <div id="navBtnAtty">
    <!–div id="nav"–>
    <div class="btnAtty"><a href="lc_Atty.html" target="_self" border="0"></a></div>
    </div>

    <div id="navBtnTestim">
    <!–div id="nav"–>
    <div class="btnTestim"><a href="lc_Testim.html" target="_self" border="0"></a></div>
    </div>

    <div id="navBtnAreas">
    <!–div id="nav"–>
    <div class="btnAreas"><a href="lc_Areas.html" target="_self" border="0"></a></div>
    </div>

    <div id="navBtnPos">
    <!–div id="nav"–>
    <div class="btnPos"><a href="lc_Pos.html" target="_self" border="0"></a></div>
    </div>

    <div id="navBtnCon">
    <!–div id="nav"–>
    <div class="btnCon"><a href="lc_Con.html" target="_self" border="0"></a></div>
    </div>
    </div>

    <div id="right">right</div>

    <!–end container–></div>

    </body>
    </html>

    CSS:

    @charset "UTF-8";
    /* CSS Document */

    #container{
    width:707px;
    margin-left:auto;
    margin-right:auto;
    height: 786px;
    background-image: url(images/bg_Atty.jpg);
    }

    #header{
    }

    #header2{
    height: 109px;
    }

    #left{
    float:left;
    width:300px;
    height:200px;
    padding-top: 19px;
    padding-left: 17px;
    }

    #right{
    margin-left:320px;
    }
    #footer{
    clear:both;
    }

    #nav {
    width:220px;
    height:200px;

    }

    .btnHome a {
    display:block;
    margin-left: 17px;
    background-image:url(/images/btnHome.jpg)0 0;
    background-repeat: no-repeat;
    }

    .btnHome a:hover {
    display:block;
    background-position: 0px -24px;

    }

    Also, I want to be able to align a div on the right for a scrolling text window.

    I’m learning that CSS positioning is complicated and to NEVER use absolute positioning (at least that seems to be the concensus)

    One more thing: Do you know of a good reference for stuff like this. The books I’m finding are more foundation in nature. Something more like the series "Photoshop WOW" for Photoshop. More real world examples.

    Thank you for the quick response.

    Jeff

    # May 16, 2008 at 6:08 pm

    Not a real answer to you question but do you have the possibility to upload the code somewhere? Its a lot easier to just click on a link and take a look at the layout and the source.

    I saved the code on my local pc now and made a html file of it.The problem is i don’t have the images that go with it so its pretty hard to check what exactly the problem is.

    # May 16, 2008 at 7:50 pm

    Here is the link you requested:

    http://www.jeffsteiman.com/cssTricks/test3.html

    All images in place. I also tested the link and you get what is needed.

    Thanks again.

    # May 19, 2008 at 12:24 am

    I’m having trouble understanding the question I think…

    Could you explain exactly what you want this to do and what is not working now?

    And regarding absolute positioning. Don’t believe everything you read I guess, I find it very useful in many circumstances. I think it can be misused quite a bit, but if you understand it and how it works it’s just a tool like everything else. I think one of the most important "ah-ha" moments of absolute positioning is that if an element is absolutely positioned, it is absolutely positioned relative to the next parent element that is relatively positioned. That might sound greek… took a long time for that to sink in for me, but it will come :D .

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".