This question seems to be asked freqeuently over the internet but I still can't find a solution.
I have this navigation bar (It switches between tabs using jQuery) which displays inline. I'm showing a background image on these and to make them more definitive I need to make them wider and higher.
<div id="tabs">
<ul id="tabs-nav-cont">
<li class="tabs-navs">Nav 1</div></li>
<li class="tabs-navs">Nav 2</div></li>
<li class="tabs-navs">Nav 3</div></li>
<li class="tabs-navs">Nav 4</li>
</ul>
</div>
The only way I can seem to do this is by reverting them back to block elements. Which is not what I want because they display vertically. So I tried putting divs in the anchors so I can size them up. However they seem to change them back to block elements too.
Im confused. Someone please help :)
Luckily you live in the year 2009, where inline-block is widely adopted through browsers: Cross browser inline-block.
If it's just for the height (and all the content of the lis fits each on one line), you'd like to go with line-height: 123px, which sets the height of an inline box to 123px (per line, that is).
Or, quite common, if the navigation is left-aligned, float them:
#nav li {
display: block;
float: left;
}
Cheers,
Because it was not 2009 when i first had to solve this :) i got the solution for firefox with following css class:
.ib { display: -moz-inline-block; display: inline-block;}
This is my generic inline-block class that i use where necessary...
Sinan.
Related
Weird problem that <ol> list item number isn't aligned with its content. See live page or screenshots: 1, 2
See the line numbers of the ordered list isn't aligned with its content. They are all down below when the screen is wide and up in the air when the screen is narrow.
Thought it's something wrong with the CSS since both Chrome and Firefox render the list this way, but didn't find any weird styles at all in the stylesheets. Is this normal behavior of HTML5 <ol>? How can I make it the item numbers are aligned to the top line of its corresponding content, both wide and narrow screen?
This is because you have applied display:inline-block to the <a> tags. Just apply display:block to the <a> tags
Stack Snippet
a {
display: block;
margin-bottom: 10px;
}
<ol>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
</ol>
It has to do with the CSS rule for .links-4 a. It sets display: inline-block;. If you change it to display: inline, it'll be fine.
Pure css pure-menu-heading not aligning with items in Firefox? To see run this on Firefox,http://purecss.io/layouts/marketing/. 'YOUR SITE' pure-menu-heading is above the pure-menu-item items but aligns well in Chromium and Opera. Also class 'header' is not in
<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/marketing.css">?
Just add float: left to .pure-menu-heading. Like:
.pure-menu-heading {
float: left;
}
Hope this helps!
you need to float:left the "your site" (.home-menu .pure-menu-heading) that fixes it
the reason this happens in firefox (according to this answer Firefox unexpected line break using floats & overflow hidden - and also checked) is that firefox set default white-space to nowrap.
so setting the wrapper div .pure-menu.pure-menu-fixed to white-space:normal also fixes this issue and might actually be a better solution for you
change your HTML like below
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
<a class="pure-menu-heading" href="">Your Site</a>
</div>
put anchor tag after ul
When making tabs on a website, I always used an unordered list with inline-block list items. Why is this generally considered the correct way over something like a few divs with the same inline-block display setting?
.tabs li {
display: inline-block;
}
<ul class='tabs'>
<li>Tab one</li>
<li>Tab two</li>
...
</ul>
vs
.tabs > div {
display: inline-block;
}
<div class="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
...
</div>
I realize this question can be subjective, but I think there exists an objective answer.
Unstylized content:
When stripped of the CSS, the <ul> format will give the viewer a better understanding of the purpose of the elements.
That gives it more semantic meaning and is the perfect element for navbars and tabs..divs per se don't carry any semantic meaning with them..
semanticaly, ideologically, and when viewing as unstyled content, unordered list is more close to what you're trying to achieve than just bunch of divs.
With HTML5, this is even the only way you should go, because your list should be included inside a <nav> element. See documentation on MDN. So the answer is, for semantic. With a list, the items are linked to each other, which improves accessibility.
I want to put some space between some horizontally laid out list items, should I use or padding-left to separate them?
  example:
<ul class="menu">
<li class="menu_item">Option 1 </li>
<li class="menu_item">Option 2</li>
</ul>
padding-left example:
<ul class="menu">
<li class="menu_item">Option 1</li>
<li class="menu_item">Option 2</li>
</ul>
.menu li.menu_item { padding-left: 10px; }
Simple answer. Use padding-left it's easier to maintain, change and it's more customizable. As suggested above you might even want to use margin instead of padding this is usually necessary to separate items with a background-color.
I'll show an example just give me a second to make one.
Edit:
Here's a fiddle. I decided to just show you full screen since you already know the html and css.
Notice how the background-color is seperated with margins, but not with padding or  . Margin is often useful for that reason, but sometimes you want the background color in the spacing. You can use both margin and padding to get the spacing you want.
The reason why margin works that way and padding doesn't is because of the box-model. More about the box-model here.
Padding is definitly the best way to do that.
In fact it will be more easy for you later, to customize your list...
Imagine that there is not only 2-3 colums or row in your list but 100 etc...
Take a list like this:
<ul class="menu">
<li> Option 1 </li>
<li> Option 2 </li>
</ul>
The css part would looks like this:
.menu
{
//Your style..
}
.menu li
{
padding-left: 5px; //As you wants...
}
Refrain from using
padding-left is the right option.
Alternatively you can use margin-left
As you are creating a menu, I would suggest (based on my past experience) using margin-left for list being used for menu items. Gives more flexibility and cleanliness.
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>