jarv
07-06-2011, 12:51 PM
hi,
on my site, I have a navigation of 970px wide but each menu button has it's own color, as you can see on my site, there are a few pixels need to push out the last menu button NICHE HISTORIC:
http://www.jbiddulph.com/niche/niche-historic.html
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Niche - Niche Historic</title>
<meta name="keywords" content="Niche"/>
<meta name="description" content="Niche"/>
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */function navChange(){
$('#nav ul li').each(function(){
$(this).append('<span />');
$(this).hover(function(){
$('span', this).stop().animate({backgroundColor: $(this).css('border-bottom-color')}, 1300).animate({opacity: 1}, 1300);
}, function () {
$('span', this).stop().animate({opacity: 0}, 1000);
});
});
}
$(document).ready(function() {
navChange();
});/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */$(function() {
$('#slideshow1').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000,
pager: '#nav1',
before: onBefore,
next: $('#slideshow1 img')
});
function onBefore() {
$('#title').html(this.alt);
}
});/* ]]> */
</script>
</head>
<body id="historic">
<div id="wrapper">
<div id="topheader">
<div class="colors"> </div>
<div class="logo">Niche Logo</div>
</div>
<div id="nav">
<ul>
<li class="home"><a href="index.html">HOME</a></li>
<li class="about"><a href="about.html">ABOUT US</a></li>
<li class="cdesign"><a href="commercial-design.html">COMMERCIAL DESIGN</a></li>
<li class="rdesign"><a href="residential-design.html">RESIDENTIAL DESIGN</a></li>
<li class="services"><a href="services.html">SERVICES</a></li>
<li class="clients"><a href="clients.html">CLIENTS</a></li>
<li class="contact"><a href="contact.html">CONTACT</a></li>
<li class="historic selected"><a href="niche-historic.html">NICHE HISTORIC</a></li>
</ul>
</div>
<div id="header">
<div id="slideshow1">
<img src="images/banner1.jpg" alt="1"/>
<img src="images/banner2.jpg" alt="2"/>
<img src="images/banner3.jpg" alt="3"/>
</div>
</div>
<div id="content">
<div id="left-panel">
<h2>INTERIOR DESIGN SERVICES:</h2>
<ul>
<li>Retail</li>
<li>Hotels</li>
<li>Exhibitions</li>
<li>Showrooms</li>
<li>Offices</li>
<li>Residential</li>
<li>Leisure</li>
</ul>
</div>
<div id="right-panel">
<p>Welcome to Niche Interior Design Brighton. We are a young dynamic company with a passion for creating innovative interior design solutions for both the commercial and residential markets.</p>
<p>We work closely with our clients taking time to understand their vision and the needs and desires of the people who will be using the space. This ensures the final designed environments not only look stunning but respond ultimately to the people that will experience it.
</p>
</div>
</div>
<div id="footer">
<ul>
<li>Home</li>
<li>Retail Design Brighton</li>
<li>Residential Design Brighton</li>
<li>Hotel Design Brighton</li>
<li>Exhxibition Design Brighton</li>
<li>Links down here to help with SEO</li>
<li>Design www.sbannister.co.uk</li>
</ul>
</div>
</div>
</body>
</html>
css
/* main bits */
html { background-color: #000000; }
body { background-color: #000000; font-size: 12px; }
#home .selected{ background-color: #ff8300; }
#about .selected{ background-color: #50c1ff; }
#cdesign .selected{ background-color: #c1c100; }
#rdesign .selected{ background-color: #6f0c6a; }
#services .selected{ background-color: #bc2b3c; }
#clients .selected{ background-color: #609600; }
#contact .selected{ background-color: #e45fbc; }
#historic .selected{ background-color: #063750; }
#wrapper { margin: 0 auto; width:970px; background-color: #292929; display: block; margin-top: 28px; padding:15px 15px 0px 15px; }
/* TOP HEADER */
#topheader { height:65px; background-color: #333333; }
#topheader .logo { background-image: url(../images/logo.jpg); float: left; height:65px; width:257px; overflow: hidden; text-indent: -400px; display: block; }
#topheader .colors { background-image: url(../images/colors-right.jpg); float: right; height:65px; width:101px; display: block; }
/* NAVIGATION */
#nav { width:970px; height:28px; background-image: url(../images/nav-grey.gif); background-repeat: repeat-x; }
#nav li { display: inline; float:left; padding: 5px 21px; position: relative; }
#nav li.home{ border-bottom: 4px solid #ff8300; }
#nav li.about{ border-bottom: 4px solid #50c1ff; }
#nav li.cdesign{ border-bottom: 4px solid #c1c100; }
#nav li.rdesign{ border-bottom: 4px solid #6f0c6a; }
#nav li.services{ border-bottom: 4px solid #bc2b3c; }
#nav li.clients{ border-bottom: 4px solid #609600; }
#nav li.contact{ border-bottom: 4px solid #e45fbc; }
#nav li.historic{ border-bottom: 4px solid #063750; display: block; }
#nav li a { color: #ffffff;text-decoration: none; position: relative; z-index: 2; }
#nav ul li span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
/* HEADER */
#header { width:970px; height: 370px; position: relative; }
#slideshow1 { position:absolute; top:0px; left:0px; }
#nav1 { bottom: 0px; position: absolute; right: 0px; }
#nav1 a { margin: 0 2px; font-size: 11px; font-weight: normal; padding: 3px 5px; background: #333333; text-decoration: none; color: #CBCBCB; }
#nav1 a.activeSlide { background: #ff8300; }
#nav1 a:focus { outline: none; }
/* CONTENT */
#content { width:970px; display: block; margin-top:20px; }
/* LEFT */
#left-panel { width:265px; float:left; text-align: left; color: #999999; padding-left: 20px;}
#left-panel h2 { font-size: 12px; font-weight: bold; text-transform: uppercase; color:#ff9900; margin-bottom:10px; }
#left-panel li { margin-bottom:4px; }
/* RIGHT */
#right-panel { width:685px; float:left; text-align: left; color: #999999; }
#right-panel h1 { font-size: 28px; color:#ff9900; margin-bottom:10px; }
#right-panel h2 { font-size: 20px; color:#ff9900; margin-bottom:10px; }
#right-panel p { padding-right: 210px; margin-bottom: 20px; font-size: 13px; }
/* FOOTER */
#footer { color: #999999; font-size: 10px; width:970px; display: block; clear:both; padding:10px 0px;}
#footer li { display: inline; padding:0px 10px; border-right:1px solid #999999; }
on my site, I have a navigation of 970px wide but each menu button has it's own color, as you can see on my site, there are a few pixels need to push out the last menu button NICHE HISTORIC:
http://www.jbiddulph.com/niche/niche-historic.html
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Niche - Niche Historic</title>
<meta name="keywords" content="Niche"/>
<meta name="description" content="Niche"/>
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */function navChange(){
$('#nav ul li').each(function(){
$(this).append('<span />');
$(this).hover(function(){
$('span', this).stop().animate({backgroundColor: $(this).css('border-bottom-color')}, 1300).animate({opacity: 1}, 1300);
}, function () {
$('span', this).stop().animate({opacity: 0}, 1000);
});
});
}
$(document).ready(function() {
navChange();
});/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */$(function() {
$('#slideshow1').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000,
pager: '#nav1',
before: onBefore,
next: $('#slideshow1 img')
});
function onBefore() {
$('#title').html(this.alt);
}
});/* ]]> */
</script>
</head>
<body id="historic">
<div id="wrapper">
<div id="topheader">
<div class="colors"> </div>
<div class="logo">Niche Logo</div>
</div>
<div id="nav">
<ul>
<li class="home"><a href="index.html">HOME</a></li>
<li class="about"><a href="about.html">ABOUT US</a></li>
<li class="cdesign"><a href="commercial-design.html">COMMERCIAL DESIGN</a></li>
<li class="rdesign"><a href="residential-design.html">RESIDENTIAL DESIGN</a></li>
<li class="services"><a href="services.html">SERVICES</a></li>
<li class="clients"><a href="clients.html">CLIENTS</a></li>
<li class="contact"><a href="contact.html">CONTACT</a></li>
<li class="historic selected"><a href="niche-historic.html">NICHE HISTORIC</a></li>
</ul>
</div>
<div id="header">
<div id="slideshow1">
<img src="images/banner1.jpg" alt="1"/>
<img src="images/banner2.jpg" alt="2"/>
<img src="images/banner3.jpg" alt="3"/>
</div>
</div>
<div id="content">
<div id="left-panel">
<h2>INTERIOR DESIGN SERVICES:</h2>
<ul>
<li>Retail</li>
<li>Hotels</li>
<li>Exhibitions</li>
<li>Showrooms</li>
<li>Offices</li>
<li>Residential</li>
<li>Leisure</li>
</ul>
</div>
<div id="right-panel">
<p>Welcome to Niche Interior Design Brighton. We are a young dynamic company with a passion for creating innovative interior design solutions for both the commercial and residential markets.</p>
<p>We work closely with our clients taking time to understand their vision and the needs and desires of the people who will be using the space. This ensures the final designed environments not only look stunning but respond ultimately to the people that will experience it.
</p>
</div>
</div>
<div id="footer">
<ul>
<li>Home</li>
<li>Retail Design Brighton</li>
<li>Residential Design Brighton</li>
<li>Hotel Design Brighton</li>
<li>Exhxibition Design Brighton</li>
<li>Links down here to help with SEO</li>
<li>Design www.sbannister.co.uk</li>
</ul>
</div>
</div>
</body>
</html>
css
/* main bits */
html { background-color: #000000; }
body { background-color: #000000; font-size: 12px; }
#home .selected{ background-color: #ff8300; }
#about .selected{ background-color: #50c1ff; }
#cdesign .selected{ background-color: #c1c100; }
#rdesign .selected{ background-color: #6f0c6a; }
#services .selected{ background-color: #bc2b3c; }
#clients .selected{ background-color: #609600; }
#contact .selected{ background-color: #e45fbc; }
#historic .selected{ background-color: #063750; }
#wrapper { margin: 0 auto; width:970px; background-color: #292929; display: block; margin-top: 28px; padding:15px 15px 0px 15px; }
/* TOP HEADER */
#topheader { height:65px; background-color: #333333; }
#topheader .logo { background-image: url(../images/logo.jpg); float: left; height:65px; width:257px; overflow: hidden; text-indent: -400px; display: block; }
#topheader .colors { background-image: url(../images/colors-right.jpg); float: right; height:65px; width:101px; display: block; }
/* NAVIGATION */
#nav { width:970px; height:28px; background-image: url(../images/nav-grey.gif); background-repeat: repeat-x; }
#nav li { display: inline; float:left; padding: 5px 21px; position: relative; }
#nav li.home{ border-bottom: 4px solid #ff8300; }
#nav li.about{ border-bottom: 4px solid #50c1ff; }
#nav li.cdesign{ border-bottom: 4px solid #c1c100; }
#nav li.rdesign{ border-bottom: 4px solid #6f0c6a; }
#nav li.services{ border-bottom: 4px solid #bc2b3c; }
#nav li.clients{ border-bottom: 4px solid #609600; }
#nav li.contact{ border-bottom: 4px solid #e45fbc; }
#nav li.historic{ border-bottom: 4px solid #063750; display: block; }
#nav li a { color: #ffffff;text-decoration: none; position: relative; z-index: 2; }
#nav ul li span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
/* HEADER */
#header { width:970px; height: 370px; position: relative; }
#slideshow1 { position:absolute; top:0px; left:0px; }
#nav1 { bottom: 0px; position: absolute; right: 0px; }
#nav1 a { margin: 0 2px; font-size: 11px; font-weight: normal; padding: 3px 5px; background: #333333; text-decoration: none; color: #CBCBCB; }
#nav1 a.activeSlide { background: #ff8300; }
#nav1 a:focus { outline: none; }
/* CONTENT */
#content { width:970px; display: block; margin-top:20px; }
/* LEFT */
#left-panel { width:265px; float:left; text-align: left; color: #999999; padding-left: 20px;}
#left-panel h2 { font-size: 12px; font-weight: bold; text-transform: uppercase; color:#ff9900; margin-bottom:10px; }
#left-panel li { margin-bottom:4px; }
/* RIGHT */
#right-panel { width:685px; float:left; text-align: left; color: #999999; }
#right-panel h1 { font-size: 28px; color:#ff9900; margin-bottom:10px; }
#right-panel h2 { font-size: 20px; color:#ff9900; margin-bottom:10px; }
#right-panel p { padding-right: 210px; margin-bottom: 20px; font-size: 13px; }
/* FOOTER */
#footer { color: #999999; font-size: 10px; width:970px; display: block; clear:both; padding:10px 0px;}
#footer li { display: inline; padding:0px 10px; border-right:1px solid #999999; }