View Thread: Current Page Issue & how to set li width

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: Current Page Issue & how to set li width

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 10

[ ]

Author

This topic has been viewed 1757 times and has 9 replies

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline


Current Page Issue & how to set li width

I'm feeling stupid, but I've messed with this long enough. Help please.

My vet has a noteworthy website:

mys av et.com

.... I already dropped of my business cards at the last visit and told him I'd be more than happy to give them a quote for a more professional looking site. Haven't heard anything yet, but I decided to just build a new index page and show it to them - either they bite or they don't. And I certainly - as I noticed - needed the practice. Plus, it's just so much fun.

And that brings me to my 2 problems - here is my version: Vet Draft -
Username: SAVET
password: francis

I applied width to every part of my list, but I could not figure out how to set my navigation link buttons to the same width.

And --- why in the world is my current page thing not working - I've looked and looked, and cannot figure it out. the body has the id="home" - the nav li has the class="home' and the CSS has:

#home .class a: { ..... something's wrong because it's not working!!!!

Aside from these issues, any other comments/suggestions are welcome.
----------------------------------------
...

[Oct 25, 2008 11:47:54 AM]

[Link]

shelfimage
Advanced Member

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline


Re: Current Page Issue & how to set li width

The width thing is giving trouble because the LI has display:inline. It is no longer a block element. Try using a more traditional suckerfish style menu (I'm just guessing on the width amount):

#nav ul {vet.css (line 56)
height:22px;
list-style-type:none;
padding:10px;
white-space:nowrap;
}

#nav li {vet.css (line 62)
float:left;
width:auto;
}

#nav ul a {vet.css (line 67)
background-color:#99BBCC;
color:#004080;
display:block;
margin:0 6px;
padding:0 5px;
text-align:center;
text-decoration:none;
width:110px;
}

The active rule is not working b/c it is listed first before the default rule. So, the default is taking precedence. So order similar to this below and I added more specificity to the active link rule:

#nav ul a {
text-decoration: none;
background: #99bbcc;
color: #004080;
padding: 5px;/* --- creates space directly around the word */
}
#home #nav ul li.home a {
text-decoration: underline;
}

But, what I would do is use class="active" so it can be reused for each page. For example,

#home #nav ul li.active a,
#about #nav ul li.active a,
#staff #nav ul li.active a {text-decoration: underline;}
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
----------------------------------------
[Edit 1 times, last edit by shelfimage at Oct 25, 2008 12:47:55 PM]

[Oct 25, 2008 12:47:32 PM]

[Link]

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline


Re: Current Page Issue & how to set li width

Thanks John - got my <li>s the same width now. I normally don't like floating things, but I guess here I can chose - float or uneven. I'll go with float.

But the current page thing - I'm going with your "active' suggestion - makes a lot of sense, but it's still not working. I tried it where you said to put it, and about everywhere else - NOTHING!!!

What am I not seeing?
----------------------------------------
...

[Oct 25, 2008 1:31:52 PM]

[Link]

ewwatson
Advanced Member

United States
Joined: Dec 19, 2007
Post Count: 1285
Status: Offline


Re: Current Page Issue & how to set li width

#home #nav ul.li.active a {
155 background: red;
156 }

Is that "dot" it between the ul and the li? Or am I looking at the wrong spot?
----------------------------------------
Eric :~)
Knowledge is Power
----------------------------------------
[Edit 1 times, last edit by ewwatson at Oct 25, 2008 2:17:30 PM]

[Oct 25, 2008 2:16:59 PM]

[Link]

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline


Re: Current Page Issue & how to set li width

Don't know, Eric, I tried removing the dot and played around with other variations, but nothing worked. I know this is not really difficult - I've done it before, but something is off on this page and I'm jsut not seeing it.........
----------------------------------------
...

[Oct 25, 2008 3:02:04 PM]

[Link]

falkencreative
Advanced Member

USA
Joined: Aug 14, 2007
Post Count: 1129
Status: Offline


Re: Current Page Issue & how to set li width

This is the current CSS you are using...

#home #nav ul li a .active {
background:red none repeat scroll 0%;
}

It seems to be correct, so I'm not totally sure why it isn't working. Maybe something about the CSS expecting another element inside the a tag with a "active" class?

Perhaps remove the space between the "a" and the ".active", or simplify it to:

#home #nav .active
----------------------------------------
Benjamin Falk | student : designer : developer
Twitter: falkencreative

[Oct 25, 2008 4:18:25 PM]

[Link]

ewwatson
Advanced Member

United States
Joined: Dec 19, 2007
Post Count: 1285
Status: Offline


Re: Current Page Issue & how to set li width

The .active is on all of the li's or a's I don't remember. But wouldn't that turn them all red? If you can't get it working that way Thelma you may want to try it this way - I know this works.

http://www.visibilityinherit.com/code/current-page.php
----------------------------------------
Eric :~)
Knowledge is Power

[Oct 25, 2008 4:45:03 PM]

[Link]

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline


Re: Current Page Issue & how to set li width

I got it - it was the space between the 'a' and the '.active'.

And I didn't need the entire detail, this is enough:

#home a.home,
#staff a.staff
{
background: #004080;
color: #cceaff;
}

And while I was at it, I moved this section around a bit - tired the end of the stylesheet, the beginning, and the beginning and end of the nav styling section - id didn't make any difference and worked regardless.

And I think when John suggested

But, what I would do is use class="active" so it can be reused for each page. For example,

#home #nav ul li.active a,

he assumed that the class would be added to each page individually (and then I wouldn't need the extra id in the body tag, either - but since I'll be inserting the navigation via include, each needs a different class, or as Eric said, they will all be red.
----------------------------------------
...

[Oct 26, 2008 8:38:05 AM]

[Link]

shelfimage
Advanced Member

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline


Re: Current Page Issue & how to set li width

but since I'll be inserting the navigation via include, each needs a different class, or as Eric said, they will all be red.

ah, I didn't see that it would be via an include. glad it all worked out!
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

[Oct 27, 2008 8:34:47 PM]

[Link]

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline


Re: Current Page Issue & how to set li width

ah, I didn't see that it would be via an include. glad it all worked out!

You couldn't have - that's only the plan in case I get hired to do the site.
----------------------------------------
...

[Oct 28, 2008 4:07:41 AM]

[Link]

[ ]

Current timezone is GMT
May 23, 2013 2:16:46 PM