I'm building an horizontal menu in HTML+CSS. The current result is fine, except I want to have some items on the left, and others on the right. I couldn't find useful result on Google with such common keywords so I'm asking on SO.
Here's my code so far:
#menu
{
background-color: #383838;
height: 65px;
margin-bottom: 20px;
}
#menu ul li
{
float: left;
}
<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
I'd like to have Link 3 on the right, so the space between link 2 and 3 should be filled at maximum. I don't want a filler <li> tag, but instead apply a class to the last <li> on the left, or the first <li> on the right. Don't want to adjust the width as I've a :hover background color changing effet on the links. I suppose margin or padding should do the trick but I can't manage to find how.
Any clue?
Have you tried applying a float: right; style to the <li>Link 3</li> element?
Related
I'm using FontAwesome icons as custom bullets for my unordered lists, but using li:before seems to change the behavior of paragraph tags in list items.
See this JSFiddle for a paragraph tag in action in two different lists. One with li:before, one without.
HTML:
<ul class="before">
<li>list item 1</li>
<li>
<p>list item 2 (paragraph)</p>
<p>list item 2 (sub paragraph)</p>
</li>
<li>list item 3</li>
</ul>
<br />
<br />
<ul>
<li>list item 1</li>
<li>
<p>list item 2 (paragraph)</p>
<p>list item 2 (sub paragraph)</p>
</li>
<li>list item 3</li>
</ul>
CSS:
.before li:before {
content:"B4";
color: red;
margin-right: 8px;
}
How can I get list item paragraphs to appear on the same line as the li:before?
Being that paragraphs are block elements, they will start a new line... that is, unless you float the item in front it. There are some other styling issues which arise from this, but I'm sure you can figure those out (I compensated for some of the issues in my example):
http://jsfiddle.net/ryanwheale/ko2efv7b/2/
.before li:before {
content:"B4";
color: red;
margin-right: 8px;
float: left;
}
You should probably accept Ryan's answer, but in case you want a much more hackish answer that doesn't require you to know the width of the before content, here's my attempt:
Fiddle with hiding dots
CSS
.before li {
list-style: dot outside none;
}
.before li:before {
content:"B40M8UW0T?";
color: red;
margin-right: 8px;
float: left;
list-style: dot outside none;
display: list-item;
position: relative;
z-index: 2;
background-color: white;
}
Fiddle with a green background illustrating the hack
So, basically we're telling the browser to display that :before pseudo to display as a list-item itself, and then hiding the resultant bullet point for the actual list item by matching the background-color of the underlying element. In the fiddle I left the ul green to illustrate this happening.
It's not a perfect solution, but there won't be a perfect solution for what you're looking to do without a tremendous amount of effort.
Cheers.
I'm trying to create a navigation list where all the list items stack on top of one another, as per display:block, but where their width is influenced by the width of the text within them, as per display:inline.
It seems like I can only choose one or the other - I've tried setting the li and li a to various combinations of block/inline/inline-block and it's not working. Either my list items are all the same width, or they're sitting next to each other instead of on top of one another.
Here's what I'm trying to achieve and can't:
http://i39.tinypic.com/280t5s0.png
Is this possible to do? I feel like it really should be but am completely stumped and searching hasn't turned up much.
Any help would be much appreciated!
Thanks and best wishes,
Emma
HTML
<ul>
<li>Item 1</li>
<li>Long Item 2</li>
<li>Longer Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
CSS
li {
border: 1px solid black;
display: inline-block;
float: right;
clear: right;
}
See it live
I have two sets of lists with headings which need to display side-by-side as in the following image:
Here's my html:
<h2>Pages</h2>
<ul class="one">
<li>About</li>
<li>Archives</li>
<li>About</li>
<li>Archives</li>
</ul>
<h2>Pages</h2>
<ul class="two">
<li>About</li>
<li>Archives</li>
<li>About</li>
<li>Archives</li>
</ul>
I can't make any changes to the html. I have to accomplish this using css only.
Please refer to the fiddle:
http://jsfiddle.net/Pxtvh/
If you could use html, I would surround each header and it's list with a
<div style="float:left">
This works, I've tried it but if you want to use entirely css, I suppose you could use the css code:
ul.two {
position:absolute;
top:0px;
left:100px;
}
This DOESN'T position the headers because they're both and they don't have individual classes so other than changing the html as above, I can't think of a solution. Also, you would have to update the "left" parameter if you want to change the width of the first list.
Like Waffle Face suggested, you can try explore using position: absolute and set left and top pixel, both for the second set of h2 and ul.
As has been noted, you cannot do this with CSS only.
Ideally, you would be able to wrap a DIV around the group of heading and list, but you've stated that you cannot edit the html.
That leaves one alternative: If you can use JavaScript, you can wrap DIVs around your header-list groupings dynamically to achieve the same effect.
Here is how you would do this with jQuery:
$('h2 + ul').each(function () {
$(this).prev().andSelf().wrapAll('<div class="grouped-list"/>');
});
Then in your css file you would float div.grouped-list left. See a working example.
I know it's not great because it uses position absolute, but here is my solution:
http://jsfiddle.net/Pxtvh/25/
h2:nth-of-type(2){
position: absolute;
left: 100px;
top: 0;
}
ul:nth-of-type(2){
position: absolute;
left: 100px;
top: 1em;
}
ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
This will make the <ul>to float left then edit add HTML
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
Then second one:
<ul>
<li>link 1 column2</li>
<li>link 2 column2</li>
<li>link 3 column2</li>
<li>link 4 column2</li>
</ul>
I'm building a navigation bar inside a ul. Most of the menu items have long titles so I really need to wrap them over a number of lines, as in the following code (I've inserted br/ where I'd like the returns)
<ul>
<li class="cell01on">Menu 1</li>
<li class="cell02">Menu2.1<br/>Menu2.2<br/>Menu2.3</li>
<li class="cell03">Menu 3</li>
</ul>
I'm trying to get the effect similar to using a table and vertically centring each row in it's cell. Is it possible to recreate the same in a ul?
thanks in advance
Giles
First of all if I read correctly that Menu 2.1 is a submenu then a cleaner could would be:
<ul class="menu">
<li class="active">Menu 1</li>
<li>Menu 2
<ul>
<li>Menu2.1</li>
<li>Menu2.2</li>
<li>Menu2.3</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
Vertical alignment is generally hard to do in CSS outside tables, but have a look at:
http://www.student.oulu.fi/~laurirai/www/css/middle/
I tend to agree with Nux's answer, submenu's should be nested lists. As to your question about vertical centering: if you want things to behave like tables visually, you can simply use display: table;:
<style>
ul { list-style-type: none; padding: 0; display: table; }
li { display: table-cell; vertical-align: middle; }
</style>
u can add some styling like
li
{
white-space:pre-wrap;
width://set width here
text-align:center;
vertical-align:middle;
}
I need to show "x" number of cateogories in a menu (basically a hidden div that pop up when someone clicks on a nav menu called "Category"). No problem with the div, but I am struggling with arranging the categories in any form of order inside the div. I don't want it to be a single column list an stretch all the way down to the page, so I would like either a multi column list or something else. I hear multi column list have compatibility challenges and are difficult to deal with. What other options do I have?
Something similar to the category list at http://www.answerbag.com/
Thanks
I was writing up an answer, but this article does a better job:
http://www.alistapart.com/articles/multicolumnlists/
It covers a number of different options, including the floated method used at answerbag, and one or two that are semantically more sensible while still ordering by column instead of by row.
Not so much, no. Coding a multi column list is easy as long as you're careful about your widths and clearing floats:
HTML
<div id="list">
<ul>
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
</ul>
<ul>
<li>Cat 4</li>
<li>Cat 5</li>
<li>Cat 6</li>
</ul>
<div class="clear"></div>
</div>
CSS
#list {
width: 400px;
}
#list ul {
float: left;
width: 200px; /* This width should be #list width divided by number of columns */
margin: 0;
padding: 0;
list-style: none;
}
#list li {
margin: 0;
padding: 5px 0;
}
.clear {
clear: both;
}