Website Help Using CSS and DIV

[webdev22]

Hello Folks,

I have been developing a website for a class project and have been stumped on aligning everything together. For example, the following site (developed by me) uses images which takes awhile to load.

Old Site: http://www.personal.ps u.edu/sbk142/handy.html

The new site I'm creating utilizes CSS and DIV tags. However, as you can see by the other link down below, the Latest News section is not aligned with the Mission Statement. Any ideas on how to resolve this?

New Site: http://www.personal.ps u.edu/sbk142/template_3_try_ 1.html

Thanks in advance,
WebDev22

[drhowarddrfine]

The problem is you are trying to line up the text with a fixed background image but the text box is wider than the image. The same, perhaps, is true of your navigation at the top. You shouldn't use &nbsp; or <br> to achieve spaces. That's what margin and padding are for.

Also, you aren't using a doctype. This puts IE into quirks mode and it won't pretend it's a normal browser. See the article about doctypes in Articles above.

[webdev22]

drhowarddrfine,

I fixed up what you said regarding Doctype and using &nbsp; / <br> in my navigation bar. Thanks for shedding some light on margin and padding, two terms I had no background knowledge on.

One question though, I still don't understand what you meant about the text box and background image being disproportional to each other. I have tried to play around with the settings but to no avail. Any recommendations on how to fix it.

Site (updated): http://www.personal.ps u.edu/sbk142/template_3_try_ 1.html

Thanks,
WebDev22

[drhowarddrfine]

What I'm saying is that the background image doesn't look like it's as wide as the box containing it while the text is free to go end to end right up to the edge of that same containing box. The two solutions would be to either create a new image, but that will forever fix how side you can make that box, or use CSS to do the same thing you now do with an image.

With CSS, you can create the same borders, including the gradient on top. I don't have time to go into it right now so google for gradient backgound, CSS and see what you get.

[webdev22]

What I'm saying is that the background image doesn't look like it's as wide as the box containing it while the text is free to go end to end right up to the edge of that same containing box. The two solutions would be to either create a new image, but that will forever fix how side you can make that box, or use CSS to do the same thing you now do with an image.

With CSS, you can create the same borders, including the gradient on top. I don't have time to go into it right now so google for gradient backgound, CSS and see what you get.

Well, I fixed the problem. Just had to input a margin-right rule into the side border and CSS command. However, the new problem is whenever you switch between home and services, if you look closely, entire template shifts to the right.

Any ideas on this.

Site (update): http://www.personal.ps u.edu/sbk142/handy.html

Thanks,
WebDev22