Hi friends,
Please take a look at my in-progress web re-design at http://www.jessestern.com/newsite
Please view using Firefox, because I have not yet even begun to debug with IE.
My question: In the nav menu, I am using PHP to set a class ="currentpage" to the current page's <li> tag. I am using id's in the <li> tags to load the background images, and i need to access the currentpage to move the background-position. Basically, a 3-way switch, but I can't get the code to listen to .currentpage.
I probably have the wrong understanding of how classes override id's, or how the whole hierarchy thing works in css, so any pointers would be most appreciated.
and
And since this is a review thread, I welcome any feeback on my site's humble design....
Oh, and if it helps, here are the source files in question:
http://www.jessestern.com/newsite/index.html
http://www.jessestern.com/newsite/style/style.css
http://www.jessestern.com/newsite/style/about.png
Please take a look at my in-progress web re-design at http://www.jessestern.com/newsite
Please view using Firefox, because I have not yet even begun to debug with IE.
My question: In the nav menu, I am using PHP to set a class ="currentpage" to the current page's <li> tag. I am using id's in the <li> tags to load the background images, and i need to access the currentpage to move the background-position. Basically, a 3-way switch, but I can't get the code to listen to .currentpage.
I probably have the wrong understanding of how classes override id's, or how the whole hierarchy thing works in css, so any pointers would be most appreciated.
Code:
<li id=about<?php if ($this_page=="About")
echo " class=\"currentpage\""; ?>>
<a href="index.html">
<span>
<em>About</em>
</span>
</a>
</li>
Code:
#menu li a {
display:block;
height:25px; width:120px;
background-position:center -28px;
cursor:pointer;
}
/* I want the next line to override the background-position
of the previous line, forcing the top of the image to show
(instead of the image at -28px) */
#menu li .currentpage a {
background-position:center top;
}
#menu li a:hover span {
display: block;
position: relative;
width:180px;
height:48px;
left:-34px;
top:-8px;
z-index: 1;
background-position:center bottom;
}
#menu li#about a, #menu li#about a:hover span {
background-image:url(about.png);
}
And since this is a review thread, I welcome any feeback on my site's humble design....
Oh, and if it helps, here are the source files in question:
http://www.jessestern.com/newsite/index.html
http://www.jessestern.com/newsite/style/style.css
http://www.jessestern.com/newsite/style/about.png
Last edited: