Fill header with background colour - css

I currently have a heading 1 and logo on the same line of the header, and now I want to have a background colour for the header. I would ideally want this to come down below the nav bar as well.
The issue I'm having is that the colour doesnt fill the top part of the page as I thought it would. It only covers the heading and it also covers the logo on the same line.
How would I stop the colour from going over the image and how would I make the colour spread from the top of the page to below the nav bar.
HTML:
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
EDIT: This is what I mean about the background colour covering the logo:

I swapped the HTML header tag to be within the body. Your body tag is where it will house all your html minus the head tag that has your title. Not a big deal since it renders fine, just a best practice. I also changed the css for your header img to have a z-index which places the image on top of the h1 tag and your h1 tag to have a z-index of -100 to always fall to the back.
Hope this helps.
.header img {
float: left;
background: #555;
z-index: 100; /* added */
width: 100px; /* added */
}
.header h1 {
z-index: -1; /* added */
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
<header>
<div class="header">
<img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg"
alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
</body>
</html>

.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header style=" background-color:#D3D3D3;">
<div class="header" >
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>

Is this what you are expecting ?
you are seeing gap between header and navbar -- this is beacause the h1 inside the header had default margin, remove that, give padding instead. Also remover brs after header.
Change your .header h1 css to
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
What do you mean by stop the colour from going over the image ?
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
.headerContainer {
background-color:#D3D3D3;
padding-bottom: 10px;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="headerContainer">
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</div>
</header>
<body>
</body>
</html>

Related

Navbar elements won't take on same line-height

I have this navbar in html:
<div class="navbar">
<p class ="logo">Vris</p>
<ul class="navitems">
<li>Home</li>
<li>About me</li>
<li>My work</li>
<li>Contact</li>
</ul>
</div>
</header>
And the following css to go along with it:
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.navbar {
background: #181818;
height: 3.5em;
line-height: 1em;
}
.navitems {
float: right;
margin-right: 3em;
}
.logo {
float: left;
font-size: 1.3em;
color: white;
}
li {
font-family: 'Montserrat';
font-size: 1.3em;
text-decoration: none;
list-style-type: none;
padding-right: 2em;
float: left;
}
.navbar a {
text-decoration: none;
color: white;
}
But the UL and elements in the navbar won't take on the same line-height. Why? I set the line-height in the parent navbar class, so the and children should inherit it, right?
If you want to center vertically you need to use the same line-height as it is in height.
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.navbar {
background: #181818;
height: 3.5em;
line-height: 3.5em;
}
.navitems {
float: right;
margin-right: 3em;
}
.logo {
float: left;
font-size: 1.3em;
color: white;
}
li {
font-family: 'Montserrat';
font-size: 1.3em;
text-decoration: none;
list-style-type: none;
padding-right: 2em;
float: left;
}
.navbar a {
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar">
<p class ="logo">Vris</p>
<ul class="navitems">
<li>Home</li>
<li>About me</li>
<li>My work</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
line-height is one of those weird things that doesn't nest... put the line-height on the li.
Here's a codepen: https://codepen.io/justicart/pen/goJdBx

a:hover or #menubar:hover not working for header

I'm having trouble getting the a:hover element to work. I am an amateur, so please be easy... I've tried using the #menubar:hover as well but that doesn't seem to work either.
This code is going into the header of another program. The only reason I got into this was to make the header of this program look identical to the website. Below is my code for the header.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Please Help!
check this
#menubar li a:hover {
color: yellow;
}
full code :
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Here the style of a tag is overriding the hover. So if you place it as !important, that style will be given priority than other styles and it will override all other styles. Just place !important at color:yellow and it works.
I wanted to see if I could get this working without an !importance. The issue is that the CSS selector which sets the text to white is using a greater specificity than the hover style. The best way to do this is to set a better level of specificity to the hover which will allow it to work. Use this in the hover.
#menubar li a:hover {
color: yellow;
}
It is because #menubar>li>a{background-color: #303432;} will overlap your css. a:hover{color:yellow;} So, make it important on hover like in answer.
a:hover {color: yellow !important;}
Or
#menubar>li>a:hover{color: yellow;}
Will solve your issue.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Hope it helps.

Display multiple divs on the same line using css (navigation menu)

I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>

Stretching the Top Banner

I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright &copy 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.

Html positioning gap between divs

im having a html layout issue below is the code, when you open the page there is a space between the menu bar and the grey box I would like to get rid of the space so there is only a small gap between them, if anyone could help it would be greatly appreciated.
HTML:
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>Cleveland Potash Intranet</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: center;
margin-left: 1px;
margin-top: 11px;
font-family: Georgia;
margin-right: 0px;
}s
#bannerdiv {
text-align: center;
}
.auto-style4 {
margin-left: 0px;
text-align: left;
}
.auto-style5 {
margin-top: 0px;
}
</style>
</head>
<body>
<div id="bannerdiv" align="left" title="Banner">
</div>
<div id="container">
<h3 class="auto-style4" id="container"> </h3>
</div>
<div id="menubar" style="width: 15%; height: 100px;" title="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="mainpage" class="auto-style1" style="height: 96px; width: 84%; float:right;height:84%; color: #000000; font-size: 11pt;">
</div>
</body>
</html>
CSS:
#container {
margin: 0px;
background-color: #008852;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: #FFFFFF;
text-align: left;
max-width: 10%;
}
#main
{
height:100%;
weight:100&
}
html, body {
overflow: hidden;
height:100%;}
#menubar
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
}
a:hover,a:active
{
background-color:#7A991A;
}
#mainpage {
width: 50%;
float: left;
background-color: #EDEFEE;
height: auto;
border-radius: 20px ;
}
#menubar {
border-width: 1px;
border-style: none;
font-size: xx-small;
width: 50%;
margin-top:11px;
float: left;
}
#bannerdiv
{
margin-bottom:20px;
}
.newStyle1 {
text-align: left;
}
Change the inline styling width on the id="menubar" from 15% to 10% and add a min-width element set at 130px. Then remove the inline float:right; from the id="mainpage" and also change its width to be 89%. That should improve the spacing, but it's worth mentioning that inline styles are not a good way of styling html. You should be defining all of your styles in a css document that is linked to the html file.

Resources