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.
Related
I want my dropdown menus to be no more than 250px wide, and the text to wrap to the next line. I set a max-width but they are not expanding.
http://jsfiddle.net/wtpvejjh/1/
<nav>
<ul>
<li>First
<ul>
<li>I want this to wrap to the next line at 250px</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
<li>Second
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
<li>Third
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
</nav>
To restrict the specific LI (as per OP's original question):
Set the nav ul {width:250px} and clear the floated li's. They'll then sit below eachother and will only be as wide as their content up until they are as wide as the parent (250px) and are forced to wrap.
nav li {
list-style: none;
float:left;
position: relative;
padding: 10px;
background: #eee;
}
nav li a {
display:inline-block; /* Make these inline or inline block so their width is collapsed. */
}
nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
width: 250px; /* Set width. This will 'contain' the children. */
}
nav li ul li {
clear:both; /* Clear these so they stack. */
}
nav li ul li a {
padding: 5px;
color: red;
text-decoration: none;
}
li:hover ul {
display: block;
}
<nav>
<ul>
<li>First
<ul>
<li>I want this to wrap to the next line at 250px</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
<li>Second
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
<li>Third
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
</nav>
To restrict the child UL to a max-width (as per OP's comment):
It feels a bit 'hacky' and your mileage may vary but the following works for me...
Use inline-block rather than floating the parent li's. Set the child ul to the desired max width and present the child lis as table-rows. This should mean that the 'table-row' will be collapsed and held open by the content up until it reaches its parent's bounds - at which point the content will wrap.
nav {
font-size:0; /* set font size to avoid the natural margin that exists between inline-block elements */
}
nav li {
font-size:16px; /* undo font size change to avoid the natural margin that exists between inline-block elements */
list-style: none;
display:inline-block; /* display inline (rather than float) */
position: relative;
background: #eee;
padding: 10px;
}
nav li:hover {
background: #ddd;
}
nav li a {
display:block;
}
nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
width:250px; /* fix at your desired max width */
}
nav li ul li {
display:table-row; /* display like a table-row */
}
nav li ul li a {
padding: 10px;
color: red;
text-decoration: none;
}
li:hover ul {
display: block;
}
<nav>
<ul>
<li>First
<ul>
<li>I want this to wrap to the next line at 250px</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
<li>Second
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
<li>Third
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
</nav>
Update (as per OP's comment regarding the need for a box-shadow)
Assuming you're able to edit the HTML, you'll need to wrap the child ULs in an extra element.
See: http://jsfiddle.net/wtpvejjh/49/
FIDDLE HERE http://jsfiddle.net/wtpvejjh/30/
.Check this i just played around with your bit of code and the solution was easy , actually you need to give max width to the nav li ul li not the nav li ul as you did.
NOTE - Sometimes when you give max width and if a single word occupies greater width than the word comes out of the item, therefore use word-wrap:break-word; it will break the word and make it adjust the width.
Simply, you just need to add the width property of your second level li to your css as follows:
nav ul li ul li{
width: 250px;
}
Checkout this DEMO
for a smooth look pseudo-elements are the answer
Giving the nav ul a fixed width and clearing it's elements float is correct.
Furthermore using :before and :after pseudo elements you'll give visual width coherency to the nav li ul li elements,
check out the fiddle.
I am working on our company website and I'm very new to HTML and CSS. I am trying to make a drop down menu for the Nav bar and I have the gist of it, but it needs some help. The dropdowns are not lining up properly, the text is too large, and the border I have is spanning the entire length of the lists.
CSS:
.menu{
padding:0;
margin:25px 0 0 0;
}
.menu, .menu li{
list-style: none;
display: block;
float:right;
padding:12px;
border-right: 1px solid #d8d8d8;
}
.menu li{
float:left;
display: block;
width: 100px;
}
.menu ul{
opacity: 0;
}
.menu ul li{
background-color: white;
}
.menu li:hover > ul{
opacity: 1;
}
.menu li.last-menu-item{
border: none;
padding-right:0;
}
.menu a{
color:#132d3c;
font-size:15px;
font-family: 'sansationbold';
text-transform: uppercase;
text-decoration: none;
font-weight:lighter;
}
.current-menu-item a{
color:#f15c22;
}
.menu a:hover{
color:#f15c22;
}
HTML:
<ul class="menu alignright">
<li class="current-menu-item">Home</li>
<li>About
<ul>
<li>Who We Ar</li>
<li>Values</li>
<li>Owners Message</li>
<li>Infotek Blog</li>
<li>Success Stories</li>
<li>Partners</li>
</ul>
</li>
<li>Products & Solutions
<ul>
<li>Security Solutions</li>
<li>Data Solutions</li>
<li>Communication Solutions</li>
<li>Connectivity Solutions</li>
<li>Infrastructure Solutions</li>
<li>Resources</li>
</ul>
</li>
<li class="last-menu-item">Contact</li>
</ul>
Can I get a little help?
http://jsfiddle.net/pQhpu/191/
Hi in this you're making some mistakes.
Don't use opacity for hide the submenus, set it with the property display:none
Set with position:relative your li and the ul inside them with position:absolute
View this demo an make any question http://jsfiddle.net/pQhpu/214/
EDIT
To resolve your request of centering the submenus in relation with his parent you can use Jquery.
I created this function for you: Review the demo here http://jsfiddle.net/pQhpu/264/
$(document).ready (function () {
$('.menu li').mouseenter(function (){
var $this = $(this),
$sub =$(this).children('ul'),
pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
move=($this.width()+pad-$sub.width())/2;
$sub.css ('left',move+'px');
});
})
All you have to change here is the name route of your li that displays the submenu; in my case is '.menu li' . This function takes the width of the submenu and his parent and make an operation to make it centered.
For the borders, put them on the a instead of the actual li. And put your padding on the a as well to push the borders to the right. You usually have to add a class like '.last' to the last item if you don't want a floating border off to the right. Will have to make the widths larger to accommodate all the text on one line, or reduce the overall size. That should get you started.
First off, your design is horrible. I think you probably copied it from somewhere, but there are so many cross-over/overlaying elements. Define each different part(menu options, drop down options, etc.) seperately, rather than applying things to all lis and what not.
Here is a fix for the width. I made the divs larger. It was pretty hard. Next you'd have to define a class for all drop down items, and then make their font-size smaller, and apply the same width as menu items so they aren't slightly larger than the menu items.
http://jsfiddle.net/pQhpu/200/
To correct the alignment issues add:
.menu, .menu li
{
padding: 12px 0 12px 0;
}
This is shown in firebug but not in your code above
.menu, .menu li
{
padding: 12px;
}
To prevent the border from spanning the entire length of the list, use the display property instead changing the opacity.
.menu ul{
display: none;
}
.menu li:hover > ul{
display: inline;
}
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 am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.
I had in my mind that it would not be hard to add an anchor tag that, when hovered or clicked, would cause a CSS flyout with more links in it to appear.
As it is now, a set of normal anchor tags are inside of a span which is inside of an li. I want to add this hover flyout link to be in the same location, the same as one of the links but instead of being a normal link, do the flyout. I found all kinds of code online but none of it seems to work in this location:
<li>
Introduction to Something
<span>
<a target="_blank" href="http://http...file.html">Watch Slideshow</a>
View File
<a target="_blank" href="http://file....pdf">Print</a>
FLY OUT MENU ITEM
</span>
</li>
I've posted a demo, that's not hugely different to #jeffkee's answer, over at jsbin, to show how deep it's possible to go with flyout menus and how simple they can be.
The (x)html is copied below (with notes):
<ul>
<li>home</li>
<li>products
<ul>
<li>CPUs
<ul>
<li><a href="#">AMD<a>
<ul>
<li>AM2</li>
<li>AM3</li>
</ul>
</li>
<li>Intel</li>
</ul>
</li>
<li>Motherboards</li>
<li>PSUs</li>
<li>Hard drives
<ul>
<li>HDD</li>
<li>SSD</li>
</ul>
</li>
</ul>
</li>
<li>Tracking</li>
</ul>
The CSS is as below:
ul {list-style-type: none; width: 8em; border: 1px solid #000; padding: 0;}
/* just to set the base-line for the ul, but note the width. It's important. */
ul li {position: relative; border-top: 1px solid #000; margin: 0; padding: 0; }
/* the position: relative is used to allow its child elements to be absolutely positioned */
ul li:first-child {border-top: 0 none transparent; }
/* to avoid a two-pixel border on the first li (1px li-border + 1px ul-border) */
ul li:hover {background-color: #f90; }
/* just to aid visually */
ul ul {position: absolute; top: -1px; left: 8em; display: none; }
/* sets up all ul elements beneath the parent ul, the -px is to counter the movement forced by the border, bear in mind that the li:first-child doesn't *have* a border, so adjust to taste */
ul > li:hover > ul {display: block; }
/* makes the nested list appear if the parent-li is hovered */
I don't really see how the fly out is structured. Flyouts are generally set within a link so that when the mother link is hovered, the child shows up..
Check out the most recent flyout menu I did on http://www.feelfabulous.ca/oldindex.php and break down the HTML/CSS. You can do it without any javascript etc. Here's hte HTML structure I have (simplified):
<ul id="menu">
<li>Home</li>
<li>About
<div class="submenu_container">
<ul>
<li>our story</li>
<li>meet our team</li>
<!--<li>press</li>-->
</ul>
</div>
</li>
<li>Spa Menu</li>
<li>Party Packages</li>
<li>Beauty Kits</li>
<li>Goody Bags</li>
</ul>
So .submenu_container is set to display:none, and then #menu li:hover .submenu_container is set to display:block. that's the basic idea of a flyout tyep fo menu. And of course the .submenu_container is absolute positioned so it doesn't affect the shape and form of the page when it pops up.