Forum Moderators: not2easy
<snip>
accordingly. Now, what's my best way to do this? I have image rollovers in the nav, so I tried slicing up the image and laying it out using divs and css. I get stuck trying to put divs within divs to hold the slices - I don't even know if that's remotely the right way to do it.
Can someone give me some help on how to do this properly?
Thanks so much!
-Aaron
[edited by: swa66 at 11:24 am (utc) on Oct. 13, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
My recommendation is to build the skeleton of the layout. If you run into trouble, post the relevant code and specific questions. Once the framework is in place, build out the sections. Same drill. Work the problem out before you have tons of extra markup. If a problem comes up that you can't fix, strip the HTML and CSS down to the problem itself. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options. Repeat throughout the building of the design.
I think I got the layout how I want it. Now I'm wondering, and I've done some research but can't figure it out, how can I make the images in the nav swap out on roll over using css?
Here's the css:
body {
background-color: #ffffff;
margin:0px;
padding:0px;
}
.p {
margin:0px;
padding:0px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
text-align: inherit;
color: inherit;
line-height: inherit;
vertical-align: top;
}
p {
padding-top:0px;
margin-top:0px;
}
img {
border:0px;
}
div {
margin:0px;
padding:0px;
font-family:verdana; font-size:12px;
}
.AbsWrap {
width: 100%;
position: relative;
}
.rowWrap {
width: 100%;
}
.clearfloat {
clear:both;
height:0px;
}
a:link, a:visited{
COLOR:inherit;
text-decoration:inherit;
}
#main {
width:755px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}
#index_r1_c1 {
margin-left:0px;
margin-top:0px;
width:299px;
height:58px;
margin-bottom:0px;
float:left;
display:inline;
}
#colwrap1 {
float:left;
width:456px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;
}
#index_r1_c2 {
margin-left:0px;
margin-top:0px;
width:456px;
height:24px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c2 {
margin-left:0px;
margin-top:0px;
width:81px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c3 {
margin-left:0px;
margin-top:0px;
width:68px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c4 {
margin-left:0px;
margin-top:0px;
width:31px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c5 {
margin-left:0px;
margin-top:0px;
width:61px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c6 {
margin-left:0px;
margin-top:0px;
width:33px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c7 {
margin-left:0px;
margin-top:0px;
width:32px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c8 {
margin-left:0px;
margin-top:0px;
width:36px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c9 {
margin-left:0px;
margin-top:0px;
width:72px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r2_c10 {
margin-left:0px;
margin-top:0px;
width:42px;
height:34px;
margin-bottom:0px;
float:left;
display:inline;
}
#index_r3_c1 {
margin-left:0px;
margin-top:0px;
width:755px;
height:679px;
margin-bottom:0px;
float:left;
display:inline;
}
And here's the 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></title>
<link rel="stylesheet" type="text/css" href="./index.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
<style type="text/css">
td img {display: block;}
body {
background-color: #000000;
}
</style>
</head>
<body>
<div id="main">
<img src="images/index_r1_c1.jpg" id="index_r1_c1" alt="" />
<div id="colwrap1">
<img src="images/index_r1_c2.jpg" id="index_r1_c2" alt="" />
<br class="clearfloat" />
<img src="images/index_r2_c2.jpg" id="index_r2_c2" alt="" />
<a href="http://example.com/design.html">
<img src="images/index_r2_c3.jpg" id="index_r2_c3" alt="" />
</a>
<img src="images/index_r2_c4.jpg" id="index_r2_c4" alt="" />
<a href="http://example.com/tunes.html">
<img src="images/index_r2_c5.jpg" id="index_r2_c5" alt="" />
</a>
<img src="images/index_r2_c6.jpg" id="index_r2_c6" alt="" />
<a href="http://example.com/bio.html">
<img src="images/index_r2_c7.jpg" id="index_r2_c7" alt="" />
</a>
<img src="images/index_r2_c8.jpg" id="index_r2_c8" alt="" />
<a href="http://example.com/contact.html">
<img src="images/index_r2_c9.jpg" id="index_r2_c9" alt="" />
</a>
<img src="images/index_r2_c10.jpg" id="index_r2_c10" alt="" />
<br class="clearfloat" />
</div>
<img src="images/index_r3_c1.jpg" id="index_r3_c1" alt="" />
<br class="clearfloat" />
</div>
</body>
</html>
[edited by: swa66 at 7:27 am (utc) on Oct. 14, 2009]
[edit reason] please use example.com, it can't be owned [/edit]
