<ul>
<li>
<div id='div1'><div>
<div id='div2'><div>
</li>
<li>
<div id='div3'><div>
<div id='div4'><div>
</li>
<li>
<div id='div5'><div>
<div id='div6'><div>
</li>
</ul>
Above html will design following design
li li li
|__|__|__| -> odd DIVs
|__|__|__| -> even DIVs
I want to merge all the odd DIVs and place some text on the top of it.
li li li
|__|__|__| -> odd DIVs
|__|__ __| -> even DIVs
Is there any way to do this?
Thanks
Try using this:
li {
display: inline-block;
}
li div:last-child {
display: inline;
}
Ive tested it in Firefox 5 only, and it seems to work.
See an example here http://jsfiddle.net/ffESR/
Related
I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!
li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
Given mark-up similar to:
<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
<a>Item1-1</a>
<a>Item1-2</a>
<a>Item1-3</a>
</nav>
<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
<a>Item2-1</a>
<a>Item2-2</a>
<a>Item2-3</a>
</nav>
<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
<a>Item3-1</a>
<a>Item3-2</a>
<a>Item3-3</a>
</nav>
How can this presentation be achieved using CSS only?
Menu1 Menu2 Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3
ULs can also be used as long as they are three separate elements and not sub-lists of one another. I'd prefer not to use absolute positioning as there is other content below this that should flow around the mark-up above. I also have no need for old IE hacks; only supporting IE9 and modern browsers.
Is this even possible? Thanks!
Edit... The above formatting question is to style for mobile. Non-mobile is displayed as below which is why I was hoping for a CSS-only solution that didn't require mark-up changes.
Menu1
Item1-1
Item1-2
Item1-3
Menu2
Item2-1
Item2-2
Item2-3
Menu3
Item3-1
Item3-2
Item3-3
OK, if you really cant change mark up or use jQuery to alter the mark up then below is a CSS only solution:
http://jsfiddle.net/wSLEb/
You could absolutely position the headers and give the first ul margin top. Then using :nth-of-type pseudo class selector you could target individual headers and give them more left positioning to push them across the page and away from one another.
It's not very flexible as you have to hard code the left positioning so take into account how the width of the headers are rendered on a mobile screen.
Mark up would be:
<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
and CSS would be:
.header {
position: absolute;
top: 0;
left:0;
}
.header:nth-of-type(2) {
left:50px;
}
.header:nth-of-type(3) {
left:100px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
ul.first {
margin-top: 20px;
}
You can read more about pseudo class selectors on Chris Coyier's site here: http://css-tricks.com/pseudo-class-selectors/
Good luck
To start your lists should be in uls.
if you can't use absolute positioning then you need to change your mark up to achieve that kind of styling. The headers should appear after one another in the html. If you can't change your mark up at the source then you will have to use jQuery to reorder the mark up on page load.
in your jQuery I would target all of the headers and then remove all of them except for the first and then insert these removed headers after the first one, and then place a clearing div after the last header.
See this or the code below: http://jsfiddle.net/wSLEb/
Your mark up would become like so:
<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
The styling would then be like so:
.header {
float: left;
margin-right: 10px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.clear {
clear: both;
}
I have the following structure in some HTML:
<ul class="li_inline">
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
</ul>
With the CSS like this:
.li_inline li
{
display: inline;
}
.li_block li
{
display: block;
}
What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).
Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?
Thanks,
James
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
This worked for me:
<html>
<head>
<style type="text/css">
ul.outer{}
ul.outer > li{
float: left;
}
ul.outer > li > ul > li{
display: block;
}
</style>
</head>
<body>
<ul class="outer">
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>
You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.
.li_inline > li {
display: inline;
}
.li_inline > li > ul {
float: left;
}
http://jsfiddle.net/fzBnG/
.li_inline li {
display: inline-block;
float: left;
}
.li_block li {
display: block;
clear:both;
}
First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.
The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.
Once again, thanks for your help everyone.
James
I have a block of HTML:
<ul>
<li>a</li>
<li>b</li>
<li class="nav">c</li>
<li class="nav">d</li>
</ul>
and a CSS ruleset:
ul li {
display: inline;
}
li.nav {
float: right;
}
which are not behaving to my intentions: I want it displayed like so:
ab cd
but instead it's
ab dc
the difference being the displayed order of elements. How do I have the list items of class "nav" be displayed in their syntactical order?
Well, the obvious quick fix is to just reverse the order of the elements in the list:
<ul>
<li>a</li>
<li>b</li>
<li class="nav">d</li>
<li class="nav">c</li>
</ul>
I'm guessing what happens is that whenever the rendering engine encounters an element with float:right it pushes that element as far to the right as possible. So it first encounters the "c" and pushes that all the way over to the right, then it encounters the "d" and pushes that as far right as possible - but the "c" is already occupying the rightmost spot, so "d" stays to its left. Essentially, the elements are laid out in right-to-left order rather than left-to-right order.
Another option, I think, would be to divide the elements into two lists and just apply the float: right style to the second list as a whole (i.e. to the <ul> element).
<ul>
<li>a</li>
<li>b</li>
</ul>
<ul class="nav">
<li>c</li>
<li>d</li>
</ul>
and
ul li {
display: inline;
}
ul.nav {
float: right;
}
That way the list itself would float to the right margin but the order of the elements in it wouldn't be reversed.
I fixed this issue by separating the list into two and floating them to their respective positions. I wrapped the two lists with a div and applied overflow: auto to it. My final CSS code looked like this:
ul li {
display: inline
}
div.post-info-wrap {
overflow: auto
}
ul.post-info {
float: left
}
ul.nav {
float: right
}
and my markup like:
<div class="post-info-wrap">
<ul class="post-info">
<li/>
</ul>
<ul class="nav">
<li/>
</ul>
</div>
If you want c & d to be displayed in a block at the right, you'll have to put them inside one block element, not setting the float attribute on both.
I don't think that list elements like <li> are the right choice for your intention. You don't want to display a single list, so you may try using two lists (where one of them has the float attribute) or just simple <div> elements.
So actually you want a nav list and some other list? Why not use 2 lists?
<ul class="other">
<li>a</li>
<li>b</li>
</ul>
<ul class="nav">
<li>c</li>
<li>d</li>
</ul>
And css:
ul li {
display: inline;
}
.other{
float:left;
}
.nav {
float: right;
}
Float the ul where you want the content/container situated and float the li in the order you want it displayed.
<div id="myblock">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
#myblock ul {
display:inline;
float:right;
}
#myblock li {
float:left;
}
The opposite (float to the left but in reverse order)
#myblock ul {
display:inline;
float:left;
}
#myblock li {
float:right;
}
Try this:
ul {
text-align: right;
}
ul li {
display: inline;
}
ul li.default {
float: left;
}
li.nav {
float: auto;
}
<ul>
<li class="default">a</li>
<li class="default">b</li>
<li class="nav">c</li>
<li class="nav">d</li>
</ul>