menu untouched by css rules

@4nowAug 19.2007

hi
i have a menu bar with transparent gif rollover images

when i assign css styles to the page

the hyperlink styles also affect the menu bar button images

how can i prevent this

thanks

to post a comment

CSS

8 Comments(s) _↴

@CentauriAug 19.2007 — #Style the menu links separately [B]after[/B] the general link styles

@4nowauthorAug 19.2007 — #thanks for the quick response

how do i do that?

@CentauriAug 19.2007 — #How are you styling the menu bar links now? - these styles just need to be put in the css file after whatever general link styles you set.

Can you post a link to a tempory site, or post up the code you currently have?

@4nowauthorAug 19.2007 — #thanks, here is the temp page with menu bar

there isn't any text yet

but the content would be associated with the css/style.css rules

http://sitespecifics.ca/temp/Q/menu.html

@CentauriAug 19.2007 — #Hmmm, table layout and non-semantic code ... - that will have to be addressed...

What css styles are you initially trying to add?

@4nowauthorAug 19.2007 — #there will be background images instead of background colors

for links, and hover in the page.

since the menu buttons are transparent images these link attributes will be seen behind the menu button images as well - which i don't want

--

for a somewhat chaotic example of what i am trying to avoid

click on the 'photo album' link.

in this page i am beginning to style the navigation buttons under the photo.

and that brought disaster to the menu bar

thanks

@CentauriAug 19.2007 — #You have discovered one of the many pitfalls of laying out a site using tables - besides the page not making sense to search engine spiders and screen readers, heavy styling with css is made difficult due to the compexities of targeting specific groups of elements. With different pages having different table configurations, getting a uniform look to the entire site is difficult.

Utilising modern (table layouts were starting to be replaced 10 years ago) semantic html concentrating on content, with [B]all[/B] visual presentation handled by css, you can achieve a site that loads quicker, has a uniform feel, and is easier to maintain. Due to css implementation of the psuedo-class "hover", javascript can be eliminated for menu rollovers, [B]and[/B] photo galleries (an example of a no-javascript css gallery can be seen here at a site I did recently). I also recommend all a sites' css be in one file as there is less chance of style conflicts - an exception is specific styles that may be required for just one page.

I had a little play with your home page, applying semantic markup and modifying some of the graphics to suit - the modified graphics I used are attached. The html I came up with is:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Quartette - home page</title>
 <link href="style.css" rel="stylesheet" type="text/css">
 </head>
 
 <body>
 <div id="wrapper">
 <h1>Quartette</h1>
 <div id="nav">
 <ul>
 <li><a href="#" class="menbio">Biography</a></li>
 <li><a href="#" class="mendisco">Discography</a></li>
 <li><a href="#" class="menrev">Reviews</a></li>
 <li><a href="#" class="menalb">Photo Album</a></li>
 <li><a href="#" class="mentour">Tour Dates</a></li>
 <li><a href="#" class="menbook">Bookings</a></li>
 <li><a href="#" class="mensto">Store</a></li>
 <li><a href="#" class="menord">Order Form</a></li>
 <li><a href="#" class="menpres">Presskit</a></li>
 <li><a href="#" class="mencont">Contact</a></li>
 </ul>
 </div>
 <div id="content" class="homecontent">
 <img src="skin/girls.jpg" alt="Quartette"></div>
 </div>
 </body>
 </html>
 [/CODE]

Note that little consideration has been given to visual style - if you look at the page in this form, it looks very bland but all of the information is presented in an understandable form.

Styling of this page continues next post.

[upl-file uuid=03ed3d5e-ce34-4e67-96bb-bf57b73361da size=21kB]logo.gif[/upl-file]

[upl-file uuid=e2740cd8-3abc-47f8-afb1-51b2c3da606c size=49kB]homeback.gif[/upl-file]

[upl-file uuid=585a49d8-b791-4057-ba47-bcad9493362d size=14kB]girls.jpg[/upl-file]

[upl-file uuid=44393e97-4809-4f28-940f-8bf93833897c size=24kB]buttons.gif[/upl-file]

@CentauriAug 19.2007 — #The associate css file I used is :

[CODE]* {
 margin: 0;
 padding: 0;
 }
 body {
 background-image: url(skin/background.jpg);
 color: #461E0B;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 14px;
 background-color: #d6ba83;
 }
 #wrapper {
 width: 727px;
 margin: 0 auto;
 }
 h1 {
 display: block;
 height: 137px;
 background-image: url(skin/logo.gif);
 background-repeat: no-repeat;
 background-position: 153px top;
 font-size: 1px;
 color: #D1AE78;
 }
 #nav {
 float: left;
 width: 153px;
 background-image: url(menu/graphic.gif);
 background-repeat: no-repeat;
 padding-top: 70px;
 }
 #nav ul {
 display: block;
 width: 116px;
 padding-left: 37px;
 background-image: url(menu/graphic.gif);
 background-repeat: no-repeat;
 background-position: left bottom;
 }
 #nav li {
 list-style: none;
 padding-bottom: 10px;
 }
 #nav a {
 display: block;
 width: 116px;
 height: 22px;
 background-image: url(menu/buttons.gif);
 font-size: 1px;
 text-indent: -1000px;
 }
 #nav .menbio {background-position: right 220px;}
 #nav .menbio:hover {background-position: left 220px;}
 #nav .mendisco {background-position: right 198px;}
 #nav .mendisco:hover {background-position: left 198px;}
 #nav .menrev {background-position: right 176px;}
 #nav .menrev:hover {background-position: left 176px;}
 #nav .menalb {background-position: right 154px;}
 #nav .menalb:hover {background-position: left 154px;}
 #nav .mentour {background-position: right 132px;}
 #nav .mentour:hover {background-position: left 132px;}
 #nav .menbook {background-position: right 110px;}
 #nav .menbook:hover {background-position: left 110px;}
 #nav .mensto {background-position: right 88px;}
 #nav .mensto:hover {background-position: left 88px;}
 #nav .menord {background-position: right 66px;}
 #nav .menord:hover {background-position: left 66px;}
 #nav .menpres {background-position: right 44px;}
 #nav .menpres:hover {background-position: left 44px;}
 #nav .mencont {background-position: right 22px;}
 #nav .mencont:hover {background-position: left 22px;}
 #content {
 margin-left: 153px;
 }
 .homecontent {
 height: 523px;
 background-image: url(skin/homeback.gif);
 background-repeat: no-repeat;
 margin-top: -12px;
 background-position: 74px top;
 }
 .homecontent img {
 margin: 30px 0 0 135px;
 }
 [/CODE]

The css starts with the universal selector to zero out browser default margins and padding for an even start point. The body gets the background and the base font style and size is set here. The whole site is wrapped in a div with set width, with auto side margins to centre everything on the page.

The page title is a top-level <h1> heading, and the text is turned into the logo graphic by setting the <h1> to block display, assigning the appropriate height, and giving it the logo background positioned appropriately. The actual text is reduced to 1px high and coloured to match the background, effectively hiding the text (but still being able to be read by screen readers and search engines).

The navigation is simply a list of textual links, and these are styled as follows. The actual <a> tags are styled as block display so they can be given a size to suit the graphics (as a background). The link text is indented way off the left of the page so it is not seen visually. If you looked at the "buttons" graphic attached last post, you would see that [B]all[/B] of the buttons and rollover states are contained in one graphic, thereby eleminating any need for preloading. The one graphic is positioned at the appropriate place vertically via each of the link classes to display the normal state. The hover on each link moves the graphic across to reveal the rollover state. The list <li>s have the ist style set to none to get rid of the normal list bullets, and a bottom padding gives space between each menu item. The #nav div is floated left and has the background graphic applied. The list <ul> is spaced down via the div's top padding, and also has the background applied to give the overlayed look of your original. Left padding on the <ul> spaces the menu links from the left edge.

The #content div gets a left margin equal to the width of the floated menu, and all of the structure discussed so far can be used on every other page of the site. The #content div for the home page additionally gets a class which places the background "frame" graphic, and it is "pulled" upwards via a negative top margin to give the overlap with the logo graphic.

Finally, the photo of the girls (now a .jpg file for reduced file size) is positioned to the centre of the fram via top and left margins.

This basic framework can be the basis for each page, so any changes to the css will be site-wide. As far as the gallery goes, I would recommend having a look at some of the ones implemented by Stu Nicholls here.

Cheers

Graeme

Also in #CSS _↴

styling empty p tags need some one to take a look at my css margins and borders in ie/firefox

Success!

Help @4now spread the word by sharing this article on Twitter...

Tweet This

menu untouched by css rules

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

menu untouched by css rules

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴