Log in

View Full Version : 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 (http://www.morleychalmers.com/MostlyTheravada/dharmaTalks/1.html).

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"




#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:




<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:


#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.
<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 (http://www.morleychalmers.com/MostlyTheravada/dharmaTalks/1.html). 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...



#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:



<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:



.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:




<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.