SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: ID to OL

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ID to OL

    Hi, I thought that I had learnt to do this, if I have an ordered list and have set it to show the list items against a lower-roman bullet point, I do this:

    Code:
      ol {
     	margin: 0 80px 0 40px;
     	padding: 0;
     	}
     	
      ol li {
     	list-style-type: lower-roman;
     	}
    But then if I want to use a different ordered list on the same page, i would have to create two rules and assign them different id's.

    Code:
     #roman ol {
     	margin: 0 80px 0 40px;
     	padding: 0;
     	}
     	
     #roman ol li {
     	list-style-type: lower-roman;
     	}
     
     #alpha ol {
     	margin: 0 80px 0 40px;
     	padding: 0;
     	}
     	
     #alpha ol li {
     	list-style-type: lower-alpha;
     	}
    and then in my markup:

    Code:
     <ol id="romans">
     	<li>Your VoIPvoice USB audio is muted.</li>
     	<li>Your soft-phone application is not configured to use VoIPvoice USB audio.</li>
     	<li>You are accessing the Internet through a Firewall, Proxy or NAT system. Generally these allow outgoing data without interference, but with only 'recognised' data types being allowed back in. Hence they hear you but you can't hear them.</li>
     	<li>The H.323 and SIP standards set out how Internet Telephone data needs to be handled by a Proxy Server, NAT and Firewall. Check with your system administrator to see if your systems are configured correctly.</li>
     </ol>
     
     <ol id="alpha">
     	<li>Your VoIPvoice USB audio is muted.</li>
     	<li>Your soft-phone application is not configured to use VoIPvoice USB audio.</li>
     	<li>You are accessing the Internet through a Firewall, Proxy or NAT system. Generally these allow outgoing data without interference, but with only 'recognised' data types being allowed back in. Hence they hear you but you can't hear them.</li>
     	<li>The H.323 and SIP standards set out how Internet Telephone data needs to be handled by a Proxy Server, NAT and Firewall. Check with your system administrator to see if your systems are configured correctly.</li>
     </ol>
    I think though I may have something a miss as it isn't working.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, sorry...

    This...
    Code:
    #roman ol {
    margin: 0 80px 0 40px;
    padding: 0;
    }
    ... will apply the rule to any ol that is a descendant of an element with the id 'roman'. As you have no ol's which are descendants of the element 'roman', it will do nothing. This is what you want :
    Code:
    #roman {
    margin: 0 80px 0 40px;
    padding: 0;
    }
    #roman li {
    list-style-type: lower-roman;
    }
    #alpha {
    margin: 0 80px 0 40px;
    padding: 0;
    }
    #alpha li {
    list-style-type: lower-alpha;
    }
    Edit:

    Nick,
    Use Paul's reduction below - it's better.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI Nick,

    Beginners mistake there lol - I expect better from you

    Your styles will not be applied because you don't have any ol's within the id's specified.

    You have ol's with an id.
    e.g. ol#roman

    not:
    #roman ol


    Your code could be reduced to this:
    Code:
    ol#roman,ol#alpha  {
      margin: 0 80px 0 40px;
      padding: 0;
       list-style-type: lower-roman;
    }
    ol#alpha {list-style-type: lower-alpha;}
    Edit:


    bon rouge beat me to it

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, well i'm still kind of in schoolboy mode, but i've ditched the short trousers and cap years ago.

    Quick question, how come in the markup:

    Code:
     <ol id="roman">
     <li>...</li>
     </ol>
    I am applying an id to an ordered list rather than an ordered list to an id.

    See how I'm getting confused.

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am a little confused by the question, but I'll try to answer it...

    You assign an id to an element. There are many different kinds of elements - div, span, p, h1, a, ul, ol, li, etc. You are simply naming (or 'assigning an id to') that ol - 'roman'. In the name of the father, the son, etc. I christen you 'roman'.

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i get it...

    A bit off the topic, but while I have some attention, why isn't this hack working:

    Code:
     #box1 h5 {
     	margin: 28px 0 0 10px;
     	padding: 0;
     	font-size: 10px;
     	}
     	
     * html #box1 h5 {margin: 17px 0 0 10px;}
    www.b2bnative.com/voip/usb.php

    I need to clear my head...
    Last edited by Sarah; Jul 13, 2005 at 08:47. Reason: removed swearing - thank you

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm missing something... What's it supposed to do?

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, on the page, at the the bottom I have teaser boxes, it is the style rules for the Click to view link.

    I think the p above the link is pushing it down, but I can't understand why

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this :
    Code:
    #box1, #box2, #box3 {
    position:relative;
    }
    h5 {
    position:absolute;
    bottom:3px;
    }
    (Just put it at the end of your style to see if it works - I haven't tested it properly, but I think it's good).

  10. #10
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool,

    so what we have done here is position all three boxes relative to the container they sit in and then position the h5 element absolute bottom 3px. Its just that I note any help I get so that I learn more efficiently

  11. #11
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not exactly, no...
    The boxes are floated. The elements within them are positioned relative to them. The h5s are at the bottom of the boxes (well, 3px form the bottom). I wasn't sure if this would work to be honest... Is it OK in IE?

  12. #12
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah good!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •