PDA

View Full Version : Positioning Banner


JohnnieG
09-21-2009, 11:19 AM
I am working on a new web site for a cattle breed registry. I want to use a photo at the top of the page for a banner. I have set the top margin for 0 in the page properties, but the image is still not at the top of the page.

Also noticed that when I last uploaded the page, the banner image is cut off and not showing the entire height of the picture.

Any help would be greatly appreciated.

The page is here www.gerowbusinessgraphics.com/ARPA/index.htm (http://www.gerowbusinessgraphics.com/ARPA/index.htm)

Thanks!

Corrosive
09-21-2009, 12:42 PM
OK, you have

<td height="100" align="center" valign="top" bgcolor="832c3c"><h1><img src="images/Copy of cows.gif" width="1000" height="124" /><br />

See the height of the table is 100 but the image height is 124. You are also going down a rocky road using tables for layout. This is to be avoided.

JohnnieG
09-21-2009, 12:59 PM
Thank you. Can you see why the banner is not at the top of the page?

Not using tables might be OK - can you recommend a good text or set of tutorials to move from table design to CSS only?

Many Thanks.

Corrosive
09-21-2009, 01:06 PM
If you want to zero the margins then change...

body {
margin-left: 0px;
margin-top: 00px;
}

to

body {margin: 0;}

as it is cleaner

I can't really see what is causing your problem at the top of the site. My knowledge of tables is severely limited I'm afraid.

I have some CSS tuts on my site (see first link in sig). Also try w3schools and nettuts for resources.

coloeagle
09-21-2009, 11:42 PM
The space is there because of the default margin settings for the h1 tag.
Try taking the image out of the h1 tag or set the h1 top margin to 0.

Corrosive
09-22-2009, 07:15 AM
The space is there because of the default margin settings for the h1 tag.
Try taking the image out of the h1 tag or set the h1 top margin to 0.

D'oh. Missed that one. Good spot Jody :)

JohnnieG
09-22-2009, 11:19 AM
Thank you. The wysyg in Dreamweaver seems to default to text when inserting the image. Removing the <hi> and later the <p> tags makes the difference.

Corrosive
09-22-2009, 11:24 AM
Do you fully understand what the various tags are for? Particularly pre-defined (h1, h2, h3, p and so on)?

JohnnieG
09-22-2009, 10:44 PM
Although I learned web site construction in DreamWeaver MX I have learned to work with code. I am pretty comfortable with the basic html tags.

I just got DreamWeaver CS3 and have just begun working with it. I would like to master the CSS and DreamWeaver's SPRY.

Thanks for the help. I am sure that I will be back here while I work on this project.