PHWinfo - Afficher un message

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, 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>.