Forums

Give help. Get help.

  • # 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.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag