I have a <ul> list on my website that contains some sub menus. It is structured in this way:
<div id="cssmenu">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>RNG</span></a>
<ul>
<li><a href='#'><span>menu 1</span></a></li>
<li><a href='#'><span>menu 1</span></a></li>
<li class='last'><a href='#'><span>menu 1</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Altro</span></a>
<ul>
<li><a href='#'><span>kldajofa</span></a></li>
<li class='last'><a href='#'><span>Altro12</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
I have 4 <li> as you can see and I'd like to see them center-aligned with the width of the screen, but I don't know how to do it.
You can see a fiddle here that contains the CSS too. How can center align the names I have on my menu?
Assuming there are only 4 li - as in the example, set width:25%.
Working jsFiddle here
#cssmenu li {
float: left;
padding: 0px;
width: 25%;
}
I made a minor update so that the sub-nav menu items are also 25%..
jsFiddle here
There were set to width:225px;.
#cssmenu li ul {
width: 25%;
}
Considering you have only 4 menu items, you just need to add :
#cssmenu > ul > li { width:25%; }
This will set the width of the list items to 25%. And since the a are set to be displayed as blocks, they will fit the whole width of the li.
Note that we are using the direct child selector > because we don't want this effect to be applied to the menu lis inside the sub-menu. We only need that effect on the root level.
Other possible solution is to use flexbox which isn't well supported yet and cannot be used without polyfill.
If the li are display:inline-block you can apply text-align:center to the ul and the list items will center regardless of the number (provided there is room on the line).
The good news is that there are no clearing issues.
JSFiddle
I've just added width to li and it works now.
Check JsFiddle
#cssmenu li a {
background: #0D0D0D bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
width:70px;
}
Related
I'm doing some practice with layout using css, and I've come across a weird thing that I don't know how to explain. Where does the space highlighted in red in the following image come from, and how do I eliminate it?
HTML:
<body>
<div class="menu-bar">
<ul>
<li>
Home
<ul>
<li>Beach House</li>
<li>Ski Cabin</li>
<li>Country Cottage</li>
</ul>
</li>
<li>
News
<ul>
<li>World News</li>
<li>National News</li>
<li>Local News</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Email Address</li>
<li>Phone Number</li>
<li>Postal Address</li>
</ul>
</li>
<li>
About
<ul>
<li>About Me</li>
<li>About You</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
body {background: #77c4d3; padding:1%; }
div.menu-bar{position: relative; max-width: 700px;}
/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;}
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}
/*Menu-specific styles: */
div.menu-bar > ul {width: 100%;}
div.menu-bar > ul > li {width:20%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px;}
/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}
/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul {
display: none;
}
/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
display: block;
position: absolute;
}
That comes from the wrapping <ul> below <div class="menu-bar">. It's width is set to 100% in your css where you say:
div.menu-bar > ul {
width: 100%;
}
Since the buttons don't fully take up the space in that <ul> there is some extra grey space. If you add a text-align: center; to that style, it will nicely center your buttons, as so:
div.menu-bar > ul {
width: 100%;
text-align: center;
}
Or check out my JSFiddle for this.
There are a couple of things going on here to be aware of.
1.) You have space in your code, between your top-most <li>'s. This is a funky issue with whitespace. CSS-Tricks has a great summary of the issue. Essentially, you have to put your closing </li> tag back-to-back with the next opening <li> tag, to get rid of those tiny gaps.
2.) Secondly, your width is set to 20%. You can bump this up to even quarters, at 25%...although you'll notice that this pushes the last of your <li>s down a line. This is because...
3.) There is a 10px padding on div.menu-bar li which applies 10px of padding to the left, right, top and bottom. Your div.menu-bar > ul > li rules specify a top and bottom padding, but the left and right are left the same. My personal approach for this?
4.) Use box-sizing. By setting this CSS property to border-box, your padding is included in the width of your elements. In other words, you can set the following CSS:
div.menu-bar > ul > li {
width: 25%;
margin: 0;
padding: 12px;
box-sizing: border-box;
}
...and you'll end up with a set of list items that have a) no funky, tiny space between them and b) are all on the same line.
Hope that helps!
Each nav item's width is dependent on it's text content. It has no knowledge of how wide it's parent is. Each nav item is just shoved as far left as it can go next to it's neighbor.
If you are looking to have the nav items fill the bar evenly, you will need to use a flex solution. See here for a complete explanation.
I have a menubar made of li elements, each floating left to have them side-by-side.
This works on on most brwsers but not on my customer's firefox (mac version 26)
the li are a bit larger making them overflow at the end of the line (10px together probably)
Any idea why? I have a css reset and margin and padding are set to a value.
this is html:
<ul id="menu">
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=projets-realisations">projets-realisations</a>
<ul class="subMenu">
<li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&page=projets-realisations-en-resume">En résumé</a></li>
<li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&page=projets-realisations-az">De A à Z</a></li>
</ul>
</li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=portes-parquets-escaliers">Portes-parquets-escaliers</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=cuisines-salles-de-bain">cuisines-salles de bain</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=decoration-tentures">decoration-tentures</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=de-ville-en-ville">de ville en ville</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=espace-animalier">espace animalier</a> </li>
</ul>
css:
.menuItem {float:left; cursor: default; position: relative; margin-left:4px; padding:0px; margin-right:0px;}
.menuItem:last-child {margin-right:-50px;}
.menuItemLink {line-height: 20px; color: #ffffff; text-transform: uppercase; font-size: 13px; padding-left:5px; padding-right: 5px; text-decoration: none;}
The margin-right -50 is just to mae sure the last elements doesn't goes on a new line...
Why is it miscalculated by his firefox? The strangest thing is I tried the same firefox version on a mac (different osversion) and don't have this issue.
You need to increase the right margin for menuItem
margin-right: 15px;
You can check the http://jsfiddle.net/raunakkathuria/vRns2/
If you don't need the list style add to .menu
list-style-type: none;
and display: inline-block to .menuItem then you don't have to play with margin
Tried all your suggestions, but didn't worked, after all replaced all paddings by combined margins, now everything is ok
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I'm having problems with my navigation bar, its not stretching across the page.
Here's the code:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display:
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #000000;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>Music
</li>
<li>Education
</li>
<li>Fun
</li>
<li>Entertainment
</li>
<li>Utilities
</li>
</ul>
</div>
It isn't exactly clear what you want here. If you're wanting the nav bar to continue across the page you need to add the background color to the parent div and make this div the same height as the ul list elements:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #000000;
height:40px;
}
I did a fiddle - http://jsfiddle.net/F6nMg/
Put the background color on the container of the navigation bar (the div). Then, apply a clearfix to the div because the contents are floated. You could probably also use display: inline-block, but you don't have to.
#nav {
background-color: #000000;
}
#nav:after {
content: "";
clear: both;
display: table;
}
http://jsfiddle.net/ExplosionPIlls/DY6Nb/
I understand your problem. this can be achieved by putting display:table on parent div and display:table-cell on all lis in navbar.Then all will behave like teable-cells and take width according to provided space. Read my article at: http://www.aurigait.com/blog/how-to-make-navigation-bar-stretch-across-the-page/
Or Look at the below structure for example:
<nav class="main-menu">
<ul>
<li>Small Link</li>
<li>Another Link</li>
<li>One Another Link</li>
<li class="sp-width">A long link with 40% of total width</li>
</ul>
</nav>
And CSS
ul, li{ list-style:none; margin:0; padding:0;}/*1.1*/
.main-menu ul{background-color:black;} /*1.2*/
.main-menu a{color:white; display:block; padding:5px; text-decoration:none;} /*1.2, 1.3*/
.main-menu a:hover{background -color:#333333; text-decoration:none; color:white;}/*1.2*/
.main-menu > ul{ display:table; width:100%;} /*2.1, 2.2*/
.main-menu > ul > li{ display:table-cell; border-right:1px solid #d4d4d4;} /*3.1, 3.2 */
.main-menu > ul > li:last-child{ border-right:none;}/*3.2*/
.main-menu > ul > li > a{ text-align:center;}/*2*/
.sp-width{ width:40%;}
Now lets add 3 more links in it, so HTML Structure will now:
<nav class="main-menu">
<ul>
<li>Small Link</li>
<li>Another Link</li>
<li>One Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
<li class="sp-width">A long link with 40% of total width</li>
</ul>
</nav>
So CSS changes:
.main-menu > ul > li{ display:table-cell; border-right:1px solid #d4d4d4; width:10%;} /*4*/
.sp-width{ width:40%!important;} /*5*/
Points to be noted:
1.1. Global Definition
1.2. Global Definition for Main menu all uls and links. (In case of Sub-menu it will be applied on that sub-menu also)
1.3. Using display:block, so it will cover entire area of li and whole li will be click-able.
2.
2.1. I am using ‘>’(Direct Child) here so if we define any sub-menu inside, this CSS will not work on that.
2.2. ‘Width’ property is necessary with ‘display:table’. Because default width of display:table is ‘Auto’ means as per the inside content.
3.
3.1.Display:table-cell, divides the total width / remaining width(the un-divided width. In our case it is 100%-40%=60%) equally. It always need display:table on its parent container.
3.2. I am using border-right for showing links separately and removing extra border on last-child in the next line.
4. How width is distributed, if we define it explicitly:
4.1. If width is more than the average width(100% / No. of links) then it will give that width to first link and then from remaining if possible then to second link and then rest to other link and if no width left then to rest of the links as per content (with text wrapping as default) and remaining width in proportion as we provided. Example: we have 4 links and we define 50% width for each. So it will assign 3rd and 4th link as per the content and to 2nd and 1st link remaining width’s 50 %.
4.2. If width is less than the average width, it will distribute the width equally in all links.
4.3. If one link is having some specific width and we want all other links with a particular width (Our Case), It will provide the given width to that link(s) and then remaining width will be divided equally to all links including the specific width link.
5. We provide ‘!important’ here because of ‘order of precedence’. The hierarchical definitions have more weight than the class definitions. And ‘!important’ provides supreme power to class definition so it will be applied. I will discuss on Order of Precedence in my later blog.
Make sure in your HTML code, the list elements are under a separate container element, Assign background color to this new container.
For e.g.
.container-nav {
background: #ff3300;
}
<header class="container">
<h1> Monthly Resolutions </h1>
<h2 class=header-h> Dreaming out loud. Take 30 days at a time</h2>
</header>
<div class="container-nav">
<nav class="container">
<ul>
<li>Home
</li>
<li>Archives
</li>
<li>About Me
</li>
</ul>
<div class="clear"></div>
</nav>
<!--nav-->
</div>
<!--container-nav-->
Use this if you want the nav bar to always appear on the top of the screen (Just like stackoverflow's navbar ;)
#nav {
overflow: hidden;
display: flex;
flex-direction: row;
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 100%;
}
you should use
#nav {
width:100%;
}
I'm a newbie to html and trying to figure it out through online tutorials. I have a menubar that goes horizontally across the top of the page. Right now I have the menubar in a div tag, and within the contents, I have
<nav>
<li>
<a id="l1" href="whatever.com/about/">About</a>
<a id="l2" href="whatever.com/content/">Content</a>
<a id="l3" href="whatever.com/history/">History</a>
<a id="l4" href="whatever.com/Team/">Team</a>
</li>
</nav>
I want to position the links and change the font, and I was under the impression that I would do so using a format along the lines of:
<style>
.l1
{
position:relative;
top:5px;
right:30px;
}
</style>
However, that does not seem to be working, and I can't find any helpful tutorials. Can anyone give me advice on how to appropriately format & style my links?
The dot notation you've used in CSS is for classes, not IDs, this should work:
<nav>
<ul>
<li><a class="l1" href="whatever.com/about/">About</a></li>
<li><a class="l2" href="whatever.com/content/">Content</a></li>
<li><a class="l3" href="whatever.com/history/">History</a></li>
<li><a class="l4" href="yabidu.com/Team/">Team</a></li>
</ul>
</nav>
ID's id="foo" on an element are accessed in CSS with #foo, also they supposed to be completely unique, therefore no element IDs on a page should be the same. Classes on the other hand class="bar" are allowed to be used multiple times and are access in CSS using .bar.
You've also used invalid syntax, <li> (list items) are always supposed to be directly inside either <ul> (unordered list) or <ol> (ordered list), I have fixed your markup for you as well.
Your HTML5 systax is wrong..
<nav>
<ul>
<li><a href="#">LINK<a></li>
.....
</ul>
</nav>
and to aceess the li element, use
nav ul li a {
font-size:20px;
font-weight:bold;
position:relative;
top:XX;
left:XX;
}
Solution 1:
HTML:
<nav>
About
Content
History
Team
</nav>
CSS:
nav a {
float: left;
padding: 0 20px;
}
DEMO 1
Solution 2:
HTML:
<nav>
<ul>
<li>
About
</li>
<li>
Content
</li>
<li>
History
</li>
<li>
Team
</li>
</ul>
</nav>
CSS:
nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
nav ul li {
float: left;
padding: 0 20px;
list-style: none;
}
DEMO 2
Element li not allowed as child of element nav in this context.
Contexts in which element li may be used:
inside ol elements.
inside ul elements.
inside menu elements
HTML:
<nav>
<ul>
<li>About</li>
<li>Content</li>
<li>History</li>
<li>Team</li>
</ul>
</nav>
Don't use id's for styling elements (Use only where it is necessary).
Use css selectors:
nav ul li a { ... }
or if you interested to style only childs a in li element:
nav li > a { ... }
For display li elements inline you must add next style
nav li {
display: inline-block;
*display: inline; // fix for ie7
}
or float:left instead display:inline-block;