Unwanted square of color

Dev Shed Forums Sponsor:

November 23rd, 2012, 01:20 AM

exbrit

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 5 m 8 sec
Reputation Power: 0

New Member - 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>

November 23rd, 2012, 02:35 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

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;
}

November 23rd, 2012, 02:42 AM

exbrit

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 5 m 8 sec
Reputation Power: 0

Wow

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

Quote:

Originally Posted by simplypixie

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;
}

New Member - Unwanted square of color

Developer Shed Advertisers and Affiliates