I'm trying to have the heading to the left of the list item.
I don't want to nest an ordered list inside of an unordered because I need the list items to be continuous between headings.
This is what I have been using, but I don't like that the heading is indented right, despite not being included in the list item.
Tried using "text-indent:-2em" on the heading but that didn't work.
I even tried creating a separate div and putting the negative text indent there, but that didn't work either.
<ol reversed>
<h3>year</h3>
<li>item</li>
<li>item</li>
<h3>year</h3>
<li>item</li>
</ol>
Tried a few websites:
https://www.htmlgoodies.com/tutorials/getting_started/article.php/3479461
So, I think you are on the right path with the -2em to reverse the indent, but it needs to be placed on "margin-left" instead of "text-indent", and either create a class to call it each time you want to use it:
in CSS:
.unindent{
margin-left: -2em;
}
HTML:
<ol reversed>
<h3 class="unindent">year</h3>
<li >item 1</li>
<li>item 2</li>
<h3 class="unindent">year</h3>
<li>item 3</li>
</ol>
or individually add it to the lines you want "un-indented":
<ol reversed>
<h3 style="margin-left: -2em" >year</h3>
<li >item 1</li>
<li>item 2</li>
<h3 style="margin-left: -2em" >year</h3>
<li>item 3</li>
</ol>
There may be other ways, but that's the simplest way I could think of. Good luck!
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
I have written a menu for an Italian restaurant. This menu consists of an unordered list where each li element has a class named "headline". Each of these li elements contains a headline and another ul inside with li-s as dishes.
It looks like this:
<ul>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</ul>
I am trying to make a printable version of the menu and have no clue why either "page-break-after" nor "page-break-before" work on ".headline" in CSS.
I tried different display values like "block", "inline-block", or "table-row", because reading certain forums suggested it. I also tried different position values ("absolute","relative","static")...
I also tried to wrap the "headline" li-s with div elements and use page-break on the div elements:
<ul>
<div>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</div>
<div>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</div>
</ul>
I start to believe that my only option is to re-think the unordered list concept or deliver a pdf-file on print-demand...
I think I would have chose the second method, because I use the li-s to toggle the ul-s in the mobile version.
Is there a fundamental error I do not see yet, or is it simply not possible to control where page breaks are done in unordered lists?
Edit:
I tried different suggenstions of the "possible duplicate thread" and all what it does (I don't know if I am right there and can explain it properly) is that it tries to make page-breaks...
It generates space between the "headline" li-s containing the ul-s... Unfortunately the blank spaces appear in the middle of the pages (print preview and saved pdf) and have a certain height... so it doesn't really push the "headline" li-s on the next page... just slightly down wherever a "headline"li ends
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
Add break-inside: avoid; to ul
I had the same problem adding page-break-after: always to the li. It was fixed by adding a div inside with page-break-after: always followed by an empty div. It works on both Edge and IE11 as well as on Chrome (not yet tested on Firefox).
Amending your example, it should look like the following:
<ul>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
<div style="page-break-after: always"></div>
<div></div>
</li>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
<div style="page-break-after: always"></div>
<div></div>
</li>
</ul>
Note: Do not repeat the page-break-after in your headline class.
I need to add text before a horizontal navigation menu at the first, second and third levels of links.
The levels are achieved using nested lists.
If I want place text before a level of links, is it considered bad practice to add the said text as a list item?
Example:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li{
float:left;
display:block;
margin-left:20px;
}
<ul>
<li>Some arbitrary text:</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
I would say it goes against best practice, I would suggest doing
<span>Some Text:</span><ul>..</ul>
This keeps your html clean and more flexible.
Is it possible to make a vertical <ul> that displays the text on the left side of the list?
The only example I can think of would be something like the Facebook timeline where you would have list items on the right side like normal and then list items on the left that have the list items. How would I do a list like the list items on the left? (I understand that this isn't how the timeline is coded, but it's just the only visual example I could think of).
Yes...use CSS:
<style>
ul {direction: rtl;}
</style>
If you'd like to alternate left and right, you can put it into a class:
<style>
.bulletonleft { direction:ltr; }
.bulletonright { direction:rtl; }
</style>
<ul>
<li class="bulletonleft">Element 1</li>
<li class="bulletonright">Element 2</li>
<li class="bulletonleft">Element 3</li>
<li class="bulletonright">Element 4</li>
<li class="bulletonleft">Element 5</li>
<li class="bulletonright">Element 6</li>
</ul>
I have a list of items (<ul> containing <li>'s) which I want to limit by height.
Let's say I have the following code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
This will display as such:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
I would like it to display like this:
Item 1 Item 4
Item 2 Item 5
Item 3 Item 6
Is there a way to achieve this without tables and without using different <ul> tags?
I'm looking for something like this - <ul limit="3"> but I don't mind limiting it by height (i.e. <ul limit="60px">)
The reason I want this functionality is that I am generating the <li> tags dynamically.
I'm using Ruby on Rails - if this isn't possible with simply XHTML and CSS - is there a way to achieve this is Rails without literring the view?
Is the ordering a hard requirement? If the width of the items is a known, you can do this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
CSS:
ul { width: 100px; }
li { width: 50px; display: block; float: left; }
That will render like this:
Item 1 Item 2
Item 3 Item 4
Item 5 Item 6
I can answer for the XHTML/CSS part: no, sadly, not yet. In the future, we will have CSS columns. Breaking it up into different lists is how I'm aware of this typically being done now.
Update There is this: http://www.alistapart.com/articles/multicolumnlists/ which gives a number of ways of doing it, but I'm not sold on them, especially for programmed output.
To get your array sorted in the correct order to use the floating solution:
a = [1,2,3,4,5,6,7,8]
a.partition{|el|el % 2 == 1}.flatten
a => [1,3,5,7,2,4,6,8]