I'm new to learning HTML and CSS and I really struggle with responsive design. I want to make my nav bar responsive and I think the best way is to edit the padding. If someone could give me some pointers I would really appreciate it.
.navbar-left {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 29px;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navbar-center {
float: left;
font-size: 30px;
color: black;
text-align: center;
padding: 27px 311px;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navbar-right {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 29px;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navbar-left:hover,
.navbar-right:hover {
background-color: #f8f8f8;
}
<nav>
<a class="navbar-left" href="bio.html">About</a>
<a class="navbar-left" href="resume.html">Resume</a>
</nav>
<nav>
<a class="navbar-center" href="index.html">Sydnie Knowlton</a>
</nav>
<nav>
<a class="navbar-right" href="works.html">Portfolio</a>
<a class="navbar-right" href="contact.html">Contact</a>
</nav>
set the width your three nav to 33.33% and float them all to the left
don't rely on the side padding, use width:50% so the two links inside the nav fill all the space inside, and text-align:center to center the content
* {
box-sizing: border-box;
}
nav {
width: 33.33%;
float: left;
}
.navbar-left {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 2%;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 50%;
}
.navbar-center {
float: left;
font-size: 30px;
color: black;
text-align: center;
padding: 27px 0;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-align: center;
}
.navbar-right {
float: right;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 2%;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 50%;
}
.navbar-left:hover,
.navbar-right:hover {
background-color: #f8f8f8;
}
<nav>
<a class="navbar-left" href="bio.html">About</a>
<a class="navbar-left" href="resume.html">Resume</a>
</nav>
<nav>
<a class="navbar-center" href="index.html">Sydnie Knowlton</a>
</nav>
<nav>
<a class="navbar-right" href="works.html">Portfolio</a>
<a class="navbar-right" href="contact.html">Contact</a>
</nav>
Hello I'm really new in this web programming, just learned a few days ago, and try to make responsive navbar of mine. And I found tutorial on w3school, I followed it, and change some code, but it didnt work as intended. The menu succeed to collapse on desired width, but the hamburger menu doesnt show up. I think I already change and match it with my classes, but I dont know what else is wrong.
Here is what I have tried so far:
.navSection {
width: 100%;
display: inline-table;
line-height: 30px;
background: #1c948a;
z-index: 3;
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3);
}
.navMenu .icon{
display: none;
}
#media screen and (max-width: 700px) {
.navMenu ul li:not(:first-child) {display: none;}
.navMenu ul li.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 700px) {
.navMenu.responsive {position: relative;}
.navMenu.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navMenu.responsive ul li {
float: none;
display: block;
text-align: left;
}
}
.navSectionWrapper {
width: 90%;
margin: auto;
}
.homelink {
text-decoration: none;
}
.navlogo {
width: 30%;
height: 70px;
float: left;
}
.logo {
display: inline-block;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
color: #2C3E50;
position: absolute;
}
.logoimg {
height: 70px;
float: left;
}
.logotext {
font-weight: 600;
float: right;
line-height: 70px;
}
.logotext>span {
color: white;
text-shadow: 2px 2px 2px #33425B;
}
.navMenu {
float: right;
text-align: center;
overflow: hidden;
}
.navMenu>ul {
list-style: none;
}
.navMenu>ul>li {
display: inline-block;
line-height: 70px;
}
.navMenu>ul>li>a>span {
color: white;
font-weight: 700;
font-size: 17px
}
.navMenu>ul>li>a {
text-decoration: none;
color: #2C3E50;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
font-weight: 600;
margin: 10px
}
.navMenu>ul>li>a:hover {
color: snow;
}
<div class="navSection">
<div class="navSectionWrapper">
<div class="navlogo">
<a href="#" class="homelink">
<div class="logo">
<img src="img/logo.png" class="logoimg">
<h2 class="logotext">Let's<span>Go</span></h2>
</div>
</a>
</div>
<div class="navMenu" id="mynavMenu">
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
<li>+<span>Download</span></li>
<li>☰</li>
</ul>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("mynavMenu");
if (x.className === "navMenu") {
x.className += " responsive";
} else {
x.className = "navMenu";
}
}
</script>
ThankYou
Your HTML uses a.icon but you're targeting in CSS with li.icon. Moved the class="icon" to the li instead of the a and modified the CSS for .icon a bit. You were hiding :not(:first-child()) in the responsive view, and you either want to use :not(:last-child) since .icon is the :last-child or just use :not(.icon) there instead.
.navSection {
width: 100%;
display: inline-table;
line-height: 30px;
background: #1c948a;
z-index: 3;
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3);
}
.navMenu .icon{
display: none;
float: right;
}
#media screen and (max-width: 700px) {
.navMenu ul li:not(.icon) {display: none;}
.navMenu ul li.icon {
display: block;
}
}
#media screen and (max-width: 700px) {
.navMenu.responsive {position: relative;}
.navMenu.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navMenu.responsive ul li {
float: none;
display: block;
text-align: left;
}
}
.navSectionWrapper {
width: 90%;
margin: auto;
}
.homelink {
text-decoration: none;
}
.navlogo {
width: 30%;
height: 70px;
float: left;
}
.logo {
display: inline-block;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
color: #2C3E50;
position: absolute;
}
.logoimg {
height: 70px;
float: left;
}
.logotext {
font-weight: 600;
float: right;
line-height: 70px;
}
.logotext>span {
color: white;
text-shadow: 2px 2px 2px #33425B;
}
.navMenu {
float: right;
text-align: center;
overflow: hidden;
}
.navMenu>ul {
list-style: none;
}
.navMenu>ul>li {
display: inline-block;
line-height: 70px;
}
.navMenu>ul>li>a>span {
color: white;
font-weight: 700;
font-size: 17px
}
.navMenu>ul>li>a {
text-decoration: none;
color: #2C3E50;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
font-weight: 600;
margin: 10px
}
.navMenu>ul>li>a:hover {
color: snow;
}
<div class="navSection">
<div class="navSectionWrapper">
<div class="navlogo">
<a href="#" class="homelink">
<div class="logo">
<img src="img/logo.png" class="logoimg">
<h2 class="logotext">Let's<span>Go</span></h2>
</div>
</a>
</div>
<div class="navMenu" id="mynavMenu">
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
<li>+<span>Download</span></li>
<li class="icon">☰</li>
</ul>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("mynavMenu");
if (x.className === "navMenu") {
x.className += " responsive";
} else {
x.className = "navMenu";
}
}
</script>
I am trying to build this drop down navigation bar, I am using Sass for the styling and jQuery for the drop down effect. I am trying to make the navigation bar inline however it is not working too well for me. Can anyone point me in the right direction as to what I am doing wrong? Thanks.
Here is my HTML:
<!--Navigation Bar -->
<div class="navigation_bar">
<nav>
<ul>
<li>Home</li> |
<li>About</li> |
<!-- <div class="sub_menu">
<li>sub_link</li>
<li>sub_link</li>
<li>sub_link</li>
</div> -->
<li>Schedule</li> |
<li>Contact</li> |
<li>Gallery</li>
</ul>
</nav>
</div>
And here is the Sass:
#mixin navigation_bar {
nav {
background: #fff;
height: 100px;
width: 100%;
margin-top: 10px;
ul, li {
list-style-type: none;
display: inline;
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
color: #a4a4a4;
padding: 30px;
&:hover {
color: #000;
}
}
}
}
}
.navigation_bar {
#include navigation_bar;
}
working example below
Codepen
#mixin navigation_bar {
nav {
background: #fff;
height: 100px;
width: 100%;
margin-top: 10px;
ul {
list-style-type: none;
font-size: 0;
li {
display: inline-block;
vertical-align: top;
&:first-child a {
background: #ddd;
}
}
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
color: #a4a4a4;
padding: 30px;
background:#ddd url('http://i.imgur.com/tY2FYyp.png') left 50% no-repeat;
display: block;
&:hover {
color: #000;
}
}
}
}
}
.navigation_bar {
#include navigation_bar;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am not sure why my media queries are not working on the mobile phone. When I slide the desktop version to be narrow like a mobile phone, the smaller tablet and mobile views seem to work. But they do not work on an actual device. Is something wrong my my code?
Site here: http://jenniferblatzdesign.com/.
#import url('http://fonts.googleapis.com/css?family=Gabriela');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bottom: 30px;
}
html { overflow-y: scroll; }
body {
background: #fcfcfc url('bg.png'); /* http://subtlepatterns.com/crossword/ */
font-size: 62.5%;
line-height: 1;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 45px 25px;
padding-bottom: 100px;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 94%;
background: #0068ac;
font-size: 1.5 em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 800px;
height: 40px;
}
nav li {
display: block;
float: left;
width: 20%;
text-align: center;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #89a8bc;
}
nav a#pull {
display: none;
}
#header {
text-align: center;
}
#header h1 {
display: none;
}
#header h2 {
width: 70%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.3em;
line-height: 1.9em;
text-align: center;
font-weight: 200;
}
#header img {
width: 50%;
margin-bottom: 40px;
margin-top: 30px;
}
#footer p {
margin-top: 10px;
font-size: 1.1em;
font-weight: 200;
line-height: 1.5em;
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#content #footer p a {
color: #005496;
}
#footer ul li a {
color: #005496;
}
#footer ul li {
display: inline;
padding-top: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
#about h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
}
#praise h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.7em;
}
#about p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 1.6em;
line-height: 1.7em;
}
#about p a {
color: #005496;
}
#praise p {
width: 70%;
padding-left: 25px;
color: #474646;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.7em;
line-height: 1.4em;
margin-top: 10px;
margin-bottom: 20px;
}
#praise h5 {
padding-left: 40px;
color: #4C3B5F;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.8em;
}
#praise h6 {
padding-left: 56px;
color: #474646;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.2em;
line-height: 2em;
}
#praise hr {
height: 1px;
margin-top: 30px;
margin-bottom: 30x;
color: #7B7979;
}
#about {
width: 70%;
}
#contact h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
margin-top: 40px;
}
#header p {
color: #4C3B5F;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.3em;
line-height: 1.5em;
margin-top: -30px;
font-weight: 500;
}
#contact p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 1.6em;
line-height: 1.7em;
}
#contact p a {
color: #005496;
}
#social h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
margin-top: 40px;
}
#social h2 img {
margin-top: 10px;
margin-right: 10px;
}
#social {
width: 90%;
}
#linkedin h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#twitter h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#behance h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#facebook h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#pinterest h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
width: 94%;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 20%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: center;
width: 100%;
text-indent: 5px;
}
#header img {
width: 90%;
margin-bottom: 40px;
margin-top: 30px;
}
#header h2 {
width: 80%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
font-size: 1.7em;
line-height: 1.7em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
text-align: center;
width: 94%;
}
nav li {
width: 100%;
float: left;
position: relative;
text-align: center;
}
nav a#pull {
display: block;
background-color: #ece8e5;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
#header img {
width: 100%;
margin-bottom: 30px;
margin-top: 30px;
}
#praise p {
width:95%;
}
#about {
width: 100%;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
text-align: center;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2em;
line-height: 1.6em;
text-align: center;
text-decoration: none;
}
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
strong, b { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif}
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
font-family: 'Gabriela', Tahoma, sans-serif;
font-size: 3.7em;
font-weight: 700;
line-height: 1.55em;
margin-bottom: 18px;
text-align: center;
color: #514b53;
letter-spacing: -0.06em;
text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
}
/** page structure **/
#wrapper {
display: block;
max-width: 1100px;
margin: 0 auto;
}
#portfolio {
display: block;
}
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
#portfolio li a {
display: block;
padding: 8px;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}
.mfp-title {
font-size: 1.2em;
color: #ddd !important;
font-weight: 700;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/** media queries **/
#media screen and (max-width: 780px) {
#portfolio li {
width: 45%;
}
}
#media screen and (max-width: 550px) {
#portfolio {
text-align: center;
}
#portfolio li {
float: none;
display: inline-block;
width: 80%;
margin-bottom: 30px;
}
}
Most likely has to do with your Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am having a problem with a div wrapping underneath the left div it is side by side with, I want the div to get narrower until it is side by side with the menubar, and then stop moving but not wrap.
I have two divs side by side, the div on the left is a menu bar, and the one on the right is a div used to enter content on the site. The div on the left is set to take 16% of the width, and the one on the right is set to take 86% of the width. When I make the browser window narrower it resizes getting more narrow, until the mainpage div wraps underneath the menubar div. I want to stop the div wrapping underneath.
HTML
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>rthrhtdrhrth</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style30 {
font-size: medium;
text-align: left;
}
.auto-style32 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
</style>
</head>
<body>
<!--In this site the design code is the same for each page such as the menubar, and banners however the mainpage content will be
different for each page as it contains that pages individual content.
<!--The below bannerdiv div, is the div that contains the top banner picture for the sight.
percentages are used throughout the site to maintain a liquid layout. -->
<div id="bannerdiv" align="left" title="Banner">
<img alt="z" height="114" src="Untitled3.jpg" width="100%"></div>
<div id="container">
<h3 id="container" class="auto-style4">ythtytytyytht</h3>
<!--The container div is used to create top green line. --></div>
<div id="menubar" align="center" style="width: 16%; height: 100px;" title="menu">
<!-- This is the code for the menubar, to add a new option to the menubar-->
<!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
link element. -->
<ul>
<li style="">
<img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126"></li>
<li><a auto-style5"="" href="index.html" style="height: 20px; class=">Home</a></li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>Purchasing</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>Teesdock</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->
<div id="mainpage" class="auto-style1" style="height: 486px; width: 84%; float: right; color: #000000; font-size: 11pt;">
</div>
<!-- The container1 div is used to create the bottom green line in the site -->
</div>
<h3 id="container1" class="auto-style4" style="width: 100%"></h3>
</div>
<br>
<!-- Picturecontainer2 contains the image that creates the bottom site banner. -->
<div id="picturecontainer2" style="float: left;">
<img alt="z" height="114" src="da.png" width="100%"></div>
</div>
</body>
</html>
CSS:
#container {
overflow-x:hidden;
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
{
overflow-x:hidden;
height: 100%;
weight: 100&;
}
html, body {
overflow-x: hidden;
height: 100%;
}
#picturecontainer1{
float: left;
}
#menubar
ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
margin-right: 30px
}
#menubar a:link, #menubar a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
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;
position: fixed;
}
#mainpage {
border: thin solid #008852;
width: 84%;
float: none;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
clear: none;
}
#menubar a:hover, #menubar a:active
{
background-color: #7A991A;
}
#menubar {
border-width: 1px;
border-style: none;
font-size: xx-small;
width: 50%;
margin-top: 11px;
float: left;
vertical-align: 0%;
}
#bannerdiv
{
margin-bottom: 20px;
}
.newStyle1 {
text-align: left;
}
footer {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
background-color: #008852;
}
.auto-style1 {
text-align: center;
margin-left: 0px;
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;
}
.auto-style8 {
text-align: left;
font-size: xx-small;
}
.auto-style6 {
text-align: left;
font-size: xx-small;
font-weight: bold;
}
.auto-style10 {
margin-left: 0px;
}
.auto-style12 {
text-align: left;
font-size: xx-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style11 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style9 {
font-family: "Franklin Gothic Medium";
position: fixed;
}
#container1 {
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
background-color: #008852;
clear: right;
}
#table {
}
#mainpage a:link, #mainpage a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#picturecontainer2 {
border-style: none;
float: left;
position: static;
clear: none;
display: inline;
vertical-align: top;
clear: both;
}
#picturecontainer1 {
border-style: none;
width: 126px;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
}
.auto-style20 {
text-align: center;
}
.auto-style21 {
border-collapse: collapse;
border-width: 0px;
background-color: #EDEFEE;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style17 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style15 {
text-align: left;
font-size: x-small;
font-weight: normal;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
#mainpage a:link, #mainpage a:visited {
}
.auto-style23 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
a text-decoration: none;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
#picturecontainer2 img, #bannerdiv img {
overflow: hidden;
width: 100%;
}
.auto-style21 {
font-weight: normal;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style14 {
text-align: center;
}
.auto-style15 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#mainpage a:hover a: active {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style25 {
text-align: left;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style26 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style38 {
font-size: medium;
text-align: center;
}
.auto-style27 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style24 {
text-align: center;
}
p, h2, h3, h4, td, a {
color: #008852;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
font-weight: normal;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style20 {
text-align: left;
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style21 {
font-weight: normal;
}
#query {
height: 200px;
}
.auto-style30 {
font-size: medium;
text-align: left;
}
.auto-style32 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
}
#picturecontainer2 {
border-style: none;
float: left;
}
#wrapper {
min-width:100%
}
Start with removing the position:fixed you have on #mainpage and see how that helps you. You do have a lot of style going on, and that makes it hard to troubleshoot. You should first get your positioning set and then add the pretty stuff once you have it laid out right (IMHO).