Sent by Roger Roelofs on 26 January 2005 05:05
Robert,
On Jan 25, 2005, at 6:42 PM, Robert Neville wrote:
> The original situation still persists. Let me address
> some of the basic questions that arose from the HTML
> validation.
<http://www.geocities.com/robert_neville310/aquav1.html>
>
> Error: element BR not allowed here; assuming missing
> LI start-tag
>
> Apparently, my attempt to add paragraph space was not
> appropriate. So how do I add space in the CSS for a
> pair of list tags, <ol> and <ul>. Does one use
> line-height, padding, margins, or something else? I
> prefer no space between individual <li> tags.
If you want space _between_ elements, margin is the thing you want to
change. If you want space _within_ an element, padding will do that.
What the validator is telling you is that lists can only contain list
items, and nothing else. List items can contain many things. See the
bottom of the message for some suggested html for your situation. As
hard as it seems, it is batter to get the html structure right first,
and worry about how it will look later. Try viewing your page in a
text-only browser to see what i mean. If it makes sense without the
css, then you have a good starting point to apply styles. ( and you're
very close. ) It is kind of annoying that geocities generates more
validation errors than your own code does.
> <div align=”center”><img alt="New Document Dial ...
> ^
> Error: there is no attribute ALIGN for this element
> (in this HTML version)
>
> Validation told me to place it in CSS. How? Margin:
> Auto? I just read the thread that pointed to the
> following link. But the images still don’t center.
>
> http://dorward.me.uk/www/centre/#block
You are exactly correct. _Block level_ elements can be centered by
defining a width that is less than 100% of its container and using
margin: auto; Images are _inline_ elements by default. Inline elemnts
are centered using text-align: center;
-------------- html for article ---------
<div class="Article">
<h3> Aqua Tabs</h3>
<div class="ArticleLongContent">
<div class="ArticleBody">
<div class="ArticleID">
Version 1<br>
Application: Photoshop<br>
Category: Interface<br>
</div>
<ol class="instructions">
<li>Select <strong>File > New</strong>
<ul>
<li>Width: 100</li>
<li>Height: 60</li>
<li>Background Content: Tranparent</li>
</ul>
<img alt="New Document Dialog" src="images/AquaTabsv1A.gif">
</li>
<li>Press <strong>Crtl+D</strong> to reset the color
default colors</li>
<li>Select <strong>Rounded Rectangle Tool</strong>; Set <em>pixel
radius</em> to <strong>6 px</strong>; draw a <strong>80 x 60
pixel</strong> rectangle
<ul>
<li><strong>Rounded Rectangle Tool</strong>
<img alt="Round Retangle Tool"
src="images/PS_icoRoundRectangle.gif">
</li>
</ul>
</li>
<li>Here's the tricky part. You have to subtract <em>16
px</em> from the bottom of the shape. <strong>Select Rectangle
Tool</strong> and set the toolbar option to <em>Subtract from
shape</em>
<ul>
<li><strong>Rectangle Tool</strong>   
<img alt="Retangle Tool" src="images/PS_icoRectangleTool.gif"></li>
<li><strong>Subtract Shape
icon</strong>    <img alt="Subtract Shape"
src="images/PS_icoSubtractShape.gif"></li>
</ul>
</li>
<li>Select the Layer Effects button
<img alt="Layer Effects Icon" src="images/PS_icoLayerEfx.gif">
<ul>
<li>Inner Glow
<ul>
<li>Opacity: 60%</li>
<li>Color: #000000</li>
<li>Size: 4 px</li>
</ul>
<img alt="Layer Style: Inner Glow" src="images/AquaTabsv1EE.gif">
</li>
<li>Gradient Overlay
<ul>
<li>Blend Mode: Normal</li>
<li>Opacity: 100%</li>
<li>Gradient: #FFFFFF to #CCCCCC</li>
<li>Style: Linear</li>
<li>Angles: 90°</li>
</ul>
<img alt="Layer Style: Gradient" src="images/AquaTabsv1F.gif">
</li>
</ul>
....
hth
Roger,
Roger Roelofs
Know what you value.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
