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 5 of 5

Thread: CSS Nesting

  1. #1
    New Coder
    Join Date
    Mar 2013
    Location
    Ontario Canada
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post

    Question CSS Nesting

    Hi I am just learning but am stumped with a CSS problem. It might be easy but I haven't been able to figure it out. It is for a menu like CodingForum and uses the CSS below and 3 <div>'s generally as shown.

    ==> why does the <a> styling get used everywhere. Shouldn;t the syntax in the CSS nest it for only the "menu" class?

    Appreciate any help. Thanks!

    HTML (actually XHTML 1.1)
    <div class="begin"></div>
    <div class="menu"></div>
    <div class="end"></div>

    CSS for the "menu" class is as follows:
    .menu {
    height:33px;
    background-color: #B6B66B;
    margin: 15px 0px;
    }
    .menu ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    }
    .menu li {
    float:left;
    }
    .menu a:link,a:visited {
    padding: 7px 12px;
    border-right: 2px solid #8E8E76;
    display:block;
    background-color: #B6B66B;
    color: #000000;
    text-decoration:none;
    }
    .menu a:hover,a:active {
    background-color:#7A991A;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Because you must include the .menu selector in every selector, i. e. your code must look like:
    Code:
    .menu a:link, .menu a:visited {
    padding: 7px 12px;
    border-right: 2px solid #8E8E76;
    display:block;
    background-color: #B6B66B;
    color: #000000;
    text-decoration:none;
    }
    .menu a:hover, .menu a:active {
    background-color:#7A991A;
    }

  • Users who have thanked VIPStephan for this post:

    golf-addict (03-20-2013)

  • #3
    New Coder
    Join Date
    Mar 2013
    Location
    Ontario Canada
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thank you for the quick reply. What you said makes sense but now I lost the menu styling completely. Here is the complete test code... What did I do wrong?

    Complete CSS:
    Code:
    @charset "utf-8";
    
    /*   WRAPS   */
    .wrap {
    	width: 960px;
    	margin: 30px;
    	text-align:left;
    }
    .before {
    	background-color:#FFF;
    	color: #000;
    	padding: 20px;
    	border:5px solid #000;
    }
    
    .after {
    	margin:15px;
    	padding: 10px;
    	background-color: #000;
    	color: #FFF;
    	border: 5px solid #0F0;
    }
    
    /*   Element definitions   */
    .menu {
    	height:33px;
    	background-color: #B6B66B;
    	margin: 15px 0px;
    }
    .menu ul {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }
    .menu li {
        float:left;
    }
    .menu a:link, .menu a:visited {
    	padding: 7px 12px;
    	border-right: 2px solid #8E8E76;	
    	display:block;
        background-color: #B6B66B;
    	color: #000000;
        text-decoration:none;
    }
    .menu a:hover, .menu a:active {
        background-color:#7A991A;
    }
    Complete Source Code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
    
    <head profile="http://www.w3.org/2005/10/profile">
      <title>Test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="keywords" content="rubber mulch" />
      <meta name="description" content="Distributor" />
    
      <link rel="icon" type="image/ico" href="images/favicon.ico" />
      <link rel="stylesheet" type="text/css" href="test.css" />
      <script type="text/javascript" src="Scripts.js"></script>
    </head>
    
    <body>
    <div class="wrap">
    
      <div class="before">
          <p>Why does MenuWrap styling appear everywhere the "a" element is used?</p>
          <p><a href="test.html">Like here.</a></p>
          <p>Obviously I am missing something because I interpret the syntax as nested to the "Menu" class</p>
      </div>
    
      <div class="Menu">
        <ul>
          <li><a href="test.html">Item 1</a></li>
          <li><a href="test.html">Item 2</a></li>
          <li><a href="test.html">Item 3</a></li>
          <li><a href="test.html">Item 4</a></li>
          <li><a href="test.html">Item 5</a></li>
        </ul>
      </div>
    
      <div class="after">
        <p>Should be black background with white text throughout</p>
        <p>With "a" element <a href="test.html">it is different</a> but I don't understand</p>
        </div>
      </div>
    
    </div>
    </body>
    </html>
    Last edited by VIPStephan; 03-20-2013 at 10:39 AM. Reason: added code BB tags

  • #4
    New Coder
    Join Date
    Mar 2013
    Location
    Ontario Canada
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    My mistake VIPStephan! I changed "menu" to lower case in the CSS when I posted it the first time and left it as "Menu" in the html. Once corrected it's perfect.

    Thanks so much for your help.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    I’m glad I could help. But in future, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • Users who have thanked VIPStephan for this post:

    golf-addict (03-21-2013)


  •  

    Tags for this Thread

    Posting Permissions

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