- Aug 31, 2001
- 21,205
- 165
- 106
question concerning the header image and menus. well only the menus now as they are not positioning correctly.
gallery
i want it to look like this
edit: ok so i figured out how to have the header image centered. but the menus arent showing up where i want them to. How do i get the menus to start 20 pixels from the left edge of the background image? how do i set the position of the menus absolute relative to the header image?
html
CSS
gallery
i want it to look like this
edit: ok so i figured out how to have the header image centered. but the menus arent showing up where i want them to. How do i get the menus to start 20 pixels from the left edge of the background image? how do i set the position of the menus absolute relative to the header image?
html
<div id="gsHeader">
<ul class="menu">
<li class="page_item"><a href="http://www.raktim.com" title="Blog">Blog</a></li>
<li class="current_page_item"><a href="http://www.raktim.com/gallery/main.php" title="Gallery">Gallery</a></li>
<li class="page_item"><a href="http://www.raktim.com/about" title="About">About</a></li>
<li class="page_item"><a href="http://www.raktim.com/guestbook" title="Guestbook">Guestbook</a></li>
<li class="page_item"><a href="http://www.raktim.com/archivepage" title="Archives">Archives</a></li>
</ul>
</div>
CSS
#gsHeader{
height: 100px;
text-align: left;
/*padding: 0 0 0 0;*/
position: relative;
background: url('../ice/images/head_aruba1.jpg') center center no-repeat;
}
/* Rak - below added for header menus*/
ul.menu {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 20px;
width: 90%;
}
ul.menu li {
display: inline;
margin: 0;
}
ul.menu,
ul.menu li a {
padding: 5px 15px 6px !important;
}
ul.menu li a {
font-size: 1em !important;
color: white !important;
margin: 0 !important;
background: black !important;
}
ul.menu li a:hover {
background: black !important;
color: white !important;
text-decoration: none !important;
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_item a:visited {
background: black !important;
color: white !important;
text-decoration: none !important;
}