[Solved]Exception rule - Help Needed

[chrisbrow]

I'm in need of some help. I have been looking on the internet for about 45 min looking for a exception rule for CSS or HTML. I'm not sure how it would work, and would like to learn. Here is my problem. In my CSS file I have created a style for links this style was created for my navagation menu. However this style is currently effecting all links with in my page. My goal is to exclude all but my navagtion links of this style. any suggestions, anyone know if a exception rule?

[thescientist]

yes, that should be quite simple. show us the code so we can give you specific advice, but the gist is like this:you are probably doing something like this:

a{  color: red;  text-decoration: underline;}

which yes, would affect all links. however, you can specify on certain link styles a couple of ways. if you have a div enclosing your navigation, you can target only the links in the nav div like this (assuming an ID of nav)

#nav a{  color: red;  text-decoration: underline;}

will target only anchor links who are in (read: children) of an element with the ID of nav

[chrisbrow]

yes, that should be quite simple. show us the code so we can give you specific advice, but the gist is like this:you are probably doing something like this:

a{  color: red;  text-decoration: underline;}

which yes, would affect all links. however, you can specify on certain link styles a couple of ways. if you have a div enclosing your navigation, you can target only the links in the nav div like this (assuming an ID of nav)

#nav a{  color: red;  text-decoration: underline;}

will target only anchor links who are in (read: children) of an element with the ID of nav

Ok so here his my css code, and by the way thank you for the quick response. .menuul { background-color: #333399; list-style-type:none; margin: 0; padding:30; overflow:hidden;}.menuli { float: left; margin-right: auto; margin-left: auto;}a:link,a:visited { display:inline; width:130px; font-weight:bold; color:#FFFFFF; background-color:#333399; text-align:center; padding:40px; text-decoration:none; text-transform:uppercase;}a:hover,a:active { background-color:#33cc66;_____________________________________________________________________And then my html. <div> <ul class="menuul"> <li class="menuli"><a href="page1.html">Css Home</a></li> <li class="menuli"><a href="page2.html">Css Two</a></li> <li class="menuli"><a href="page3.html">Css Three</a></li> <li class="menuli"><a href="../index.html">Main Home</a></li> </ul> </div>

[thescientist]

Ok so here his my css code, and by the way thank you for the quick response.

no prob. here's one potential implementation. i would probably make the nav an ID, since it will probably only appear once on the page. From there, you can just target all it's children in the CSS without having to add classes to all the markup.CSS

#menu ul {  background-color: #333399;  list-style-type:none;  margin: 0;  padding:30;  overflow:hidden;}#menu li {  float: left;  margin-right: auto;  margin-left: auto;}#menu a:link, #menu a:visited{  display:inline;  width:130px;  font-weight:bold;  color:#FFFFFF;  background-color:#333399;   text-align:center;  padding:40px;  text-decoration:none;  text-transform:uppercase;}#menu a:hover, #menu a:active {  background-color:#33cc66;}

HTML

<div>  <ul id="menu">	<li><a href="page1.html">Css Home</a></li>	<li><a href="page2.html">Css Two</a></li>	<li><a href="page3.html">Css Three</a></li>	<li><a href="../index.html">Main Home</a></li>  </ul></div>

[chrisbrow]

no prob. here's one potential implementation. i would probably make the nav an ID, since it will probably only appear once on the page. From there, you can just target all it's children in the CSS without having to add classes to all the markup.CSS

#menu ul {  background-color: #333399;  list-style-type:none;  margin: 0;  padding:30;  overflow:hidden;}#menu li {  float: left;  margin-right: auto;  margin-left: auto;}#menu a:link, #menu a:visited{  display:inline;  width:130px;  font-weight:bold;  color:#FFFFFF;  background-color:#333399;   text-align:center;  padding:40px;  text-decoration:none;  text-transform:uppercase;}#menu a:hover, #menu a:active {  background-color:#33cc66;}

HTML

<div>  <ul id="menu">	<li><a href="page1.html">Css Home</a></li>	<li><a href="page2.html">Css Two</a></li>	<li><a href="page3.html">Css Three</a></li>	<li><a href="../index.html">Main Home</a></li>  </ul></div>

Worked just as advertised thank you... So with the changes I made I screwed up some of the formatting. Maybe you might be able to make a suggestion my goal is to center these items with in the div box I made, also I would like the back ground to match that of the rest of the page. here is a screen shot of what has happened.... Here is my CSS that I changed.

#menu ul {	 background-color: #333399;	 list-style-type:none;	 margin-left: 50;	 padding:30;	 overflow:hidden;}#menu li {	 float: left;	 margin-right: auto;	 margin-left: auto;}#menu a:link, #menu a:visited {	 display:inline;	 width:130px;	 font-weight:bold;	 color:#FFFFFF;	 background-color:#333399;	 text-align:center;	 padding:2px;	 text-decoration:none;	 text-transform:uppercase;}#menu a:hover, #menu a:active {	 background-color:#33cc66;}

[thescientist]

well, to center the menu, you can add this

#menu{  margin: 0px auto;  width: xxx;  //something that works};

to remove the white space, you can expand the width of the a tags and the #menu width until it fits. This will just require some trial and error on your part till it get's to where you need it.

[chrisbrow]

well, to center the menu, you can add this

#menu{  margin: 0px auto;  width: xxx;  //something that works};to remove the white space, you can expand the width of the a tags and the #menu width until it fits.  This will just require some trial and error on your part till it get's to where you need it.[/quote]Great suggestion I made the suggested changes which fixed the back ground color, but I could not get this thing centered this is my code.  It keeps sitting on the left side of the div. I'm not sure if it is because I'm using the float left or what? [code]#menu {	 margin-left: 0px auto;	 width: 800px;}#menu ul {	 background-color: #333399;	 list-style-type:none;	 margin-left: 50;	 padding:30;	 overflow:hidden;}#menu li {	 float: left;	 margin-right: auto;	 margin-left: auto;}#menu a:link, #menu a:visited {	 display:inline;	 width:130px;	 font-weight:bold;	 color:#FFFFFF;	 background-color:#333399;	 text-align:center;	 padding:2px;	 text-decoration:none;	 text-transform:uppercase;}#menu a:hover, #menu a:active {	 background-color:#33cc66;}

[thescientist]

well, your li's are still 130. to have them each take the full width they can, you should divide 800 / 4, which should give you a new width of 200px. You may need to adjust the paddings of certain things. The box model works that paddings and margins are added to the width. so a 200px element with padding 2px, means there's 2px on the left and right (as well as top and bottom), so the new width you may want is 200 - (2px * 2) = 196. if you didn't, then you would have 200px width plus 4px (2px on the left and right) for a total of 204 * 4, which would bust out of the 800px menu container.if you are still stuck, post your updated CSS and relevant HTML and I'll throw into a test document on my computer. (unless you have this site live, in which case a link would work better since I can make live edits using my browsers developer tools).

[chrisbrow]

well, your li's are still 130. to have them each take the full width they can, you should divide 800 / 4, which should give you a new width of 200px. You may need to adjust the paddings of certain things. The box model works that paddings and margins are added to the width. so a 200px element with padding 2px, means there's 2px on the left and right (as well as top and bottom), so the new width you may want is 200 - (2px * 2) = 196. if you didn't, then you would have 200px width plus 4px (2px on the left and right) for a total of 204 * 4, which would bust out of the 800px menu container.if you are still stuck, post your updated CSS and relevant HTML and I'll throw into a test document on my computer. (unless you have this site live, in which case a link would work better since I can make live edits using my browsers developer tools).

Thank you, for the continued support. I have the site live below is the link.... the scientist please when suggesting changes be as specific as possible I'm not just trying to plug anwsers in to complete this I would really like to the why behinde the solution. Your help is great and thank you so much. http://power.arc.losrios.edu/~brownc/cisw3...ment/page1.html

[chrisbrow]

Thank you, for the continued support. I have the site live below is the link.... the scientist please when suggesting changes be as specific as possible I'm not just trying to plug anwsers in to complete this I would really like to the why behinde the solution. Your help is great and thank you so much. http://power.arc.losrios.edu/~brownc/cisw3...ment/page1.html

so just a quick question as I'm looking through you suggestion should I be using a id for the <li></li> as well. This would give me the ability to add a style to each of them. I guessing this is what you suggesting...

[thescientist]

thanks for the live link, that helped me figure it out. for #menu li add width:200px. Since the anchors <a> are inline elements, they cannot have width applied to them. (unless you change their display manually). I briefly overlooked that detail, sorry. You can actually remove the width from the <a> tags completely.Well, it would probably be best to just link you the reference page on the box model before going on, in case you are unfamiliar with it. It might be less confusing that way.http://www.w3schools.com/css/css_boxmodel.aspread all chapters in that section.if you want to styles them (<li>) independently, then you can add a class/id's for each of them. If you want to add styles to all of them, just add styles to the #menu li selector. For example, you could add text-align: center and it should center the <a> tags.

[chrisbrow]

thanks for the live link, that helped me figure it out. for #menu li add width:200px. Since the anchors <a> are inline elements, they cannot have width applied to them. (unless you change their display manually). I briefly overlooked that detail, sorry. You can actually remove the width from the <a> tags completely.Well, it would probably be best to just link you the reference page on the box model before going on, in case you are unfamiliar with it. It might be less confusing that way.http://www.w3schools.com/css/css_boxmodel.aspread all chapters in that section.if you want to styles them (<li>) independently, then you can add a class/id's for each of them. If you want to add styles to all of them, just add styles to the #menu li selector. For example, you could add text-align: center and it should center the <a> tags.

Ok so I was a little fusterated but I see what I messed up I did not add <li> to my links in my <ul> so the formatting was not there. "I'm a student still missing the obivious" thank you for the help! You gave me some addintional things to think about for the future.

[thescientist]

no worries, we've all been at that point at sometime or another in our learning process. Just make sure you understand what you learn and practice it till you could explain it to a sixth grader, haha.