menus and stylesheets

  hlpq 14:11 28 Nov 03
Locked

Using stylesheets has its obvious advantages. Even good layout can be achieved using stylesheets.

I have been using frames for a long time. I like the way with frames you can have create one file which contains the menu which is the only file which you have to update when you add more sections to your website. Is there any way of achieving such an easily updated menu when you are using stylesheets for layout?

Thanks.

  Taran 14:55 28 Nov 03

You can use CSS to make button style hyperlinks from a standard href="" hyperlink but you still have to physically add the link like you would on any normal page.

In brief, CSS is there to seperate your site format from its content - you keep the site presentation (font, colour schemes, table linke layouts, borders, headers, footers and whatnot) in your CSS file(s) and just reference them as class or id in your <div> <p> and <td> (etc) HTML tags.

I've commented the code example that follows with a brief overview and explanation of how it works and you need to add this line into the <head><title></title><link rel="stylesheet" type="text/css" href="buttons.css" media="all" /></head>. To make it work, copy the following code into a Notepad document and save it as buttons.css in your web root folder:

/* demonstration of "buttons" using CSS. This will turn ALL hyperlinks into a button. To select an individual link to apply the effect to you can add a class reference into the HTML hyperlink code as follows: <a href="..." class="button">
and then change the style sheet so that the selectors are

a:link.button, a:visited.button and a:hover.button

The button effect uses the top and left borders as a light color with the bottom and right edges a darker color.In the hover state the colors swap around.

You can experiment with different levels of darkness for the same color to create the edges.
*/

h1, h2, h3, h4, h5, h6, li, blockquote {
display: none;}

a:link, a:visited
{
color: #ffffff;
font-size: 1em;
text-decoration: none;
margin-top: 5px;
margin-bottom: 5px;
padding: 3px 5px;
width: 90%;
visibility: visible;
display: block;
border-right: 2px #5f5f5f solid;
border-top: 2px #9f9f9f solid;
border-left: 2px #9f9f9f solid;
border-bottom: 2px #5f5f5f solid;
background-color: #bfbfbf;}



a:hover {color: #efefef;
text-decoration: none;
border-left: 2px #5f5f5f solid;
border-bottom: 2px #9f9f9f solid;
border-right: 2px #9f9f9f solid;
border-top: 2px #5f5f5f solid;
}

  Taran 15:00 28 Nov 03

Adding the line <link rel="stylesheet" type="text/css" href="buttons.css" media="all" /> before your closing </head> tag is XHTML compliant.

To use it as standard HTML just remove the space and / from the end of the line, like this:

<link rel="stylesheet" type="text/css" href="buttons.css" media="all">

And to make sure of the CSS example above, this is the full commented code you need - copy everything that follows after this line and save it as buttons.css in your web root folder:



/* demonstration of "buttons" using CSS. This will turn ALL hyperlinks into a button. To select an individual link to apply the effect to you can add a class reference into the HTML hyperlink code as follows: <a href="..." class="button"> and then change the style sheet so that the selectors are

a:link.button, a:visited.button and a:hover.button

The button effect uses the top and left borders as a light color with the bottom and right edges a darker color.In the hover state the colors swap around.

You can experiment with different levels of darkness for the same color to create the edges. */

h1, h2, h3, h4, h5, h6, li, blockquote { display: none;}

a:link, a:visited { color: #ffffff; font-size: 1em; text-decoration: none; margin-top: 5px; margin-bottom: 5px; padding: 3px 5px; width: 90%; visibility: visible; display: block; border-right: 2px #5f5f5f solid; border-top: 2px #9f9f9f solid; border-left: 2px #9f9f9f solid; border-bottom: 2px #5f5f5f solid; background-color: #bfbfbf;}

a:hover {color: #efefef; text-decoration: none; border-left: 2px #5f5f5f solid; border-bottom: 2px #9f9f9f solid; border-right: 2px #9f9f9f solid; border-top: 2px #5f5f5f solid; }

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…