I cant figure out why my list is not vertically aligned. I set ul and li to be 100% height of parent, but it seems to be only 100% of itself.
I dont want to use any margin or padding to make them vertically aligned. How can I force it to be 100% of parent so it would be vertically in the middle?
http://jsfiddle.net/qS5A6/
#nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 15px 20px;
line-height:90px; //add this
}
defining your height relative to the parten usually just works with elements that have position:absolute. The reason is, that the height of surrounding elements is usually determined by their children. If you make the childrens height relative to the parent you have an endless loop :)
So using this code would make your li have 100% height but the height of your #nav won't change anymore with increasing length of the ul.
http://jsfiddle.net/qS5A6/5/
Using display: table instead of your inline-block approach would keep that functionality
http://jsfiddle.net/qS5A6/6/
Maybe you can use table-cell for li:
#nav ul{
display: table;
height: 90px;
}
#nav li{
display: table-cell;
height: 100%;
vertical-align: middle;
}
this works fine for ie8+
if you use:
#nav li a{
line-height:90px;
}
there is some problem, you can't have more, than one line in the tag
Related
I'm having difficulty centering my navbar. I've tried replacing "block" with "inline-block" in certain areas that didn't lead to any success. I've also tried "text-align: center" as well but that's not working.
I tried "text-align: " left, right and center but it doesn't change at all anyway. Am I looking in the right spot?
Everything else is functioning as intended so I'm scared to touch anything.
Here's the jsfiddle.
#navbar ul li a, .dropdown-toggle {
color: white;
text-align: center; /*doesn't seem to do anything*/
padding: 14px 16px;
text-decoration: none;
display: inline-block;
}
The trick to centering elements with text-align: center is two-fold:
1. Declare display: block and text-align: center on the containing parent element
2. Declare display: inline-block on the nested children elements
You can center any inline-block element this way using text-align: center if the parent element is a block element.
What you will need to adjust your styles accordingly:
#navbar ul:not(.dropdown-menu) {
float: none;
display: block;
text-align: center;
}
#navbar ul:not(.dropdown-menu) > li {
display: inline-block;
float: none;
}
An important factor to consider anytime you need to align an element is to keep a look out for float rules, they will negate any attempt at aligning elements using display rules.
Fiddle Demonstration:
https://jsfiddle.net/kbuoL6sm/6/
Try margin: 0 auto; on the #navbar
Or, on the parent of the #navbar try text-align: center;
If it needs something more than that, css-tricks has a great guide here for centering just about every condition:
https://css-tricks.com/centering-css-complete-guide/
So I used the example given by by w3schools to create a div with a list in it.
http://jsfiddle.net/TBsx8/
#links li {
height: 32px;
width: 100%;
display: block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
is the relevant part.
You can see that everything works fine (I took a random twitter icon for all of them in this example)
Problem is, I want them inline. So, I change it to display: inline;. no problem, right? nope, it makes eveything disappear. inline-block does not do anything either. any solutions?
Edit: sorry, did not make this clear: I want the links horizontally.
inline-block works just fine. You've got your wrapper DIV fixed to 4em in height though. So it gets cutoff:
Fiddle with inline-block and fixed height commented out:
http://jsfiddle.net/TBsx8/2/
For horizontal layout set width of LIs: (width:100% causes the LI to consume all horizontal space available)
#links li {
height: 32px;
width: 32px; /* <<----- */
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
http://jsfiddle.net/TBsx8/8/
Add float:left and width:32px, this will work
You can set the width to 32px and display to inline-block and it should work. Right now you have the width at 100% which will fill in container.
the width of your li's should not be 100%, try an exact width.
code block using 20% width that works:
#links li {
height: 32px;
width: 20%;
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
As an adjunct to the calls for you to use display:inline-block;width:32px, it's worth saying that the reason for this is that you can't apply a width to any element that is displayed inline. Ever.
Alternatively you could use display:block;width:32px;float:left on the li, and overflow:hidden or a clearfix on the containing ul/ol/dl to prevent the margins from collapsing due to the floats
I have ul where li elements are floating left. I want to align those li elements to center of ul.
Goal:
======>>>
My try:
My try always result this
Jsbin:
http://jsbin.com/EGoVAg/19/edit
EDIT:
width of #wrapper is not fixed ! I use 320px just to show you result pictures !
Firstly, remove the float: left; from .widgetPhotoGallery li.photo. display: inline-block (which is already included) is all you need to correctly position the elements:
.widgetPhotoGallery li.photo{
background-color: blue;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
Then all you need to do is simply give your ul some padding (36px evens out both sides):
.widgetPhotoGallery .photogallery{
background-color: lime;
list-style: none;
padding:0 36px;
margin: 0 auto;
text-align: left;
}
Working JSBin demo.
On a side note, you don't need any of those !important declarations. The styling is identical without them. If you need to override existing styling you should look into CSS Specificity instead.
Your only option is to set a fixed width and do:
#wrapper {
display: block;
margin: 0 auto; /* center it */
width: XXX;
}
You can use media queries to set the fixed width at certain breakpoints, if you like, or you could use max-width instead of width
http://jsbin.com/EGoVAg/23/edit
You may not like this answer (judging by your large font, bolded comment about #wrapper not being a fixed width), but there is no other way to achieve what you want.
You have to set a fixed width to the ul. So in your example, each li has 118px of width and 2px of margin on each side. To fit two li's in a row set this to .widgetPhotoGallery .photogallery:
width: 244px;
Notice that the background will become smaller, so you can simply put it to .widgetPhotoGallery .widgetContent
.widgetPhotoGallery .widgetContent {
background-color: lime;
}
Here's the update JSbin.
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 have a div that contains two ul. I'd like to position the first ul on he right and the second ul on the center.
I cannot use absolute positioning since it makes me other problems in nested elements and in mobile view.
This is what I've done:
<div class="w">
<ul class="right"><li>a very very very long text</li></ul>
<ul class="center"><li>center</li></ul>
</div>
.w {
text-align: center;
display: inline-block;
width: 100%;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.right {
float: right;
}
.center {
display: inline-block;
}
you can see jsfiddle here: http://jsfiddle.net/mF7XR/
The problem is that the centered ul is aligned to the middle between the left and the start of the right ul (see the example). Therefore it is not correctly centered. How can I center correct the second ul?
I am not sure whether you are good to go with javascript. Anyway, I did some work on it. Please have a look.
javascript
//Added Id to ul.center as "center"
function resize(){
var width = document.body.offsetWidth;
var center = document.getElementById('center');
center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.
CSS
.center {
display: inline-block;
float:left;
}
Working Bin
Define the Width of centered elements then only you could get what you want. You could also define the margin as follows...
margin: 0 {number greater than right floated element}px 0 {number greater than left floated element here you have only two elements so place here 0}px;
How about position:relative? Then you can position it anywhere without it causing problems in nested elements and mobile view.
http://jsfiddle.net/mF7XR/4/
This solution uses no absolute positioning. Tested on Win/Chrome.
Change the .center to
.center {
display: inline-block;
position: relative;
width: 100%;
top: -20px; /* move up */
}
and add this rule
.center li {
float: none;
}
jsfiddle
Update
If your content is not known, then you need JS (or jQuery) to set the offset relative position.
Initially I thought about using a different markup, but your restriction on absolute positioning pretty much kills this idea.
jsfiddle
It would be interesting to know why you cannot use absolute position. Maybe the root of your problem lies there.