...

View Full Version : CSS Inheritance problems



clifford
09-19-2011, 11:20 AM
I'm not quite sure why i'm experiencing this problem but I believe it is related to CSS inheritance. I just started to pick up HTML and CSS after a 5 year hiatus, so my knowledge is both rusty and a little outdated.

the problem i'm having occurs with the <a> element when trying to give it a padding or margin. two issues arise.

1) the padding / margin values are affecting my <nav> links, although they have their own class

2) the padding / margin values are not affecting the link i want it too.

here is the html5 code (related areas highlighted in RED):



<nav class="list">
<ul>
<li><a href="index-NEW.html">Home</a></li>
<li><a href="service-NEW.html">Services</a></li>
<li><a href="contractor.html">Selecting a Contractor</a></li>
<li><a href="system.html">Sprinkler Systems</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<section>
<h1>Services we offer:</h1>
<ol class="format"><img class="right" alt="sprinkler" src="images/rainbird1.jpg">
<li>TextTextTextTextTextTextText</li>
<li>TextTextTextTextTextTextTextText</li>
<li>TextTextTextTextTextText</li></li>
<li>TextTextTextTextTextText</li><img class="right" alt="sprinkler" src="images/sprinkler5.jpg">
<li>TextTextTextText</li>
</ol>
<h2 id="indent">Other Services:</h2>
<a href="http://www.this_is_the_link.com">This is the link i want to add padding / margin too</a>
<p>Text.TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTex t</p>
</section>


here is my css code (related areas highlighted in RED):




/* nav elements */

nav {
width:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 0 15px 0;
}

nav.list li {
float:left;
margin: 0 25px 0 20px;
padding: 10px 0 20px 0;
}

nav.list li a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
color: #5358d6;
padding: 5px 5px 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

nav.list li a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
background: #5b7f59;
color: #FFFFFF;
}

nav.list li.active a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
color: RED;
}


/* body elements */

body {
width:900px;
margin: 0 auto;
background: #7BAF79;
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

p {
font-size: 1.4em;
line-height: 1.2em;
margin: 0 10px 15px 10px;
}

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
text-decoration:none;
color: #000000;
margin: 0 0 5px 10px;
}

a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
text-decoration:none;
color: #FFFFFF;
}

ul.nobullet {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 1.4em;
}

ol.format {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:1.4em;
display:block;
float:left;
margin: 0px 10px 15px 40px;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
color: #000000;
margin: 10px 10px 0px 10px;
padding: 10px 0 15px 0;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight:bold;
margin: 0 0 5px 10px;
}


i left out other html and css that is not related. if you want to see it, should i post it on pastebin or something?

i really appreciate any help in the right direction.

Thanks in advance

-Clifford

vikram1vicky
09-19-2011, 11:33 AM
Change nav.list to nav

You have defined class ul.nobullet, but you dint assign it to <ul>, for you ease just remove nobullet and this class automatically assigned to all <ul> in your page.

vikram1vicky
09-19-2011, 11:39 AM
i doubt ful don't know how to to upload .Nav List
What you mean by how to to upload .Nav List ???

clifford
09-19-2011, 12:06 PM
Change nav.list to nav

You have defined class ul.nobullet, but you dint assign it to <ul>, for you ease just remove nobullet and this class automatically assigned to all <ul> in your page.

thanks for helping me cleaning up the syntax. i had to change the nav li a font-size to 1em though, because they all became giant. I don't know why, the rest of the page is using 1.4em but for some reason the nav text was huge.

this didn't however help me fix the other a link and still margin / padding affects the nav a

any other ideas?

vikram1vicky
09-19-2011, 12:11 PM
If you check your code, font-size is 1.6em in following code



nav.list li a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
color: #5358d6;
padding: 5px 5px 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

nav.list li a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
background: #5b7f59;
color: #FFFFFF;
}

nav.list li.active a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
color: RED;
}

can you share mock up of nav, how it should look like :)

clifford
09-19-2011, 12:27 PM
If you check your code, font-size is 1.6em in following code



nav.list li a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
color: #5358d6;
padding: 5px 5px 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

nav.list li a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
background: #5b7f59;
color: #FFFFFF;
}

nav.list li.active a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
text-decoration: none;
color: RED;
}

can you share mock up of nav, how it should look like :)

yes, i had to change from 1.6em to 1.1em... seems the font size is not consistent among <nav> and <p> tags. all the nav links should be on one line and centered with equal space between each link, hence the padding / margin craziness. can you suggest any way to make the code more consistent or written with greater efficiency?

I'm not sure if this is the main issue. the issue i'm having is i can't add padding or margin space to that one link under the <h2> element....unless they are related??

also, how to share a mock up?

thank you for your input~~

vikram1vicky
09-19-2011, 01:34 PM
here is sample code:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Menu - Sample - HTML5</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
nav {
width:660px;
margin:20px auto;
border:1px solid #ccc;
background:#eee;
display:block;
overflow:auto;
}
nav ul {
list-style:none;
font:bold 0.8em Verdana, Geneva, sans-serif;
}
nav ul li {
display:inline;
}
nav ul li a {
color:#4D4D99;
text-decoration:none;
text-align:center;
display:block;
width:90px;
padding:10px;
float:left;
}
nav ul li a:hover {
color:#333;
background:#A470FA;
}
</style>
</head>

<body>
<nav>
<ul>
<li><a href="#">Link text 1</a></li>
<li><a href="#">Link text 2</a></li>
<li><a href="#">Link text 3</a></li>
<li><a href="#">Link text 4</a></li>
<li><a href="#">Link text 5</a></li>
<li><a href="#">Link text 6</a></li>
</ul>
</nav>
</body>
</html>

clifford
09-19-2011, 03:16 PM
here is sample code:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Menu - Sample - HTML5</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
nav {
width:660px;
margin:20px auto;
border:1px solid #ccc;
background:#eee;
display:block;
overflow:auto;
}
nav ul {
list-style:none;
font:bold 0.8em Verdana, Geneva, sans-serif;
}
nav ul li {
display:inline;
}
nav ul li a {
color:#4D4D99;
text-decoration:none;
text-align:center;
display:block;
width:90px;
padding:10px;
float:left;
}
nav ul li a:hover {
color:#333;
background:#A470FA;
}
</style>
</head>

<body>
<nav>
<ul>
<li><a href="#">Link text 1</a></li>
<li><a href="#">Link text 2</a></li>
<li><a href="#">Link text 3</a></li>
<li><a href="#">Link text 4</a></li>
<li><a href="#">Link text 5</a></li>
<li><a href="#">Link text 6</a></li>
</ul>
</nav>
</body>
</html>


i appreciate it and all, but i'm not looking for someone to rewrite my code...especially when no explanation is given. additionally, you never addressed the root problem.

The problem is NOT my navigation links, but the link under my H2 element...

if anyone can help further, i would greatly appreciate it.

teedoff
09-19-2011, 03:35 PM
If you target the <a> tag WITHIN your section element:


section a {margin:25px;}

that should work.

You can also read more about Specificity here (http://www.htmldog.com/guides/cssadvanced/specificity/).

clifford
09-19-2011, 05:30 PM
If you target the <a> tag WITHIN your section element:


section a {margin:25px;}

that should work.

You can also read more about Specificity here (http://www.htmldog.com/guides/cssadvanced/specificity/).

most appreciated! the link was most helpful. thank you!

clifford
09-20-2011, 11:57 AM
If you target the <a> tag WITHIN your section element:


section a {margin:25px;}

that should work.

You can also read more about Specificity here (http://www.htmldog.com/guides/cssadvanced/specificity/).

Actually, i spoke too soon. After trying putting the <a> tag within the section element, it did separate the nav <a> and section <a> tags, although, didn't seem to help the margin issue i'm having.

I added a line-height: 1.6em; with a font-size: 1.4em;. This seemed to do the trick. and gave me some bottom space between the <a> and the <p>



section a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
text-decoration:none;
color: #000000;
margin: 0 0 0 10px;
line-height: 1.6em;
}


would this be considered "bad programming"? I didn't really address the problem, still don't know why a bottom margin isn't working (the left margin works), and threw something else at it to make it look right.

any insight would be most appreciated. additionally, i put this page up for you all to review if need be. http://bit.ly/paWV3s

Thanks for all your help~

SB65
09-20-2011, 01:18 PM
You're not getting a bottom margin because <a> is an inline, not a block element. Have a look here (http://www.maxdesign.com.au/articles/inline/) for a fuller explanation. Try adding display:block to your css for section a.

Having said that it looks to me like "Automatic Landscape Lighting" is a heading and hence might be better marked up as such:


<h3><a href="http://www.autolandscapelighting.com">Automatic Landscape Lighting</a></h3>

<h3> is a block element so you could then apply your required margins as required.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum