Hi im working on a responsive website. Right now I have a problem with my navigation which i can't center in my div. Also I have a problem with my dropdown menu which destroy the otder when my navigation starts to fit the div.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test</title>
</head>
<body>
<div id="body_wrapper">
<div id="header_wrapper" class="clearfix">
<div id="header_content" class="content_container">
<div id="language_wrapper">
<div class="language active">
<span>Deutsch</span>
</div>
<div class="language">
<a href="#">
<span>Englisch</span>
</a>
</div>
</div>
<div id="hLogo_wrapper">
<a href="#">
<img src="images/starbucks.png">
</a>
</div>
</div>
</div>
<div id="inner_content" class="content_container">
<div class="mainMenu clearfix" >
<ul class="clearfix">
<li>Home</li>
<li>Aktuelles</li>
<li>
Speisekarte ￬
<ul class="hidden">
<li>Mittagstisch</li>
<li>Frühstück</li>
</ul>
</li>
<li>Reservierung</li>
<li>Gallerie</li>
<li>Kontakt</li>
<li>Jobs</li>
</ul>
</div>
</div>
<div id="footer_wrapper"></div>
</div>
</body>
</html>
and here is my css file so far
* {
margin: 0;
padding: 0;
font-family: Trebuchet MS;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {border: 0;}
.clearfix:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.content_container{
margin: 0 auto;
width: 62.5%;
}
#inner_content{
}
#header_wrapper{
height: 220px;
background: url('images/header.png');
}
#hLogo_wrapper img{
max-width: 100%;
}
#language_wrapper{
float: right;
}
#language_wrapper .language{
display: inline;
}
#hLogo_wrapper{
float: left;
}
.mainMenu{
height: 60px;
margin: 0 auto;
}
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
}
.mainMenu li {
display:inline;
float: left;
margin-right: 1px;
}
.mainMenu li a {
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
.mainMenu li:hover a {
background: #19c589;
}
.mainMenu li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
z-index: 120;
}
/*Hover state for dropdown links*/
.mainMenu li:hover ul a:hover {
background: #19c589;
color: #fff;
}
.mainMenu li ul {
display: none;
}
.mainMenu li ul li {
display: block;
float: none;
}
.mainMenu li ul li a {
width: auto;
min-width: 140px;
padding: 0 20px;
}
.mainMenu ul li a:hover + .hidden, .hidden:hover {
display: block;
}
You have left marked at 10% on your menu ul which is causing your drop down content to become off-centered.
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
Changing left to 0; will straighten this out.
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 0;
Related
I have to make this:
I am very inexperienced in HTML so I though the best thing would be making a rectangle in a div and show only half of it, but I can't seem to make it work. Here is the screen of the current website and how I would like to display it instead:
And here's the code:
header {
font-family: Arial;
}
header nav {
color: white;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
margin: 0;
padding: 0;
float: left;
width: 200px;
height: 40px;
background-color: rgb(187, 199, 124);
line-height: 40px;
text-align: center;
}
header nav ul li a {
display: block;
text-decoration: none;
color: white;
}
header nav ul li a:hover {
background-color: rgb(163, 175, 75);
opacity: 0.5;
}
header nav ul li ul li {
display: none;
}
header nav ul li:hover ul li {
display: block;
}
.fit-picture {
max-width: 12%;
}
#rectangle {
width: 1000px;
height: 900px;
background: rgb(187, 199, 124);
border-radius: 500px;
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li>
<a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>
You can use transform:translateX to achieve this
header {
font-family: Arial;
}
header nav {
color:white;
}
header nav ul {
list-style:none;
margin:0;
padding:0;
}
header nav ul li {
margin:0;
padding: 0;
float: left;
width:200px;
height:40px;
background-color: rgb(187,199,124);
line-height: 40px;
text-align: center;
}
header nav ul li a {
display: block;
text-decoration: none;
color:white;
}
header nav ul li a:hover {
background-color: rgb(163,175,75);
opacity: 0.5;
}
header nav ul li ul li {
display: none;
}
header nav ul li:hover ul li {
display: block;
}
.fit-picture {
max-width: 12%;
}
#rectangle {
width:1000px;
height:900px;
background:rgb(187,199,124);
border-radius: 500px;
transform:translateX(-250px);
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li><a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>
You can use transform:translateX to achieve this
header {
font-family: Arial;
}
header nav{
color:white;
}
header nav ul{
list-style:none;
margin:0;
padding:0;
}
header nav ul li{
margin:0;
padding: 0;
float: left;
width:200px;
height:40px;
background-color: rgb(187,199,124);
line-height: 40px;
text-align: center;
}
header nav ul li a{
display: block;
text-decoration: none;
color:white;
}
header nav ul li a:hover{
background-color: rgb(163,175,75);
opacity: 0.5;
}
header nav ul li ul li{
display: none;
}
header nav ul li:hover ul li{
display: block;
}
.fit-picture{
max-width: 12%;
z-index:1;
}
#rectangle{
width:500px;
height:400px;
background:rgb(187,199,124);
border-radius: 500px;
transform:translateX(-250px);
z-index:-111;
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li><a><img class="fit-picture"
src="menu-icon.png"
alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>```
I am converting my desktop menu in the mobile menu, but the code is not working.
I am using checkbox trick, when checkbox is checked the menu will appear, otherwise menu display will be none.
At 1280px my desktop will switched into mobile, but it's not working properly as expected.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soofyantheband</title>
<link rel="stylesheet" href="assets/css/style2.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/mini-nav_bar.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<!-- Webpage Wrap inside "wrapper" -->
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li >Events</li>
<li >Projects</li>
<li >Unplugged</li>
<li >Gallery</li>
<li >Videos</li>
<li >About</li>
<li >Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
display:none;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu ul li a{
display: block;
}
}
There were some issues in your code.
This line #toggle:checked + .menu ul li a won't work. .menu is not a sibling of #toggle, it is a child of a sibling (header). Instead, use the general sibling combinator (~) to target the header.
You set display: none for the ul and li, but then only changed the display type for the ul. Setting display: none for the ul is sufficient.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked ~ header .menu ul {
display: block;
}
}
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<input type="checkbox" id="toggle" />
<label for="toggle">☰</label>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li>Events</li>
<li>Projects</li>
<li>Unplugged</li>
<li>Gallery</li>
<li>Videos</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
I'm having problems with the navigation bar on my website. All I want is for it to say where it is, right under the logo/slogan- even when you zoom out or in in your browser.
Here's the HTML:
<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
padding-left:550px;
padding-right:500px;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
</div>
</body>
What I want it to look like all the time: http://i.imgur.com/RWXYTu0.png
Zoomed Out: http://i.imgur.com/BoJV0WB.png
Hope this helps.. Little modifications in Css
#coolMenu {
text-align:center; /*Added */
width:100%; /*Added */
}
#coolMenu > li {
display: inline-block; /*Added */
}
Removed Css
#coolMenu {
float: left;
padding-left:550px;
padding-right:500px;
position:absolute;
}
#coolMenu > li {
float: left;
}
I added wrapper to contain all of them and just centered it with margin: 0 auto;
<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#wrapper {
margin: 0 auto;
width: 500px;
}
#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
</div>
</div>
</body>
to center anything use
margin: 0 auto
In your case, set this in #body
#body {
margin:0 auto;
}
It still isn't center as expected right? because of your float: left in the li, replace with display: inline-block
#coolMenu > li {
display:inline-block;
}
Here is the final demo: http://jsfiddle.net/jbwsT/1/
They're not centered correctly. Use absolute is a bad way to center dynamic text. Is better to use only on divs with a exact value.
The best form:
Use display:inline-block in the texts.
And in the ul, use text:align: center
JSFIDDLE
ONLINE DEMO
Fixed below.
Some changes include:
the 50% relative position trick for the nav.
simplified mark-up.
auto left/right margins for centering.
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color: #E6E6E6;
font-family: Lato,Tahoma,Arial,Sans-Serif;
}
#header {
text-align: center;
padding-top: 100px;
}
.container {
width: 940px;
margin: 0 auto;
clear: both;
}
.centered {
text-align: center;
}
#coolMenu,
#coolMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#coolMenu a:link {
color: #FFFFFF;
}
#coolMenu {
float: left;
position: relative;
left: 50%;
}
#coolMenu > li {
float: left;
position: relative;
left: -50%;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color: #000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" class="container centered">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
<div id="primary-nav" class="container centered">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
<div id="body" class="container">
<h1>
Test header
</h1>
<p>
Test paragraph
</p>
<p>
Test paragraph
</p>
</div>
</body>
</html>
the only thing that works for me.
margin: 0 auto;
width: fit-content;
on your element
It worked for me, hope it work for you
add at the end of your code (if you want just center the page delete the first row "transform: scale(0.8)"
in CSS editor
body {
transform: scale(0.8); /* for zooming */
transform-origin: 1 0; /* for center position */
transform-origin: top; /* for center to top position */
}
I am trying set the height of the navigation div for my navigation menu.But I am unable to get why it is not adjusting according to the li tag height.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Journeycook</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<div class="wrapper">
<div class="header">
<div class="header-top">
<a href="#" class="logo">
<img src="logo.png" />
</a>
<div class="header-right">
<div class="call">
<img src="call.png" />
1-877-708-1505
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Flights
</li>
</ul>
</div>
</div>
</div>
<body></body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
}
a img {
outline: 0;
border: 0;
max-width: 100%;
}
.clearfix {
clear: both;
}
a img {
max-width: 100%;
}
ul, li {
list-style: none outside none;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 100%;
}
.wrapper .header {
margin: 0 auto;
width: 1024px;
}
.header-top {
margin: 3px 0;
}
.header-top a.logo {
display: block;
float: left;
height: 71px;
width: 215px;
}
.header-right {
float: right;
}
.call {
color: #ffc620;
font-size: 39px;
font-weight: bold;
margin-bottom: 10px;
text-align: right;
}
.header-right .call img {
vertical-align: top;
width: 48px;
}
.navigation {
background: #04498E;
border: 1px solid #002E73;
border-radius: 6px;
}
.navigation ul {
}
.navigation ul li {
border-right: 1px solid #1C61A6;
float: left;
}
.navigation ul li a {
color: #FFFFFF;
display: block;
padding: 10px 20px;
text-decoration: none;
}
.navigation ul li a:hover {
background: #ff8c04;
}
.navigation ul li .act {
background: #ff8c04;
}
please experts tell me where i am going wrong
thanks
The reason your navigation DIV is not adjusting to your ul is because of the float you put on it, use clear:both after the ul tag float so your nav div knows to adjust itself
You do not need to declare height on your navigation, if you do it will be fixed height
You have not specified the height for the navigation, simply change the following line and it will work fine:
.navigation { background: #04498E; border: 1px solid #002E73; border-radius: 6px; height:39px; }
got the solution :)
I forget to add clearfix div after ul tag here is the correct html for navigation div
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Flights
</li>
</ul>
<div class="clearfix">
</div>