CSS graphic rollover inside a div nested inside a div - CSS-Tricks

This topic is empty.

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

Author

Posts
May 16, 2008 at 11:04 am #22674

jeffSteiman
Member

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 #47452

Argeaux
Participant

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 #47456

jeffSteiman
Member

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.
Author

Posts

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

The forum ‘CSS’ is closed to new topics and replies.