CSS Beveled Button Effect - Vertical Format (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

pageoneresults -> CSS Beveled Button Effect - Vertical Format (5/16/2003 9:49:00)

Okay, you css fans are really gonna love this one. I' ve been working on a navigation menu built purely in css that to many may look like a graphical button structure. My goal this year is to strip as many graphics that I possibly can from future design projects and use pure css. Here is the menu code, this is for a stacked left hand vertical navigation menu...

#menu{
position:absolute;
left:9px;top:114px;
width:116px;
}
#menu a{
display:block;
font-size:11px;
color:#efefef;
background:#369;
text-decoration:none;
padding:2px;
margin:0px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
}
#menu a:hover{
color:#369;
background:#ccc;
}
#menu a:active{
color:#369;
background:#f9d543;
}

You would of course adjust the attributes to meet your requirements. Now, here comes the spice...

#bindex a#index, #bcfp a#cfp, #bcmt a#cmt, #bcontact a#contact, #bemail a#email, #bhistory a#history, #bholdings a#holdings, #bintro a#intro, #bmarkets a#markets, #bmta a#mta, #bperformance a#performance, #bportfolios a#portfolios, #bmi a#mi, #big a#ig, #bmp a#mp, #bprofile a#profile, #bresources a#resources, #bsaafti a#saafti, #bsite a#site{
color:#369;
background:#efefef;
}

The code directly above is what controls the on page state of the button depending on which page you are on. These are what is referred to as ids. You have to assign a unique id to each link so that you can control the active state.

Then, depending on which page you are on, you assign a unique id to the body tag like this...

<body id=" #bindex" >

That body id tells the browser what the state of the active button should look like when the visitor is on that page.

The link in the include looks like this...

<a title=" Home Page" id=" index" href=" http://www.gobcafunds.com/" >Home Page</a>

The left hand menu is set up as an include. You can view the code for the menu here...

www.gobcafunds.com/navigation/left.asp
www.gobcafunds.com/navigation/left-bca.asp

To see the menu in action, you can visit the main site here...

www.gobcafunds.com

Now, this is not for the casual css user who fiddles every now and then with css. This took me a while to learn and figure it all out. Now that I have, there is no turning back.

Many thanks go to Nick_W, papabaer and keimano tokoyami who provided the on page active state css solution for the buttons. Ah, this css is so much fun!



abbeyvet -> RE: CSS Beveled Button Effect (5/16/2003 10:59:34)

I am getting it perfectly.

I think the problems seems to be yours Gil, I got that site I think about a week ago when a link to it was posted then.

Really nice buttons - really fantastic job on CSS. I LOVE CSS!!! [:D]


One question.

Is there any reason why you are using absolute links in your menu? Rather than say " /directory/file.asp" ?



Andy from Spain -> RE: CSS Beveled Button Effect (5/16/2003 11:04:09)

Hi

I was working on something similar recently but the results in NN 4.75 were very poor - you' ve done a great job there - works a treat, very smart! Thanks for passing on the code, well worth playing around with.

Cheers
Andy



pageoneresults -> RE: CSS Beveled Button Effect (5/16/2003 11:13:01)

quote:

Is there any reason why you are using absolute links in your menu? Rather than say " /directory/file.asp" ?

Hi Katherine! Yes, there is a reason for that. A couple of years ago, someone in my industry (Search Engine Marketing) shared a little secret with me about dns jacking. If someone uses all relative links for their website, then they are at risk of dns jacking.

Basically, an unethical marketer may dislike the competition you are presenting to them. If they see that you are using relative links, they can hijack your site and put it under one of their domains. Since there are no absolute references in the html, that site will work under any domain.

If you utilize absolute urls at least in your main navigation, you prevent the possibility of dns jacking. They can still jack your dns, but as soon as someone clicks on a link with an absolute url, they end up back at your site.

Andy, I made the decision at the beginning of this month to no longer offer support for NN4.x. Based on the 25+ sites that I manage, NN4.x users are less than 1% of the traffic. And, I think many of those are just checking to see how the sites look in NN4.x.



abbeyvet -> RE: CSS Beveled Button Effect (5/16/2003 11:22:15)

Interesting - I will revert to absolute links at once!

quote:

I made the decision at the beginning of this month to no longer offer support for NN4.x.


Well I have to say that fills my little heart with Joy!! I have made the same decision, but have not been very decisive about it. In spite of the fact that that is how I have decided to go I keep finding myslef tweaking to make things ok in NN4x - old habits die hard.

I think it is time we did this though. CSS offers such possibilities and if we remain enslaved to this old browser it will just not be possible to take advantage of so many of them.



erinatkins -> RE: CSS Beveled Button Effect (5/16/2003 11:39:48)

Very good information. Thanks for sharing it!



Andy from Spain -> RE: CSS Beveled Button Effect (5/16/2003 11:57:16)

quote:

Andy, I made the decision at the beginning of this month to no longer offer support for NN4.x. Based on the 25+ sites that I manage, NN4.x users are less than 1% of the traffic. And, I think many of those are just checking to see how the sites look in NN4.x.


I agree wholeheatedly - just your example degrades so well - I do still check in NN4.75 cos I know there will be come-backs in the ecommerce templates we set up, and if the look is acceptable for us we go ahead, if there are serious problems we have to look for alternatives.

Cheers
Andy



pageoneresults -> RE: CSS Beveled Button Effect (5/17/2003 14:12:50)

Andy, thanks for the compliments. Actually, I did have NN4.x open when developing that menu. Originally I had some attributes set that did not agree well with NN4.x, mainly p classes. So, I stripped those and figured out a different way to do the menu.

For those of you keeping up with this one, you can give your buttons different effects by changing the sequence of the border attributes. You can use a 2px border if the 1px is not enough of a bevel for you. To make the buttons appear as if they were depressed when clicking on them, do this...

#menu{
position:absolute;
left:9px;top:114px;
width:116px;
}
#menu a{
display:block;
font-size:11px;
color:#efefef;
background:#369;
text-decoration:none;
padding:2px;
margin:0px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
}
#menu a:hover{
color:#369;
background:#ccc;
border-top:1px solid #000;
border-left:1px solid #808080;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#menu a:active{
color:#369;
background:#f9d543;
}

All I did was add the border attributes to the a:hover and changed the sequence of the border colors. Now when you pass your cursor over the buttons, they appear to sink in (depressed). If you really wanted to get fancy, you could make the border-right and border-left with a 2px border that would make the depression more pronounced. If you were going to do that, I would probably suggest that you do the opposite to the a:link rule so that you don' t get a jump from button to button. Of course your a:link would have the 2px assigned to the border-top and border-left attributes.



pageoneresults -> RE: CSS Beveled Button Effect (5/17/2003 14:19:23)

New Tip!

Let' s go one step further. Let' s say you wanted to add an image background to your buttons. It' s easy to do. Right now I am working with an image that tiles so I am able to do this...

#menu{
position:absolute;
left:9px;top:114px;
width:116px;
}
#menu a{
display:block;
font-size:11px;
color:#efefef;
background:#369;
text-decoration:none;
padding:2px;
margin:0px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
}
#menu a:hover{
color:#369;
background:#fff repeat fixed url(" /images/tile.jpg" );
border-top:1px solid #000;
border-left:1px solid #808080;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#menu a:active{
color:#369;
background:#f9d543;
}

Note the item in bold. I' ve just assigned a background image to the rollover command. Now when I hover over the button, my background image tiles and gives the button a nice effect.

You could literally create a graphic navigation menu using pure css and a group of well planned images. I' m working on another menu now that uses all images for the button states. But, everything will be controlled through css, no javascript!

I' ll post a new topic on that one once I' ve got it all set up.

By the way, we will be launching a new site soon at...

www.csstips.com

P.S. There is a button on that site that utilizes the background image. Just roll over the contact button to see it in action. Look how nicely it merges right in with the background. I' m also using a 2px border on that one to achieve more of a beveled effect.



Justjay -> RE: CSS Beveled Button Effect - Vertical Format (6/9/2003 1:31:33)

quote:

I think many of those are just checking to see how the sites look in NN4.x.
- Music to my ears....I am so glad that I am not the only one to think that...



DaAngel -> RE: CSS Beveled Button Effect - Vertical Format (6/15/2003 0:56:20)

This looks interesting,

I followed it up to the point of the #bindex. What does this #bindex do in terms of the CSS?

Also, call me an idiot but the display: block; line........what function does that preform?



pageoneresults -> RE: CSS Beveled Button Effect - Vertical Format (6/15/2003 1:16:52)

quote:

What does this #bindex do in terms of the CSS?


I named the ids with a b so I knew they were <body ids>. They are paired because there is one id that goes in the body tag and another that goes in the link. Since you cannot have two ids named the same, that is why I added the b in front of the body ids. This allowed me to set up the ids so there were no duplicates.

There are a pair of ids for each page on the site that requires an on page state. If I have three pages in one section, they all have the same <body id> because the button on that page is specific to the content being viewed.

#bindex a#index, #bcfp a#cfp, #bcmt a#cmt, #bcontact a#contact, #bemail a#email, #bhistory a#history, #bholdings a#holdings, #bintro a#intro, #bmarkets a#markets, #bmta a#mta, #bperformance a#performance, #bportfolios a#portfolios, #bmi a#mi, #big a#ig, #bmp a#mp, #bprofile a#profile, #bresources a#resources, #bsaafti a#saafti, #bsite a#site{
color:#369;
background:#efefef;
}

The code directly above is what controls the on page state of the button depending on which page you are on. These are what is referred to as ids. You have to assign a unique id to each link so that you can control the active state.

Then, depending on which page you are on, you assign a unique id to the body tag like this...

<body id=" #bindex" >

That body id tells the browser what the state of the active button should look like when the visitor is on that page.

The link in the include looks like this...

<a title=" Home Page" id=" index" href=" http://www.gobcafunds.com/" >Home Page</a>



pageoneresults -> RE: CSS Beveled Button Effect - Vertical Format (6/15/2003 1:22:25)

display:block;

This is so the <a href>s display as block level elements and not inline. If I specified display:inline; then the links would run horizontally and not vertically.

http://www.gobcafunds.com/navigation/left.asp

Look at the source of the above include. Look at the <a href> code. You' ll notice that there are no <p> or <br> tags there. This is because I' ve told the browser to display those as block level elements and I don' t need to wrap them in block level containers like <p>, <li>, etc.

Also, take a look at the id=" " attributes. You' ll notice the ids that are assigned to each link. They correspond with the paired ids in the css.



DaAngel -> RE: CSS Beveled Button Effect - Vertical Format (6/15/2003 1:35:55)

Thanks pageone, I will have a look at the source code you provided and play with it a lil till I understand the code.


I like what I saw, that is what counts for me. The flip over time was really quick. I guess because it' s preloaded in the CSS. Can something like this be preformed with images? If so how?

I am not sure if this question will be allowed to float here, but since I have your attention........how do you think yahoo' s switch from google for search results will hit our industry?



pageoneresults -> RE: CSS Beveled Button Effect - Vertical Format (6/15/2003 1:42:34)

quote:

Can something like this be preformed with images? If so how?

Take a look at the button states on my [url=" http://www.csstips.com/" ]CSS Tips[/url] site. You' ll notice that on hover it appears that the background is showing through. Actually that is an image call through css that looks like this...

a:hover{color:#fff;border-top:1px solid #000;border-left:1px solid #808080;border-right:1px solid #ccc;border-bottom:1px solid #ccc;background:#6f3d0e url(' /images/hover-browns.jpg' ) fixed;}

It is the background attribute where the image is being called. And yes, the CSS menus load very quickly and are cached on first visit.

What Yahoo! switch?



DaAngel -> RE: CSS Beveled Button Effect - Vertical Format (7/5/2003 4:29:12)

I heard that Yahoo was switching the provider of their search results from google. Since I have not seen this repeated else where I guess I was wrong.



DaAngel -> RE: CSS Beveled Button Effect (7/5/2003 4:35:06)

erm...


again...it' s been a while since I dabbled in CSS but what is the difference

between

.menu and #menu

also why does this line contain a background colour, doesn' t the background come from the image?

background:#6f3d0e url(' /images/hover-browns.jpg' ) fixed;}

hey these questions may be stupid, but if I don' t ask I don' t learn! [;)]



gorilla -> RE: CSS Beveled Button Effect (7/5/2003 5:48:17)

quote:

what is the difference between .menu and #menu


Have a look at this thread -

http://www.frontpagewebmaster.com/Class_VS%25_ID/m_139396/p_1/tmode_1/smode_1/tm.htm

Which answers this question very very well and also raises a possiblilty that will make any designer lick their lips at the possibilities [:)]

quote:

also why does this line contain a background colour, doesn' t the background come from the image?

background:#6f3d0e url(' /images/hover-browns.jpg' ) fixed;}


Covers all possibilites [:)]

quote:

hey these questions may be stupid, but if I don' t ask I don' t learn! [;)]


It would be really stupid not to ask them no?

Karsten

A truly stupendously alpha silverback male spokesgorilla and banana quality controller. The said status being courtesy of an appreciation of the laws of gravity, vaseline on the vines, and the occasional judicious push inflicted upon insufficiently wary rivals. Ahhhhh .... the sweet sound sound of a would be usurper going " splat!" ....... I would like to thank preludeok95 for sharing her wisdom on these matters with me.

Yea verily it am the truth that behind every successful alpha silverback male gorilla there stands a devious outfronter <blonde>borg-gorilla hybrid</blonde> .........

Happy weekend.

København
Danmark
juni 05 2003



DaAngel -> RE: CSS Beveled Button Effect (7/5/2003 6:13:38)

ID Selectors

This selector was designed to match the value of the HTML ' ID' attribute, but SGML/XML both allow the ID attribute value type. With this type of attribute, each element in a document can have a uniquely referenceable label. This Selector syntax precedes the attribute value with a pound symbol (" #" .) An element name or Universal Selector may be used in front of the ID Selector, but it is not necessary. The effect of this selector can also be achieved using an Attribute Value Selector, but this form of Selector has a higher cascading precedence.

Does this come in English?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875