Michael R. Copeland wrote, somewhat impatiently:
> I am trying to build a prototype Web site, but I am having to learn
> many aspects of HTML and CSS as I do. I am completely new to CSS, and
> there are a number of HTML tags I don't understand (e.g. <div>, <span>),
> but am using some because I've cannabilized some code here. Thus, I
> have code that I don't understand and that isn't working... 8<{{
A great opportunity to learn! Too much code copied on the Web over-uses
(or misuses) the div and span elements anyway. Quite possibly, you don't
need them. You ought to at least find out what they do.
Work through a tutorial, such as those at
http://www.htmldog.com/guides/
or start getting used to checking (perhaps I should say wading) through
the authoritative if sometimes opaque documents at the W3C:
http://www.w3.org/TR/html401/ for HTML
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 for div & span
http://www.w3.org/TR/CSS21/ for CSS
> The problems I'm seeing here are:
> 1. Each menu's item data is progressively shifted to the right. That
> is, the "History" paragraphs are fine, but the paragraphs that follow
> ("Sales", "Photos", "Neighborhood") are shifted/indented. I don't
> understand why and don't know how to correct it...
> 2. The links don't work. I don't know why.
> I have tweaked my code to this point, but nothing has worked so far.
> Please advise. TIA
As Blinky said, post a URL. We don't really want to see this much code,
pasted or (mis-)typed into our newsreaders, where we can't really do
anything with it. With a URL, we can click once to open our browsers,
study the page's behavior, use the tools and extensions in the browsers,
and easily validate your code. And validation is the first step when you
see a problem.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This will reliably give you Quirks mode, which is not reliable. See
http://hsivonen.iki.fi/doctype/ and change your doctype to (e.g.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
> <html><head>
[snippage of code]
> b {
> color: black;
> width:60em;
> text-decoration:none;
> background-color:brown;
> text-indent:1cm;
> }
> p.margin {margin: 0cm 3cm 0cm 3cm; text-indent:1cm;}
Ehh, kind of a silly name for a class. "Margin" is already a property
name. Use class names based on function: "menu", "sidebar", "warning",
etc. What's different about your margin class here from all the rest of
the <p> elements?
> </style>
> </head>
> <body style="color: rgb(255, 255, 255); background-color: Brown;"
> alink="#ff6600" link="#99ff99" vlink="#990099">
Use CSS, in a form similar to:
a { color:#0000ff; }
a:link { color:#99ff99; }
a:visited { color:#990099; }
a:hover { color:#ff0000; }
a:active { color:#ff6600; }
[snippage of code]
>
> <div style="text-align: center; color: black;">
> <br><br>
> <b><p name="#History" class="margin">Regency House History</div><br>
The <b> element is missing its closing tag. The <p> element should have
its name attribute changed to an id attribute.
You don't need the <br> thingies; you can style the vertical spacing
with margin on the p (or padding on the div) with CSS.
[snippage of code]
>
> <div style="text-align: center; color: black;">
> <p><b name="#Sales">Units for Sale<br></p></div>
Again, validating would have caught this error for you.
http://validator.w3.org/ for markup,
http://jigsaw.w3.org/css-validator/ for CSS
I don't see what your divs are for either. What happens when you remove
them (besides your code getting simpler to read and maintain, and faster
to download)?
--
John
Read about the UIP:
http://improve-usenet.org/