I am having trouble with OL and hebrew letters.
When trying to create an ordered list (<ol>) with hebrew letters, when it comes to higher than ten items, the letters are reversed. As you can see here (chrome):
<ol style="list-style-type: hebrew; direction: rtl; text-align: right;">
<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>
<li>13</li>
<li style="direction: rtl; list-style-type: hebrew;">14</li>
</ol>
http://jsfiddle.net/0zqcerhg/
For example, the 10th item, instead of יא is written אי, which is wrong. this is true for 12th, 13, 14 and so on...
This isn't an "official" answer but a trick to get the same result with a different solution.
ol {
counter-reset: num;
direction: rtl;
}
li {
list-style-type: none;
counter-increment: num;
padding-bottom: 4px;
}
li:before {
content: '.' counter(num, hebrew);
padding-left: 10px;
unicode-bidi: bidi-override;
direction: ltr;
float: right;
}
<ol style="list-style-type: hebrew; direction: rtl;">
<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>
<li>13</li>
<li>14</li>
</ol>
http://jsfiddle.net/moshfeu/pchady8e/1/
Thanks to #RC. for his answer (Custom <ol> numbering with Hebrew numerals)
Related
Correct LayoutInstead of 3 columns per row (as below), i want to display the first 2 rows with 3 columns and then the 3rd row with 5 columns and 4th row with 4 columns (changing CSS only)
CSS
ul { columns: 3; }
HTML
<ul class="list"> <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> <li>13</li> <li>14</li> <li>15</li> </ul> </body>
I can't figure out how to change the number of columns per row.
You can use css grid model and change the column number with grid-column. This uses some kind of trick though. To achieve this, we can set the original column to be 60, then we can span the first 6 elements (first and second row) to 20, then we span the 7th to 11th elements to 12, finally we span the rest of the elements to 15.
How did we choose those values? we can basically get the LCM of 3, 4, 5 which is 60, then we can divide 60 to each number of column: 60 / 3 = 20, 60 / 5 = 12, 60 / 4 = 15.
ul {
display: grid;
grid-template-columns: repeat(60, 1fr);
}
li:nth-child(-n+6) {
grid-column: span 20;
}
li:nth-child(n+7):nth-child(-n+11) {
grid-column: span 12;
}
li:nth-child(n+12) {
grid-column: span 15;
}
/* just for styling */
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
}
<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>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
If you want to make it exactly as your image though, you can just simply use add grid-column: 1 on each of the starting row:
ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
li:nth-child(1), li:nth-child(4), li:nth-child(7), li:nth-child(12) {
grid-column: 1;
}
/* just for styling */
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
}
<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>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
Hey I want that my SubCat4 should be listed below SubCat1 and SubCat5 should be below SubCat2 I have tried many things but couldn't get it..
Here is my HTML code..
<div class="sub_menu">
<ul>
<li>SubCat1<span class="icon icon-arrow_down"></span></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>SubCat2<span class="icon icon-arrow_down"></span></li>
<li>By Author</li>
<li>By Title</li>
</ul>
<ul>
<li>SubCat3<span class="icon icon-arrow_down"></span></li>
<li>By City</li>
</ul>
<ul>
<li>SubCat4<span class="icon icon-arrow_down"></span></li>
<li>Fiction Books</li>
<li>Non Fiction Books</li>
</ul>
<ul>
<li>SubCat5<span class="icon icon-arrow_down"></span></li>
<li>1</li>
<li>2</li>
<li>E-Books Vs. Paper Books</li>
<li>3</li>
<li>General Advice on Books</li>
<li>5</li>
<li>6</li>
<li>Ten Best Authors / Poets</li>
<li>More...</li>
</ul>
You can get the CSS and code in my jsfiddle link http://jsfiddle.net/uiupdates/yac70mhw/1/
Pls help..
thankx in advance.
Don't use floats here, but inline-block.
.sub_menu {
display: block;
margin: 15px 15px 15px 0px;
position: absolute;
width: 844px;
font-size: 0;
line-height: 0;
}
.sub_menu ul {
border: medium none;
display: inline-block;
vertical-align: top;
margin: 15px;
width: 251px;
padding:0;
}
Example:
http://jsfiddle.net/yac70mhw/3/
Use the clearfix
insert this after the 3rd <ul>
<div class="clearfix"></div>
And finally in the css -
.clearfix {
clear: both;
}
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 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%;
}