I'm building this website as part of college project, I have built my navigation drop downs but there is a kind of over flow on the left of the list items that I can't seem to get rid of. I have tried playing around with the widths and overflow but I just can't seem to get rid of it without messing up the functionality of my dropdown, any help would be greatly appreciated.
wont let me post an image but here is a link: http://postimg.org/image/q4uo0sjfp/
This is the CSS
#charset "UTF-8";
html {background:none;}
table{
width:100%;
}
table, th, td {
height:auto;
width:auto;
padding: none;
align: center;
}
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
body {
font: 100% Arial, Helvetica, sans-serif;
line-height: 1.4;
width: 100%;
padding-bottom: 0;
background: 8BA0BB;
}
.wrapper{
min-height:100%;
height:100%;
height:auto;
width:auto;
}
h1, h2, h3 {
font-weight: normal;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
color: #174D92;
}
h2 {
font-size: 4.4em;
font:100% Arial, Helvetica, sans-serif;
color:#174D92;
font-weight: bold;
}
header{
position:fixed;
width:100%;
height:206px;
max-width:100%;
max-height:100%;
float:left;
top:0;
left:0;
background:#ffffff;
z-index:999;
}
header img{
height:auto;
width:auto;
max-width:100%;
max-height:100%;
float:left;
}
nav {
height: 3.1em;
width:100%;
background:#174D92;
text-align:center;
position:fixed;
top:200px;
z-index:999;
}
div {
background:#7FB7FF;
margin: 2px;
border: 1px solid #174D92;
Border-radius:25px;
Padding: 2px 2px 2px 2px;
}
.insurers a img{
border: 1px solid #174D92;}
.insurers a:hover img{
border: 3px solid #174D92;
opacity:0.4;
}
div.textsmall{font-size: 85%}
ul, li {
float:left;
padding:none;
margin: 0;
list-style:none;
width: 20%;
height: auto;
text-align:center;
font-weight: bold;
}
ul {
background: #7FB7FF;
width:97.6%;
height:2.9em;
text-align: center;
vertical-align:central;
margin-top:.1em;
}
li {
position:relative;
}
li a {
display:block;
width: auto;
padding:none;
line-height:2.9em;
text-decoration:none;
color: #174D92;
}
li a:hover, .topmenu > li:hover > a{
background:#174D92;
color: #7FB7FF;
border-left: 1px solid black;
border-right: 1px solid black;
}
ul.topmenu{text-align:center;
}
ul.submenu {
background:#7FB7FF;
width: 100%;
height: auto;
float:none;
position:absolute;
top:2.9em;
left:10000em;
max-height: 0;
transition:max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
overflow:hidden;
z-index:999;
}
ul.submenu li {
padding: none;
float: none;
color: #174D92;
width: 100%;
height: auto;
z-index:999;
}
ul.topmenu li:hover ul{
Left:-40px;
max-height: 30em;
width: 100%;
}
ul.submenu li a {
border-bottom: 1px solid #8D8F92;
border-right: 0;
line-height:3em;
padding: none;
white-space: nowrap;
}
ul.submenu li a:hover {
background:#174D92;
color:#7FB7FF;
border-bottom: 1px solid #FFFFFF;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li:first-child a {
padding: none;
}
.fadein { position:relative; width: auto; height: 545px; margin-top: 1em;}
.fadein img { position:absolute; left:0; top:0; border-radius:25px; border: 4px solid #174D92;}
iframe{
margin: 2px;
border: 1px solid #174D92;
}
.divtext{
width:60%;
text-align:center;
}
.aligncent{
align-content:center;
text-align:center;
}
.blank{
background:none;
border:none;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="index.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Physio Central Dublin</title>
</head>
<div class="wrapper blank" style="height:auto; width:100%">
<header><img src="headerimg.png"></header>
</div>
<body>
<nav class="cf">
<ul class="topmenu">
<li>Home</li>
<li>Treatments
<ul class="submenu">
<li>Physiotherapy</li>
<li>Acupuncture</li>
<li>Sports Injury</li>
<li>Osteopathy</li>
<li>Exercise Therapy</li>
<li>Massage Therapy</li>
<li>Orthotics</li>
<li>Dry Needling</li>
</ul>
</li>
<li>Pricing
<ul class="submenu">
<li>Pricing for sessions</li>
<li>Are you covered</li>
</ul>
</li>
<li>About Us
<ul class="submenu">
<li>About Physio Central</li>
<li>Opening Times</li>
<li>Location</li>
<li>Our People</li>
<li>Contact Us</li>
<li>Testimonies</li>
</ul>
</li>
<li>FAQ
<ul class="submenu">
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
you just need to tell the ul to have zero padding.
ul.submenu {
background:#7FB7FF;
width: 100%;
height: auto;
max-height: 0;
transition:max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
overflow:hidden;
z-index:999;
padding: 0px;
}
If you remove the absolute positioning as well then it will drop directly below your menu item, which I assume is what you was after as well.
Related
The menu bar itself is centered but the buttons inside the bar aren't. Any ideas on how to fix it?
I really don't know what I'm doing so any help is appreciated :D.
.main-navigation {
clear:both;
display:block;
float:left;
width:100%;
}
nav.main-nav .container {
padding:0;
text-align:right;
}
.container {
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
}
ul#primary-menu li a {
color:#404040;
font-size:14px;
font-weight:100;
letter-spacing:2px;
margin-right:35px;
text-decoration:none;
text-transform:uppercase;
}
ul#primary-menu > li > a {
line-height:40px;
}
.main-navigation a {
display:block;
text-decoration:none;
}
Try using this in your ".main-navigation", your menu bar should be centered because its width: 100% as long as it is your parent element this should work
text-align: center;
Also, try putting this in your ul
display: block;
<!-- if its horizontal -->
display: inline-block;
body, html{
margin: 0;
height: 100%;
}
.nav{
width: 100%;
height: 50px;
background-color: black;
text-align: center;
}
.nav ul{
margin: 0;
list-style-type: none;
}
.nav li{
display: inline-block;
border: 1px solid white;
width: auto;
height: 20px;
margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav a{
text-decoration: none;
color: white;
transition: background-color 2s;
transition: color 2s;
}
<div class="nav">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
I have a list for my navbar. I want to have a border below the active li item, not just on the bottom.
I've been able to add the border to the bottom using border-bottom, but again, it needs to be below the li element. Any help would be appreciated.
Here is my custom css so far, in addition to default Bootstrap navbar list:
.nav .active{
border-bottom: 5px solid yellow;
}
See below:
Just an example ..... use border-bottom with background-clip padding box
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
border-bottom: 5px solid transparent;
background: #ddd;
display: inline-block;
text-align: center;
background-clip: padding-box;
}
li:hover {
border-bottom: 5px solid gold;
}
<ul>
<li>Hello</li>
<li>World</li>
</ul>
Altarnatively you can try box shadow. see this
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
}
li:hover {
box-shadow: 0 5px 0 0 gold;
}
<ul>
<li>Hello</li>
<li>World</li>
</ul>
Try like this: demo
CSS:
ul.nav {
list-style-type: none;
}
li {
display:block;
float:left;
line-height: 26px;
margin-right:10px;
background-color:#ccc;
padding:4px 10px;
border-bottom: 5px solid transparent;
}
li a{
text-decoration:none;
color:#000;
}
li:hover, li.active {
border-bottom: 5px solid red;
}
HTML:
<ul class="nav">
<li> Menu 1
</li>
<li class="active"> Menu 1
</li>
<li> Menu 1
</li>
<li> Menu 1
</li>
</ul>
I typically use an :after for small details like this, to get the border outside the menu items normal height.
HTML:
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="main">
Next Box
</div>
CSS:
html,body{
margin:0px;
padding:0px;
}
ul{
/* for looks */
list-style:none;
margin:0px;
padding:0px;
}
li{
background:black;
color:white;
display:inline-block;
margin:0px;
padding:5px 20px;
}
li.active{
position:relative;
}
li.active:after{
content:'';
position:absolute;
top:100%;
left:0px;
border-top:5px solid yellow;
width:100%;
}
.main{
background-color:#dddddd;
min-height:400px;
}
Most of the css is just for presentation but the key stuff is on the li, the li.active, and the li.active:after.
You can check out my demo at jsfiddle
This is the sample I always use. Hope this can help you ;)
This method is using the last child of the "li" element as the border.
The class "selected" on "li" element choose the position of the border to stay at initial.
When the mouse is on one of the menu bar button, the bar will follow it by an animation.
If you don't want an animation, please just delete ALL transition CSS style in ".menu > li:last-child" class.
If you want to know more about last child CSS style, please go to this link >> http://www.w3schools.com/cssref/sel_last-child.asp
.menu, .menu li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.menu {
margin: auto;
position: relative;
overflow: hidden;
height: 25px;
}
.menu li {padding: 0px 5px;}
.menu > li {
text-align: center;
width: 80px;
font-size: 14px;
}
.menu > li > a {
display: block;
padding: 0px 0px;
color: #444;
text-decoration: none;
font-size: 15px;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.menu li a:hover {
color: #ffa500;
}
.menu > li:last-child {
position: absolute;
top: 20px;
right: -90px;
height: 5px;
width: 80px;
background: #ffa500;
-webkit-transition: transform 0.5s ease;
-moz-transition: transform 0.5s ease;
-ms-transition: transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
}
.menu .selected {
position: relative;
pointer-events: none;
cursor: default;
}
.selected a {
color: #ffa500 !important;
}
.menu li:nth-child(1):hover ~ li:last-child {
-webkit-transform:translateX(-375px) !important;
-moz-transform:translateX(-375px) !important;
-ms-transform:translateX(-375px) !important;
-o-transform:translateX(-375px) !important;
transform:translateX(-375px) !important;
}
.menu li:nth-child(1).selected ~ li:last-child {
-webkit-transform:translateX(-375px);
-moz-transform:translateX(-375px);
-ms-transform:translateX(-375px);
-o-transform:translateX(-375px);
transform:translateX(-375px);
}
.menu li:nth-child(2):hover ~ li:last-child {
-webkit-transform:translateX(-280px) !important;
-moz-transform:translateX(-280px) !important;
-ms-transform:translateX(-280px) !important;
-o-transform:translateX(-280px) !important;
transform:translateX(-280px) !important;
}
.menu li:nth-child(2).selected ~ li:last-child {
-webkit-transform:translateX(-280px);
-moz-transform:translateX(-280px);
-ms-transform:translateX(-280px);
-o-transform:translateX(-280px);
transform:translateX(-280px);
}
.menu li:nth-child(3):hover ~ li:last-child {
-webkit-transform:translateX(-185px) !important;
-moz-transform:translateX(-185px) !important;
-ms-transform:translateX(-185px) !important;
-o-transform:translateX(-185px) !important;
transform:translateX(-185px) !important;
}
.menu li:nth-child(3).selected ~ li:last-child {
-webkit-transform:translateX(-185px);
-moz-transform:translateX(-185px);
-ms-transform:translateX(-185px);
-o-transform:translateX(-185px);
transform:translateX(-185px);
}
.menu li:nth-child(4):hover ~ li:last-child {
-webkit-transform:translateX(-90px) !important;
-moz-transform:translateX(-90px) !important;
-ms-transform:translateX(-90px) !important;
-o-transform:translateX(-90px) !important;
transform:translateX(-90px) !important;
}
.menu li:nth-child(4).selected ~ li:last-child {
-webkit-transform:translateX(-90px);
-moz-transform:translateX(-90px);
-ms-transform:translateX(-90px);
-o-transform:translateX(-90px);
transform:translateX(-90px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="menubox">
<ul class="menu">
<li class="selected">
<a href="#">
First
</a>
</li>
<li>
<a href="#">
Second
</a>
</li>
<li>
<a href="#">
Third
</a>
</li>
<li>
<a href="#">
Forth
</a>
</li>
<li></li>
</ul>
</div>
</body>
</html>
I am looking for help on this navigation bar, I need it to be able to drop down while keeping the other items of the navigation bar in place. I have looked through all of the other submissions and still didn't find anything that helped. Here is the code and example.
http://jsfiddle.net/doctor_turkey/G2xfz/
<html>
<style>
#div5 {
background-color: black;
-webkit-box-shadow: 0px 0px #000000;
box-shadow:0px 5px 5px #5B5454;
width: 100%;
clear: both;
margin-left: -1%;
margin-right:-1%;
padding-left:1%;
padding-right:1%;
}
#div5 ul{
margin: 0 0 0 60px;
padding: 0px;
list-style: none;
}
#div5 ul li{
display: inline;
-webkit-box-shadow: 0px 0px #000000;
box-shadow: 0px 0px #000000;
position:relative;
}
#div5 ul li a{
float: left;
width: 15%;
height: 20px;
margin-top: -5px;
margin-bottom: 10px;
padding: 0;
font-size: 15px;
font-weight: none;
text-align: center;
text-decoration: none;
color: black;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
#div5 ul li .firstmenu{
border-left: 2px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
#div5 ul li .smallmenuend{
border-left: 1px solid #CCCCCC;
border-right: 2px solid #CCCCCC;
}
/* HOVER MENU TEST*/
#div5 li ul {
float: left;
left: 0;
opacity: 0;
position:relative;
display:none;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#div5 li:hover ul {
opacity: 1;
/* top: 50px;*/
display:block;
float: left;
color:black;
clear:left;
display:block;
margin-left:20%;
}
#div5 li ul li {
clear:left;
color:black;
display:block;
width:100%;
}
#div5 li ul li a{
width:100%;
}
#div5 li ul a:hover {
background: #bbb;
}
</style>
<div id="div5" class="fluid">
<p align="center">
<div align="center">
<ul>
<li> One</li>
<li> Two
<ul>
<li> Test 1 </li>
<li> Test 2 </li>
</ul>
</li>
<li><a href="#" >Three</a></li>
<li> Four </li>
<li>Five</li>
<li >Six</li>
</ul>
</div>
</p>
</div>
Your code needs a lot of work - it is a soup of unnecessary markup and styles.
Here's a cleaned up version of this navigation bar. You are welcome to study this code and optimize yours.
HTML:
<ul id = "nav">
<li>Home</li>
<li>Energy
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>Account</li>
<li>Contact</li>
<li>Services</li>
<li >Solutions</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #eee;
}
#nav {
list-style-type: none;
display: table;
min-width: 610px;
margin: 0 auto;
background-color: #fff;
text-align: center;
}
#nav > li {
display: inline-block;
position: relative;
}
#nav ul {
list-style-type: none;
background-color: #5f6975;
position: absolute;
min-width: 100%;
}
#nav li a {
font: normal 15px/1 Sans-Serif;
text-decoration: none;
color: #4b545f;
display: block;
padding: 10px 20px;
text-align: left;
white-space: nowrap;
}
#nav ul a {
color: #fff;
}
#nav ul > li + li {
border-top: 1px solid #6b727c;
}
#nav li:hover {
background-color: #4b545f;
}
#nav > li:hover > a {
color: #fff;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
And, a fiddle: http://jsfiddle.net/bE2D2/.
There were many tutorials for this, but they weren't much a help for me.
When I scroll the page down, the content should go under the ´header´, not on top of it.
The footer works as it should.
http://jsfiddle.net/D4c4n/
body {
font-family:helvetica;
margin: auto;
min-height: 100%;
width: 100%;
background-image:url('nainen.jpg');
background-repeat: none;
}
.main {
min-height: 100%;
height:100%;
}
#background {
height: 100%;
width: 100%;
}
.ca-menu li:hover{
background:#fff;
}
.ca-menu li:hover .ca-icon{
color: #afa379;
font-size: 40px;
opacity: 0.1;
animation: moveFromLeft 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #afa379;
animation: moveFromRight 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
animation: moveFromBottom 500ms ease;
}
#keyframes moveFromLeft{
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
.fl {
top:150px;
width: 100%;
transition: all;
position: absolute;
}
.slidepart {
width:100%;
height:390px;
overflow:hidden;
position:relative;
border:#lightgray solid 2px;
box-shadow:gray 2px 5px 5px;
}
.slidepart img {
position:absolute;
width:100%;
height:450px;
border: black solid 1px;
}
.sl_paginationpart {
display:block;
background:#BFFF8D9;
width:100%;
height:1px;
position:absolute;
right:0px;
bottom:0px;
padding:6px;
border: solid 1px #FFE97D;
transition:all 0.5s ease
}
.sl_paginationpart:hover {
height:17px;
opacity: 0.8;
background:#908967;
}
ul.slpagination {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
right: 0px;
}
ul.slpagination:hover {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
}
ul.slpagination li {
margin:0px;
padding:0px;
list-style:none;
float:left;
height:100%
}
ul.slpagination li a {
text-decoration:none;
}
ul.slpagination li a.prev {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.next {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.number {
background:#FFE97D;
width:25px;
height:4px;
display:block;
text-align:center;
margin:0px 3px;
font-size:0px;
font-weight:bold;
color:#A3916D;
text-decoration:italic;
font-family: helvetica;
border-radius:3px 3px 3px 3px;
transition: all 0.5s ease;
}
ul.slpagination li a.number:hover {
background:#FFF8D9;
color:gray;
height:18px;
font-size:12px;
}
ul.slpagination li a.select {
background:#B78B59;
color:white;
text-decoration:none;
text-decoration:italic;
font-size:0px;
}
.sl_paginationpart:hover li a.select {
height: 18px;
font-size: 14px;
}
.sl_paginationpart:hover li a.number {
height: 18px;
}
#logo {
opacity: 1;
}
.kielet {
top:0px;
width:100%;
background-color: #333333;
padding:0px;
height: 35px;
color: white;
}
.kielet nav {
text-align: left;
height: 35px;
}
.kielet a {
display: inline;
left: 0px;
}
.icon {
width: 50px;
height: 101%;
right: 0px;
float: right;
margin:0 10px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}
.submit {
-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
box-shadow:inset 0px 1px 0px 0px #dcecfb;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #71f78c), color-stop(1, #5dde56) );
background:-moz-linear-gradient( center top, #71f78c 5%, #5dde56 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#71f78c', endColorstr='#5dde56');
background-color:#71f78c;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #93e084;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:16px;
font-weight:normal;
font-style:normal;
height:30px;
line-height:30px;
width:60px;
text-decoration:none;
right: 40%;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.submit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5dde56), color-stop(1, #71f78c) );
background:-moz-linear-gradient( center top, #5dde56 5%, #71f78c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5dde56', endColorstr='#71f78c');
background-color:#5dde56;
}
.submit:active {
position:relative;
top:1px;
}
.tiedot {
right: 100px;
top: 150px;
height: 250px;
position:absolute;
width: 250px;
border: dotted 1px;
text-align: center;
}
.lomake {
right: 35%;
top: 150px;
position:absolute;
}
.parent {
font-family: Verdana;
height: 30px;
font-size: 20px;
transition: background 0.5s ease;
}
.parent:hover {
background: #C2C3C4;
}
.parent a {
color: black;
text-decoration: none;
cursor: pointer;
}
.show ul
{
/*animation for show*/
transition:max-height 1s;
-webkit-transition:max-height 1s;
max-height: 100%;
}
.navigointi
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
background-color: #333333;
}
.navigointi ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.navigointi a
{
float:left;
width:6em;
top: 0px;
text-decoration:none;
color:white;
background: FFE97D;
padding:0.2em 0.6em;
border-right:1px solid white;
height:29px;
transition: all 0.5s ease;
}
.navigointi a:hover
{
color: #B0B0B0;
}
.navigointi li
{
display:inline;
}
#selected {
background-color:white;
color: #645406;
cursor: default;
}
form {
right: 50%;
}
.wrapper{
min-height: 100%;
height:100%;
margin: 0 0 -60px;
}
.push{
height:60px;
}
footer
{
background-color:#333333;
position:fixed;
height:20px;
bottom: 0px;
margin-bottom: 0px;
width:100%;
text-align: right;
}
header
{
top:0px;
width:100%;
background-color: #333333;
padding:0px;
height: 35px;
color: white;
position: fixed;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<script src="jquery-1.4.2.min.js"></script>
<link rel="shortcut icon" href="clade.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style_v2.css" />
<title>Artotek</title>
<LINK REL="SHORTCUT ICON"
HREF="favicon.ico">
<body>
<div class="wrapper">
<!-- KIELET -->
<header>
<div class="navigointi">
<ul>
<li><a id="selected" onclick="return false" href="#">Etusivu</a></li>
<li>Tietoa meistä</li>
<li>Yhteystiedot</li>
</ul>
</div>
</header>
<div id="footer" style="bottom:0px; right:0px; width:100px; font-size:8px;">
</div>
<div class="main">
<div id="teksti" style="position:absolute; font-family:century gothic; width:100%; top: 40px; font-size: 20px; height:130px; margin-top:0px; text-align:center; ">
<br>
<h3>ARTOTEK</h3>
<hr>
<p>Olemme startup innovatiivisten tuotteiden kehitysyritys<br>
Kysyttävää? Ota yhteyttä!</p>
</div>
<div style="margin-top: 800px;">
<a name="section2">Section 2</a>
<p>blablalblalalalalalal</p>
<p>lddlwdlldwldldwdlwdl</p>
</div>
</div>
</div>
</div>
<!--Twitter
<div class="twitter" style="width:50px; top:0px; margin-top:0px;">
<a class="twitter-timeline" href="https://twitter.com/ArtotekTmi" data-widget-id="381408956653899776">#ArtotekTmi Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<img style="position:absolute; bottom:0px; right:0px;"src="nainen.gif"></img>-->
</div>
<div class="push"></div>
<footer>©Claudio Lintunen</footer>
</body>
</html>
You can change the z-index for this:
header
{
z-index: 1;
}
This way the header will go on top of the other elements which have a lower z-index (z-index is 0 by default).
jsFiddle
put z-index to header part
.navigointi
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
background-color: #333333;
z-index:99999;
}
jsfiddle:http://jsfiddle.net/D4c4n/3/
If you add z-index: 1; to your header rule it will work just fine.
header
{
top:0px;
width:100%;
background-color: #333333;
padding:0px;
height: 35px;
color: white;
position: fixed;
z-index: 1;
}
If z-index: 1 does'nt work try increase the z-index till it does.
Please take a look at my menu code on my site. You can view the source and css file on this site: http://a4um.com/menu.php
some of element is not supported by ie so you can include js for ie
for reference https://github.com/aFarkas/html5shiv
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css"><!-- your css without change -->
<!-- add this for ie support-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<nav>
<ul>
</li>
<li id="moreButton">Menu
<ul>
<li id="second">Logout</li>
<br>
<li id="second">Mail</li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</body>
you have used html 5 tags i.e; nav,header which are not valid in ie lower versions so follow the below code it may help you.
<div id="big_wrapper">
<div id="top_header">
<div class="nav">
<ul>
</li>
<li id="moreButton"><a href ="#" class = "hide">
Menu
</a>
<ul>
<li id = "second">Logout</li>
<br>
<li id = "second">Mail</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
*{
margin: 0px;
padding:0px;
}
.hide{
color: white;
text-decoration:none;
}
.hide:link{
color: white;
text-decoration:none;
}
.hide:visited{
color: white;
text-decoration:none;
}
.hide:hover{
color: white;
text-decoration:none;
}
.hide:active{
font: bold 23px Tahoma;
color: white;
text-decoration:none;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
height:110%;
display:-webkit-box;
-webkit-box-pack: center;
overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;
}
#big_wrapper{
position:absolute;
top: 0; right: 0; bottom:0; left:0;
background:#F0F0F0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex: 1
}
#top_header{
background: #252525;
display:inline-block;
border: 1px solid grey;
border-left:1px solid black;
-webkit-box-orient:horizontal;
-webkit-box-flex:1;
color: white;
position:absolute;
right:0;left:0;
}
#logoThing{
width:100px;
font: bold 25px Tahoma;
padding-left:300px;
padding-right:20px;
}
#otherTopStuff{
width:120px;
font: bold 25px Tahoma;
border-left: 1px solid grey;
padding-left:20px;
padding-right:20px;
}
#moreButton{
width:30px;
font: bold 25px Tahoma;
border-left: 1px solid grey;
padding-left:5px;
}
#userID{
width:120px;
font: bold 25px Tahoma;
padding-right:20px;
}
#top_header li{
display:inline-block;
list-style:none;
}
#loginStuff{
font: bold 12px Tahoma;
padding:0px;
margin:0px;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#new_div2{
display:-webkit-box;
-webkit-box-orient:horizontal;
border-top:80px solid #F0F0F0;
}
#otherForms{
background:white;
width: 300px;
border-top: 5px solid white;
text-align:left;
}
#whiteSpace{
background:white;
border-top:1px solid white;
border-radius:10px;
bottom:0;
width:900px;
padding:20px;
-webkit-box-flex:1;
}
#signupTitle{
font: bold 18px Tahoma;
}
#theForms{
padding-top:20px;
}
#textBox{
float:right;
}
#submitButton{
float:center;
}
#aligning{
text-align:center;
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid black;
}
.nav ul ul {
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
position: relative;
}
.nav ul ul li a {
padding: 0px 10px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}