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>
Related
I have a background image on my website which works fine on Desktop but when I try to view the website on Mobile the image disappear. How can I fix this so it is responsive? I have already added media query and try to fix this using online resources but I am not sure what I am missing.
#media screen and (min-width: 650px){
header.page-header {
text-align: center;
color: white;
background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100%;
background-attachment: scroll;
}}
header.page-header .intro {
padding-top: 100px;
padding-bottom: 100px;
}
header.page-header .intro p {
font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
font-size: 20px;
font-weight: 400;
line-height: 20px;
margin-bottom: 25px;
}
header.page-header .intro h1 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 40px;
margin-bottom: 25px;
text-transform: uppercase;
}
#media (min-width: 768px) {
header.page-header .intro {
padding-top: 200px;
padding-bottom: 200px;
}
header.page-header .intro p {
font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
font-weight: 400;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px;
}
header.page-header .intro h1 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 65px;
font-weight: 700;
line-height: 75px;
margin-bottom: 50px;
text-transform: uppercase;
}
}
<header class="page-header">
<div class="container">
<div class="intro">
<p>Hello.</p>
<a class="scroll-trigger" href="#about">
<div class="scroll-down">
<span>
<i class="fa fa-angle-down fa-4x"></i>
</span>
</div>
</a>
</div>
</div>
</header>
Just remove media query from your CSS
#media screen and (min-width: 650px){
// CODE
}
if you write this in your CSS, that code apply only when your screen resolution size is grater than 650px or min-width: 650px
EDIT
In your site there is .header.page-header class contains (min-width: 500px) so, remove it and your problem solved.
replace background-size: 100% to background-size: cover
header.page-header {
text-align: center;
color: white;
background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100%;
background-attachment: scroll;
}
header.page-header .intro {
padding-top: 100px;
padding-bottom: 100px;
}
header.page-header .intro p {
font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
font-size: 20px;
font-weight: 400;
line-height: 20px;
margin-bottom: 25px;
}
header.page-header .intro h1 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 40px;
margin-bottom: 25px;
text-transform: uppercase;
}
#media (min-width: 768px) {
header.page-header .intro {
padding-top: 200px;
padding-bottom: 200px;
}
header.page-header .intro p {
font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
font-weight: 400;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px;
}
header.page-header .intro h1 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 65px;
font-weight: 700;
line-height: 75px;
margin-bottom: 50px;
text-transform: uppercase;
}
}
<header class="page-header">
<div class="container">
<div class="intro">
<p>Hello.</p>
<a class="scroll-trigger" href="#about">
<div class="scroll-down">
<span>
<i class="fa fa-angle-down fa-4x"></i>
</span>
</div>
</a>
</div>
</div>
</header>
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;
}
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).
I am using percentages on the divs in my webpage but I am having a problem where the divs are extending too far and creating an undesirable horizontal scroll bar, I want the divs to expand to 100% of the page and not exceed it. Any help would be greatly appreciated I have looked at the image sizes and messed around with them and now have tried 100% width on each but to no avail.
So to clarify I want to the page width horizontally to fit the page width but not so that it creates a horizontal scrollbar.
Below is my HTML and CSS:
HTML:
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>dfgfdgdfg</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#picturecontainer2 {
border-style: none;
float: left;
}
</style>
</head>
<body>
<div id="bannerdiv" align="left" title="Banner">
<img alt="z" height="114" src="Untitled3.jpg" width="100%"></div>
<div id="container">
<h3 class="auto-style4" id="container">drgrgergergdg</h3>
</div>
<div id="menubar" style="width: 16%; height: 100px;" title="menu" align = "center">
<ul>
<li style ="align = center;""><img alt="logo" height="63" src="images/drgrg.gif" width="126"></li>
<li >Home</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>
<div id="mainpage" class="auto-style1" style="height: 96px; width: 84%; float:right;height:80; color: #000000; font-size: 11pt; left: 0px; top: 176px;">
<font face="Garamond"><font face="Arial" size="4">
<p><b>SPORTS DOME</b></p>
<p><span lang="en-gb"><b><font color="#ff0000" face="Arial" size="4">
Contact Craig Bayliss Ext 3600 for all Dome bookings, events, circuit
training, weight training, table tennis etc.</font></b></span></p>
<p><span lang="en-gb"><font color="#000000" face="Arial"><b>
Click</b></font><font face="Arial"> on the links below for more information</font></span></p>
<p>
</font><font face="Arial">
<a href="file://cplfs01/dept/sports%20dome/Application%20Forms" style="TEXT-DECORATION: none">
Application Forms</a></font></p>
<p><font face="Arial">
<a href="file://cplfs01/dept/sports%20dome/Rules%20and%20Procedures" style="TEXT-DECORATION: none">
Rules and Procedures</a> </font></p>
<p><font face="Arial">
<a href="file://cplfs01/dept/sports%20dome/Sports%20Dome%20Booking%20Forms" style="TEXT-DECORATION: none">
Sports Dome Booking Forms</a></font></p>
</font>
</div>
<h3 class="auto-style4" id="container1"style = width:100%></h3>
</div>
<br>
<div id="picturecontainer2" style ="float: left;">
<img alt="z" height="114" src="da.png" width="100%"></div>
</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: auto;
height: 100%;
}
#picturecontainer1{
float: left;
}
#mainpage {
border: thin solid #008852;
width: 84%;
float: left;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
}
#menubar
ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
#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;
}
#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;
}
#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;
}
.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;
}
#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-style27 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
You can use CSS Overflow;
overflow-x:hidden;
This will hide the horizontal scrollbar
yes, add overflow:hidden in your css
and please dont use inline css and external css, it makes us viewers more hard to read and understand. Always use either one - preferred external css
add:
overflow:hidden;
to your desired divs CSS
overflow-x: hidden;
you can fixed that error.