Mock-up versus my CSS

[katiebugla]

Yeah a much easier way would have been just to use divs, that way you can customize the padding and margins easier and it always works out fine! Nice site though

Can you clarify the div comment? Is there a way to keep the type (SecondaryNav) type, work with the rollover, and get the cameras to rollover as well, without the DW rollover?

Thank you for the compliment on the site ... It's my first one done somewhat "right"...

[katiebugla]

Ok, I am working on making the rollovers better... I have not updated the site, as it's currently functional, but for reference sake, here is the url: http://richieadams.com. However, attached is a screen grab of what happens when I have the following code:

<nav class="SecondaryNav">
    <ul>
        <li class="first" ><a class="vimeo" href="http://player.vimeo.com/video/50409873?">Live Action&nbsp;</a><br>A quick look at my work as a director, which includes commercials, corporate videos, short films, and my first feature film.</li>
        <li class="second" ><a class="vimeo" href="http://player.vimeo.com/video/50410101?">Main Title Design&nbsp;</a><br>
          A compilation of main title design, network title design, theatrical branding, and motion picture advertising for film and
 television.</li>
        <li class="third" ><a class="vimeo" href="http://player.vimeo.com/video/50409872?">Broadcast Design/Graphics&nbsp;</a><br>A compilation of 2D & 3D motion graphic animation, special montage sequences, branding & identity, title graphics for feature films, network television, commercials and the web.</li>
        <li class="fourth" ><a class="vimeo" href="http://player.vimeo.com/video/50406488?">RRC (Co.Reel)&nbsp;</a><br>A collective look at work done through my company, including live action direction & production, main title design for film and television, and graphics for the web and TV.</li>
    </ul>
</nav>

nav.SecondaryNav ul {
	list-style: none;
	width: 100%;
}

nav.SecondaryNav li {
	display: inline;
}

nav.SecondaryNav li a{
	font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif;
	font-size: 17pt;
	text decorations: none;
	list-style-type: none;
	color: #000;
	background: url(../images/camera_icon.png) bottom right no-repeat;   
}

nav.SecondaryNav li a:hover{color:#999; background:url(../images/camera_icon_grey.png) no-repeat}

nav.SecondaryNav li.first {width:18%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt;padding-right: 10px;}
nav.SecondaryNav li.second {width:23%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt; padding-right: 4px;}
nav.SecondaryNav li.third { width:34%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt; padding-right: 5px;}
nav.SecondaryNav li.fourth { width:23%; font-family: Century, "Century Schoolbook", Garamond, "Times New Roman", Palatino, serif; font-size:10pt}