homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

capping a nav background

Msg#: 4536296 posted 9:06 pm on Jan 15, 2013 (gmt 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?


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved