this is my sample html. i want to move last li <li class="single"><div id="loader">Loading....</div></li> to right most side.
<div id="content">
<ul class="paginate pag5 clearfix">
<li class="single">Page 5 of 5 of 50</li>
<li class="navpage">prev</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="current">9</li>
<li class="navpage">next</li>
<li class="single"><div id="loader">Loading....</div></li>
</ul>
</div>
i use this css
.paginate > li:last-child
{
float:right;
position:absolute
}
but still no luck. see my js fiddle https://jsfiddle.net/tridip/rok4vsaf/
where i made the mistake for which last li is not moving properly.
remember if you have an absolute element, u cant float it, try this:
.paginate{
position:relative;
}
.paginate > li:last-child
{
right:0;
position:absolute
}
remember to declare the position , in this case "right:0;"
but you can do more simple is , declare the elements like this:
.paginate > li{
display:inline-block;
vertical-align:middle;
}
.paginate >li:last-child{
float:right;
}
This seems to do the trick:
HTML
Give the loader li a unique class:
<li class="single loader"><div id="loader">Loading....</div></li>
^^^^^^
CSS
Define that class as such:
.loader{
position: relative!important;
float: right!important;
}
Updated Fiddle
That's all you need:
.paginate > li:last-child
{
float:right !important;
}
Remove position:absolute from the rule (.paginate > li:last-child):
https://jsfiddle.net/rok4vsaf/2/
You don't need to change position for this
You also need to add float:right !important;:
https://jsfiddle.net/rok4vsaf/4/
(otherwise its overwritten with float: left in a later rule in your stylesheet, you can prevent this with !important)
I used it like that which is neater:
.paginate > li:last-child
{
margin-left: auto
position:absolute
}
Related
What I want to do is have two logical navigation units in my header. the one with [1,2,3,4,5] should be on the left side and the one with [6,7,8] on the right.
Right now I have the following HTML code
<div id="firstNav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="secondNav">
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
and the following CSS
#firstNav ul li{
display: inline-block;
}
#firstNav {
float:left;
}
#secondNav ul li{
display: inline-block;
}
#secondNav {
float:right;
}
My Problem is, that if I dont use the inline-block everything is vertical not horizontal and then I force it to be horizontal afterwards in the individual child <li> item.
Is this an acceptable way of achieving what I want or can somebody give me a better/more elegant solution?
#firstNav, #firstNav ul li, #secondNav ul li {
float:left;
}
#secondNav {
float:right;
}
Looks like that's what you need.
I had problem to load the li in nested navigation. Here is the problem suppose i'm having a five elements(li) in the parent ul. If i click on any element(li), I can see 30 child elements(ul li) in list. Now the problem is how do I have assign them in three rows?
Below is the structure. I have tried like splitting the them into rows but no use.
ul(parent)
li
li
li>ul(child)
li li(1) li(11) li(21)
li li (2) li(12) li(22)
.. (3) .. ..
.. .. ..
(10th li) (20th li)(30th li)
I am not following you question 100% but it sounds like you are trying to nest more than one level deep? If you are ..
Simple just nest some more ul elements within the li tags.
<ul>
<li>1</li>
<li>2</li>
<li>
3
<ul>
<li>3.1
<ul>
<li>3.1.1</li>
<li>3.2.1</li>
</ul>
</li>
<li>3.2
<ul>
<li>3.2.1</li>
<li>3.2.2</li>
</ul>
</li>
<li>3.3
<ul>
<li>3.3.2</li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>4</li>
<li>5</li>
</ul>
SEE THE DEMO. Is this what you want? Basically, you will have to define the width for the second ul and float your li. Your code should be like:
ul.primary {
position: relative;
}
ul ul {
width: 400px;
position: absolute;
top:0; left: 0;
}
ul ul li {
float: left;
}
For example, i have such a list:
1
2
3
4
5
6
7
8
and i want it to look like
1 5
2 6
3 7
4 8
So, how to make it work without any javascript?
I have such a code:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
And
ul{
height:200px;
}
And i also need the code to be supported by IE8 and IE9
Update:
It seems to me that i got it. It's looking a little bit weird but anyway.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
And CSS
ul{
border:1px solid;
position:relative;
height:100px;
}
li{
height:20px;
}
li:nth-child(4)~li{
left:100px;
top:-80px;
position:relative;
}
what you need is CSS3 column relative attributes, like column-count etc.
I make a example on jsFiddle. I don't know much about this, so I achieve the result by calculate height precisely, but I think you can get it in your own way.
And a reference might be helpful.
HTML code:
<div class="newspaper">
<div class="unit">1</div>
<div class="unit">2</div>
<div class="unit">3</div>
<div class="unit">4</div>
<div class="unit">5</div>
<div class="unit">6</div>
</div>
CSS code:
.newspaper {
-moz-column-count:3;
/* Firefox */
-webkit-column-count:3;
/* Safari and Chrome */
column-count:3;
height: 300px;
}
.unit {
height:50px;
width:100%;
border:1px solid gray;
}
Note: Internet Explorer 9, and earlier versions, does not support the column-count property.
I would use Tables instead of lists
you can do it like
HTML
<ul>
<li class="column1">1</li>
<li class="column1">2</li>
<li class="column1">3</li>
<li class="column1">4</li>
<li class="column1">5</li>
<li class="column2 reset">5</li>
<li class="column2">6</li>
<li class="column2">7</li>
<li class="column2">8</li>
<li class="column2">9</li>
<li class="column3 reset">10</li>
<li class="column3">11</li>
<li class="column3">12</li>
<li class="column3">13</li>
<li class="column3">14</li>
<li class="column3">15</li>
</ul>
And check below css
ul
{
margin: 0 0 1em 2em;
padding: 0;
list-style-type: none;
}
ul li
{
line-height: 1.2em;
margin: 0;
padding: 0;
}
* html ul li
{
position: relative;
}
ul li.column1 { margin-left: 0em; }
ul li.column2 { margin-left: 10em; }
ul li.column3 { margin-left: 20em; }
li.reset
{
margin-top: -6em;
}
ul li a
{
display: block;
width: 7em;
text-decoration: none;
}
ul li a:hover
{
color: #FFF;
background-color: #A52A2A;
}
And check this fiddle:
http://jsfiddle.net/9RcVr/
I am trying to create a simple drop-down menu which hides the sub-menu anchors until a main menu anchor is being hovered over.
html markup
<ul>
<li>1</li>
<li>2</li>
<li>
3
3.1
3.2
</li>
</ul>
css styles
<style>
ul li a:nth-child(n+2){
display:none;
}
ul li a:nth-child(n+2):hover{
display:block;
}
ul li a:hover + a:nth-child(n+2) {
display: block;
}
</style>
currently this only displays the first anchor of the sub-menu (3.1) when I need it to be able to display all other anchors of the sub-menu 3.2....3.n, how do I achieve this?
You should use this:
HTML:
<ul id="container">
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
CSS:
#container>li>ul{
display:none;
}
#container>li:hover>ul{
display:block;
}
Demo: http://jsfiddle.net/Tx4z7/
You could add also a padding to the submenu:
#container>li>ul{
padding-left:20px;
}
Demo: http://jsfiddle.net/Tx4z7/1/
I have this markup:
div#wrapper
ul#container1
li#box1
li#box2
li#box3
ul#container2
li#box4
li#box5
li#box6
The screen's width is enough to display 5 boxes on one row, but the whole container 2 is below container 1 when I float left the uls
How can I have the first line on the screen display boxes 1 to 5 and the second line box 6 (as if all lis were inside a single container and floated left) while keeping the lis inside two different containers ?
Thanks
Give the ul elements display: inline and the li elements display: inline-block
See here: http://jsfiddle.net/hW7Aj/1/
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
ul {
display: inline;
}
li {
display: inline-block;
width: 80px;
border: 1px solid black;
}
For html:
<div>
<ul class="li1">
<li>c</li>
<li>c</li>
<li>c</li>
</ul>
<ul class="li1">
<li>c</li>
<li>c</li>
<li id="last">c</li>
</ul>
</div>
CSS:
.li1 {
display: inline;
}
#last {
clear: both;
}
li {
display: inline;
float: left;
}
Probably with such markup you can't do this because if you floating ul and li to the left you will have each ul as a container with the floated elements and you don't have enought space to plase 2 floated ul elements. That's why you have wrapped second ul to new line.
You can solve this problem by placing all floated elements under one container.
You need two CSS rules:
ul.second li:nth-child(3)
{
clear: both;
}
li {
float: left;
}
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="second">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
This is one way to do it, using the awesome nth-child pseudo selector.
If you have to support IE then you can change add a class to the last li
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul<
<li>4</li>
<li>5</li>
<li class="myLi">6</li>
</ul>
and change the CSS accordingly:
li.myLi {
clear: both;
}
li {
float: left;
}
http://jsfiddle.net/zN4W5/