My navigation bar

[pacificblue03]

Hello just a simple Question really

On my website here http://www.ballinanswweather.com/

How can i make it that in my navigation bar the current page that you are on is highlighted in the appropriate tab in the navbar?

Antonio.

[pacificblue03]

so no one will help me? okay then

[GraemeT]

It's not that no one will help you Antonio.
It's just that half the world's asleep and the other half is out working....

Why would you want to highlight the current menu item when the visitor should already know what page he's on?

Seriously, it's done with CSS.

I think you'll find what you're after if you check out Jacques 'sunnyweather templates' available here: http://meteoduquebec.com/dl_eng.php

Examine his menus and css and you'll be right.

[robynfali]

And maybe a little patience too, expecting an answer within 2hrs of posting, on a board that provides support for a free weather program, not website help?

Life is too short to go rushing around, take things a little easier

[6719jason]

Agreed Steve!

Last time I check the world did not revolve around Antonio and his website!!

Not sure about anyone else but I enjoy my Sundays, especially if I can spend them with my girlfriend so I try to do things other than Web Design on a Sunday

If in doubt, Google! There is endless forums and websites on Web Design who can normally put you on the right track.

We'll all help as and when we can but please understand this... Bad Manners, Demands and self pity will do anyone no favours.

Have a good day everyone!

[RobertY]

Try some of there googled for you

https://www.google.com/#hl=en&sugexp=ep ... 24&bih=615

[pacificblue03]

so i wanted to use this

.currentab
{
background-image:(the image);
}

in the html i put

<a href="#" class="currentab">home</a>


and my tab wont highlight

i am lost. i have tried many others too this is why came here.

[pacificblue03]

ok i got it thats fine

#nav li a.current {
background-image:url(../images/nav-hover.jpg);
font-weight:bold;
}

[pacificblue03]

Hello i have run into a little doozy, i have added a background image to the navigation bar that i made and its working good, but how do i change it so that my dropdown or submenu items do not share this background? i would like it to be just a simple dark grey and it keeps using my image, the css is below. Excuse my notes SITE:http://www.ballinanswweather.com/

______________________________________

@charset "utf-8";


#navMenu {
margin:0;
padding:0;
/* the padding and margin 0 removes the default padding */
}

#navMenu ul {
margin:0;
padding:0;
line-height:40px; /* how high we want the text to be */
/* the padding and margin 0 removes the default padding */
}

/* this is how we want the list to appear */
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
background-image:url(../images/nav-normal.jpg);

}

/* this is where we style what the navbar links look like on the main menu part */
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
font-size:14px;
text-decoration:none;
height:40px;
width:140px;
display:block; /* for navbar to look like a navbar */
color:#FFF; /* color of the link text */
/*border:1px solid #FFF;*/ /* this adds a border on the outside of the links NOTE the positioning of the hover will be off!!! fix by adding how many pixels you used for the border into the ul ul 2 times the amount eg. if 1 px use 2px */
text-shadow: 1px 1px 1px #000;
}

/* this makes the dropdown hover effect work for a ul inside a ul */
#navMenu ul ul {
position:absolute;
visibility:hidden; /* hides the submenu links */
top:40px; /* same height as the links, this is also where we adjust the border pixels used for the ul li a */
height:20px;
}

/* this is used to bring back the hidden submenu items */
#navMenu ul li:hover ul {
visibility:visible; /* this is used to show the submenu when hovered over */

}

/**************************************************************************************************************************/

/* this adds style to the main horizontal menu */
#navMenu li:hover {
background:#09f;
}

/* this changes the hover effect of the submenu items and will enable the top items to stay another color */
#navMenu ul li:hover ul li a:hover {
background:#ccc;
color:#000;

}

/* changes the hover text color of the main menu on the top and then when you go down the submenu it changes back to the color of the normal hover */
#navMenu a:hover {
color:#000;
}

.clearFloat {
clear:both; /* clears the left and the right */
margin:0;
padding:0;
}

[pacificblue03]

the only thing that i can make work is

#navMenu li.subs {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#000;

then <li class="subs" > that seems to work but is that the "proper way"?

[beteljuice]

I've haven't got a clue which bits of your css menu handle which

But your 'problem' is inheritance.

So - if I'm guessing correctly about the section of css for the sub menu drop-down, all you need to do is turn the background image 'off':

Code: Select all

/* this is used to bring back the hidden submenu items */
#navMenu ul li:hover ul {
visibility:visible; /* this is used to show the submenu when hovered over */
background-image: none;
}

[pacificblue03]

I've haven't got a clue which bits of your css menu handle which

But your 'problem' is inheritance.

So - if I'm guessing correctly about the section of css for the sub menu drop-down, all you need to do is turn the background image 'off':

Code: Select all

/* this is used to bring back the hidden submenu items */
#navMenu ul li:hover ul {
visibility:visible; /* this is used to show the submenu when hovered over */
background-image: none;
}

Sorry BJ i just tried that and when i did the background image still showed up, when i apply the new class that i made the "subs" one it does work

[pacificblue03]

okay well i decided to use the li class = subs code cause it seems to work, now you see how when you use a dropdown the submenu is as high as the top menus eg- box height, how do i make the height smaller and also keep to top links formatting?

then in the submenu where in my css can i apply text align left?