Results 1 to 5 of 5

Thread: First posting

  1. #1
    Join Date
    Jan 2008
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default First posting

    Not my first posting on elsewhere on this forum, but my first here in CSS.

    I'm generating HTML and CSS automatically from an excellent Mac-only authoring program (authoring in the sense of writing a text book), called Scrivener. I'm in the process of creating a single CSS file which will work for about 50 HTML pages, with CSS tweaks that go beyond what I can do within Scrivener. So far it's working.

    Here's an example of work in progress, hand tweaked to make the page appear the way I'd like.

    My problem is that styling for itemized lists (currently part of <ol><li></li></ol>) is still within the HTML file itself, not yet part of the CSS file. I'd like to strip those margin calls and place them in the CSS file where I can tweak them and make itemized lists appear with consistent indents across all the documents.

    Is this possible? I suspect it is, but am not yet experienced enough with CSS.

    Much appreciated.

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Yes, you just need to use the correct CSS calls... so say you have a list in you page with a background color of black, and you want one list item to have a background color of white and on hover they turn red... we will call the ol "nav"

    Code:
    #nav ol li{
          background-color: #000;
          color: #FFF;
          width:  15em;
    }
    
    #nav li.different {
          color: #000;
          background-color: #FFF;
    }
    
    #nav li a:hover {
         background-color: #F00;
    }
    Then you could use something like this:

    HTML Code:
    <body>
    <div id="nav">
         <ol>
         <li>Text and/or links here</li>
         <li>Text and/or links here</li>
         <li>Text and/or links here</li>
         <li class="different">This one is different</li>
         </ol>
    </div>
    </body>
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Jan 2008
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    I'm missing something. Here's the CSS code for the relevant section:

    Code:
    #nav ol li{margin: 0.0px 0.0px 12.0px 35.0px; font: 18.0px Times New Roman}
    I'm only playing around with margins and font calls. And here's the HTML for the same section. Note, as a test, I only played with the first item.
    Code:
    <ol>
    <li>The degree she or he recognizes, is aware of and acknowledges these universal realities.</li>
    <li style="margin: 0.0px 0.0px 12.0px 35.0px; font: 18.0px Times New Roman">The strategies he or she resorts to deal with them, with awareness or without.</li>
    </ol>
    And here's what the page looks like. What am I misunderstanding?

    Appreciated.

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Well, first a few quirks of mine... always use valid code... multiple word font names need quote marks...

    Code:
    #nav ol li{margin: 0.0px 0.0px 12.0px 35.0px; font: 18.0px "Times New Roman";}
    Now this is inside your CSS file. So on your HMTL you need to call it:

    Code:
    <div id="nav">
    <ol>
    <li>The degree she or he recognizes, is aware of and acknowledges these universal realities.</li>
    <li>The strategies he or she resorts to deal with them, with awareness or without.</li>
    </ol>
    </div>
    However, with that bit of CSS it will make ALL li's in that div use that style... if you only want one li to have it... make some slight changes:

    Code:
    .nav {margin: 0.0px 0.0px 12.0px 35.0px; font: 18.0px "Times New Roman";}
    We took out specific declaration (ol and li) and made it a class instead of an ID so we can use it again later if needed). then the HTML:


    Code:
    <ol>
    <li>The degree she or he recognizes, is aware of and acknowledges these universal realities.</li>
    <li class="nav">The strategies he or she resorts to deal with them, with awareness or without.</li>
    </ol>
    Now there is no more div, and only the li with the class name will be affected by the CSS.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Jan 2008
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Thanks, Blizzard. Works perfectly.

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
  •