CSS Forum

**tperkins** · 04:51 PM

Hello!

So I am new to divs, and I am having a bit of trouble. In my main "header" div, I have a header image (with a menu, etc., that I will add an image map to). Right now, when I set the top margin and left margin to 0 px, I still have a few pixels of space all around the div (as in my image isn't totally flush with the top and left start of the page). Is there any way to combat this? Also, I would like to add a "main" div to "lay" on top of the header div that has my image. This will have text and display the main information. Right now the main div displays after the header div... is there any way to position on top of my header div?

link:
my problem...

Here is my code now:

CSS:

body { background-image: url('images/prelawbg.jpg');
background-repeat: repeat-y; }

p { font-family: verdana;
font-size: 12px;
color: black }

p.image { text-align: center }

#header {
background-image: url('images/sidecolors.jpg');
background-repeat: repeat-x;

top: 0px;
left: 0px;
height: 700px;
border: 0px;
padding: 0px;}

#main { left: 306px;
top: 298px;
width: 399px; }

HTML:
<html>
<head>
<title>Welcome to Wellesley's Minority Pre-Law Society!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<img src="http://www.webmaster-talk.com/images/prelawheader.jpg" alt="header" usemap="#headermap" border="0">

<div id="main">
<p>Main content here.</p>
</div>
</div>
</body>
</head>

Thank you so much for your help!

**LadynRed** · 05:18 PM

Always, always start with a 'reset' for all your elements by zeroing out margins and padding, that includes body, Hx, p, a, ul, ol, li, divs (by whatever names you use) - mine will typically look like this:

Quote:

body, p, hr, img, h1, h2, h3, h4, a, ul, ol, li, #container, #wrapper, #nav, #sidebar, #content, #header{
margin: 0;
padding: 0;
}

The top and left that you have are irrelevant unless you are using absolute or relative positioning.

You really shouldn't be using an image map for navigation either, it's inacessible and search engines can't "read" images.

Quote:

I would like to add a "main" div to "lay" on top of the header div that has my image.

It would be better to put the image in as a background for your header, and that frees up the space inside the #header div to put almost anything you want inside it - ON TOP of the image.

**tperkins** · 04-22-2009, 01:30 AM

thanks so much, ladynred! that really helped a lot.