I'm having some trouble lining up some text. I need two columns, one with numbers and one with text, like so:
1 Entry one
2 Entry two
3 Entry three
4 Entry five
5 Entry six
The left column is Georgia and the right column is Arial (slightly different font sizes). I could have a container div for each row and absolutely position the number and text paragraphs to be at the top or bottom of these, which works fine. The problem is this means I have to give each row a fixed height so that it displays properly, which causes a problem if the text needs to flow onto more than one line (which it may well do as the text entries are dynamic).
I want to do this without using a table, and without using absolute positioning so that the individual text entries can span over more than one line (and is cross-browser compatible).
As per my comment, I think the best element for the job is an ordered list.
ol {
font-family: georgia, serif;
font-size: 16px;
font-weight: bold;
}
ol li span {
font-family: arial, sans-serif;
font-weight: normal;
font-size: 12px;
}
<ol>
<li><span>Entry one<br>text on another line</span></li>
<li><span>Entry two</span></li>
<li><span>Entry three</span></li>
<li><span>Entry five</span></li>
<li><span>Entry six</span></li>
</ol>
With the span to allow changing of font-family between the list "bullets" and the content within, these could be divs if you have block content.
You should just use an appropriately styled ol element, something like this:
See: http://jsfiddle.net/tPjQR/
If you want to have different styles on the number versus the list content, you'll need to wrap the content of each li in something like a span. There just isn't a better way.
ol {
font-family: Georgia, serif;
}
ol span {
font-family: Arial, sans-serif;
font-size: 17px
}
<ol>
<li><span>Entry one</span></li>
<li><span>Entry two</span></li>
<li><span>Entry three</span></li>
<li><span>Entry five</span></li>
<li><span>Entry six</span></li>
<li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li>
</ol>
Related
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
How to indent the text in a custom unordered list
(2 answers)
Closed 4 years ago.
I'm using the following to add a custom bullet character before <li> tags:
.cb-entry-content ul, .cb-sidebar ul {
list-style-type: none;
}
.cb-entry-content li::before, .cb-sidebar li::before {
content: "•";
margin-right: 5px;
color: #821019;
font-weight: 700;
}
How can I now indent the entire <li> item, so that the whole item is indented in relation to the bullet? Normally with <li> you'd accomplish this with list-style-position: outside;, but that won't work here. Any thoughts?
Thanks!
edit: Sorry, I don't think I was totally clear- I'd like for the indenting to continue after line breaks- so that the bullets are to the left, and the entire <li> item is indented after that. Currently, the text wraps under the bullet after a line break.
You can play around with negative margin to get the effect you want to, please see the example below.
ul {
list-style-type: none;
}
li::before {
content: "•";
margin-right: 5px;
color: #821019;
font-weight: 700;
}
ul.with-margin {
margin-left: 10px;
}
.with-margin li::before {
margin-left: -10px;
}
<ul>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
</ul>
<ul class="with-margin">
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
<li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
</ul>
You can use margin or text-indent, either works.
Fiddle here
ul.custom {
list-style-type: none;
}
ul.custom li:before {
content: "•";
margin-right: 5px;
color: #821019;
font-weight: 700;
}
ul.custom li:nth-child(1) {
text-indent: 1em;
margin-left: 10px;
}
ul.custom li:nth-child(2):before {
margin-right: 25px;
}
<ul class="custom">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
I'm not really good at computers but I must take learn programming, but anyways, I know what the rule does but I don't know what is significant about it. (I'm not native English speaker so not making things easier)
It sets the color of the text within the <em> tag (that is within <li> tag ) to red and it's font-weight to bold.
li em {
color: red;
font-weight: bold;
}
<ul>
<li>one <em>two</em> three</li>
</ul>
That is a rather significant rule, assuming that the list item wasn't already styled that way - in which case the selector is not significant because the <em> element will inherit these styles from the list item anyway.
li { color: red; font-weight: bold; }
<ul><li>one <em>two</em> three</li></ul>
In CSS, how can I bold only the phone number so it will inline with the rest of the statement but the number is bold?
Instead of doing it in HTML as:
<div class="bubbleContent">› Start posting jobs today–
<strong> 01234 567 890</strong></div>
HTML:
<div class="content">› Call me – 01234 567 890</div>
CSS:
div.bubbleContent
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
Thanks.
You can use <span> as in example shown below:
HTML:
<div class="content">› Call me – <span class="highlight">01234 567 890</span></div>
CSS:
div.content
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
span.highlight
{
font-weight:bold;
}
You can also use <div> element with property display:inline, so it will be inline with the rest of the text.
You can’t. You cannot style a piece of text in CSS without making it an element one way or another (unless it can be referred to as a pseudo-element, but this currently works for first letter and first line only).
There are many HTML elements that you could use (such as strong, b, span), but the point is that you need some element. You can use an element that is displayed in bold by default, or you can style it with CSS.
You could generate the element with JavaScript client-side, though. For this, you would need to specify the syntax of phone numbers to be recognized, making sure that only phone numbers will match it in the content that will be used.
In CSS, I am trying to style an ordered list so that the contents are one font, but the the numbers are another font.
How can I target the list-numbers, which aren't html elements and part of the list-style ?
The only thing that I can think of and have tried is making the list an unordered list. Setting the list-style to none and then manually having numbers inside the list that are wrapped in 's where I style them differently.
But that seems highly inefficient.
HTML
<ol>
<li><p>Hello</p></li>
<li><p>World</p></li>
</ol>
CSS:
ol{
font: italic 1em Georgia, Times, serif;
}
ol p{
font: normal .8em Arial, Helvetica, sans-serif;
}
JSFiddle of the example above
I was wondering if anyone could tell me why doesn't the list set to Italic as a class in div?
<style type="text/css">
body{
font:62.5% Arial, Helvetica, sans-serif;
}
h1{
font:small-caps 1.6em "Times New Roman", Times, serif;
}
.recipe .intro{
font:italic 1em Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Recipes for Cheese</h1>
<p class="intro">Cheese is a remarkably versatile food, available in literally hundreds of varieties with different flavors and textures.</p>
<div class="recipe">
<h2>Welsh Rarebit</h2>
<p class="intro">Cheese is a remarkably versatile food, availalbe in literally hundreds of varieties with different flavors and textures.</p>
<ol>
<li>Lightly toast the bread</li>
<li>Place on a baking tray, and spread with butter.</li>
<li>Add the grated Cheddar cheese and 2 tablespoons of beer to a saucepan. Place the saucepan over a medium heat, and stir the cheese continuously until it has melted. Add a teaspoon of wholegrain mustard and grind in a little pepper. Keep stirring.</li>
<li>When thick and smooth, pour over each piece of taost spreading it to the edges to stop the toast from burning.</li>
<li>Place under the grill for a couple of minutes or until golden brown.</li>
</ol>
</div>
</body>
Isn't the order list should be italic since it's in class Recipe.
Please explain why it isn't.
Thanks
<li> doesnt inherit the properties of the css class .recipe, in order to apply it you have to do the following:
.recipe li{
font:italic 1em Arial, Helvetica, sans-serif;
}
Same happens with the tag <a>, you have to apply the value you need in the .css
You can check this demo
If you wanna get more info, check this documentation
Only .recipe .intro (your paragraph tag) has font:italic 1em Arial, Helvetica, sans-serif; applied. For all of .recipe to have that font, remove .intro.
.recipe .intro says: "for all elements that have the intro class that are decendants of all elements that have the recipe class, apply these styles."