current page using css

Printable View

01-10-2007, 02:09 AM
pea3698

current page using css

I have a verticle list of links with in the li tags. I want the links to not have bullets unless it is on the current page. I found this tutorial but I cant get the bloody thing to work. I am a novice at css so it gets frustrating. Also I have a custom bullet graphic that I want to show when it is on that links page.

Code so far pertaining to this:

In the header area. I will be moving this to an external sheet in the end.

link {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: 50%;
font-weight: lighter;
color: #000000;
text-decoration: none;
text-align: left;
padding: 2px;
}
a:link {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-decoration: none;
padding: 3px;

}
a:visited {
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
color: #000000;
text-decoration: none;
}
a:hover {
font-size: 9px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;

}
a:active {
font-size: 9px;
font-style: normal;
line-height: normal;
font-weight: normal;
text-decoration: none;
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
list-style-image: url(../images/bullet.gif);
}

li { list-style-position: inside;
list-style: none;

}

In the div

<div id="sidebar-a" align=left><table width="135" border="0" align="left" cellpadding="0" cellspacing="0"><p class="line-height">
<tr>
<td>
<hr size="1" />
<a href="home.htm"><li>Home</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Logos + Corporate ID</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Brochures</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Catalogs</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Magazines</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Annual Reports</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Client Comments</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Articles of Interest</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Contact Us</li><br />
</a><hr size="1" /><a href="place_holder.htm"><li>Site Map</li><br />
</a><hr size="1" />
</td>
</tr>
</p></table></div>

Please help me.
01-10-2007, 02:10 AM
pea3698

sorry here is the tute
http://www.456bereastreet.com/archiv...tate_with_css/
01-10-2007, 10:41 AM
aversion

Without looking at your CSS I can see that your HTML is a bit messed up. You should have your links inside the <LI> element not surrounding it.

Code:

<li><a href="place_holder.htm">Logos + Corporate ID</a></li>

Also you have the CSS property 'list-style-image' inside the styling for the <A> tag, it is a property of the list element, putting it on the <A> tag won't achieve anything.

Not sure if that's your problem but I'll take a better look at it after lunch.
01-10-2007, 10:48 AM
rdoyle720

You've got a few problems with your HTML and your CSS. You have a lot of extra CSS you don't need, but we'll ignore that for now. You also don't need the table or the paragraph. To use LI's you need to wrap them in a UL tag, and you should really put the A tags within the LI tags, not the other way around. You can see all this at work in the first code snippet on the page you're linking to.

Then you need to give all your LI or A tags an id, such as <li id="brochures_link">. This is also visible in the first code snippet on the link.

Then you need to set the body id on each page, and you need CSS to handle that. That's the second code snippet on that page. So using the example above, you could do something like:

Code:

#brochures #brochures_link{ list-style: circle; }

This means when you have the code <body id="brochures"> on your page, the item <li id="brochures_link"> will have a bullet.

I would recommend starting with the exact code and CSS from the tutorial page, and then modifying it to fit your needs.
01-10-2007, 01:17 PM
aversion

Your HTML is really all over the place and the CSS needs to be rationalised. You're repeating a lot of properties you don't have to.

There are many other examples of using lists for menus on the web, particularly check out listamatic. The article you're using is almost 4 years old, which is a long time in web development. It's principles still hold true but there are lots of different techniques out there.

Here's a quick solution which I think is in line with what you want to achieve:

http://rigent.com/junk/li_links.htm

Putting the image on the active link means putting a class called 'active' on the <LI> that surrounds the link. I think it's easier to use a background image on the 'active' link rather than trying to bring back the list image for that one link. You can do that but this way you don't have to worry about the consequences to positioning that bringing the list image back entails.

The CSS is in the head of the document.
01-10-2007, 02:18 PM
pea3698

Thanks guys. Like I said I am a newbie hence the all over the place. lol I will try some things this evening when I get home. The only thing keeping me from sending this out is this menu bleh.
01-10-2007, 02:22 PM
pea3698

I also should have stated that it needs to be an easy setup if possible. All I am creating is a template. The person I am doing it for will be inserting content. So the less complex the better.
01-10-2007, 02:45 PM
aversion

Well, the only thing you'd need to change page to page is the 'active' class. I don't think there's a way to do it where you don't have to change anything. Some people put the indicator on the body tag, but the a:active property won't do it for you.
01-10-2007, 04:38 PM
pea3698

Gotcha. Thanks Aversion. You too rdoyle.
01-10-2007, 07:08 PM
1stbite

Quote:

Originally Posted by aversion

Well, the only thing you'd need to change page to page is the 'active' class. I don't think there's a way to do it where you don't have to change anything. Some people put the indicator on the body tag, but the a:active property won't do it for you.

I never seen it done with just css either but have seen it done with javascript and DOM, by grabbing the page name from the URL and comparing it with the menu list and adding styling if match found. once the functions built you just add a link to the function in an external file.

personally though i think its over kill and would go with the css class moving option ;)
01-10-2007, 08:44 PM
aversion

The only time I can think of something like that being useful is if you have to keep your menu in some sort of include, so you don't have any idea where the menu will be.

It doesn't really matter where you put your active indicator as long as it's an element higher up in the DOM than the menu. You could put an ID on the body tag for example, and use something like body#menuitem li#menuitem_bttn {}. But then you have to add IDs to all through your menu and in many dynamic page situations the beginning of the HTML may be part of an include.
01-10-2007, 11:05 PM
pea3698

WOW! way over my head.
01-11-2007, 12:25 AM
pea3698

Ok thanks to your help I got further, but one thing is still not doing right.
This is the code I have in the header:

Code:

ul { list-style-position: outside; } #home #nav-home a, #logos_and_corporate_id #nav-logos_and_corporate_id a, #brochures #nav-brochures a, #catalogs #nav-catalogs a, #magazines #nav-magazines a, #annual_reports #nav-annual_reports a, #client_comments #nav-client_comments a, #articles_of_interest #nav-articles_of_interest a, #contact_us #nav-contact_us a, #site_map #nav-site_map a, { /* declarations to style the current state */ list-style-position: inside; list-style-image: url("images/bullet.gif"); }

This is the code for my list:

Code:

<div id="sidebar-a" align=left><table width="135" border="0" align="left" cellpadding="0" cellspacing="0"><p class="line-height"> <tr> <ul> <hr size="1" /> <li id="nav-home"><a href="index.htm">Home</a></li> <hr size="1" /> <li id="nav-logos_and_corporate_id.htm"><a href="logos_and_corporate_id">Logos + Corporate ID</a></li> <hr size="1" /> <li id="nav-brochures"><a href="brochures.htm">Brochures</a></li> <hr size="1" /> <li id="nav-catalogs"><a href="catalogs.htm">Catalogs</a></li> <hr size="1" /> <li id="nav-magazines"><a href="magazines.htm">Magazines</a></li> <hr size="1" /> <li id="nav-annual_reports"><a href="annual_reports.htm">Annual Reports</a></li> <hr size="1" /> <li id="nav-client_comments"><a href="client_comments.htm">Client Comments</a></li> <hr size="1" /> <li id="nav-lab"><a href="articles_of_interest.htm">Articles of Interest</a></li> <hr size="1" /> <li id="nav-contact_us"><a href="contact_us.htm">Contact Us</a></li> <hr size="1" /> <li id="nav-site_map"><a href="site_map.htm">Site Map</a></li> <hr size="1" /> </ul> </tr> </p></table></div>

Ok so this is what I get out of that:
http://i34.photobucket.com/albums/d1...nu_current.jpg

This is what I want to get:
http://i34.photobucket.com/albums/d1...hat_i_want.jpg

With the words aligned still and the boarder showing up beside them not effecting the words positioning.

Any suggestions?
01-11-2007, 03:54 AM
Lathander

This is what i have used on my project and it works.
<ul id="menu">
<li>
<div class="rollbutton1"><A onfocus="this.blur()" href="#">Customers</A></div>
<li>
<div class="rollbutton1"><A onfocus="this.blur()" href="#">New Complaint</A></div>
</li>
</ul>

Add this code inside the head file
<LINK href="MyCSS.css" type="text/css" rel="stylesheet">

Open a notepad paste this code inside and save it as MyCSS.css

.rollbutton1 a {
color: Silver;
font-size: 9px;
font-family: verdana;
font-weight:bold;
text-decoration: none;
border:1px ridge Red;
background-color:Black;
width: 137px;
height: 24px;
padding: 3px;
}
.rollbutton1 a:hover {
background-color: Orange;
font-weight:bold;
color:Black;
border:1px ridge light gray;
}

/*--------------------------------------*/

ul {
width:150px;
background:black;
list-style:none;
}

li {
position:relative;
padding:3px;
padding-left:3px;
background:black;
text-align:left;
z-index:10;
}
li.folder
{
background:black;
}
li.folder ul {
position:absolute;
left:30px;
top:0px;
}

li a.submenu {
background:black;
}

/* regular hovers */

a:hover {
border:1px ridge light gray;
background-color:Orange;
color:black;
font-weight:bold;
}
li.folder a:hover
{
border:1px ridge light gray;
background-color:Orange;
}

/* hovers with specificity */

li.folder:hover { z-index:10; }

ul ul, li:hover ul ul {
display:none;
}

li:hover ul, li:hover li:hover ul {
display:block;
}

I hope this will help.. just clean the code and remove the parts you wont be needing.

I almost forgot this doesn't work in FF :p I haven't tried to fix it yet.
01-11-2007, 09:53 AM
aversion

Ok, for a start all this code can be reduced if you put an ID on the <UL>. So instead of all this:

Code:

#home #nav-home a, #logos_and_corporate_id #nav-logos_and_corporate_id a, #brochures #nav-brochures a, #catalogs #nav-catalogs a, #magazines #nav-magazines a, #annual_reports #nav-annual_reports a, #client_comments #nav-client_comments a, #articles_of_interest #nav-articles_of_interest a, #contact_us #nav-contact_us a, #site_map #nav-site_map a, { /* declarations to style the current state */ }

You get something like this:

#menu a {
/* Styles go here */
}

this basically says, all the links inside the HTML element (in this case a <UL>) with the ID 'menu' have these styles.

Secondly, I don't know what you're doing with your CSS to even achieve what you have there. As we mentioned before, the <A> tag doesn't have any list style properties. The <A> tag doesn't have anything to do with the styling properties of the of list menus.

Thirdly, take a look at the code in the link I left you in my first post here. It does exactly what you want to do but instead of using a list style image it just uses a background image. The advantage of this is that "you don't have to worry about the consequences to positioning that bringing the list image back entails" - which is what is happening to you here, showing the list image is pushing the link over to the right.

In the example I left every <LI> has a certain amount of padding applied to the left side by this line of code:

Code:

li { padding: 3px 3px 3px 14px; margin: 0; list-style-position: inside; list-style: none; }

The 14px of padding to the left is to allow space for the background image we want to use when the link is 'active'.

When the link is active we add the background image with this code:

Code:

li.active { background: url(images/bullet.gif) no-repeat left 8px; }

This says, when the class of the <LI> is 'active' put a background image on the left side, 8px down (to centre it). And you can see the result in the example I posted, http://rigent.com/junk/li_links.htm. Putting the background image in there doesn't effect the position of any other elements in the HTML, unlike trying to use a list style image. You can use a list style image but you have to compensate for the shifts in position it will cause. A background image is much easier.
01-11-2007, 09:56 AM
pea3698

Gotcha Aversion. Once again thanks for the help.
01-11-2007, 10:23 AM
pea3698

Aversion, I am trying to figure out your beef with the <a> tags. The only place I see them is around my links. Is this not a necessary tag for an html link?
01-11-2007, 11:43 AM
aversion

I've got no beef with the <A> tags but with the CSS you were trying to apply to them. You were trying to style the <A> with:

list-style-position: inside;
list-style-image: url("images/bullet.gif");

These are styles for an <LI> element, not a link. You may get some result by trying to style them this way but it won't be consistent and it's not semantic. Like I said above list styles should only be applied to list elements.

:)