I'm building with grids for the first time and wanted to stretch the bootstrap nav element to so that the links are wider. I can't quite recreate it in the fiddle exactly:
http://jsfiddle.net/yjyTq/
Basically I want to the nav elements to be a bit larger and the entire nav area to fill the 6 columns specified, but when I over-ride the bootstrap code the nav li elements won't stack up when the browser is narrowed.
.nav{
width:100%;
}
.nav-pills>li{
width:23%;
font-size:1.1em;
}
Any ideas how I can achieve this without breaking everything?
TIA
You can always add padding-left and padding-right to your nav li a elements to increase the size of the li
So this:
.nav-pills>li>a {
text-align:center;
padding-left: 50px;
padding-right: 50px;
}
looks like this: http://jsfiddle.net/yjyTq/1/
Related
I have a problem displaying a portfolio on my site. I would like to display more than 3 in row, like here.
Is there any easy CSS command to change it?
Yes there is.
Simply change the width of the li elements to something smaller or equal to 25%.
.home-section ul li {
float: left;
margin-right: 5.63%;
width: 20%; /*changed this value*/
I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
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;
}
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