Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Shanghai
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Inheritance problems

    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):

    Code:
    /* 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

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by brainmasin18 View Post
    i doubt ful don't know how to to upload .Nav List
    What you mean by how to to upload .Nav List ???

  • #4
    New Coder
    Join Date
    Sep 2011
    Location
    Shanghai
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    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?

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    If you check your code, font-size is 1.6em in following code

    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

  • #6
    New Coder
    Join Date
    Sep 2011
    Location
    Shanghai
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    If you check your code, font-size is 1.6em in following code

    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~~

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    here is sample code:

    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>

  • #8
    New Coder
    Join Date
    Sep 2011
    Location
    Shanghai
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    here is sample code:

    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.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #10
    New Coder
    Join Date
    Sep 2011
    Location
    Shanghai
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.
    most appreciated! the link was most helpful. thank you!

  • #11
    New Coder
    Join Date
    Sep 2011
    Location
    Shanghai
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.
    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>

    Code:
    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~

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    Code:
    <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.
    Last edited by SB65; 09-20-2011 at 12:20 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •