Member Avatar for moonL!ght

hi im going crazy i dont know why the style sheet dose not affect the navigation bar
while it dose for other elements...pleas can any one break the buzle..
this is part of the style sheets that relates to the navigation bar:

.nav li{padding: 5px 10px 5px 10px;
      margin-left:10px; 
      display:block;
      float:left;
      list-style-type:none;   
}
.navpic{border-style:solid;
        border-color:red;
        
        }

a.nav: link{ color:#ffffff;
             border-color:green;
       }
a.nav: visited{ color:red;
         border: 3px solid yellow;  }
a.nav: hover{background-color: blue;
      }
.navbar{ margin-top:50px;
         text-decoration:none;}

and this is the html part of the navigation bar:

<div id="left">
  <ul class="navbar">
  <li>  <a class="nav" href="home.html"><img class="navpic" src="p.gif" alt="home"  width="150" hight="100"/></a></li>
  <li>  <a class="nav" href="colTheory.html"> <img class="navpic" src="t.gif" alt="color theory"  width="150" hight="100"/></a></li>
  <li>  <a class="nav" href="menOFcolor.html"><img class="navpic" src="g.gif" alt="meaning of colors" width="150" hight="100" /></a></li>
  <li>  <a class="nav" href="colorANDintDesign.html"><img class="navpic" src="i.gif" alt="colors and interior design" width="150" hight="100" /></a></li>

  <li>  <a class="nav" href="colorInFood.html"> <img class="navpic" src="y.gif" alt="colors in food"  width="150" hight="100" /></a> </li>
  <li>  <a class="nav" href="colorInSci.html"> <img class="navpic" src="b.gif" alt="color in science"  width="150" hight="100" /></a></li>

   </ul>
</div>

thanks in advance.

  • 3 Contributors
  • 7 Replies
  • 203 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by moonL!ght
Member Avatar for teedoff

First thing is correct your spelling. Hight is supposed to be height. 90% of all coding errors are usually poor spelling or typoes.

Now I think we'd need to see all of your code. Your unordered list seems to be formed correctly, but you didnt show the code that links your stylesheet and/or how you embedded your styles in your head section.

Edited by teedoff because: n/a
Member Avatar for moonL!ght

thanks for the information i didnt see it..
this is the code of one of the html codes:

<?xml version="1.0" enconding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //en"
"http://www.w3.org/tr/xhtml 1.0transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


  <title> menings of colors</title>

<link rel="stylesheet" href="project.css" type="text/css" />




</head>
<body>
<div class="container">
 <img class="logo" src="h.jpg" alt="life is color" width="1500" hight="200" align="middle" />
  <div id="left">
<ul class="navbar">
   <li> <a  class="nav" href="home.html"><img class="navpic" src="p.gif" alt="home" width="150" hight="100"/></a>
  <li>   <a  class="nav" href="colTheory.html"> <img class="navpic" src="t.gif" alt="color theory" width="150" hight="100"/></a>

  <li>   <a  class="nav" href="menOFcolor.html"><img class="navpic" src="g.gif" alt="meaning of colors" width="150" hight="100" /></a>
  <li>   <a  class="nav" href="colorANDintDesign.html"><img class="navpic" src="i.gif" alt="colors and interior design" width="150" hight="100" /></a>
  <li>   <a  class="nav" href="colorInFood.html"> <img class="navpic" src="y.gif" alt="colors in food" width="150" hight="100" /></a> 
  <li>   <a  class="nav" href="colorInSci.html"> <img class="navpic" src="b.gif" alt="color in science" width="150" hight="100" /></a>
</ul>
   </div>
 </div>

<div class="contp">

<div>

<p> <strong>Color therapy </strong>is a chromotherapy,it is a holistic healing technique that uses colors to alter mood and improve health.
 Chromotherapy dates back thousands of years and even was used by the Mayans and ancient Egyptians as a method to promote well-being and healing. 
During the 20th century, color therapy enjoyed a revival. Color therapy employs the principle that each color of the spectrum invokes a different emotion in people.</p></div>
<span class="pic1"><img src="coloTHERAP.jpg" alt="color theropy" width="200" hight="200" align="left" /></span>

<div><p><span id="red">red</span> is linked with courage, strength, ambition, and attentiveness. It can be used to provide more self-confidence and a feeling of security.
 <span id="org">Orange</span> is related with success and happiness. The color can be used as a source for inspiration and hopefulness.</p></div>

<div><p><span id="yel">Yellow</span> is associated self-worth, wisdom, and inspiration. The color can be used to assist memory as well as to offer courage.
 <span id="ger">Green</span> is connected with peace, love, and hope. It can be used as a stress reducer and as a way to help provide balance.</p></div>
<div><p><span class="blu">Blue</span> is related to creativity, personal expression, and health. The color can offer calmness and enhance clear thinking and communication skills. Indigo is associated with understanding and imagination. 
It can provide a greater awareness and foster creativity. <span id="vio">Violet</span> is related to creativity and beauty, and is said to promote generosity, selflessness, and relaxation</p></div>
<div><p>Color has been shown to enhance mood. Light boxes have been proven to assist in coping with seasonal affective disorder, which is related to the lack of sunlight in the winter months. 
Color also is useful to treat mood and sleep disorders. Practitioners recommend that chromotherapy should not be the sole method for treating critical ailments such as cancer.
 Instead, practitioners recommend that color therapy should be used in addition to medication or treatment prescribed by a physician.</p>

</div>
</div> 
<strong class="ger" >&nbsp mening of colors:</strong>
<span class="cont1" >

<img src="ColorChart.png" alt="color therapy healing" width="400" hight="420" /></span>
<div id="cont2"><img src="graph.jpg" alt="graph of persentage of loved colors by people"" /></div>

</div>

<div class="footer">

Copyright &copy 2011 Color Is Life<br>

<a href="mailto:arwa@hotmail.com">colors@hotmail.com</a>
</div>
</div>
</body>

</html>

im very thankfull for any one that can help me.

Member Avatar for teedoff

You had quite a few errors in your mark up. Not sure why but the first code you posted of your list, was correct. The second time however you didnt have a closing </li> tag for any of your list items.

Also, while you can use XHTML, if your not going to take advantage of XML, its not really needed. But I did work out all your errors using the validator, which you should learn to use and use regularly.

Here is the correct updated version of your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menings of colors</title>
<link rel="stylesheet" href="project.css" type="text/css" />
</head>
<body>
<div class="container"> <img class="logo" src="h.jpg" alt="life is color" width="1500" height="200" align="middle" />
  <div id="left">
    <ul class="navbar">
      <li> <a  class="nav" href="home.html"><img class="navpic" src="p.gif" alt="home" width="150" height="100"/></a></li>
      <li> <a  class="nav" href="colTheory.html"> <img class="navpic" src="t.gif" alt="color theory" width="150" height="100"/></a></li>
      <li> <a  class="nav" href="menOFcolor.html"><img class="navpic" src="g.gif" alt="meaning of colors" width="150" height="100" /></a></li>
      <li> <a  class="nav" href="colorANDintDesign.html"><img class="navpic" src="i.gif" alt="colors and interior design" width="150" height="100" /></a></li>
      <li> <a  class="nav" href="colorInFood.html"> <img class="navpic" src="y.gif" alt="colors in food" width="150" height="100" /></a></li>
      <li> <a  class="nav" href="colorInSci.html"> <img class="navpic" src="b.gif" alt="color in science" width="150" height="100" /></a></li>
    </ul>
  </div>
</div>
<div class="contp">
  <div>
    <p> <strong>Color therapy </strong>is a chromotherapy,it is a holistic healing technique that uses colors to alter mood and improve health. Chromotherapy dates back thousands of years and even was used by the Mayans and ancient Egyptians as a method to promote well-being and healing. During the 20th century, color therapy enjoyed a revival. Color therapy employs the principle that each color of the spectrum invokes a different emotion in people.</p>
  </div>
  <span class="pic1"><img src="coloTHERAP.jpg" alt="color theropy" width="200" height="200" align="left" /></span>
  <div>
    <p><span id="red">red</span> is linked with courage, strength, ambition, and attentiveness. It can be used to provide more self-confidence and a feeling of security. <span id="org">Orange</span> is related with success and happiness. The color can be used as a source for inspiration and hopefulness.</p>
  </div>
  <div>
    <p><span id="yel">Yellow</span> is associated self-worth, wisdom, and inspiration. The color can be used to assist memory as well as to offer courage. <span id="ger">Green</span> is connected with peace, love, and hope. It can be used as a stress reducer and as a way to help provide balance.</p>
  </div>
  <div>
    <p><span class="blu">Blue</span> is related to creativity, personal expression, and health. The color can offer calmness and enhance clear thinking and communication skills. Indigo is associated with understanding and imagination. It can provide a greater awareness and foster creativity. <span id="vio">Violet</span> is related to creativity and beauty, and is said to promote generosity, selflessness, and relaxation</p>
  </div>
  <div>
    <p>Color has been shown to enhance mood. Light boxes have been proven to assist in coping with seasonal affective disorder, which is related to the lack of sunlight in the winter months. Color also is useful to treat mood and sleep disorders. Practitioners recommend that chromotherapy should not be the sole method for treating critical ailments such as cancer. Instead, practitioners recommend that color therapy should be used in addition to medication or treatment prescribed by a physician.</p>
  </div>
</div>
<strong class="ger" >&nbsp; mening of colors:</strong><span class="cont1" > <img src="ColorChart.png" alt="color therapy healing" width="400" height="420" /></span>
<div id="cont2"><img src="graph.jpg" alt="graph of persentage of loved colors by people" /></div>
<div class="footer"> Copyright &copy; 2011 Color Is Life<br />
  <a href="mailto:arwa@hotmail.com">colors@hotmail.com</a></div>
</body>
</html>

Now, not sure this will fix your specific issue, but it needs to be valid code nonetheless.

Check it out and if its still a problem, let us know.

Member Avatar for floatingDivs

Try this. You weren't selecting your classes properly. For instance, your <a> tag has the class "nav" while the <ul> tag has the class "navbar". Yet, you used ".nav li" trying to select your <li> tags. However, all that was doing was selecting the <li> tags inside your <a> tags, which there are none of!

.navbar { margin-top:50px;
         text-decoration:none;}
.navbar li{padding: 5px 10px 5px 10px;
      margin-left:10px; 
      display:block;
      float:left;
      list-style-type:none;   
}
.navbar .navpic{border-style:solid;
        border-color:red;
        
        }

.navbar a.link{ color:#ffffff;
             border-color:green;
       }
.navbar a.visited { color:red;
         border: 3px solid yellow;  }
.navbar a.hover{background-color: blue;
      }
Member Avatar for moonL!ght

thank you floatingDiv very much it worked you rock..
now i whant to understand in what basis we select our class
to apply style sheets on the navigation bar?!!!

Member Avatar for floatingDivs

Typically, when I'm selecting the classes, I go from all the way out (UL) to all the way in (A). Take a look at the HTML structure below.

<ul class="navigation">
   <li>
      <a href="http://daniweb.com">Daniweb</a>
   </li>
</ul>

So, if I'm wanting to give the <ul> a background, I do this.

ul.navigation {
   background: #111111;
}

If I want to give each <li> a width of 50 px, I do this.

ul.navigation li { 
   width: 50px; 
}

Notice how I include my <ul> class when styling the <li>? That way, I make sure it only styles THAT <ul> structure. For instance, if you're importing ANOTHER external unordered list (UL), it may have just a <ul> structure with no class or id. Well, if my styling is "ul" instead of "ul.navigation", I'm styling both! That's not what I want...thus, always select the outermost tag when styling any single "component" of the page.

Member Avatar for moonL!ght

aha! thanks alot, at lest there are some procedure
ok i got the point!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.