I have a simple menu and I want to place it in the center of the page using css.
Here's the menu: http://jsfiddle.net/kSV4K/4/
Here's the Codes,
CSS:
ul#menu { margin:0; padding:0; list-style-type:none; }
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 0px; padding-right: 0px; padding-bottom: 5px;}
ul#menu .current { border-bottom:4px solid #3d496a;}
ul#menu li:hover { border-bottom:4px solid #3d496a;}
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#menu li a:hover { color:#8895b8; border:none; }
HTML:
<ul id="menu">
<li class="current">Description</li>
<li>Shipping and payment</li>
<li>Returns</li>
<li>Feedback</li>
</ul>
Any suggestions?
Instead of floats, use inline-blocks on the li elements, and then they can be centered applying text-align: center on the ul block.
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
display: inline-block;
border-bottom:4px solid #efefef;
margin-right: 15px;
padding-right: 20px;
padding-bottom: 5px;
}
See fiddle: http://jsfiddle.net/audetwebdesign/kSV4K/3/
You can also add some width to the menu and apply margin: 0 auto; to center it here is the fiddle http://jsfiddle.net/xtatanx/swT4F/ I also recommend your menu be contained inside a <nav> tag or a <div>.
Related
Relatively new to CSS, so please bear with my inexperience. I'm trying to create a menu, and after much searching and comparison and reading and copying, I've mostly come up with the format I want. The problem is that I want my menu to be the width of its content, not full width, and the code below (adapted from various examples) yields a full width menu. I've played around with things, but can't seem to identify what makes it full width or not -- it may be that what I want requires a more substantial rewrite.
In case it helps, what I want is a horizontal menu with an outer rectangular border, with width determined by its contents, not automatically full width (or even, not automatically a specified width).
This is my first time posting a question here, so thanks in advance for your help and patience!
<style type="text/css">
*/#menu ul,#menu li,#menu a{
list-style:none;
margin:0;
padding:0;
border:0;
font-family: Arial}
#menu{
border:1px solid #000000;
border-radius:5px}
#menu ul{
background:#ffffff;
padding:5px 10px;
border-radius:5px}
#menu ul:before{
content:'';
display:block}
#menu ul:after{
content:'';
display:block;
clear:both}
#menu li{
float:left;
margin:0px 0px 0px 0px;
border:0px}
#menu li a{
border-radius:5px;
padding:5px 10px 5px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
border:0px;
font-size:15px}
</style>
<div id="menu">
<ul>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
</div>
ul are block level elements are so are 100% wide by default.
Make the ul display as inline-block and it will collapse to the width of it's contents.
Add text-align to the parent as required. Here I used center.
#menu ul,
#menu li,
#menu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-family: Arial
}
#menu {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
#menu ul {
display: inline-block;
background: lightblue;
padding: 5px 10px;
border-radius: 5px
}
#menu ul:before {
content: '';
display: block
}
#menu ul:after {
content: '';
display: block;
clear: both
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
border: 0px
}
#menu li a {
border-radius: 5px;
padding: 5px 10px 5px;
display: block;
text-decoration: none;
text-align: center;
color: #000000;
border: 0px;
font-size: 15px
}
<div id="menu">
<ul>
<li><span>Link1</span>
</li>
<li><span>Link2</span>
</li>
<li><span>Link3</span>
</li>
<li><span>Link4</span>
</li>
</ul>
</div>
I am trying to center my menu which contains the ul menu.
The menu is float to the left and I can't seem to center the menu to the middle of the screen.
HTML
<section>
<nav>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
<li><a href='#'>item5</a></li>
</ul>
</nav>
</section>
CSS
nav ul{
display: inline-block;
background-color: red;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
//the and margin text align doesn't seem to work...
section {
text-align:center;
margin:0 auto;
}
Can anyone help me about it? Thanks a lot!
As pointed out by xec, the problem seems to be with the invalid comment syntax. The correct syntax for comments in CSS is /*Comment Here */. When the comment syntax is corrected, your code does center the menu.
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
Demo
You're not styling the nav. The nav inside the section is a block, and therefore it will be the full width of its container, whether you give the container margin:0 auto or not.
Solution: give the nav the same style as the section. Or, remove the section altogether, since it is not necessary here.
If you don't particularly care about IE 7 and under (which have only partial support for inline-block - see http://caniuse.com/inline-block), this works, and has the advantage of making the links easier to hit: http://jsfiddle.net/V97tR/1/
nav
{
text-align:center;
}
nav ul{
display: block;
background-color: red;
}
nav ul li{
display:inline-block;
list-style: none;
font:bold .6em arial;
margin: .3em;
background-color: #A8A8A8;
}
nav ul li a
{
display:block;
padding: 1.3em;
}
Like this
DEMO
CSS
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
You can use flex-box:
section {
text-align:center;
margin:0 auto;
display: flex;
}
Here's a fiddle: http://jsfiddle.net/2c8LB/
Try this:
JSFiddle
#wrapper {
float:left;
width:100%;
background:#fff;
overflow:hidden;
position:relative;
}
nav ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
nav ul li {
list-style: none;
font:bold .6em arial;
float: left;
background-color: red;
display:block;
list-style:none;
margin:0;
padding:5px;
position:relative;
right:50%;
}
nav ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
I´m building a vertical menu in CSS, but I can´t get the a:hover to work, it´s just doing nothing. I´ve been searching and reviewing the code (I´m new to CSS), but can´t figure it out...if anyone has any suggestions, much appreciated :)
Here´s CSS:
.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;
}
.main_menu ul {
padding: 0px;
margin:0px;
list-style-type: none;
}
.main_menu ul li {
padding-right: 25px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:4px;
text-align:right;
line-height:35px;
list-style-type:none;
}
.main_menu ul li a {
text-decoration:none;
color:#999;
}
.main_menu ul li a:hover {
text-decoration:none;
color:#999;
font-weight:bold;
background:url(images/circle_grey.gif) right center no-repeat;
padding-right: 25px;
float:right;
}
.main_menu ul li a.selected {
background: url(images/circle.gif) right center no-repeat;
padding-right: 25px;
float:right;
color: #bc4c9b;
font-weight:bold;
}
HTML:
<div class="menu_container">
<div class="main_menu">
<ul>
<li>HOME</li>
<li><a href="quienes_somos.html" class="selected" >QUIÉNES SOMOS</a></li>
<li>Consultoría</li>
<li>Capacitación</li>
<li>Académico / ARTÍCULOS</li>
<li>Alianzas</li>
<li>Proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
The menu was being floated to the left on hover and also on the .selected class and that was what was causing the problem. Here are the fixed classes with the float properties removed:
.main_menu ul li a:hover {
text-decoration:none;
color:#999;
font-weight:bold;
background:url(images/circle_grey.gif) right center no-repeat;
padding-right: 25px;
}
.main_menu ul li a.selected {
background: url(images/circle.gif) right center no-repeat;
padding-right: 25px;
color: #bc4c9b;
font-weight:bold;
}
I created sub menus on a website but when I mouse over the parent link, the sub menus are displayed horizontally instead of vertically. They work fine in Chrome and Firefox.
Here's the HTML code for the menu
<div class="suckertreemenu">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li> Overview</li>
<li> What do we deliver? </li>
<li> Our People
<ul>
<li> Management</li>
<li> Consultants</li>
</ul>
</li>
<li>What is it like working with us?</li>
</ul>
</li>
<li>Solutions
<ul>
<li>Business Model
<ul>
<li>Business Consulting</li>
<li>Technology Consulting</li>
<li> Managed Services Consulting</li>
</ul>
</li>
<li>Modus Operandi</li>
</ul>
</li>
<li>Industries</li>
<li>Alliances</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
Here's my CSS code below.
#charset "utf-8";
/* CSS Document */
Body{
margin:0;
padding:0;
background-color:#DCDCDC;
color:#000;
font-family: Arial, Helvetica, sans-serif;
/*font-size:12px;*/
}
.bodytext{
font-size:12px;
}
H1{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#000000;
background-image:url(../images/welc_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
P{
font-size:12px;
}
h3{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#000000;
border-bottom:#FF0000 solid 1px;
padding:5px 5px 5px 5px;
}
.btext{
font-size:12px;
}
H2 a:link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:active{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color: #FF0000;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
.ik img {
background: #ebebeb;
border: solid 1px #d1d1d1;
padding: 5px;
}
#nav{
background-image: url(../images_v2/bg_grad_02.gif);
}
li{
list-style-image: url(../images/bullet2.gif);
font-size:12px;
list-height:30px;
}
.ContactUS
{
color: #FFF;
}
.footer
{
font-size:11px;
color: #000;
}
.businessText {
font-size: 12px;font-size:12px;
color: #FFF;
font-weight:bold
}
.searchText {
font-size: 12px;
color: grey;
}
.partners {
text-align: center;
color:#000;
font-size: 12px;
}
.Block_Headers {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #D9D9D9;
}
.searchBox{
background:url(../images_v2/tboxfill.gif)
}
.suckertreemenu ul{
margin: 0;
padding: 2px 0 0 0;
float: left;
font: 14px Arial;
text-align:left;
height:29px;
z-index:100;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
/*background-color: #F3F3F3;*/ /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
background:url(../images_v2/navsplit.gif) no-repeat scroll right center transparent;/*Place right border image here*/
font: 14px Arial;
}
.suckertreemenu ul li a:link{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
}
.suckertreemenu ul li a:visited{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
}
.suckertreemenu ul li a:active{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid white;
background-color: #BD0021;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
font: normal 13px Arial;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
list-style:none;
float: left;
top: 14px;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: -16px;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 10px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
border-left: 1px solid ;
background:none;
}
.suckertreemenu ul li ul li a:link{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:visited{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:active{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:hover{
background-color: #BD0021;
color: white;
border-bottom: none;
/*font-weight:normal;*/
}
#current{
border-bottom:#AA0B34 solid 3px;
color: white;
}
.suckertreemenu ul li a:hover{
color: red;
}
.suckertreemenu ul li a:active{
border-bottom:#BD0021 solid 3px;
color: white;
/*font-weight:normal;*/
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #31458C url(../images_v2/arrow-right.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* Holly Hack for IE \*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; }
* html .suckertreemenu ul li ul li a { height: 1%; }
/* End */
/* End */
Sir,
You are setting the ul's visibility to hidden but you're not changing its state back to visible on hover, that is why you never see your sub menus.
Put in the following CSS:
.suckertreemenu ul li:hover ul {
visibility: visible;
}
Also, your sub-items display horizontally because they are set to float: left in your CSS.
.suckertreemenu ul li ul li {
list-style:none;
float: left; <------ reset this style!
top: 14px;
}
I hope that helps
I managed to solve it by adding clear:left atrribute to .suckertreemenu ul li ul li property
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
list-style:none;
float: left;
top: 14px;
**clear:left;**
}