CSS help !

  Revi 14:09 22 Oct 2005
Locked

I have 4 navigation bars and I want the texts in these bars be written in grey colour. So I’ve used the following code:
ul.navbar li {
background: white;
color: solid gray
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid gray }
The problem is that earlier in the body I have declared the following:
body {
padding-left: 11em;
color: white;
background-color: #4169E1}

Now it appears that the texts in the navigation bars are catching on to the background colour (royal blue) of the body and are therefore appearing only blue (overriding my choice of solid gray which is the value given under ul navbar li).
How is this resolved?

  PurplePenny 21:01 22 Oct 2005

There's no such colour as solid grey. W3Schools click here has a list of the colour names suppported by most browsers (but only 16 of the names are actually considered standard by the W3C).

  PurplePenny 21:07 22 Oct 2005

You've probably seen "solid colorname" in a border style but the solid there refers to the appearence of the border itself i.e. it is solid, not dotted, dashed, grooved etc..

  Revi 21:14 22 Oct 2005

Thanks for the correction. I am learning as i go which often leads to wrong learning. Thanks for bothering!

  PurplePenny 21:32 22 Oct 2005

No problem! Making mistakes is part of the learning process and asking questions is too.

Take a look at the rest of the W3Schools site click here whilst you are there. They have some very good HTML and CSS tutorials on there. I know that you are using Frontpage to create your site but, as you are finding out, it sometimes helps to understand a bit about the underlying code.

  Revi 21:32 22 Oct 2005

Overlooking the mistake in colour naming can anyone please help me in resolving the problem I have mentioned (by the way in the actual coding I have not missed out on the semi colon after grey which I have omitted in my thread here).

  Revi 21:36 22 Oct 2005

I am now trying to learn CSS, could you please see where I am going wrong? Thanks.

  PurplePenny 23:54 22 Oct 2005

Is it online? If so please post a link to the page as it is often easier to spot what is happening in the actual code. From what you've posted above I can't see why the text would inherit the background colour.

I'm just off to spot meteors so I'll take another look at this tomorrow.

  PurplePenny 23:58 22 Oct 2005

Is the text that you refer to a link (an <a> tag? If so you need to define the style for the links. Have you given any links a style? If not then what you are seeing is a default link colour.

  djinn 00:22 23 Oct 2005

Hey,

You could take this and adjust to suit....

#navbar {
width: 175px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
}

#navbar ul {
margin: 0px;
padding: 0px;
}

#navbar ul li {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}

#navbar ul li a:link, #navbar ul li a:visited {
display: block;
width: 175px;
text-decoration: none;
color: #00ff00;
border-left: solid #acacb2 1px;
border-bottom: solid #acacb2 1px;
border-right: 1px #acacb2 solid;
padding-top: 3px;
padding-bottom: 3px;
background-color: #787878;}

#navbar ul li a:hover, #navbar ul li a.current {
color: #fff;
background: #9d9d9d;
}

and your html markup would look something like.....


<div id="navbar">
<ul>
<li><a href="#" class="current">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>

Apply the "current" rule to whatever page you are on - in the above example you are on Pgae 1 - so for Page two your code would look like...

<div id="navbar">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#" class="current">Page 2</a></li>
etc etc etc.....

HTH
Cheers

  Revi 09:35 23 Oct 2005

Sorry, it's not online. No I haven't given links any style. Will try with style. Thanks.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

These brilliant Lego posters show just what children's imaginations are capable of

Mac power user tips and hidden tricks

Comment réinitialiser votre PC, ordinateur portable ou tablette Windows ?