First posting

**wanapitei** · 01-31-2008, 05:40 PM

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.

**BLiZZaRD** · 01-31-2008, 07:11 PM

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>

**wanapitei** · 01-31-2008, 07:39 PM

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.

**BLiZZaRD** · 01-31-2008, 07:47 PM

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.

**wanapitei** · 02-02-2008, 08:15 PM

Thanks, Blizzard. Works perfectly.

Thread: First posting

Thread Tools

Search Thread

First posting

Bookmarks

Bookmarks

Posting Permissions