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...
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 simple horizontal list menu that was working fine when I had a global (*) setting of padding: 0. For other reasons, I needed to take out that padding as a global setting, but I can't figure out how to make it apply to the list.
Now, each entry in the list has a blank block of maybe half an inch to the left of the first entry. If I can get rid of that, I'll be set. Here is a fiddle (http://jsfiddle.net/eha77way/), and I'll paste the code.
Thank you!
CSS
* {
border:0;
margin:0;
}
/* navigation */
#navigation, #episodenav, #pivotnav {
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
list-style:none;
}
#pivotnav {
background:#F0F0F0;
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
width:755px;
height:25px;
list-style:none;
}
#navigation {
background:#E0E0E0;
width:755px;
height:40px;
}
#episodenav {
width:756px;
background:#F0F0F0;
height:25px;
}
#pivotnav {
width:755px;
background:#F0F0F0;
height:25px;
}
#navigation li, #episodenav li, #pivotnav li {
border-left:1px solid #FFF;
float:left;
list-style:none;
}
#navigation li, #pivotnav li {
width:150px;
}
#episodenav li {
width:41px;
}
#navigation a, #episodenav a, #pivotnav a {
color:#000;
display:block;
text-align:center;
}
#navigation a {
line-height:40px;
}
#episodenav a, #pivotnav a {
line-height:25px;
}
/* content */
#content {
height:auto;
margin:50px auto;
position: relative;
padding:30px;
width:751px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
border-bottom:1px dashed #999;
font-size:2em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
font-size:1.6em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
font-size:1.1em;
padding:20px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
padding: 10px 5px;
line-height: 21px;
}
#content textarea {
border: 1px solid #cccccc;
}
#list {
margin-left: 50px;
}
HTML
<body>
<div id="content">
<div id="navigation">
<ul>
<li><i>Ulysses</i> by Episode</a></li>
<li>Pivot Points</a></li>
<li>Projects</a></li>
<li>Collections</a></li>
<li>About Ashplant</a></li>
</ul>
</div>
<h2>TEST</h2>
</div>
</body>
</html>
Is this what you mean?
#navigation ul{
padding: 0;
}
The padding is in the ul element, not the lis. This is a default of the browser, that is much needed when bullets are visible.
You can add a css rule-set such as:
#navigation ul {
padding: 0;
}
at least on my jsbin, this does the trick.
Maybe you want to remove padding-left without {padding-left:0px}?
Please use it
ul > li {position: relative; left: -20px;}
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 cannot put my menu in the center of the page, i've inserted all "margin: 0 auto;" i can and all "text-align: center", and the div is separated from everything, is not a child of something else..
here's the css code:
.more{
margin: 0 auto;
position:relative;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 40%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display: block;
padding: 10px 3px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
And here's the HTML code:
<div class="more">
<ul>
<li class="selected">Homepage Blog</li>
<li>Cerca</li>
<li>Archivio</li>
<li>Tags</li>
</ul>
</div>
How-to make the div permanently in the center of my page? I've tried lot, lot, lot of possible moves.
Thank you.
p.s. I've also tried to put a <div align=center> ...my menu (class=more) list ...</div>
Remember that you can't use margin:0 auto on floatted element.
Keys for margin 0 auto are:
1) element must have display:block
2) no float, absolute or fixed position
.more{
float:left;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 100%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
margin:0 auto;
}
.more ul li{
display: inline-block;
padding: 10px 3px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
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