ansaurus

Question

Answer 1

A:

.about-active
{
    position: relative;
    bottom: -1px;
}

F.Aquino 2010-03-02 14:53:53

Hi this works, but then it re-creates the problem I just fixed - It pushes the text down 1 pixel when the link is active then pops back up when the next link is clicked. How do I fix that?

jriggs 2010-03-02 14:59:00

Ah, @jriggs, see my posted answer as you must have been typing the comment... =)

David Thomas 2010-03-02 14:59:40

Answer 2

+2 A:

Similarly to F.Aquino's answer, the simplest solution is, almost certainly, moving your .about-active to cover the border. I'd personally do it this way, though:

.about-active  {
    padding-bottom: 1px;
    margin-bottom: -1px;
 }

the padding-bottom forces the text inside the .about-active element up by one pixel (the width of the border you're trying to cover, and the margin-bottom: -1px; pulls the shape down by 1px, the idea being that this way the text maintains its horizontal alignment with the remaining list elements.

But either way would work just as well.

David Thomas 2010-03-02 14:59:12

ty sir! css is so frustrating at times, nothing I searched even mentioned this, learning every day.

jriggs 2010-03-02 15:17:42

You'll get there; the trick with CSS is to work out the box-model -use Firebug, or Chrome's Developer Tools, IE web-developer toolbar (I think...) or Opera's Dragonfly- and then it starts to make more sense. Code for a sane browser first, and don't drink until *after* you've finished with IE (for the day, at least...) =)

David Thomas 2010-03-02 15:24:00

Answer 3

+3 A:

To add on to ricebowl's answer,

You can merge all 4 of these selectors into one.

Change the class attribute for each menu tab li from 'menuName-active' to 'menuName active'. Using the space instead of the - gives the element a 'menuName' class and an 'active' class. The element will no longer have a 'menuName-active' class.

Since each menu tab uses the same styles you can use this one selector:

ul#nav li.active{
   background-color:white;
   border-color:black black white;
   border-style:solid;
   border-width:1px;
   height:22px;
   margin-bottom:-1px;
   padding-bottom:1px;
}

SomewhereThere 2010-03-02 15:05:07

That's a good point, but, while I am up-voting the answer (welcome to Stackoverflow!), I'll offer that the OP might've used this form for a reason.

David Thomas 2010-03-02 15:08:59

Actually, I'm quite new to coding css from scratch so I didnt even realize this was an option - its funny how close the naming is. Right now I'm parsing the uri (php) and using script logic to set the class. This method may be preferable (more efficient) if I can get it working. I really appreciate pointers like this as I learn new tehniques.

jriggs 2010-03-02 15:21:49

I tried this method with no joy, can you expand a bit, thanks

jriggs 2010-03-02 15:41:23

ansaurus

tags:

views:

answers:

Show Div's Border Instead of Parent's

related questions