You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/
I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.
Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.
Is this possible? Thanks for any help.
I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.
Example
CSS
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
jsFiddle.
jsFiddle with one more li, you'll notice the CSS is constant :P
Related
I've try to create 2 colums list so I use:
ul {
overflow: hidden;
}
ul li {
float: left;
width: 50%;
}
but when I have 2 items that one on the right have list bullet and the one on the left don't. Why is that?
PS: is there a way to have 2 columns list without using :before with content: "•"
The left ones are still having a bullets but you can't see it because of the float: left;. I think if you remove it, the problem will dissapear, specially if before that you have a reset margin: 0; padding: 0; for all the elements in the current html page.
I had the same problem and neither overflow:hidden nor display: inline-block worked for me.
So I cheated using the unicode number for 'bullet' before all items in my list: •
It's far from elegant, but does the trick in desperate situations.
I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
Going to be quite difficult to explain this so I've created a JS-Fiddle so you guys can see what I mean...
If you look under the 'products' tab the second link in the list I've made quite long, the result is that it overflows out the boundaries of the list. How can I make this that if a link is very long, that the width of the containing ul stretches to contain the link?
Again having a look at the JSfiddle will make things more clear in what's happening and what needs to be done.
PS - Need to get it to work without editing the HTML at all!
//Ignore this
Just remove the fixed width of your list:
ul li {
display: block;
position: relative;
float: left;
width: 140px; // <-- Remove this
height: 25px;
}
It will make your default width for your list become auto and you're done.
Demo: http://jsfiddle.net/Kpxpf/5/
Just change the width:140px; to min-width:140px; in ul li
Demo :
http://jsfiddle.net/Kpxpf/6/
You're constraining the width of your <li>s from the style on the top-level menu. This will keep your intended width: 140px; on the top-level menu and allow the sub menu to size based on its content.
jsFiddle
ul#menu li ul li {
width:auto;
}
You are setting a fixed width on the nested lists.
Change the ul li styles to:
#menu > li {
display: block;
position: relative;
float: left;
width: 140px;
height: 25px;
}
This will remove the fixed width from the nested uls allowing them to take as much space as needed.
jsFiddle
I'm trying to create a horizontal menu for my webisite. It's not that difficult, but I'm running into two problems, which brake my design.
I can do it in two ways:
1). by setting
#menu li {
display: inline-block;
}
like I did here: http://jsfiddle.net/l0ner/HPpgG/.
It works and looks like I want but there is a white space between each element, which breaks the design. I could remove the space by putting all list elements in one line, but it's not exactly an elegant solution.
I know I could set the <ul> font size to 0, and then restore it in <li> but it feels too much like a dirty hack to me, and I'd like to keep the css 'magic' minimal.
How do I remove those spaces?
2). by setting
#menu li {
display: block;
float: left;
}
Like I did here: http://jsfiddle.net/l0ner/HPpgG/1/
But like this the <div> container collapses and I loose the white background for the menu, which makes whole thing unreadable.
How I can make the container uncollpased?
Here is the working jsfiddle
#menu ul {
margin: 0;
padding: 0;
overflow:auto;
}
#menu li {
float: left;
list-style:none;
}
You need to set the overflow of the ul to auto or hidden
For your first example, the white space in between the li elements is literally caused by white space in your HTML - the line breaks in between your </li> and <li> tags. If you remove this, the white space will go away.
Alternatively, for your second example, you can stretch the parent element to 'clear' the floated elements. There are a couple of ways to do this (google 'clearfix' for a few examples), but the easiest way would be to use overflow: hidden on the parent element.
Just make the 'overflow' of your <div> hidden.
#menu {
background: #fff;
color: #000;
overflow:hidden;
}
Fiddled here
You can use a pseudo-element to do a clearfix on the <ul> without additional markup
jsFiddle
#menu ul:after {
clear:both;
content:"";
display:block;
}
this is the layout I'm working with. what I'm trying to achieve is that as the window is collapsed I want the div on the right to collapse allowing the inner elements to be pushed down.
my css is as follows:
#left-div {
display: block;
float: left;
}
#right-div {
display: block;
float: left;
}
#right-div elements {
display: inline-block;
}
I basically want to achieve what's going on in the last photo without the right div getting moved down first. any ideas?
Edited to remove pictures as I've come to an answer and I'm not sure if I was supposed to post them.
After taking various stabs at it, appears that JavaScript/jQuery may be your only solution...