Forum Moderators: not2easy

Message Too Old, No Replies

Defining two different ordered list styles - Problem

         

Jamier101

2:02 pm on Oct 9, 2010 (gmt 0)

10+ Year Member



I have two ordered lists in my main page, one is for the main navigation the other for the bottom links bar. The top bar is to have a grey background with white text and when I scroll over it it turns dark grey which is perfect :)

The bottom panel wants to contain some links without a box around them, they simply want to be black text that I can click and doesn't change colour... any idea's?

Stylesheet

body {
background-image:url(../images/lite_background.jpg);
background-repeat:repeat;
}

#wrapper {
width:80%;
height:auto;
margin:0 auto;
background-color:white;
border:thin solid;
border-color:#999999;
}

#container {
width:auto;
margin:0 auto;
height:auto;
overflow:auto;
}

#header {
width:auto;
height:150px;
margin:0 auto;
text-align:center;
}

#navigation {
width:auto;
height:auto;
background-color:#999999;
}

#navigation ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#navigation li {
float:left;
}

#navigation a:link,a:visited {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#999999;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

#navigation a:hover,a:active {
background-color:#333333;
}

#spacer_horizontal {
width:auto;
height:5px;
background-color:#FFFFFF;
}

#left_panel {
float:left;
width:20%;
margin:0 auto;
}

#centre_panel {
float:left;
margin-left:20%;
width:60%;
margin:0 auto;
}

#right_panel {
margin-left:80%;
width:20%;
}

#bottom_panel {
width:auto;
height:10px;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thin dashed;
border-top-color:#999999;
text-align:center;
}

#bottom_panel ul {
list-style-type:none;
margin:0 auto;
overflow:hidden;
text-decoration:none;
text-transform:uppercase;
}

#bottom_panel li {
float:left;
}

#bottom_panel a:link,a:visited {
width:120px;
font-weight:bold;
color:#000000;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

#bottom_panel a:hover,a:active {
color:#000000;
}

#footer{
width:auto;
height:auto;
margin:5px;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thin dashed;
border-top-color:#999999;
}

#search_box {
width:auto;
height:auto;
border:thin solid;
border-color:#000000;
}

.blockquote{
margin:1em 3em;
color:#999999;
border-left:2px solid #999;
padding-left:1em;
}

MichaelBluejay

11:39 pm on Oct 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



What does font-weight have to do with your problem? Nothing. In fact, 99% of your code is irrelevant. So why are you expecting volunteers to slog through two pages of your code to find the problem?

Whenever you're having a coding problem, the first thing you do is to create the *simplest* version that reproduces the problem. If you've got more than five lines of code, you probably have too many.

alt131

1:09 pm on Oct 11, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Jamier101, I think these selectors might be causing the problems:
#navigation a:link, a:visited
#navigation a:hover, a:active
#bottom_panel a:link, a:visited
#bottom_panel a:hover, a:active

Try this:
#navigation a:link, #navigation a:visited
#navigation a:hover, #navigation a:active
#bottom_panel a:link, #bottom_panel a:visited
#bottom_panel a:hover, #bottom_panel a:active

Just note that links that don't give any feedback to users (like not changing colour as you describe for your bottom panel) can be a bit confusing.

milosevic

8:47 am on Oct 12, 2010 (gmt 0)

10+ Year Member



What does font-weight have to do with your problem? Nothing. In fact, 99% of your code is irrelevant. So why are you expecting volunteers to slog through two pages of your code to find the problem?


Harsh but fair - this does seem like a case of "Can you guys write my code for me?"

Jamier 101 - I would have a look at this page
[w3schools.com...]

This tells you everything about styling links.

alt131

9:27 am on Oct 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't think the OP was expecting their code to be written for them.

I'm the first to object to too much code, but it can be hard to identify the cause of the problem when first starting. The OP's good description made it very simple to scroll to the most likely trouble-spots and identify the issue. No re-write, and no slogging required because the problem is in the selectors, not the rules.

Give a new member a chance.

milosevic

10:22 am on Oct 12, 2010 (gmt 0)

10+ Year Member



alt131 I think you're right to a large extent

Sometimes I'm a bit grumpy in the morning - sorry Jamier101

I think I read the post as "can you tell me how to make my links the same colour" rather than "my css code isn't working right"