#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Unwanted square of color


    OK Guys, I am trying to learn the CSS stuff which is sending me crazy.I finally got the horizontal menu working the way I want it...except that there is a navy colored square on my gray background on the right hand side of the menu which I am unable to remove. Any brilliant ideas:

    <!DOCTYPE html>
    <html>

    <head><title>Professional artist has just the kind of drawings and paintings that you need in many various styles</title>
    <meta name="Keywords" content="oil painting, masterpiece, drawing, sketch, portrait, line drawing, charcoal, pencil, paint, cartoon, artist, painter, acrilic, canvas, modern art, paint brush, ">
    <meta name="Description" content="Fantastic original art on canvas or printed">


    </head>

    <body>

    <body aLink=#993366 bgColor=#999999 link=#993366 text=#000000 vLink=#993366>

    <style type="text/css">

    body {padding: 0; margin: 0;}

    #wrap {
    width: 100%;
    height: 50px;
    margin: 0;
    z-index: 99;
    position: relative;
    background-color: #366b82;
    }

    .navbar {
    height: 50px;
    padding: 0;
    margin: 0;
    position: absolute;
    border-right: 1px solid #999999;
    }

    .navbar li {
    height: auto;
    width: 150px;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
    padding: 0;
    margin: 0;
    background-color: #999999;
    }

    .navbar a {
    padding: 18px 0;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    text-decoration: none;
    color: white;
    display: block;
    }

    .navbar li:hover, a:hover {background-color: #FF6633;}

    .navbar li ul {
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
    }

    .navbar li:hover ul {
    display: block;
    }

    .navbar li ul li {background-color: #999999;}

    .navbar li ul li a {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    }

    .navbar li ul li a:hover {background-color: #999999;}


    </style>



    </head><body><body>
    <div id="wrap">
    <ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link1</a>
    <ul>
    <li><a href="#">Whatever 1</a></li>
    <li><a href="#">Whatever 2</a></li>
    <li><a href="#">Whatever 3</a></li>
    </ul>
    </li>
    <li><a href="#">Link 2</a>
    <ul>
    <li><a href="#" >Whatever 1</a></li>
    <li><a href="#">Whatever2</a></li>
    <li><a href="#">Whatever 3</a></li>
    </ul>
    </li>
    <li><a href="#">Link 3</a>
    <ul>
    <li><a href="#">Whatever 1</a></li>
    <li><a href="#">Whatever 2</a></li>
    <li><a href="#">Whatever 3</a></li>
    <li><a href="#">Whatever 4</a></li>
    </ul>
    </li>
    <li><a href="#">Link 4</a>
    <ul>
    <li><a href="#">Whatever 1</a></li>
    <li><a href="#">Whatever2</a></li>
    <li><a href="#">Whatever 3</a></li>
    <li><a href="#">Whatever 4</a></li>
    </ul>
    </li>
    <li><a href="#">Link 5</a>
    <ul>
    <li><a href="#">Whatever 1</a></li>
    <li><a href="#">Whatever 2</a></li>
    <li><a href="#">Whatever 3</a></li>
    </ul>
    </li>
    </ul>
    </div>


    </body></html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    The blue is coming from your wrapper div (plus other errors). You also have your <head> and <body> tags duplicated, plus 'styling' in your body tag which shouldn't be there.

    I have tidied all this up and adjust the css for your body, wrap div, ul etc and below is the new code (only up to where I have done all the amendments).

    Code:
    <!DOCTYPE html>
    <html>
    
    <head><title>Professional artist has just the kind of drawings and paintings that you need in many various styles</title>
    <meta name="Keywords" content="oil painting, masterpiece, drawing, sketch, portrait, line drawing, charcoal, pencil, paint, cartoon, artist, painter, acrilic, canvas, modern art, paint brush, ">
    <meta name="Description" content="Fantastic original art on canvas or printed">
    
    <style type="text/css">
    
    body {padding: 0; margin: 0;
      background: #999999;
      color: #000000;
    }
    
    a, a:visited {
    	color: #993366;
    }
    
    #wrap	{
    width: 100%;
    margin: 0;
    background-color: #366b82;
    }
    
    .navbar	 {
    padding: 0;
    margin: 0;
    background-color: #999999;
    
    }
    
    .navbar li {
    height: 50px;
    width: 150px;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
    padding: 0;
    margin: 0;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Wow


    Hey thanks a whole lot. I would never have fallen on that.


    Originally Posted by simplypixie
    The blue is coming from your wrapper div (plus other errors). You also have your <head> and <body> tags duplicated, plus 'styling' in your body tag which shouldn't be there.

    I have tidied all this up and adjust the css for your body, wrap div, ul etc and below is the new code (only up to where I have done all the amendments).

    Code:
    <!DOCTYPE html>
    <html>
    
    <head><title>Professional artist has just the kind of drawings and paintings that you need in many various styles</title>
    <meta name="Keywords" content="oil painting, masterpiece, drawing, sketch, portrait, line drawing, charcoal, pencil, paint, cartoon, artist, painter, acrilic, canvas, modern art, paint brush, ">
    <meta name="Description" content="Fantastic original art on canvas or printed">
    
    <style type="text/css">
    
    body {padding: 0; margin: 0;
      background: #999999;
      color: #000000;
    }
    
    a, a:visited {
    	color: #993366;
    }
    
    #wrap	{
    width: 100%;
    margin: 0;
    background-color: #366b82;
    }
    
    .navbar	 {
    padding: 0;
    margin: 0;
    background-color: #999999;
    
    }
    
    .navbar li {
    height: 50px;
    width: 150px;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
    padding: 0;
    margin: 0;
    }

IMN logo majestic logo threadwatch logo seochat tools logo