?

Log in

Wed, Feb. 4th, 2004, 01:11 am
pixieslayer: divs, links ,inheritance, and logic

Inheritance is taught fairly early on in cs classes, so it always comes as sort of a shock when something doesn't inherit. Css is pretty nifty because you can keep your content relatively seperate from your markup. Each div usually has a few elements that I want to be styled differently. This is rarely a problem.

However, I decided that I wanted the links in my menu to be different than links in my body. I write up the css for it, save and hit reload. And . . . nothing. No big deal, it's been awhile since I've done it, so it's probably an error on my part. I run it through the w3 validator and no errors. Ok, must be a firebird quirk...? I checked in current versions of IE and Opera and nothing.

Fortunately, Clayton suggested dinner, and I took a break. This is what I was working with prior to my break.
my content



my style for menu


menu{
padding-left:133px;
top:88px;
margin-left:0px;
position:absolute;
width:627px;
height:22px;
border-top:2px solid #FB769E;
border-bottom:2px solid #FB769E;
background-color:#000000;
color:#FB769E;
font: bold 16px arial;
}

a.menu:link { color: #CDC2BE; text-decoration:none;}
a.menu:visited{ color: #CDC2BE; text-decoration:none;}
a.menu:hover { color:#F8F5F3 ;text-decoration:none;}


You might figure that the
would mean everything between there and the
would use that style for any specified elements.... But links are apparently a special case. They're a pseudo class, not an element.

This means that any link you want to use the menu style in the menu
must use more code in the html file, ie:MenuItem 1.

Yes, for each instance of a link in the menu div that you want to use your menu style, you must append class="menu". CSS 2 does this too.


Backwards compatibility can go suck a rock.

Edit: I found a way to do it, but spent half an hour trying to fix wasn't broken. Thx sleepiness and a missing ".

Tue, Feb. 3rd, 2004 10:37 pm (UTC)
pixieslayer: original menu div, lj fudge to display code

<-div class="menu">
<-a href="#">MenuItem 1<-/a>
<-a href="#">MenuItem 2<-/a>
<-a href="#">MenuItem 3<-/a>
<-a href="#" >MenuItem 4<-/a>
<-/div>