Vertical spacing of elements

[fuzzyman]

In a couple of places on my webpages I have several items that I would
like to be arranged vertically.

URLS : http://www.voidspace.org.uk/python/index.shtml ,
http://www.voidspace.org.uk/python/weblog/index.shtml

(I'm aware of, and have fixed, some of the validation errors by the way
- not yet uploaded new version !)

One example is the sidebar, and another is a set of links at the bottom
of the weblog. At the moment I use <br /> to vertically space the
items. e.g.
<div class="indexblock" >
<a href="index.shtml">Front page</a><br />
<a href="index.xml">RSS Feed</a><br />
<a href="atom.xml">Atom Feed</a><br />
<a href="#index">Return to top</a><br />
</div>

The side bar is worse, I have a couple of <br /> between each item ! I
guess in the 'indexblock' I could make into a list, with no symbol (?),
or make 'a' tags block items (?).

In the sidebar I think I would have to wrap each item in a <div>, and
have a rule in the style sheet. This seems much more verbose. I thought
part of the point of using CSS was to *reduce* extraneous markup ?

Regards,

Fuzzy
http://www.voidspace.org.uk/python/index.shtml

[Benjamin Esham]

Here's a quick example, ripped directly out of one of my files:

ul.blocks li
{
list-style-type: none;
display: block;
font-size: x-small;
font-family: "Verdana", "Trebuchet", sans-serif;
}
ul.blocks li A:link,
ul.blocks li A:visited
{
background-color: #aaaaaa;
padding: 3px;
color: white;
}
ul.blocks li A:hover,
ul.blocks li A:visited:hover
{
background-color: #ff6600;
padding: 3px;
text-decoration: none;
}
ul.blocks li + li
{
margin-top: 1em;
}

This particular stylesheet makes the links look more like buttons; if
you don't like that, just get rid of the 3px padding and change the
colors. Use with HTML like this:

<ul class="blocks">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
</ul>

Hope this helps!

[fuzzyman]

Benjamin Esham wrote:

Here's a quick example, ripped directly out of one of my files: [snip useful stylesheet example].. This particular stylesheet makes the links look more like buttons; if
you don't like that, just get rid of the 3px padding and change the
colors. Use with HTML like this:

<ul class="blocks">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
</ul>

Hope this helps!

Thanks. I think I'll use it ! Very helpful.
For the sidebar stuff I guess I'll have to use a liberal sprinkling of
divs...

Regards,

Fuzzy
http://www.voidspace.org.uk