Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

capping a nav background

9:06 pm on Jan 15, 2013 (gmt 0)

Junior Member

joined:Oct 19, 2011
posts: 161
votes: 0

I have a background image consisting of 2 white lines, one on the top and one on the bottom. The client want to cap those lines off on the ends. I created a separate image to use as a cap, but because of the design of the site, I cannot place the cap properly unless I use an absolute position, which I do not want to do.

nav{margin-left:12%; margin-right:12%; background-image:url('navback.png'); width:76%; }
section{margin-left:12%; margin-right:12%; background-color:#ffffff; border-color:#333; border-width:12px; padding:1em; padding-bottom:2em;}

<div align="center">
<img src="home2.png" width="58" height="50" name="nav1" class="leftpad" alt="" title="" border="0" />&nbsp;
<a href="services.php" onMouseOver="img_act('nav2')" onMouseOut="img_inact('nav2')"><img src="services.png" width="84" height="50" name="nav2" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="photos.php" onMouseOver="img_act('nav3')" onMouseOut="img_inact('nav3')"><img src="photos.png" width="68" height="50" name="nav3" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="videos.php" onMouseOver="img_act('nav4')" onMouseOut="img_inact('nav4')"><img src="videos.png" width="69" height="50" name="nav4" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="estimates.php" onMouseOver="img_act('nav5')" onMouseOut="img_inact('nav5')"><img src="estimates.png" width="150" height="50" name="nav5" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="contact.php" onMouseOver="img_act('nav6')" onMouseOut="img_inact('nav6')"><img src="contact.png" width="76" height="50" name="nav6" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="promotions.php" onMouseOver="img_act('nav7')" onMouseOut="img_inact('nav7')"><img src="promotions.png" width="112" height="50" name="nav7" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="materials.php" onMouseOver="img_act('nav8')" onMouseOut="img_inact('nav8')"><img src="materials.png" width="90" height="50" name="nav8" class="leftpad" alt="" title="" border="0" /></a>&nbsp;
<a href="recycling.php" onMouseOver="img_act('nav9')" onMouseOut="img_inact('nav9')"><img src="recycling.png" width="97" height="50" name="nav9" class="leftpad" alt="" title="" border="0" /></a>&nbsp;

Anyone have any thoughts?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members