How to create a fixed header like Twitter/Facebook on the top of the page ?
I am testing with this but when I am resizing my browser, complete design distorted
<div id="head">
<div id="logo">
</div>
<div style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</div>
<ul>
<li>
Home
<li>
<li>
Profile
</li>
<li>
Actions
</li>
<li>
Invite Friends
</li>
</ul>
</div>
<div id="content">
</div>
Style
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
min-width:960px;
overflow:hidden;
padding:0;
margin:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("2.gif") no-repeat scroll 6px 2px transparent;
color: #FFFFFF;
display: block;
height: 100%;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 5px 4px 26px;
width: 215px;
float:right;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:660px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:10px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
Edit
Sample
http://jsfiddle.net/zerotoinfinite2006/tTmSH/embedded/result/
Your #head element needs to have fixed positioning to make it float at the top. This will make it stay at the top all of the time. Try using this
#head {
position:fixed;
margin:0px;
top:0px;
left:0px;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
Take a look at Twitter's bootstrap:
http://twitter.github.com/bootstrap/#navigation
You might be better just reusing it.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebSpeaks.in</title>
</head>
<body>
<div id="head">
<div id="logo">
</div>
<form style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</form>
<ul>
<li>
Home
<li>
<li>
Profile
</li>
<li>
Messages
</li>
<li>
Who To Follow
</li>
</ul>
</div>
<div id="content">
<div>
<table>
<tr>
<td>How to hide 'Add Item' button in Magento Backend Grid</td>
</tr>
<tr>
<td>Learn Simple Method Chaining in PHP </td>
</tr>
<tr>
<td>Create Simple Paint Canvas using JavaScript</td>
</tr>
<tr>
<td>Quickview: My First Magento Extension</td>
</tr>
<tr>
<td>Disabling Right Click on Web Page/DIV, Disabling Text Copy From a Web Page</td>
</tr>
<tr>
<td>Google like Instant Preview using jQuery & base64 Image Encoding in PHP</td>
</tr>
<tr>
<td>Stylish Bubbly Image Gallery with jQuery</td>
</tr>
<tr>
<td>Image Zoom Effect with jQuery</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The CSS:
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
color: #FFFFFF;
display: block;
height: 40px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
float:left;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:60px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:20px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}
Related
I am trying to make a Resumé for job applications now i have created a background and a small menu using CSS. Now my question:
Is there a way without using <frame>,<iframe>,<frameset> to make a area where I can target my links to without losing my menu.
When I was learning for ICT I got lessons in HTML/CSS and was learned to use the pages as a table and place an iframe on the right area you want it to.
Now I want to try html5/css3 to make a page working without the above.
my HTML
<html>
<head>
<title></title>
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="navigationMenu">
<li><a class="home" href="#"><span>Home</span></a></li>
<li><a class="about me" href="#"><span>About me</span></a></li>
<li><a class="kennis" href="#"><span>Kennis</span></a></li>
<li><a class="werkervaring" href="#"><span>Werkervaring</span></a></li>
</ul>
/body>
</html
my CSS
body{
background-image:url(*);
background-repeat:no-repeat;
background-size:cover;
font-family:Arial, Helvetica, sans-serif;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url(*) no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .werkervaring { background-position:-76px 0;}
#navigationMenu .werkervaring:hover { background-position:-76px -39px;}
#navigationMenu .werkervaring span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .kennis { background-position:-114px 0;}
#navigationMenu .kennis:hover{ background-position:-114px -39px;}
#navigationMenu .kennis span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
Yes there is. Check out Miniport's source code on how to position the nav menu, within the <nav> div. Everything you want to do is shown there.
Specifically, what you're looking for is position: fixed
#nav
{
background-color: #282828;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10000;
cursor: default;
}
<html>
<head>
<title></title>
<link href="Style.css" rel="stylesheet">
<style>
/* move these into style.css */
.navigationTarget {
border: 1px solid #cccccc;
margin: 2em;
padding: 2em;
height: 400px;
}
</style>
</head>
<body>
<ul id="navigationMenu">
<li><a class="home" href="#home"><span>Home</span></a></li>
<li><a class="about me" href="#about"><span>About me</span></a></li>
<li><a class="kennis" href="#kennis"><span>Kennis</span></a></li>
<li><a class="werkervaring" href="#wer"><span>Werkervaring</span></a></li>
</ul>
<div class="navigationTarget">
<a name="home"></a> Home
</div>
<div class="navigationTarget">
<a name="about"></a> Home
</div>
<div class="navigationTarget">
<a name="kennis"></a> Home
</div>
<div class="navigationTarget">
<a name="wer"></a> Home
</div>
</body>
</html>
I'm making a menu structure for mobile but I am not able to align in center my select option menu and my search input.
I'm trying with margin: 0 auto; but its not working, my select option and my search input are not getting to the center of my menu.
The #menu div have 300px of width, and I want that my select option menu and my input search have 226px of width and aligned at center of my #menu div but I'm not having sucess doing this.
Someone sees what is wrong here?
I have my example here:
http://jsfiddle.net/x5pb7mw4/1/
My html:
<section id="menu-container">
<nav id="menu">
<select id="select_menu">
<option value="menu" selected="selected" name="menu">- Menu -</option>
</select>
<ul class="dropDownMenu">
<li id="search_container">
<form id="search" method="post" enctype="multipart/form-data">
<input name="s" type="text" size="40" placeholder="Search..." />
<button type="submit" name="search"></button>
</form>
</li>
</ul>
</nav>
</section>
My css:
*
{
margin:0;
padding:0;
border:0;
outline:none;
}
body
{
min-width:320px;
}
#menu-container{
width:100%;
height:auto;
float:left;
z-index:7;
float:left;
background:brown;
border-bottom: 3px solid #ccc;
}
#menu{
width:300px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul{list-style:none;}
#menu .dropDownMenu .item_menu{display:none;}
#select_menu{
margin:11px auto;
height:30px;
width:226px;
background:#ccc;
color:#2F3083;
}
#search_container{
float:right;
}
#search button[type="submit"] {
background: none;
cursor: pointer;
height: 22px;
position: absolute;
top: 15px;
right: 10px;
}
#search input[type="text"] {
font-size:13px;
background: brown;
border:2px solid #000;
text-indent: 0;
width:226px;
margin:0 auto 10px auto;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
color:#ccc;
}
Demo here
remove below style and add text-align:center to #menu
#search_container{
float:right;
}
Just add display:table to your #select_menu
#select_menu{
margin:11px auto;
height:30px;
width:226px;
background:#ccc;
color:#2F3083;
display: table;
}
And then add width: 100%; text-align: center; to your #search_container
#search_container{
width:100%;
text-align:center;
}
Add text-align: center; to your #menu
I have a nav with five buttons that display on top of each other. I have set the height set to the height of just one of the buttons and my overflow set to visible. The four buttons display on top of the div I have below my nav like they should. However, these buttons move elements within my div down and don't display on top of them. If you're confused, you can see what I mean with my JSFiddle link at the bottom of this post.
What I want is for the last four buttons in my nav to overlap anything below it without offsetting it.
Here's my html:
<body>
<div id="mobile"></div>
<nav>
<ul id='nav'>
<li><icon><img src="images/home-icon.png"></icon>Home</li>
<li><icon><img src="images/skills-icon.png"></icon>Skillsets</li>
<li><icon><img src="images/gallery-icon.png"></icon>Gallery</li>
<li><icon><img src="images/about-icon.png"></icon>About</li>
<li></icon>Contact</li>
</ul>
</nav>
<div id="main">
<h1>Test</h1>
<h2>Test</h2>
<p>Test</p>
</div>
</body>
And here's my CSS:
/***
Style sheet template for all web sites
****/
/*Fix display for old browsers*/
header, nav, footer, section, article, aside{
display:block;
}
/*Reset Browser Defaults*/
body, div, header, nav, footer, section, article, aside, h1, h2, h3, h4, h5, h6, p, ul, ol, li{
margin:0;
padding:0;
}
body{
background-color:#fff;
color:#000;
font-size:14px;
font-family:Arial;
text-decoration:none;
}
/*CSS properties for document*/
header{
padding:2%;
position:relative;
margin:0 0 0px 0;
color:rgba(255, 255, 255, .9);
}
header h1{
font-size:64px;
}
header div#mobile{
height:0px;
display:block;
}
#logo_div{
min-height:84%;
min-width:26%;
max-height:84%;
max-width:26%;
position:relative;
margin-bottom:1%;
}
#logo_div img{
position:absolute;
top:0;
left:0;
float:right;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:block;
height:100%;
}
img.logo{
z-index:99;
border:2px solid black;
}
header img.logo:hover {
opacity: .8 !important;
border:2px solid darkgray;
}
nav{
background-color:rgba(195, 165, 131, .0);
text-align:justify;
margin:auto;
width:94%;
height:27px;
overflow:visible;
float:none;
margin-top:2%;
margin-bottom:2%;
position:relative;
font:Calibri, 'Asul', serif, "Times New Roman", Times;
font-size:.7em;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
z-index:10;
}
nav ul{
height:27px;
overflow:visible;
}
nav ul li{
list-style-type:none;
}
nav a{
width:100%;
height:27px;
margin:0;
padding:0;
float:left;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
border-top: 1px solid #d4b873;
background: #d6ba65;
background: -webkit-gradient(linear, left top, left bottom, from(#8c7738), to(#d6ba65));
background: -webkit-linear-gradient(top, #8c7738, #d6ba65);
background: -moz-linear-gradient(top, #8c7738, #d6ba65);
background: -ms-linear-gradient(top, #8c7738, #d6ba65);
background: -o-linear-gradient(top, #8c7738, #d6ba65);
padding:0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 2em;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
text-align:left;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
border:none;
}
nav a:hover{
background: #785a28;
color: #ccc;
}
nav a:active{
border-top-color: #5c441b;
background: #5c441b;
}
icon{
display:inline-block;
vertical-align:top;
margin-right:10px;
padding:0;
position:relative;
height:100%;
width:27px;
background-color:rgba(255, 255, 255, .4);
}
icon img{
width:60%;
margin:20%;
}
#main{
background-color:red;
width:100%;
float:none;
margin:auto;
padding:20px;
text-align:justify;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
}
div#main img{
width:320px;
margin-top:15px;
}
#main h1{
background-color:red;
}
#main h2{
background-color:green;
margin:5px 10px -5px 4px;
color:#444;
}
div#main h3{
font-size:16px;
}
#main p{
background-color:blue;
margin:10px 2%;
font-size:14px;
}
#main ul li{
list-style-type:disc;
margin:0px 0px 4px 36px;
font-size: 15px;
}
#main ul li a{
text-decoration:none;
}
Here's a JSFiddle
If you were looking to keep the nav in the same position as your original fiddle, apply the position absolute to the ul element and not the nav element. you would also need to set a width to the ul element.
nav ul{
height:27px;
overflow:visible;
position:absolute;
width: 100%;
}
fiddle
Whenever you want an element to overlap another element, a few things have to be true:
The overlapping element (in this case, the nav tag) needs to have position: absolute;
The parent of the overlapping element needs to have position: relative;
Fixed up JSFiddle
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..
I'm using the following codes (HTML and CSS) and by using the code you are unable to scroll up or down the page via mouse scroll or within the browser (Scroll bar on the right is not there)
HTML:
<div id="head">
<div id="logo">
</div>
<form style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</form>
<ul>
<li>
Searh
<li>
<li>
FAQ
</li>
<li>
Links
</li>
<li>
Legal
</li>
</ul>
</div>
CSS:
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
color: #FFFFFF;
display: block;
height: 40px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
float:left;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:60px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:20px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}
If you are able to help could you please use Code examples on how to fix it please :)
EDIT: Example / Code Editor = http://jsfiddle.net/BctHr/
Check your css:
overflow:hidden; /* get rid of scroll bars in IE */
for html, and for body
remove that line, or change to : overflow:scroll;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Overflow in the body should be auto or scroll.
and also because you have no content div