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.
Related
How to turn off CSS link in HTML?
I have this in my styles.css page
li {
display: inline;
padding: 80px;
}
This makes:
<li>Home</li>
Appear horizontal.
However when I want to use an ordered list in HTML, the numbers will not appear.
I think because the CSS applies to all <li> tags.
You could try ul li to only inline items in an unordered list.
ul li {
display: inline;
padding: 80px;
}
Or better, use a class to designate lists that should display inline:
.inline-list li {
display: inline;
padding: 80px;
}
<ul class="inline-list">
<li>Home</li>
...
Ordered list has the ol tag, the ul tag is an unordered list
In your css, change the ul to ol and you will be able to css an ordered list
If you want the number to appear then you have to add ol tag.
<ol>
<li>Home</li>
<li>About</li>
</ol>
Then, if you want them to be inline, you can do
li {
padding: 80px;
}
ol {
display: flex;
}
Example:
https://jsfiddle.net/sngzv67o/
You can do it by:
a:link {
text-decoration: none;
}
w3school
At least thre exists 2 possibilities;
the first (but i guess no the one you seeked) is to specifiy the path for style, if you can something like will satisfy your need
ul > li {
display: inline;
padding: 80px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>1</li>
<li>3</li>
<li>4</li>
</ol>
this way, the inlining will only apply to unordered list items.
Another solution is to use vanilla js to explictly remove the style
ul > li {
display: inline;
padding: 80px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>1</li>
<li>3</li>
<li>4</li>
</ol>
<input type='button' onclick='document.getElementsByTagName("style")[0].remove()' value='Remove style tag'>
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
}
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 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/
How can, This values divided between the three columns with CSS and width: auto; as dynamic?
As this: http://img4up.com/up2/20239064020416631754.gif
Example: http://jsfiddle.net/r3rm9/
<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>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
You can start with the CSS3 Column properties, but support isn't very good at the moment.
http://jsfiddle.net/GolezTrol/r3rm9/4/
This article http://www.alistapart.com/articles/multicolumnlists/ shows several options for creating multi-column lists, worth checking out. Especially if the numbering MUST be from top to bottom instead of left to right / right to left.
Give your <ul> a specific width. And your <li> and float it.
ul {
float: right;
text-align: right;
direction: rtl;
margin: 50px 50px 0 0;
width: 207px;
}
ul li {
list-style-image: url(http://i.stack.imgur.com/so5PA.png);
float: left;
width: 55px;
}
How about this?
http://jsfiddle.net/r3rm9/1/
ul li{
list-style-image:url(http://i.stack.imgur.com/so5PA.png);
float: left;
width: 30%;
}