tags:

views:

107

answers:

4
+1  Q: 

Styling ordered list numbers with a different font size than content

I want to style an ordered list giving the numbers a much more bigger font size than the li elements content.

I have already achieved this but I dont know how to align the li elements content with the top of the numbers.

Take a look:

alt text

I have tried giving ol li p negative top margin, but that doesnt work. Also, ol li has a top margin but if i set it to 0 it doesnt do anything. My current html is:

<ol>  
<li>
<p>content</p>
</li> 
<li>
<p>more content</p>
</li> 
</ol>

And my CSS:

ol {
padding-top: 200px;
}
ol li {
color: #EEEDED;
font-size: 35px;
font-weight: bold;
font-style: italic;
margin-top: 5px;
line-height: 1;

}
ol li p {
font-size:  11px;
color:  #444444;
font-weight: normal;
font-style: normal;
line-height: 1.7em;
}

Any ideas??

A: 

You can use position:relative on the li and the top property to achieve this. Example:

ol li p
{
    position:relative;
    top : 20px;
}
greg0ire  2010-06-24 10:18:38
That solves the positioning issue, but creates a new problem: when li p is absolutely positioned, li does not resize its height to the height of p, so the list gets messed up. I would give ol li elements the same height, but unfortunately there is a great variety in each li content length, so its not an option.Any tips? Thanks a lot
0al0  2010-06-24 10:42:15
Ok, i ended up solving this last problem with this jquery script:$("ol li").each(function(index) { var li_content_height = $('p', this).css('height'); $(this).css('height', li_content_height ) });If anyone knows a more elegant solution, please share it.
0al0  2010-06-24 11:28:14
I did not suggest to use absolute positionning, but relative. I'm going to update my post with an example.Why do you use a p tag? It increases the DOM depth, which is a performance killer.
greg0ire  2010-06-24 11:29:39
It is necessary to use another element inside ol li, to be able to style the numbers of ol li, and the content of ol li p in different ways. In any case, I ended up using span instead of p. I am going to try with relative positioning so I can get rid of the jquery script.
0al0  2010-06-24 13:34:01
I see, and I edited my post accordingly. I think there still is no need for absolute positioning, relative position should work correctly, without javascript.
greg0ire  2010-06-24 16:05:16
Please consider adding a comment when you downvote an answer!
greg0ire  2010-06-24 17:54:33
@greg0ire: this doesn't do what he asked for, at least not when I combine it with his code, which is about all I can do with it, no? Also, there's a CSS property just for this.
reisio  2010-06-24 18:28:50
@reisio: see the word before my code sample? It reads "Example". Not "solution". I don't know what value 0al0 must give to the top property, but I think he'll be able to adapt this example to his code. Concerning the vertical-align property, it often gives cross-browser compatibilty headaches (maybe not with the 'top' value, but this makes too much things to remember), and the solution I propose does not seem this dirty to me in comparison.
greg0ire  2010-06-24 19:14:28
@greg0ire: well you're probably right that your example code combined with _some_ other code _could_ get him what he wants... I s'pose that's sort of useful information. Not having any cross-browser compatibility headaches with the code I posted.
reisio  2010-06-24 19:18:40
I rarely give pieces of code that work when I answer, because I'm too lazy to test it, and because I don't think this would be educational. The code pieces and indications I give away are often hints rather than solutions, and look, I'm already above 800 rep, answering question with "Maybe" and "I think that you could try this way" answers...
greg0ire  2010-06-24 19:36:39
@greg0ire: I guess it's cool you have above 800 rep, but your answer isn't an answer, so the downvote stays.
reisio  2010-06-24 19:41:41
Looks pretty cool now it is a round number, and be careful : this comment is not a comment.
greg0ire  2010-06-24 20:10:58
A: 

This is a working example for what you want:

EDITED: p tag aligned at top of OL numbers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title>MY SITE</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
        html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
        ol {
            padding-top:200px;
        }
        ol li {
            color: #EEEDED;
            font:bold 35px/35px Arial,Verdana,Geneva,Helvetica,sans-serif;
            font-style:italic;
            padding-top:10px;
            position:relative;
        }
        ol li p {
            position:absolute;
            top:0px;
            font-size:11px;
            color:#444444;
            font-weight:normal;
            font-style:normal;
            line-height:1.7em;
        }
        div {
            width:200px;
        }
    </style>
    </head>
    <body>
        <div>
            <ol>
                <li>
                    <p>content</p>
                </li>
                <li>
                    <p>more content</p>
                </li>
                <li>
                    <p>some big content to test this better!</p>
                </li>
                <li>
                    <p>super extra max big content to test this better, and better and better, and some more!</p>
                </li>
            </ol>
        </div>
    </body>
</html>
Zuul  2010-06-24 11:48:51
Didn't work for me in FF 3.6.4. Content is aligned with the period -- just like in the OP's problem pic. He wanted content aligned with the top of the numbers.
Brock Adams  2010-06-24 12:14:44
I had misread you question, use the edited code, it aligns p to top of ol numbers....
Zuul  2010-06-24 12:24:42
When a user down votes one answer, it's good to post a comment, allowing others to understand what's wrong an how to improve... I do believe to be the goal of Stack-overflow!
Zuul  2010-06-24 14:10:03
@Zuul: if you insist: this is a highly convoluted solution to something there is a CSS property specificly for.
reisio  2010-06-24 14:25:11
+1 for your comment Zuul, I was downvoted too, no idea why.
greg0ire  2010-06-24 17:55:13
@greg0ire, it seems that our friend reisio wants people to solve the problem presented, but within certain parameters ;) Just kidding, he may be right, if he can prove it :)
Zuul  2010-06-24 18:38:54
Also fails in IE — which yes I did assume was part of the parameters — and doesn't account for WebKit.
reisio  2010-06-24 18:55:21
+1  A: 

http://w3.org/TR/CSS21/visudet.html#propdef-vertical-align

Edit: now with example (http://www.webdevout.net/test?01m&amp;raw):

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
html {
    background: #cccccc;
}
body {
    margin: 0;
    padding: 0;
}
div {
    margin: 216px 0 0;
    width: 200px;
    overflow: hidden;
}
ol {
    color: #eeeded;
    padding: 0;
    margin: 0 0 0 42px;
}
li {
    padding: 10px 0 0;
    margin: 0;
    font: italic bold 35px/35px arial, helvetica, verdana, geneva, sans-serif;
}
html > /**/ body 
li {
    letter-spacing: -3px;
}
span {
    letter-spacing: normal;
    padding: 1px 0 0;
    color: #444444;
    font: 11px/1.7em arial, helvetica, verdana, geneva, sans-serif;
    vertical-align: text-top;
    display: inline-block;
}
        </style>
    </head>
    <body>
        <div>
            <ol>
                <li>
                    <span>content</span>
                </li>
                <li>
                    <span>more content</span>
                </li>
                <li>
                    <span>some big content to test this better!</span>
                </li>
                <li>
                    <span>super extra max big content to test this better, and better and better, and some more!</span>
                </li>
            </ol>
        </div>
    </body>
</html>
reisio  2010-06-24 13:56:34
May work or may not work, depends on element type and browser compatibility! ;)
Zuul  2010-06-24 14:10:38
@Zuul: yup, and if you'd tried it you'd know it'd work. :p
reisio  2010-06-24 14:17:38
Can you post a working example? I've made a simple test and didn't work... :/ (I always had problems with vertical-align property, except for tables)
Zuul  2010-06-24 14:39:38
This is only a partial answer.
codeinthehole  2010-06-24 17:32:48
Edited — everyone happy now?
reisio  2010-06-24 18:21:39
@reisio, almost :) Why don't you use the original p tag? ;)
Zuul  2010-06-24 18:36:03
@reisio, btw, I do read a lot... cof cof cof...
Zuul  2010-06-24 18:36:36
@Zuul: a single p within a list-item is nonsensical; is it part of a list, or is it a paragraph? Could justify it if there were more than one. Works the same using a p instead of a span, though (w/margin: 0;).
reisio  2010-06-24 18:41:44
@reisio, ok ok ok... +1 up vote because you do read more that me ;) (btw, I've learn something with this, tks)
Zuul  2010-06-24 18:58:40
@reisio, replace the <p> text with a larger lorem ipsum text block and the layout fails.
codeinthehole  2010-06-24 19:07:10
@codeinthehole: nope, it doesn't. At this point I think there might be something wrong with your browsers (etc.).
reisio  2010-06-24 19:15:51
+2  A: 

Example ;) http://www.webdevout.net/test?04E&amp;raw

This can be solved by:

  1. applying display: inline-block to the P element
  2. applying vertical-align: middle to the P element

This enables the P element to share inline and block-level characteristics, allowing the vertical-align to function correctly (on all the block of text, as a whole).

Example CSS:

ol { margin-left: 100px; }

li { font-size: 4em; }

p { display: inline-block; vertical-align: text-top; font-size: 0.25em; line-height: 1.5; padding-left: 2em; }

div { width: 50%; margin-left: -25%; left: 50%; position: relative; }

Example markup: 

<div>
  <ol>
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pulvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
     </li>
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pulvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
     </li>
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pulvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
     </li>
  </ol>
</div>

Note: display: inline-block doesn't function in Firefox 2 - an alternative is to use display: -moz-inline-box

EDIT: replaced 'vertical-align: middle;' with 'vertical-align: text-top;' to line up numbers with the top of each paragraph.

EDIT 2: For the non-believers, here is the CSS and markup in context -> copy, paste, view

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">

        ol { margin-left: 100px; }

        li { font-size: 4em;}

        p { display: inline-block; vertical-align: text-top; font-size: 0.25em; line-height: 1.5; padding-left: 2em;}

        div { width: 50%; margin-left: -25%; left: 50%; position: relative; }

    </style>
    </head>
    <body>
        <div>
            <ol>
                <li>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate 
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
                </li>
                <li>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate 
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
                </li>
                <li>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate 
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
                </li>
                <li>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate 
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
                </li>
            </ol>
        </div>
    </body>
</html>
codeinthehole  2010-06-24 17:32:06
Doesn't work in IE.
reisio  2010-06-24 18:22:50
@reisio; that's not correct -> tested successfully in IE6, IE7 and IE8
codeinthehole  2010-06-24 18:42:48
Nope, not _this_ code... though if what you tested had an extra five characters added in the right place, it would've basically worked.
reisio  2010-06-24 18:48:43
8 characters ;) - missed out two <li> elements in the markup
codeinthehole  2010-06-24 18:52:52
Down-voting because of a typo, isn't a great idea.
codeinthehole  2010-06-24 18:58:25
Five characters — they're still missing, and it probably won't work in IE until they aren't.
reisio  2010-06-24 19:20:55
+1, because I don't think this answer is that bad
greg0ire  2010-06-24 20:12:07
@reisio - ah, you mean, use 'text-top'? If so, yes -> I should have stated that (rather than 'top') .. edited, thx.
codeinthehole  2010-06-24 21:18:00
@gregOire, thanks :)
codeinthehole  2010-06-24 21:20:52
works perfectly, and very simple and clean CSS.Thanks you to all, all of your solutions are really good.
0al0  2010-06-25 10:57:42
So hopeless. :p
reisio  2010-06-25 12:18:48

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?