Rollver question
- Started
- Last post
- 13 Responses
- Claymantis
http://www.delicakitchen.ca/abou…
When a section is clicked from the bottom nav, the nav section stays highlighted, when your in that section.
How is that achieve?Thanks very much!
- Claymantis0
Rollover*
- honestIy0
Pseudo-classes will do it
http://www.w3schools.com/CSS/css…
- Claymantis0
I can't seem to find the CSS that controls this....
- i just linked it, the site you're linking is using an image swap from fireworks with that MM_swapimage file prefixhonestIy
- Claymantis0
Yea I understand its swap images but I just dont know to make one of the nav items stay highlighted...
I cant find the css or any snippet of code that will let me do that.
:P
I know I suck.
- honestIy0
read the link. active is an option for a:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudo-class names are not case-sensitive.
this method supports images as well
- Claymantis0
Hmmm... I still can't find where in my css, it does that.
@charset "UTF-8";
/* CSS Document */body {
margin-top: 50px;
padding: 0;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #6b6b6b;
font-style: normal;
line-height: normal;
text-align: left;
background-color: #ffffff;
}h1 {
margin-top: 0;
font-weight: normal;
color: #292929;
font-size: 14px;
text-align: center;
}h2, h3 {
margin-top: 0;
font-weight: normal;
color: #292929;
font-size: 14px;
line-height: 12px;
text-align: left;
font-weight: bold;
margin-left: 15px;
}p, ul, ol {
margin-top: 0px;
line-height: 1.5em;
text-align: left;
margin-left: 15px;
}.center {
text-align:center;
}
.center a {
text-decoration: underline;
color: #6b6b6b;
}
.center a:hover {
text-decoration: underline;
color: #000000;
}ul, ol { }
blockquote { }
a { color: #000000;
outline: none;
}
a active: { outline: none; }a:hover {
text-decoration: underline;
color: #6b6b6b;
}a img {
border: none;
outline: none;
}img.left {
float: left;
margin: 7px 30px 0 0;
}img.right {
float: right;
margin: 7px 0 0 30px;
}hr { display: none; }
.list{
margin-top: 0;
line-height: normal;
text-align: left;
}
.list1 {
}.list1 li {
float: left;
line-height: normal;
}.list1 li img {
margin: 0 30px 30px 0;
}.list1 li.alt img {
margin-right: 0;
}#wrapper {
}/* Header */
#header-wrapper {
}#header {
width: 750px;
height: 10px;
margin: 0 auto;
}/* Menu */
#menu {
width: 890px;
float:left;
height: 80px;
margin: 0px;
padding: 0px;
align: center;
}#menu p {
text-align: center;
}#menu ul {
margin: 0;
padding: 0;
positon: absolute;
bottom: 0;
width: auto;
list-style: none;
display: block;
}#menu ul li {
margin: 0;
padding: 0;
list-style: none;
display: block;
}#menu li a {
display: block;
float:left;
width: auto;
color: #b0b0b0;
padding: 0px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}#menu a:hover { text-decoration: underline;
}
#menu a:active { outline: none;
}#menu .current_page_item a {
height: 50px;
color: #000000;
}#menu .first {
background: none;
}/* Page */
#page {
width: 860px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: #ffffff;
}/** LOGO */
#logo {
width: 750px;
height: 120px;
margin: 0 auto;
}#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-align: center;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
}#logo p {
text-transform: lowercase;
font-size: 13px;
color: #757575;
}#logo h1 {
padding-top: 0px;
font-size: 12px;
}#logo a {
text-decoration: none;
color: #757575;
}#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}#banner {
padding-bottom: 20px;
}/* Content */
#content {
width: 700px;
padding: 25px 25px 10px 25px;
}/*rules */
.divide-top {
width: 750px;
height: 3px;
padding: 0px 0px 0px 0px;
border-top: 1px solid #7f7f7f;
border-bottom: 1px solid #7f7f7f;
}
.divide-bottom {
width: 750px;
height: 3px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
border-top: 1px solid #7f7f7f;
border-bottom: 1px solid #7f7f7f;
}/* Sidebar */
#sidebar {
float: right;
width: 300px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}#sidebar li {
margin-bottom: 30px;
padding: 0 0 10px 0px;
}#sidebar li ul {
margin: 0px 14px;
}#sidebar li li {
margin: 0;
padding: 12px 0px;
background: url(images/img05.gif) repeat-x left bottom;
}#sidebar li li a {
padding: 0px 0px 0px 20px;
background: url(images/img06.gif) no-repeat left 2px;
font-weight: normal;
color: #B3B2B2;
}#sidebar li li a:hover {
color: #FFFFFF;
}#sidebar p {
margin: 0;
padding: 0px 14px;
}#sidebar h2 {
height: 30px;
margin: 0 0 10px 0px;
padding: 6px 0 2px 14px;
background: url(images/img04.jpg) no-repeat left top;
text-transform: capitalize;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}#sidebar p {
line-height: 200%;
}#sidebar a {
text-align: left;
text-decoration: none;
font-weight: bold;
}/* Footer */
#footer {
width: 750px;
height: auto;
margin: 0 auto;
padding-top: 0px;
}#footer-bgcontent {
margin: 0px;
padding: 0px;
height: auto;
}#footer p {
margin: 0;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: #000;
font-family: Tahoma, Geneva, sans-serif;
letter-spacing: 1px;
font-weight: bold;
}#footer a {
color: #000000;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
color: #6b6b6b;
}
- honestIy0
that's because it uses javascript. i'm telling you how it could be done, with just css and images which is (IMO) better than this... which is the js operating the swap
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1... n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>who knows what of that will publish though, so just look at the source and find the swap script. it starts on line 57
- Claymantis0
Yea I don't what I'm doing hahaha.
I don't know how to read that java. I don't understand where it says " leave this nave item, when this page is clicked"
- honestIy0
what you're linking is a fireworks exported rollover meaning this would all be written automatically by the software if you knew what you were doing. using this method to write by hand or hack together is a poor idea, just use the css/image option i've alluded to
- Claymantis0
Well I'm just doing adding some pages. I thought It would be easy to carry over whatever controls the other pages... I guess not eh
- Claymantis0
thanks anyways!
- honestIy0
oh if you're just editing that page, duplicate it exactly then change file names making sure you use the correct naming system. my advice was on the presumption you were using this as an example but were making something original
- honestIy0
(though in all reality i would just ditch that nav altogether and make it with css)