I can't seem to be able to center the horizontal #menu in the center of the page.
I have tried adding a container DIV, but I can't seem to be able to get it to work at all.
Here is my HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
margin:0 auto;
width: 100%;
}
#menu {
list-style:none;
width:940px;
height:43px;
background: #014464;
border: 1px solid #002232;
}
#menu ul, li {
font-size:14px;
font-family: Segoe UI;
line-height:21px;
text-align:left;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
}
#menu li a {
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
.dropdown_column {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
background:#F4F4F4;
width: 560px;
}
#menu li:hover .dropdown_column {
left:-1px;
top:auto;
}
.sub_col { width:130px; }
.col { width:550px; }
.sub_col, .col {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu ul li {
line-height:21px;
text-align:left;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#FFF;
background: #014464;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align: left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li>4 Columns<!-- Begin 4 columns Item -->
<div class="dropdown_column"><!-- Begin 4 columns container -->
<div class="col">
<h2>This is a heading title</h2>
</div>
<div class="sub_col">
<h3>Some Links</h3>
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="sub_col">
<h3>Useful Links</h3>
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="sub_col">
<h3>Other Stuff</h3>
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="sub_col">
<h3>Misc</h3>
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
</ul>
</div>
</body>
</html>
Add margin: 0 auto; to your #menu ul.
DEMO
Wrap the menu in div with style text-align: center
Related
I'm fairly new to CSS/HTML and am trying to make a horizontal nav with a dropdown menu. I have made the nav but I am having trouble getting it centred on the page.
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
width: 1075px;
}
#NavigationTop ul a{
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:15px;
padding:0 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
text-transform: uppercase;
}
#NavigationTop ul li{
background-color: #343434;
width: 215px;
height: 50px;
position:relative;
float: left;
margin:0 auto;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavigationTop ul li:hover{
background-color: lightseagreen;
}
#NavigationTop ul li a:visited{
color: #ffffff
}
#NavigationTop ul ul{
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
margin: 0;
}
#NavigationTop ul ul li{
float:none;
width:215px;
border-bottom: 1px solid;
}
#NavigationTop ul li:hover > ul{
display: block;
}
<nav id="NavigationTop">
<div id="main-nav">
<ul>
<li>HOME</li>
<li>BIOGRAPHY</li>
<li>DISCOGRAPHY</li>
<li>MEDIA
<ul>
<li>Audio
<li>Video
<li>Photos
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
I'm sure there are many errors, but what could I do to make it centred? Also is it possible to have the nav hide the overflow from the main ul and still show the drop-down menu? Thank you.
Change only this:
#NavigationTop ul {
list-style: none;
position: relative;
margin: 0 auto;
padding-right: 1px;
display: inline-block;
}
div#main-nav {
text-align: center;
}
Whenever you want to make a div center or any html element. you need a container( eg. div or ul or any other) and place the html element inside that container and give specific width to that container with property margin: 0 auto .
By specifying width, your content will not spread across the viewport(brower screen) and when you specify Margin, in shorthand notion( 0 auto ) means 0 will hold the margin for Top & Bottom while auto will hold Left & Right automatically by browser.
Then whatever you will place that container, you can use Floating easily so that your design looks perfect.
Remove the width from #NavigationTop ul
Add specific width till your menu not breaking then add that on #main-nav
#main-nav{
width: 1120px; //in your design case i found it this in px.
margin: 0 auto;
}
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
}
#main-nav{
width: 1120px; //in your design case i found it this in px.
margin: 0 auto;
}
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
}
#NavigationTop ul a{
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:15px;
padding:0 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
text-transform: uppercase;
}
#NavigationTop ul li{
background-color: #343434;
width: 215px;
height: 50px;
position:relative;
float: left;
margin:0 auto;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavigationTop ul li:hover{
background-color: lightseagreen;
}
#NavigationTop ul li a:visited{
color: #ffffff
}
#NavigationTop ul ul{
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
margin: 0;
}
#NavigationTop ul ul li{
float:none;
width:215px;
border-bottom: 1px solid;
}
#NavigationTop ul li:hover > ul{
display: block;
}
<nav id="NavigationTop">
<div id="main-nav">
<ul>
<li>HOME</li>
<li>BIOGRAPHY</li>
<li>DISCOGRAPHY</li>
<li>MEDIA
<ul>
<li>Audio
<li>Video
<li>Photos
</ul></li>
<li>CONTACT</li>
</ul>
</div>
</nav>
you can try this one https://jsfiddle.net/mnd1b51y/1/
#NavigationTop ul li { position: relative;}
#NavigationTop ul li:hover > ul {
left: 0;
max-width: 210px;
position: absolute;
top: 51px;
}
In #NavigationTop ul class remove padding-left:0 because by default ul takes padding and the default seems to be padding-left:40px for ul.
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
width: 1075px;
overflow:auto;
padding-left:0;
}
#NavigationTop ul a{
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:15px;
padding:0 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
text-transform: uppercase;
}
#NavigationTop ul li{
background-color: #343434;
width: 215px;
height: 50px;
position:relative;
float: left;
margin:0 auto;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavigationTop ul li:hover{
background-color: lightseagreen;
}
#NavigationTop ul li a:visited{
color: #ffffff
}
#NavigationTop ul ul{
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
margin: 0;
}
#NavigationTop ul ul li{
float:none;
width:215px;
border-bottom: 1px solid;
}
#NavigationTop ul li:hover > ul{
display: block;
}
<nav id="NavigationTop">
<div id="main-nav">
<ul>
<li>HOME</li>
<li>BIOGRAPHY</li>
<li>DISCOGRAPHY</li>
<li>MEDIA
<ul>
<li>Audio
<li>Video
<li>Photos
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/
i've created a page where in the content area I am trying to create two columns using div float left but when i increase the the height of columns my footer collapses. here is the initial fiddle without columns : jsfiddle.net/Vrk5C/ and here is the fiddle with columns in it : jsfiddle.net/GKCT7/
here is the entire code of my html and css
<!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>Contact | Chaithanya Public School</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body id="body1">
<div class="container">
<div class="header">
<div style="float:left; width:300px; margin-top:5px;">
<img src="images/logotext.png" /></div>
</div><!-- header ends-->
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="content">
<br />
<div class="heading">Contact</div>
<br />
<br />
</div><!-- Content ends-->
</div><!-- container ends-->
<div class="footer">
<div class="footerbox">
<div class="footerbox1">
<!-- box1 -->
<ul id="footerul">
<p id="footerli" class="footerhead">About</p>
<li>School</li>
<li>Vission & Mission</li>
<li>Management</li>
</ul>
</div> <!-- box1 end -->
<div class="footerbox2"> <!-- box2 -->
<ul id="footerul">
<p id="footerli" class="footerhead">Admission</p>
<li>Overview</li>
<li>Application</li>
<li>Documents</li>
</ul>
</div> <!-- box2 end -->
<div class="footerbox2"> <!-- box3 -->
<ul id="footerul">
<p id="footerli" class="footerhead">School</p>
<li>Calander</li>
<li>Gallery</li>
<li>Careers</li>
</ul>
</div> <!-- box3 end -->
<div class="footerbox2"> <!-- box4 -->
<ul id="footerul">
<p id="footerli" class="footerhead"> Contact</p>
<li style="color:#929497;">082 4227 1080</li>
<li style="color:#929497;">Info#chaithanyaschool.com</li>
<li>Map Directions</li>
</ul>
</div> <!-- box4 end -->
<div class="footerbox3" style="padding-top:45px; padding-left:70px;"> <!-- box5 -->
<table border="0" style="float:right">
<tr>
<td></td>
<td></td> </tr>
</table>
<table border="0" style="float:right; width:220px;">
<tr>
<td id="footerul" style="text-align:right; color:#929497;">© 2013 Chaithanya Public School</td>
</tr><tr>
<td id="footerul" style="text-align:right; color:#929497;">All Rights Reserved</td> </tr>
</table>
</div> <!-- box5 end -->
</div>
</div>
</body>
</html>
body {
margin:0px;
padding:0px;
/* fallback */
background-color: #3A454B;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A454B), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #3A454B, #D9E0E6);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #3A454B, #D9E0E6);
/* IE 10 */
background: -ms-linear-gradient(top, #3A454B, #D9E0E6);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #3A454B, #D9E0E6);
}
#body
{
background:url(images/head_bg.jpg) repeat-x;
}
#body1
{
/* background:url(images/head_bg1.jpg) repeat-x; */
}
.container
{
width:980px;
min-height:500px;
height:auto;
margin-left:auto;
margin-right:auto;
}
.header
{
width:980px;
height:100px;
}
.slider
{
width:976px;
height:230px;
border: 4px #fff solid;
}
.bar
{
margin-left: auto;
margin-right: auto;
margin-top:10px;
margin-bottom:10px;
padding: 0;
width: 980px;
height:30px;
background:#98AFC7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.content
{
margin-top:0px;
margin-bottom:10px;
width:980px;
min-height:500px;
height:auto;
background:#fff;
/* border:1px solid #000;
-moz-border-radius: 1px;
-webkit-border-radius: 1px; */
}
.footer
{
padding-top:20px;
height:250px;
background:#111312;
}
.footerbox
{
width:980px;
height:250px;
margin-left:auto;
margin-right:auto;
}
.footerbox1
{
float:left;
height:200px;
width:150px;
}
.footerbox2
{
float:left;
height:200px;
width:150px;
margin-left:3px;
}
.footerbox3
{
float:left;
height:200px;
width:220px;
}
#footerul {
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
}
#footerul a {
text-decoration:none;
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
color:#999;
}
#footerul a:hover{
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
color:#FFF;
}
#footerli {
border-bottom:1px solid #666;
padding-bottom:5px;
}
.footerhead
{
/*color:#C36241; */
color:#81C1ED;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
#facebook
{
display: block;
width:32px;
height:32px;
background:url(images/facebook_dark.png) no-repeat;
}
#facebook:hover
{
background:url(images/facebook_active.png) no-repeat;
}
#twitter
{
display: block;
width:32px;
height:32px;
background:url(images/twitter_dark.png) no-repeat;
}
#twitter:hover
{
background:url(images/twitter_active.png) no-repeat;
}
.logotext
{
font-family: 'Open Sans', sans-serif;
color:#FFF;
font-size:37px;
margin:0px;
}
.logotext1
{
font-family: 'Open Sans', sans-serif;
font-size:20px;
margin:0px;
}
.link
{
color:#000;
text-decoration:underline;
}
.link:hover
{
text-decoration:none;
color:#0CC;
}
.text
{
font-family: 'Droid Sans', sans-serif;
font-size:14px;
line-height:25px;
margin:0px;
color:#000;
text-align:justify;
}
.heading
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#4e5c64;
text-align:justify;
}
.heading1
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#999;
text-align:justify;
}
.hblock1
{
width:320px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float:left;
margin-left:4px;
}
.hblock2
{
width:318px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left:10px;
float:left;
}
.hblock3
{
width:318px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left:10px;
float:left;
}
.addressbox
{
width:200px;
height:400px;
float:left;
}
.add
{
width:200px;
height:400px;
float:left;
}
.adressbox1
{
width:300px;
height:150px;
float:left;
margin-top:20px;
}
.adressbox2
{
width:300px;
height:120px;
float:left;
margin-top:10px;
}
.adressbox3
{
width:300px;
height:30px;
float:left;
margin-top:10px;
}
.adressbox4
{
width:300px;
height:30px;
}
.menudiv {
width:980px;
}
.menu {
font-family:'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #AEA79F;
margin: 0;
list-style: none;
position: relative;
padding: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content:"";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding-top: 10px;
padding-bottom: 7px;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #2C001E;
border-bottom: 3px solid #2C001E;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #2C001E;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.menu > ul > li > a {
border-right: 1px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
here is what iam trying to do :
Clear your floats. Maybe using a <div style="clear: both"></div> just before your content ends:
http://jsfiddle.net/GKCT7/1/
give clear:both to class ".footer"
I have attached a picture so you can see what kind of problem I am receiving. I want the navigation menu to line up with the navigation container so they appear as the same element. The picture shows the last element of the navigation menu "E-MAIL" and then the container that it sits within is just a yellow strip (as indicated in the code below).
I have tried working with negative margins on the navigation container but no solution as of yet.
web graphic http://jaylefler.com/webgraphic.png
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
}
#logo img {
padding: 10px;
}
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
#navMenu {
width: 760px;
height: 30px;
background-color:rgb(255,200,0);
border:1px #000 solid;
font-weight:bold;
margin-left: -2px;
}
#navMenu ul{
margin:-1px 0 0 0;
padding:0;
line-height:32px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
position:relative;
background-color:rgb(255,200,0);
float:left;
border:1px #000 solid;
}
#navMenu ul li a{
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top: 31px;
margin-left: -2px;
}
#navMenu ul li:hover ul{
visibility: visible;
}
#navMenu a:hover {
background-color:#000;
color:rgb(255,200,0);
}
.left_part {
background:black;
}
.right_part {
background:yellow;
float:right;
white-space:nowrap;
display:inline;
text-overflow:ellipsis;
overflow:hidden;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
</div>
</div>
<div id="navContainer">
<div id="navMenu">
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
</div>
</div>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
#navmenu {
width: 760px;
height: 30px;
background-color: #FFC800;
border: 1px black solid;
border-top: 0; /* REMOVE TOP BORDER */
margin-left: -2px;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
height: 30px; /* MATCH HEIGHT */
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
I did a little cleanup. Since I don't have your logo image i removed that part of the code, I guess you will manage to add that yourself.
Here is a simplified code that fixes your problem:
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
}
nav ul{
padding:0;
margin: 0;
overflow: hidden;
}
nav > ul{
min-width: 755px;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
top: 31px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
I've got the following inside a div. I'd like to center the menu elements. Currently they appear like so...
| Home | Blog | About | Contact |
I'd like it to center so something like...
| Home | Blog | About | Contact |
Here's my CSS, what would I need to change?
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
To center your menu, give your menu a width and use:
maring:0 auto;
The final result is something like this:
<!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>
<title>Untitled Page</title>
<style>
.menu
{
width:270px;
margin:0 auto;
}
ul#menu
{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 30px;
font-size: 12px;
font-weight: bold;
background: transparent url(images/nav_bg.png) repeat-x top left;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
ul#menu li
{
display: block;
float: left;
margin: 0;
padding: 0;
width:60px;
text-align:center;
}
ul#menu li.divider
{
width:5px;
}
ul#menu li a
{
display: block;
float: left;
color: #999999;
text-decoration: none;
font-weight: bold;
padding: 8px 20px 0 20px;
}
ul#menu li a:hover
{
color: #FFFFFF;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display: inline;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="menu">
<ul id="menu">
<li class="divider">|</li>
<li>Home</li>
<li class="divider">|</li>
<li>Blog </li>
<li class="divider">|</li>
<li>About </li>
<li class="divider">|</li>
<li>Contact</li>
<li class="divider">|</li>
</ul>
</div>
</body>
</html>
Update:
If you didn't want to use pipes in the divider, you could always use:
ul#menu li.divider
{
width:2px;
background-color:Black;
}
instead which will give a similar look and make screen readers not blow up at you.
I think you're looking for something like this: http://jsfiddle.net/sp45g/
div { // Container around the UL
text-align: center;
background-color: blue;
}
ul { // Inline block to shrink-wrap to contents
display: inline-block;
background-color: red;
}
li { // Inline to display in a row
display: inline;
}
I cleaned it up a little bit...
ul#menu{
margin:0;
padding:0;
list-style-type:none;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a{
color:#999999;
text-decoration:none;
padding:8px 20px 0 20px;
height:22px;
background:transparent url(images/nav_bg.png) repeat-x top left;
}
ul#menu li a:hover, ul#menu li a.current{
color:#FFFFFF;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
add a wrapper around the ul:
<div id="wrapper">
<ul id="menu">
<li><a>link</a></li> |
<li><a>link</a></li> |
...
</ul>
</div>
and add folling:
#wrapper{
width:100%;
}
ul#menu{
margin:0 auto;
}
I didn't test it, so maybe u have to change some values...