HTML & CSS Problems - Newbie

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
   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<{{
   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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-
  <title>Regency House Building</title>
  <style type="text/css">
ul1 {
a {
padding:0.2em 0.6em;
b {
color: black;
p.margin {margin: 0cm 3cm 0cm 3cm; text-indent:1cm;
<body style="color: rgb(255, 255, 255); background-color: Brown;"
alink="#ff6600" link="#99ff99" vlink="#990099">
<div style="text-align: center;">
  <li><a href="#History">History</a></li>
  <li><a href="#Sales">Units for Sale</a></li>
  <li><a href="#Photos">Photo Gallery</a></li>
  <li><a href="#Neighborhood">The Neighborhood</a></li>

<div style="text-align: center; color: black;">
<b><p name="#History" class="margin">Regency House History</div><br>

<div style="text-align: left; color: black;">
<p class="margin">The Regency House was built in 1964, initially as a
luxury apartment building.
Designed by George H. Schonenberger, it was the second high rise
residential building constructed in Phoenix
(Phoenix Towers, built in 1956, was the first).<br>
<p class="margin">In 2004, after rejecting several attempts to update
and improve the aging interiors of the building, the owners
voted overwhelmingly to accept a comprehensive proposal to redo the
common areas.  This plan, done by Copeland Interiors, Inc.,
included all halls and lobbies, as well as the Social Room, Front
Desk/Lobby, and the creation of a Fitness Center in the
unused Library.  The project designer oversaw all aspects of this year-
long project, which retained the stately wood interiors,
but added new lighting, carpets, flooring, and completely redesigned the
Front Desk/Lobby.
<p class="margin">The Social Room got special attention, with new
furniture, a grand piano, large screen TV, and stereo.  An interesting
aspect used 76 nostalgic photographs obtained from various sources,
including many residents.  These photos are used throughout the
building to highlight the city's and neighborhood's history, integrating
the building's fresh, new appearance and the local area's
diverse past.  Of special note is the "community effort" this part of
the project assumed, when
many residents worked together to acquire, identify, and prepare these
pictures during a day-long
"framing party" for these pictures.
<p class="margin">Upon completion of the project, it was submitted to
the 2005 ASID North Chapter Professional Awards, where it won First
Place in Commercial Design, as well as Best of Show.<br>[etc.]</b></p>

<div style="text-align: center; color: black;">
<p><b name="#Sales">Units for Sale<br></p></div>
<div style="text-align: left; color: black;">
<p class="margin">Following is a (non-exaustive) list of condominium
units for sale in the Regency
House (as of 03/16/2008):

<div style="text-align: center; color: black;">
<p><b name="#Photos">Photos<br></p></div>
<div style="text-align: left; color: black;">
<p class="margin">

<div style="text-align: center; color: black;">
<p><b name="#Neighborhood">Our Neighborhood<br></p></div>
<div style="text-align: left; color: black;">
<p class="margin">List of schools, churches, shopping, restaurants,
entertainment, and such.  Possibly reviews (as appropriate...)


Re: HTML & CSS Problems - Newbie

Michael R. Copeland wrote, somewhat impatiently:
Quoted text here. Click to load it

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 /
or start getting used to checking (perhaps I should say wading) through
the authoritative if sometimes opaque documents at the W3C: for HTML for div & span for CSS

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

This will reliably give you Quirks mode, which is not reliable. See and change your doctype to (e.g.)
" ">

Quoted text here. Click to load it

[snippage of code]

Quoted text here. Click to load it

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?

Quoted text here. Click to load it

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]

Quoted text here. Click to load it

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]
Quoted text here. Click to load it

Again, validating would have caught this error for you. for markup, 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)?

Read about the UIP: /

Site Timeline