Maintaining button down states

Flynn

I've made a menu in fireworks with simple rollovers. up state, over state and down state.

My question is: is there any simple way to keep the down state active so visitors know what page they are on? If i was using frames this would be simple as the link would load up in a seperate frame leaving the menu in its down state but as the visitor is moving away form the page the menu is sort of reset. One work around I can think of would be to upload a different menu for each page with the Up state set to the same as the down state so it looks like the button remained down but this seems like a sort of cop out. As if one had 50 pages this would cause a lot of hassle. ( i only have a few pages so it may be a good option ) but i was wondering is there another way.

Could i place the menu in an iframe perhaps?
Anyone have any ideas? sorry if it's not clear.

Deliverance XXV

Not sure how it is done in Fireworks but if you edit the page's HTML and CSS then this will work: http://www.mstudiostalk.com/2008/03/11/pure-css-to-display-the-active-page-in-the-navigation/

Flynn

cheers for your reply. That seems like the ideal solution only i've created a graphic in Fireworks. I think the method would work if i needed a plain text menu.. Although im sure there is a way to integrate it around my graphic im just not sure im up to the task... Cheers though i've bookmarked it for another time.

Essien

How are you actually rendering your graphic? Are they in the links or are they applied using css as background images of the links? If its the latter the the suggested solution should work.

Posting up your code would help too.

Flynn

Essien wrote: »

How are you actually rendering your graphic? Are they in the links or are they applied using css as background images of the links? If its the latter the the suggested solution should work.

Posting up your code would help too.

Well its exported from fireworks so the rollovers would be html with a JS script inserted to the page once the html is pasted from fireworks. I've gone with the uploading a different graphic for each page route... I've uploaded it to test so please have a look... here (just in testing phase)

You'll notice the menu sort of reloads on every page which looks a bit **** to be honest.

EDIT: Sorted the Div problem.

redman85

I like the design but after looking at your code I'm guessing you have little experience with HTML and CSS?

To be honest I dont even know where to start with your code. Its made up of empty <p> tags and everything that can be done easily with CSS is done with images.

You only have 27 lines of css .... and none of these position the elements.

How are you positioning the elements?

Flynn

Yes you're right, i have little experience i'm teaching myself as i go.. I used to tinker about with websites back in the day... This is my first in attempt in 5 years last time i made one there was no such thing as divs. So it's messy as feck..

I might just redo it from scratch.

To be honest I dont even know where to start with your code. Its made up of empty <p> tags and everything that can be done easily with CSS is done with images.

Those <p> tags were just thrown in to bring the left content div down past the page (just testing design) i'll delete them and tidy up what i can. Although i've done that much experimenting i'm sure there will be a few things that will go unnoticed..
As for the images do you mean i can recreate those using only CSS? I've never done this. I have no clue when it comes to coding really which is why i let fireworks do the work for me. Would i be right in saying you create your 'over' and 'hover' images. Then create the rollover in dreamweaver using CSS, pointing it to the correct files?

You only have 27 lines of css .... and none of these position the elements.

Sorry im not sure i follow? I'm using css to positoin the left content div the rest are set to auto. The icons in the top right are set to align:right. There is nothing else to position really. Or am i missing something?

smash

You could change the HTML to php pages and create a session on the main menu button clicks. Then just put a small if statement around the menu to highlight the button depending on the session.

redman85

heres a good reference site for html and css. I highly recommened you get this book Great book on HTML and CSS It covers everything and is so easy too follow.

When I said your images can be done in CSS I meant the text in the nav and the border. If your site has too many images it can slow it down even if they are tiny, your computer sends out a HTTP request for each image and as far as I know the server can only handle two HTTP request at a time so they can build up quite fast.

And for your hover you just use CSS again with out getting too technically

a:hover {

insert your css here

}

you can apply styles for an active link too by giving the page your on, for example the index.html, a class. In a project I'm doing for college. I have a border above the link I'm on . Here's my CSS

.active {
padding-top: 70px;
border-top: 4px solid #d97925;
}

I wouldnt get to hung up about understanding the code I posted above but do have a look at some tutorials. Any questions fire away

Flynn

redman85 wrote: »

heres a good reference site for html and css. I highly recommened you get this book Great book on HTML and CSS It covers everything and is so easy too follow.

When I said your images can be done in CSS I meant the text in the nav and the border. If your site has too many images it can slow it down even if they are tiny, your computer sends out a HTTP request for each image and as far as I know the server can only handle two HTTP request at a time so they can build up quite fast.

And for your hover you just use CSS again with out getting too technically

a:hover {

insert your css here

}

you can apply styles for an active link too by giving the page your on, for example the index.html, a class. In a project I'm doing for college. I have a border above the link I'm on . Here's my CSS

.active {
padding-top: 70px;
border-top: 4px solid #d97925;
}

I wouldnt get to hung up about understanding the code I posted above but do have a look at some tutorials. Any questions fire away

Cheers mate, I must check out the book... i get the code alright so you're saying.... I should create the menu without the text and then insert the text over the graphic by experimenting with div positioning? It just seems so precise to do as i wouldn't be so sure that the text would remain exactly centered in between those lines with every browser/display. also how would you place a div on top of another div? Or would you set the menu image as a background in its own div and place the text in that same div?
And i'm still lost as to what you meant by "how are you positioning your elements?" ??

You could change the HTML to php pages and create a session on the main menu button clicks. Then just put a small if statement around the menu to highlight the button depending on the session.

Thanks smash i just googled php (no experience with it before) and its exactly what i was talking about when i said can i use an "iframe or something" ( i had a feeling this solution was out there without using iframes just hadn't come across it before and wasn't sure of the correct method) Would I have to make the page from scratch in php or can i somehow convert it from the html. Also this would solve the problem where the menu reloads (a tad bit slow) on each page right? Any advice welcome
Cheers.

smash

Flynn wrote: »

Thanks smash i just googled php (no experience with it before) and its exactly what i was talking about when i said can i use an "iframe or something" ( i had a feeling this solution was out there without using iframes just hadn't come across it before and wasn't sure of the correct method) Would I have to make the page from scratch in php or can i somehow convert it from the html. Also this would solve the problem where the menu reloads (a tad bit slow) on each page right? Any advice welcome
Cheers.

Literally just rename the file from HTML to php. Here's even a very basic include function which will save you having to replicate reused code like header menus across multiple pages http://www.w3schools.com/php/php_includes.asp

redman85

Flynn wrote: »

I should create the menu without the text and then insert the text over the graphic by experimenting with div positioning?

not sure what you mean but here's how I would code the nav

<div id="nav">

     <ul>
        <a href="index.html" class="active"><li>Home</li></a>
        <a href="news.html"><li>News</li></a>
        <a href="music.html"><li>Music</li></a>
        <a href="show.html><li>Shows</li></a>

     </ul>

</div>

This would give you a basic unordered list with each list item being a link to a page on the site. Then I would apply CSS to Style it the way I want it too look.

It just seems so precise to do as i wouldn't be so sure that the text would remain exactly centered in between those lines with every browser/display.

Thats half the fun :rolleyes:

Flynn

redman85 wrote: »

Thats half the fun :rolleyes:

Haha ok. So it does mean tinkering about until it fits perfectly..
And how would you place the text on top on the image? Set menu as background? or can one div overlay another?

Cheers

Flynn

smash wrote: »

Literally just rename the file from HTML to php. Here's even a very basic include function which will save you having to replicate reused code like header menus across multiple pages http://www.w3schools.com/php/php_includes.asp

Cheers man i'll give that a try
If this works it seems the best option.

redman85

Flynn wrote: »

Haha ok. So it does mean tinkering about until it fits perfectly..
And how would you place the text on top on the image? Set menu as background? or can one div overlay another?

Cheers

Are you talking about the photo of the lad?

set that as a background in CSS. http://w3schools.com/css/css_background.asp

And I wouldn't go near PHP till you know about HTML, its like trying to run before you can walk.

smash

redman85 wrote: »

And I wouldn't go near PHP till you know about HTML, its like trying to run before you can walk.

Sessions and includes are very basic stuff.

Flynn

redman85 wrote: »

Are you talking about the photo of the lad?

set that as a background in CSS. http://w3schools.com/css/css_background.asp

And I wouldn't go near PHP till you know about HTML, its like trying to run before you can walk.

No the photo is done in CSS already, it's fine. im talking about the menu. there are separator horizontal lines. If i am understanding you correctly you are suggesting i take out the text images and replace with actual text and style with CSS. My question is how do i fit the text in between those lines as its an image the text would have to sit on top of it...

Flynn

And ya the include does seem basic enough.. I started that website 2 weeks ago with no CSS or div experience. If i had waited until i had understood each one before i progressed it would still be a blank page!