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):
Code:
<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.TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</section>
here is my css code (related areas highlighted in RED):
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.
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 navlia 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 nava
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??
<!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.
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>
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
You're not getting a bottom margin because <a> is an inline, not a block element. Have a look here 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:
Before you post, read our: 
