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;
}
Related
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 am creating a little widget for a page that lists steps in reverse order. I plan on doing this with an ol and setting the value attribute on the individual li tags to force the numbering of the ol to be reversed. So far so good.
However, I have a design conundrum that I'm not sure can be solved with css.
With this mark up, is it possible to center the text but keep the labels left-aligned?
<ol>
<li value="5">item 5</li>
<li value="4">item 4</li>
<li value="3">item 3</li>
<li value="2">item 2</li>
<li value="1">item 1</li>
</ol>
Here is an image to illustrate the text treatment I am after.
It would be a shame if I had to shove extra spans in my markup for something that OLs do automatically.
You can reverse counters, then you can align the counters separately from the text.
not IE7 though, but with the values it'll default (IE hacks built in get back the defaults)
CSS:
ol {
padding: 0;
margin: 0;
list-style-type: decimal !ie7;
margin-left: 20px !ie7;
counter-reset:item 6; /* one higher than you need */
width: 250px;
border: 1px solid #000;
}
ol > li {
counter-increment:item -1;
text-align: center;
}
ol > li:before {
content:counter(item) ". ";
float: left;
width: 30px; background: #eee;
}
HTML
<ol>
<li value="5">item 5</li>
<li value="4">item 4</li>
<li value="3">item 3</li>
<li value="2">item 2</li>
<li value="1">item 1</li>
</ol>
You're going to need that extra element - the numbers in the list are considered part of the text for layout purposes like this. Adding an inner span set to display: inline-block should do the trick.
On a design note, it's worth pointing out that multiple lines of center-aligned text are very hard to scan, as the starting point (left edge) of the text is in a different place from line to line. Would a consistent, if large, text-indent suit you just as well? It would definitely be more readable.
And FWIW, did you know that HTML5 includes the 'reversed' attribute on OL's? You'll still need your value attributes for older browsers, of course.
I'm not sure if this is what you mean by shoving extra spans, but this works:
CSS:
li {text-align:center; margin-bottom:4px;}
#list {display:block;width:300px;background:#ddd;text-align:center;}
HTML
<ol>
<li><div id="list">This is item four</div></li>
<li><div id="list">This is item three</div></li>
<li><div id="list">This is item two</div></li>
<li><div id="list">This is item one</div></li>
</ol>
li{ list-style:none; text-align:center; }
li:before{ content:attr(value); float:left; }
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;
}
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?