HTML virgin needs help

Miscellaneous Forums/General Discussion/HTML virgin needs help

OK, this might be a bit difficult to explain what I want to do, but here goes...

I have an unordered (bulleted) list of text that I want centred on the page. However, when I do this, each individual list item is centred. I want all list items to be left-justified (so the bullets line up) but have the list as a whole centred on the page. How do I do this?

This is roughly what I have at the moment:

                             * list item one
                                 * another
                               * and another
                             * last item here

and this is what I want:

                             * list item one
                             * another
                             * and another
                             * last item here

Help!!! :)

FortKnight

big10p

Impossible! You're joking, right? Surely it's not that much of an unusual design. :/

FortKnight

big10p

Well, if it's not possible, anyone know how I can put all my list items in a separate, vertical frame on the left of the page with a scrollbar? Like the blitz docs have all the commands in a narrow, left pane and the description text in the main, big pane.

Grey Alien

post your source.

FortKnight

big10p

Thanks EA, I go take a look now.

In the meantime, here's the source. It only contains the list at the mo so I don't know if it's going to be much help. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Command Reference</title>
  <link rel="stylesheet" href="commands.css"
 type="text/css">
</head>
<body>
<ul style="text-align: center;">
  <li style="text-align: center;">com 1</li>
  <li style="text-align: center;">c2</li>
  <li style="text-align: center;">command 3</li>
  <li style="text-align: center;">command 4</li>
  <li style="text-align: center;">command 5</li>
</ul>
</body>
</html>

BlackJumper

A cheap way to get close to this might be to wrap the list in a <blockquote> if you don't need it to be exactly centred, just indented.

You could also wrap it in a <div class="mylist"> and use css to define the offset for .mylist

Neither of these 'kludges' will help if you are working with different sized screens.

Gabriel

#10

Best way is probably to align everything with css, but since I'm not confident about CSS support in all browsers, I don't use it and haven't read up on it.

This works though, just need to adjust the width of the table so that everything is centered.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Command Reference</title>
  <link rel="stylesheet" href="commands.css"
 type="text/css">
</head>
<body>
<table width="200" align="center">
<tr><td style=align="left">
<ul>
  <li>com 1</li>
  <li>c2</li>
  <li>command 3</li>
  <li>command 4</li>
  <li>command 5</li>
</ul>
</td></tr>
</table>
</body>
</html>

Grey Alien

#11

well they beat me to it. Table is easy.

big10p

#12

Thanks all. I think my best bet is to wrap the list in a centred table, ala Gabriel's code. When I first tried this it didn't work but it turns out the table selector in the CSS I'm linking to is overriding it somehow. I'm new to all this but thought inline tags override css definitions?

I didn't write the CSS. I'm making HTML docs for my user library and wanted them to appear the same as the blitz docs so nicked the commands.css blitz uses. Shhh! don't tell anyone. :P

Maybe it would be better to have all the commands (my list) in a separate pane on the left, like the blitz docs. Is this hard to do?

Sledge

#13

You don't need a table (although I still reckon tables are okay for layout, CSS implementation in browsers being what it is). You can simply wrap the list in a centered DIV - you will need to supply a width and margins for it to work:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Command Reference</title>
  <link rel="stylesheet" href="commands.css"
 type="text/css">
</head>
<body>
<div style="text-align: center; width:200px; margin-left:auto; margin-right:auto; background-color:#aaaaaa;">
<ul style="text-align: left;">
  <li style="text-align: left;">com 1</li>
  <li style="text-align: left;">c2</li>
  <li style="text-align: left;">command 3</li>
  <li style="text-align: left;">command 4</li>
  <li style="text-align: left;">command 5</li>
</ul>
</div>
</body>
</html>

I gave it a colour so you can see more clearly what is going on.

EDIT: You probably want something more like this, though...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Command Reference</title>
  <link rel="stylesheet" href="commands.css"
 type="text/css">
</head>
<body>
<div style="text-align: center; width:200px; margin-left:auto; margin-right:auto; background-color:#aaaaaa;"><!-- Centered column -->
<div style="text-align: left;"><!-- Left-aligned content -->
<ul>
  <li>com 1</li>
  <li>c2</li>
  <li>command 3</li>
  <li>command4</li>
  <li>command 5</li>
</ul>
</div><!-- Left-aligned content ends -->
</div><!-- Centered column ends -->
</body>
</html>

big10p

#14

Thanks Sledge. ;)