Problems with HTML and CSS

29/03/2008, 06h04

I am building a prototype Web site, and am trying to use CSS to
handle some of the formatting. Although I have some (?) experience with
HTML coding, I am completely new to CSS - and I don't have much
understanding of their relationship. 8<{{
That being said, I have the following code that has many problems:
(1). The 2nd, 3rd, and 4th items on the page get progressively aligned
to the right, rather than each being centered.
(2) The links 4 menu items (History, Sales, Photos & Neightborhood)
don't work.
I suspect there are many issues with <div> usage (I don't understand
what that tag is used for...), and perhaps something with the way I have
defined the "style". Also, if the is the wrong NG, please direct me
where I might address and learn these issues. TIA...
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Regency House Building</title>
<style type="text/css">
ul1 {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a {
width:10em;
text-decoration:none;
color:white;
background-color:green;
padding:0.2em 0.6em;
}
a:hover {background-color:#ff3300}
li {display:inline}
b {
color: black;
width:60em;
text-decoration:none;
background-color:brown;
text-indent:1cm;
}
p.margin {margin: 0cm 3cm 0cm 3cm; text-indent:1cm;
}
</style>
</head>
<body style="color: rgb(255, 255, 255); background-color: Brown;"
alink="#ff6600" link="#99ff99" vlink="#990099">
<div style="text-align: center;">
<ul1>
<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>
</ul1>
</div>
<br>

<div style="text-align: center; color: black;">
<br><br>
<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>

<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):
<br>[etc.]
</p>
<br></div>

<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">
<br>[etc.]
</p>
<br></div>

<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...)
<br>[etc.]
</p>
<br></div>

</body>
</html>

29/03/2008, 07h21

Michael R. Copeland wrote:

[twice]

This isn't chat. Post once and wait for replies. More than two minutes.

--
Blinky
Killing all posts from Google Groups
The Usenet Improvement Project: http://improve-usenet.org
Blinky: http://blinkynet.net

29/03/2008, 10h38

On 2008-03-29, Michael R. Copeland <mrc2323@cox.net> wrote:
> I am building a prototype Web site, and am trying to use CSS to
> handle some of the formatting. Although I have some (?) experience with
> HTML coding, I am completely new to CSS - and I don't have much
> understanding of their relationship. 8<{{

Don't make up elements (you're using a "ul1"). Use only the proper HTML
4 set, and give them classes if you need to get at them with CSS.

Like this:

ul.foo { padding: 0 }
<ul class="foo">

Validate your HTML at http://validator.w3.org. Use the strict DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

to stay out of quirks mode.

> That being said, I have the following code that has many problems:
> (1). The 2nd, 3rd, and 4th items on the page get progressively aligned
> to the right, rather than each being centered.

They look all right to me. I think Firefox doesn't mind your ul1.

> (2) The links 4 menu items (History, Sales, Photos & Neightborhood)
> don't work.
> I suspect there are many issues with <div> usage (I don't understand
> what that tag is used for...),

It's for any time you can't think of a better tag

In HTML you can't just nest anything inside anything, many combinations
are invalid, for example, <p> inside <b> which you have. In some cases
the browser will just allow it, in other cases it will open and close
elements and move them around in unpredictable ways. This is why you
have to validate it.

You could replace your outermost <b> here with a <div> for example.

[...]
> ul1 {
> float:left;
> width:100%;

This doesn't need to be floated. You can get rid of both float and
width.

[...]
> b {
> color: black;
> width:60em;

Width doesn't apply to inline boxes.

> text-decoration:none;
> background-color:brown;
> text-indent:1cm;

Nor does text-indent. Really you want a block here. Adding display:
block would half do it, but <b> makes your HTML invalid. DIV is display:
block anyway.

[...]
></div>
><br>

No need for <br> after a div. <br> is for breaking a line. But whenever
you end or start a block like a div you get a whole new paragraph anyway.

If you want a bigger gap between blocks, set margins on the divs.

><div style="text-align: center; color: black;">
><br><br>

Lose the <br>s and use a margin instead. You should hardly ever
need to use <br>.

29/03/2008, 15h57

> Michael R. Copeland wrote:
>
> [twice]
>
> This isn't chat. Post once and wait for replies. More than two minutes.
>
I apologize. When I posted the first version, I received an error
message from my reader (Gravity) that I had exceeded a time limit: the
message wasn't sent. Apparently, I had spent too much time constructing
the post (yes, the post is excessive!), and I had lost my connection.
Several hours later, I rebuilt the post (in NotePad) and tried to post
that (similar) message. I was very surprised to see my original message
_had_ been posted - and then both were there. 8<{{
Again, my apologies to all...

29/03/2008, 06h04	#1
Michael R. Copeland Messages: n/a Hébergeur:	Problems with HTML and CSS I am building a prototype Web site, and am trying to use CSS to handle some of the formatting. Although I have some (?) experience with HTML coding, I am completely new to CSS - and I don't have much understanding of their relationship. 8<{{ That being said, I have the following code that has many problems: (1). The 2nd, 3rd, and 4th items on the page get progressively aligned to the right, rather than each being centered. (2) The links 4 menu items (History, Sales, Photos & Neightborhood) don't work. I suspect there are many issues with <div> usage (I don't understand what that tag is used for...), and perhaps something with the way I have defined the "style". Also, if the is the wrong NG, please direct me where I might address and learn these issues. TIA... Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Regency House Building</title> <style type="text/css"> ul1 { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { width:10em; text-decoration:none; color:white; background-color:green; padding:0.2em 0.6em; } a:hover {background-color:#ff3300} li {display:inline} b { color: black; width:60em; text-decoration:none; background-color:brown; text-indent:1cm; } p.margin {margin: 0cm 3cm 0cm 3cm; text-indent:1cm; } </style> </head> <body style="color: rgb(255, 255, 255); background-color: Brown;" alink="#ff6600" link="#99ff99" vlink="#990099"> <div style="text-align: center;"> <ul1> <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> </ul1> </div> <br> <div style="text-align: center; color: black;"> <br><br> <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> <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): <br>[etc.] </p> <br></div> <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"> <br>[etc.] </p> <br></div> <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...) <br>[etc.] </p> <br></div> </body> </html>

29/03/2008, 07h21	#2
Blinky the Shark Messages: n/a Hébergeur:	Re: Problems with HTML and CSS Michael R. Copeland wrote: [twice] This isn't chat. Post once and wait for replies. More than two minutes. -- Blinky Killing all posts from Google Groups The Usenet Improvement Project: http://improve-usenet.org Blinky: http://blinkynet.net

29/03/2008, 10h38	#3
Ben C Messages: n/a Hébergeur:	Re: Problems with HTML and CSS On 2008-03-29, Michael R. Copeland <mrc2323@cox.net> wrote: > I am building a prototype Web site, and am trying to use CSS to > handle some of the formatting. Although I have some (?) experience with > HTML coding, I am completely new to CSS - and I don't have much > understanding of their relationship. 8<{{ Don't make up elements (you're using a "ul1"). Use only the proper HTML 4 set, and give them classes if you need to get at them with CSS. Like this: ul.foo { padding: 0 } <ul class="foo"> Validate your HTML at http://validator.w3.org. Use the strict DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> to stay out of quirks mode. > That being said, I have the following code that has many problems: > (1). The 2nd, 3rd, and 4th items on the page get progressively aligned > to the right, rather than each being centered. They look all right to me. I think Firefox doesn't mind your ul1. > (2) The links 4 menu items (History, Sales, Photos & Neightborhood) > don't work. > I suspect there are many issues with <div> usage (I don't understand > what that tag is used for...), It's for any time you can't think of a better tag In HTML you can't just nest anything inside anything, many combinations are invalid, for example, <p> inside <b> which you have. In some cases the browser will just allow it, in other cases it will open and close elements and move them around in unpredictable ways. This is why you have to validate it. You could replace your outermost <b> here with a <div> for example. [...] > ul1 { > float:left; > width:100%; This doesn't need to be floated. You can get rid of both float and width. [...] > b { > color: black; > width:60em; Width doesn't apply to inline boxes. > text-decoration:none; > background-color:brown; > text-indent:1cm; Nor does text-indent. Really you want a block here. Adding display: block would half do it, but <b> makes your HTML invalid. DIV is display: block anyway. [...] ></div> ><br> No need for <br> after a div. <br> is for breaking a line. But whenever you end or start a block like a div you get a whole new paragraph anyway. If you want a bigger gap between blocks, set margins on the divs. ><div style="text-align: center; color: black;"> ><br><br> Lose the <br>s and use a margin instead. You should hardly ever need to use <br>.

29/03/2008, 15h57	#4
Michael R. Copeland Messages: n/a Hébergeur:	Re: Problems with HTML and CSS > Michael R. Copeland wrote: > > [twice] > > This isn't chat. Post once and wait for replies. More than two minutes. > I apologize. When I posted the first version, I received an error message from my reader (Gravity) that I had exceeded a time limit: the message wasn't sent. Apparently, I had spent too much time constructing the post (yes, the post is excessive!), and I had lost my connection. Several hours later, I rebuilt the post (in NotePad) and tried to post that (similar) message. I was very surprised to see my original message _had_ been posted - and then both were there. 8<{{ Again, my apologies to all...

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email