So, my home page is looking good so far www.paintbypixels.com (http://www.paintbypixels.com). Now what I want to do is to create a similar banner for all other pages on my site, and move the navibar from being embedded in my banner, to its own separate navibar on the left side of every page. A vertical navibar, and a slimmed down banner?
If so, I want this to be the template for all subsequent pages, gallery pages, etc. Just the homepage will be the oddball of them all.
Or, will I have to link second banner and a new navibar to all other pages manually? Courtney, I through together a menu that works with your homepage banner.:D
Hover over the menu items there and you'll see it work, err ... not see it but
it works. I left the red border turned on so you could see it. Remove the red
banner code when ready.
Add this to your header, replace the banner line.
<div id="my_banner">
<div class="bannerMenu">
<ul>
<li><a href="http://www.paintbypixels.com/" title="about"</a> </li>
<li><a href="http://www.paintbypixels.com/" title="gear"</a> </li>
<li><a href="http://www.paintbypixels.com/" title="inspiration"</a> </li>
<li><a href="http://www.paintbypixels.com/" title="galleries"</a> </li>
<li><a href="http://www.paintbypixels.com/" title="resources"</a> </li>
</ul>
</div>
</div>
Add this to your CSS
.homepage .bannerMenu {display: block;}
.bannerMenu {
display: none;
position: relative;
top: 170px;
margin-left: 190px;
}
.bannerMenu ul {
list-style-type: none;
}
.bannerMenu ul li a,
.bannerMenu ul li a:visited {
display:block;
margin:0 auto;
margin-bottom: -9px;
width: 110px;
height: 20px;
line-height: 12px;
border: 1px solid red;
}
.bannerMenu ul li ul {
display:none;
}
Note: all this was done using Firefox so don't know how the other
browsers will look