In this question, I am not going to ask "How" to horizontally center an unordered list, because there are about eleventy thousand resources already on the internet for that.
Instead, I'd liked to ask the "WHY" part of it.
More precisely, why do we do this
ul {
position:relative;
left:50%;
}
ul > li {
position:relative;
right: 50%;
}
instead of this:
ul {
position:relative;
left:25%;
}
When both seem to do the trick.
Any thoughts?
The reason is, because the first method centers the ul in every case - indepentend on how many child li it has.
The second solution places the ul 25% to the right which will work in a very special case, when the widht of the li is just right to occupy 50% of the total width but breaks in any other case.
using left on the parent and right on the child is a very common practice to center a child with dynamic dimensions(width) which is the case when dealing with dynamic content.
In some cases, text-align:center; works too, but fails when you have to use absolute positioning.
See an example fiddle here.
I am not using any of these solutions. Check this http://jsfiddle.net/yz7jF/ .
Write like this:
ul {
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
li{
float:left;
text-align:left;
}
.anyParent{
text-align:center;
}
Related
I found an issue with .sub_menu code left:-; and transform:translateX(-%);,So I changed position to relative and re-positioned with the two codes above, It seemed to work but now the two sub menus i have are no longer Side-By-Side. What they do is separate by a few centimeters top:, Not sure what made this happen, Any help would be appreciated,Thanks
JSFiddle sub menu pops up when you hover over Gallery
.sub_menu {
display: none;
position:relative;
top:-60%;
left:-350%;
transform:translateX(-40%);
width: auto;
}
.sub_menu > li {
display:inline-block;
}
.sub_menu li a {
background:-webkit-linear-gradient(#77047e,#FF00FF);
background:-o-linear-gradient(#77047e,#FF00FF);
background:-moz-linear-gradient(#77047e,#FF00FF);
background:linear-gradient(#77047e,#FF00FF);
}
.sub_menu li a:hover {
background:#FF00FF;
top:1em;
}
From what I understand at taking a quick look is the sub.menus are odd. They currently have the style position: absolute, and that would make them all align in the same exact place. As you can see you are doing that here:
.sub_menu {
display:none;
position:absolute;
top:-37%;
left:-47%;
transform:translateX(-20%);
width:auto;
white-space:nowrap;
}
So instead a fix would most likely be using position: relative, and then aligning them from there. Also when working with a sub menu, it would help to have an ID on each element to align it correctly (Especially when aligning them vertically and horizontally).
Is there any reason to use float:left instead of float:none in a list that I want to just have displayed normally? I ask because when I do float:left, the entire left nudges up a bit too much:
If I do float:none, it looks fine:
I'm curious if there is any other gotcha in using it though.
EDIT: Sorry, I've included an example here:
http://jsfiddle.net/remkrupe/
Note: if I change ul to be display:inline instead of inline-block, it also behaves the way I want (but this interferes with something else in my code). But the example above you'll see the elements in the "what_i_want" class all lined up next to each other, while the other ones "jump up" (while still lined up with respect to each other).
you can leave ul elements as display:block you just need to pay attention to resetting padding and margin property
.want
{
margin:0;
padding:0;
display:block
}
.want>ul, .want li{
margin:0; margin:0;
}
.want ul li{
float:left;
}
fiddle (in the fiddle check for want class)
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;
I'm trying to get li elements in a ul to have equal width, and fit on one line, with CSS, without knowing how many lis there are when the CSSis made (i.e. dynamically generated HTML).
W3Schools has a navigation bar example, but it's fixed-width, and if you add another li rather scaling to fit, the whole layout gets thrown off.
This is their example:
CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Ideally, I would be able to add another li and the menu would still display great.
Even thought I hate this solution... if you really need it to work with just HTML/CSS and auto-update width, a table would do the trick.
Otherwise I would recommend just having some simple JS updates the widths for you. If you are adding the extra options via JS it would be easy to toss this in.
EDIT: Actually, depending on your targeted browsers. You could use the display: table stuff but it is limited to IE8+.
DEMO
You will have to do this with javascript I guess...
you could use javascript to get the window width and the number of list items. If you have these you can assign a fixed width using javascript.