Forum Moderators: not2easy
I'm still a little new to this <div> + CSS layout scheme. I noticed that I can define my own tags with CSS and Firefox will recognize them, but IE will not - so I'm limited to the tags that are recognized. I have a side navigation bar on my site which looks something like this, (- represent spaces):
Title
-Link
-Link
Title
-Link
-Link
Etc. My goal is to have the links indent a little under their titles (about the size of a space, so 5px). I have already defined <p> for the titles, but I don't want to define <a> for the links because the entire x plain of the link will be clickable; I only want the text of the link to be clickable. From my knowledge of CSS, I saw two options:
1) Use <p> and insert an in front of each link or:
2) Define another element.
I chose option 2 as a byte saver. I defined the h1 element in my side navigation bar to behave how I'd like it to (set it to 12px font size, plus the indent, etc.) Is it a bad idea to use the h1 tag for this purpose? Will the text display huge on older browsers? Is there another option that I just don't know about?
Much thanks in advance,
Max
You shouldn't really be using to add a space but rather css to style your markup. So as an example if you were to go for unordered list your html should be something like:
<div>
<h2>Your title</h2>
<ul>
<li><a href="#">your text link</a></li>
<li><a href="#">your text link</a></li>
<li><a href="#">your text link</a></li>
</ul>
</div>
and your style would be:
ul {margin:0; padding:0; list-style: none;}
li {margin-left: 10px;}
That should give you style your after.
I would suggest that you use a list.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body><h4>Title</h4>
<ul>
<li><a href="#">link 1</a>
<li><a href="#">link 1</a>
<li><a href="#">link 1</a>
<li><a href="#">link 1</a>
</ul><h4>Title</h4>
<ul>
<li><a href="#">link 1</a>
<li><a href="#">link 1</a>
<li><a href="#">link 1</a>
<li><a href="#">link 1</a>
</ul></body>
</html>
Off-topic, but related to the code above: the charset declaration goes before the title tag.
Could you please provide the source of this assertion?
I have always assumed that it's position within the head section was irrelevant as it does not
appear to effect document validation.
My personal preference has always been directly after the head tag. ;)
birdbrain
META declarations should appear as early as possible in the HEAD element.
HTML Document Representation [w3.org]
I imagine this is because preceding content may be unreadable by the UA (because it doesn't know the encoding yet).
I'm another vote for an unordered list, incidentally :)
[edited by: Receptional_Andy at 8:04 pm (utc) on June 14, 2008]
I too didn't know that the charset declaration goes before <title> so this thread served a double purpose in that sense.
