Super new to Front-End development, but doing my best to get better at it by recreating websites that I like from scratch. So far, so good, but for some reason Nav bars are the bane of my existence.
Right now, the Nav links (li's inside of a div) are stacking due to what I can only imagine is a width issue. When I set a certain width, they don't stack anymore, but setting that width restricts me from aligning them to the right with my buttons.
So, what I want to do is have the "logo" div aligned to the left & the "nav_content" div aligned to the right. And when I hit a tablet breakpoint, the "nav_content" div will collapse to a hamburger menu. Hopefully this question makes sense.
Here is my code:
HTML & CSS
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}
<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li>Home</li>
<li>Features</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
i think you need to set inline links and button so set style='clear:both' for set in same line
Add padding-left: 0; in your ul to get rid of the width problem in this scenario. I would suggest to use bootstrap to have a super responsive web design. If you still want to use your own responsive design use width (in %) in all the siblings which need to be in same line. For example width should be mentioned in % in both div.logo and div.nav_content.
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links ul {
padding-left: 0;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}
<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li>Home</li>
<li>Features</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
Related
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
So, I know the media query is working, because the other selector I have styled is working fine. But, the "div.A > #greet" selector is not working at all. I put a red color in there so I could tell for sure when it is working, but the text remains the same color, and it hasn't moved. What I really need to do with the text is center it. I have tried everything I can think of or find. Please help :)
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color: white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
</div>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
In your HTML there's a stray </div> end tag before #greet element (as I mentioned in my comment) which failing your selector, moreover use div.A > #greet > h1, div.A > #greet > h2.
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color:white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet > h1, div.A > #greet > h2 {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
Hope, that's solved your problem!
please can someone help with my website reponsiveness, at the moment when the viewport shrinks the website messes up and i dont know what i have done in the code to make it like that.
thanks in advance!
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
margin-left: 10vw;
width: 79.4vw;
height: 80vw;
max-width: 1000vw;
position: absolute;
overflow: hidden;
margin-top: 0px;
font-size: 1.6vw;
padding: 5px 5px;
}
.webheadimg {
margin-left: 10vw;
width: 80vw;
max-width: 1000vw;
max-height: 150vh;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
overflow: hidden;
}
#menu {
width: 80vw;
font-size: 1vw;
max-font-size: 1.6vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-color: #FFFFFF;
font-size: 1vw;
max-font-size: 1.6vw;
text-align: center;
margin-left: 10vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 1000vw;
}
#menu ul {
height: auto;
padding: 0.8vw 0px;
margin: 0px;
}
#menu li {
display: inline;
font-size: 1vw;
max-font-size: 16vw;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.8vw 0.8vw 0.8vw 0.8vw;
font-size: 1.5vw;
max-font-size: 16px;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 10vw;
float: left;
height: auto;
width: 5%;
padding: 5px 5px;
}
#media (max-width: 1285px) {
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
width: 72.8vw;
height: 100vw;
overflow: hidden;
font-size: 3vw;
margin-left: 23.4vw;
padding: 5px 5px;
bottom: 48.9vw;
position: relative;
}
.webheadimg {
width: 96vw;
height: auto;
max-width: auto;
max-height: auto;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
margin-left: 1vw;
}
#menu {
width: 21.4vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1vw;
text-align: left;
margin-left: 1vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 96vw;
}
#menu ul {
height: auto;
padding: 0.5vw 0vw;
margin: 0px;
}
#menu li {
display: block;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
font-size: 3vw;
display: block;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 1vw;
float: left;
height: auto;
width: 10%;
padding: 5px 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<<body>
<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />
</div>
<div id="menu">
<ul>
<li>Home
<li>Breaking News
</li>
<li>Sport
</li>
<li>Hull Today
</li>
<li>Property
</li>
<li>Social Media
</li>
<li>Music
</li>
<li>Reviews
</li>
<li>Movies
</li>
<li>Weather
</li>
</ul>
</div>
<div class="body1">
Text Box
</div>
</body>
as you can see the 'text box' jumps around the screen and there is a random grey box at the bottom of the page, i would be so grateful if someone could find me a fix for this
example
You need add
<head>
...
<meta name="viewport" content="width=device-width"/>
...
</head>
You are missing viewport in <head> tag. You can use this for example:
<meta name="viewport" content="width=device-width"/>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
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.