Rollover state

#1

Hi All

I have 4 buttons as you can see in the code - i also have a rollover effect
by moving the background image down, again as the code shows.

The button image actually consists of three images - 1 for an un-active state,
1 for rollover effect, and i also have one for when the page is active.

I have 4 pages on the site, how do i make each button in its active state when
you are on each section of the site? So when i am on the home page, the home
button is in its 'active state' and then when i click to videos for example,
the home button goes to its un-active state and the video button is now in the
active state?

Hope all that makes sense.

Any help on this will be very much appreciated!!!

Thanks

JP

ul#nav li a {
display: block;
height: 83px;
text-indent: -9999px;
float: left
}

ul#nav li.home a { width: 262px;
background:url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a { width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a { width: 200px;
background:url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a { width: 338px;
background:url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover { background-position: center center;
}

#2

You would add that particular state as css on each individual page. I
would also go ahead and assign the class to each element in the list,
and just call them on the necessary pages.

On the home page, add to the page's <head>:

a#button1 {
background-image: url(Images/nav_bkgrd_active.jpg);
}

And in your navigational list (have you thought about using an include
file for your nav menu?) make sure you add class="button1" for the home
link. You'll need to remember to add button2, button3, button4, etc.,
for your other links and then add to each page, accordingly.

--

Virginia Carter
Carolina Web Creations
======================
www.carolinawebcreations.biz

thewakeplace.com wrote:

Quote:

Hi All

I have 4 buttons as you can see in the code - i also have a rollover effect
by moving the background image down, again as the code shows.

The button image actually consists of three images - 1 for an un-active state,
1 for rollover effect, and i also have one for when the page is active.

I have 4 pages on the site, how do i make each button in its active state when
you are on each section of the site? So when i am on the home page, the home
button is in its 'active state' and then when i click to videos for example,
the home button goes to its un-active state and the video button is now in the
active state?

Hope all that makes sense.

Any help on this will be very much appreciated!!!

Thanks

JP

ul#nav li a {
display: block;
height: 83px;
text-indent: -9999px;
float: left
}

ul#nav li.home a { width: 262px;
background:url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a { width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a { width: 200px;
background:url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a { width: 338px;
background:url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover { background-position: center center;
}

#3

Correction: That should be:

"...assign the ID to each element in the list...

makes ure you add id="button1" for the home link..."

Sorry about that!

--

Virginia Carter
Carolina Web Creations
======================
www.carolinawebcreations.biz

Virginia Carter wrote:

Quote:

You would add that particular state as css on each individual page. I
would also go ahead and assign the class to each element in the list,
and just call them on the necessary pages.

On the home page, add to the page's <head>:

a#button1 {
background-image: url(Images/nav_bkgrd_active.jpg);
}

And in your navigational list (have you thought about using an include
file for your nav menu?) make sure you add class="button1" for the home
link. You'll need to remember to add button2, button3, button4, etc.,
for your other links and then add to each page, accordingly.

#4

So, just to get this right - i give each button a class and then adjust that
class attributes for when the page is active?

One thing i don't understand is that you mention to add CSS under the <head> ?
That doesn't make sense to me, adding CSS into the <head> element of a HTML
page? Or am i reading this wrong? Sorry. . .

Whats an 'include file'?

All the pages at the moment are running from the same CSS page - can i just
add pages of CSS and adjust them accordingly? So i will have a different CSS
coding for each page?

Thanks

JP

#5

Alright...let's do it this way.

Adding CSS in the <head> of your document (as opposed to adding it to
the external CSS file, if you are using one...) In the code you provided
initially, it appears you have this in the head of your document, so
you're just adding the NEW stuff there.

a#button1 {
background-image: url(Images/nav_bkgrd_active.jpg);
}

Note: you would obviously replace that background image link with
whatever YOUR image is called and wherever it is located...

On the home page, in the navigation code, you would add the ID to the
<a> tag.

<a id="button1"...

Likewise, on your "contacts" page, in the head of the document you would
add this CSS:

a#button4 {
background-image: url(Images/nav_bkgrd_active.jpg);
}

I picked 4 because it's the 4th element in that list (home=1, videos=2,
downloads=3, contact=4)

Because that particular active state happens only on the active pages,
you can just add that one CSS definition to the specific page.

As for the include file, this is a file that is repeated multiple times
throughout a site (such as a navigation menu), but you can call for that
file to be included in your page. That way, when you have changes to
your navigation menu, you can make them in that one file, and it will
propagate throughout each of the pages that contain the call to that file.

========================
Virginia Carter
Carolina Web Creations
carolinawebcreations.biz
========================

thewakeplace.com wrote:

Quote:

So, just to get this right - i give each button a class and then adjust that
class attributes for when the page is active?

One thing i don't understand is that you mention to add CSS under the <head> ?
That doesn't make sense to me, adding CSS into the <head> element of a HTML
page? Or am i reading this wrong? Sorry. . .

Whats an 'include file'?

All the pages at the moment are running from the same CSS page - can i just
add pages of CSS and adjust them accordingly? So i will have a different CSS
coding for each page?

Thanks

JP

#6

"...assign the class to each element in the list...."

That's an ID not a class.... 8)

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"Virginia Carter" <vcarter (AT) carolinawebcreations (DOT) biz> wrote

Quote:

You would add that particular state as css on each individual page. I
would also go ahead and assign the class to each element in the list, and
just call them on the necessary pages.

On the home page, add to the page's <head>:

a#button1 {
background-image: url(Images/nav_bkgrd_active.jpg);
}

And in your navigational list (have you thought about using an include
file for your nav menu?) make sure you add class="button1" for the home
link. You'll need to remember to add button2, button3, button4, etc., for
your other links and then add to each page, accordingly.

--

Virginia Carter
Carolina Web Creations
======================
www.carolinawebcreations.biz

thewakeplace.com wrote:
Hi All

I have 4 buttons as you can see in the code - i also have a rollover
effect by moving the background image down, again as the code shows.

The button image actually consists of three images - 1 for an un-active
state, 1 for rollover effect, and i also have one for when the page is
active.

I have 4 pages on the site, how do i make each button in its active
state when you are on each section of the site? So when i am on the home
page, the home button is in its 'active state' and then when i click to
videos for example, the home button goes to its un-active state and the
video button is now in the active state?

Hope all that makes sense.

Any help on this will be very much appreciated!!!

Thanks

JP

ul#nav li a {
display: block;
height: 83px;
text-indent: -9999px;
float: left
}
ul#nav li.home a { width: 262px;
background:url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a { width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a { width: 200px;
background:url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a { width: 338px;
background:url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover { background-position: center center;
}

#7

Yeah ... I corrected that in the next post.

Murray *ACE* wrote:

Quote:

"...assign the class to each element in the list...."

That's an ID not a class.... 8)

#8

So the CSS is like this?

As long as i have tagged my body pages with the 'home' then 'video' etc???

And that CSS is all in the same CSS document?

ul#nav li.home a { width: 262px;
background:url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a { width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a { width: 200px;
background:url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a { width: 338px;
background:url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover { background-position: center center;
}
body#home ul#nav li.home a {
background-position: top center;
}
body#video ul#nav li.video a {
background-position: top center;
}

#9

If you have all of your CSS in the head of each page (as opposed to
using an external CSS file) then this is what you'd have for the HOME
page. If you're working on the VIDEO page, then you would change the CSS
to match that.

If you had your site online, it would be much easier to show you how to
edit your existing page, instead of guessing at how you have it set up...

<head>
<style type="text/css">

ul#nav li.home a {
width: 262px;
background: url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a {
width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a {
width: 200px;
background: url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a {
width: 338px;
background: url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
a#button1 {
background-image: url(Images/nav_bkgrd_active.jpg); (*or whatever your
active image is named)
}

</style>
</head>
<body>
All of your page code goes in here.
</body>

--

Virginia Carter
Carolina Web Creations
======================
www.carolinawebcreations.biz

thewakeplace.com wrote:

Quote:

So the CSS is like this?

As long as i have tagged my body pages with the 'home' then 'video' etc???

And that CSS is all in the same CSS document?

ul#nav li.home a { width: 262px;
background:url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a { width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a { width: 200px;
background:url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a { width: 338px;
background:url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover { background-position: center center;
}
body#home ul#nav li.home a {
background-position: top center;
}
body#video ul#nav li.video a {
background-position: top center;
}

#10

OK - time to roll your eyes at me and give up

I don't understand the whole
idea of putting the CSS into the page head rather than the CSS file?

The attached code works fine on the Home page, and i get my 'active button'
state. This is in a external CSS document and i have followed the instructions
from this link:

http://css-tricks.com/forums/viewtop...8&p=1969#p1969

Now i have given the HTML pages tags, and then referenced them in the CSS
document. Just as the other forum mentions. But do i put all the CSS for the
'active' button states in the same CSS document? Because at the moment, that
doesn't work.

I have 4 HTML pages (Index, Videos, Downloads and Contact) - and i have 1 CSS
page that they all reference. Is this correct?

Sorry to be such a pain with all this......all the help us much appreciated.

ul#nav li.home a { width: 262px;
background:url(Images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.videos a { width: 200px;
background: url(Images/nav_video.jpg) bottom center no-repeat;
}
ul#nav li.downloads a { width: 200px;
background:url(Images/nav_downloads.jpg) bottom center no-repeat;
}
ul#nav li.contact a { width: 338px;
background:url(Images/nav_contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover { background-position: center center;
}
body#home ul#nav li.home a {
background-position: top center;
}
body#video ul#nav li.video a {
background-position: top center;
}