Welcome to HBH! If you have tried to register and didn't get a verification email, please using the following link to resend the verification email.

Help me! - html/css

  1. Home
  2. Forum
  3. Webmasters Lounge
  4. Help me! - html/css

ghost's Avatar

ghost

0 0

hi guys! (camp voice)

I have a problem with the layout of my site, basically there are gaps where the images join, how do you make them disappear?

This is my HTML:

<body> <div align="center"> <div class="image"> </div> <div class="image2"><br /><br /><br /><br /><br /></div> <div class="image3"><br /></div> </div> </body>

and this is my CSS:

.image { position: relative; margin: 0; padding: 0;

width: 734px;
height: 128px;

background: url(HEADER.png) no-repeat;

}

.image2 { position: relative; margin: 0; padding: 0; width: 734px;

background: url(CONTAINER.png) no-repeat;
}

.image3 { position: relative; margin: 0; padding: 0;

width: 734px;
height: 81px;
background: url(FOOTER.png) no-repeat;
}

I have checked and don't think there are actually gaps in the images it is just where they join together. thanks!!


ghost's Avatar

ghost

0 0

You probably need to take a look at the CSS attributes "top", "bottom", "left", and "right". You also might need negative values for some of them, depending on how you plan to move your divs.


Mr_Cheese's Avatar

Mr_Cheese

0 1

thats happening due to the default margin of the divs.

but you've set it to 0.. so cant instantly see why its not working.

perhaps try sticking them all in a larger container with a fixed width and just float all of the divs to the left.

that should push them right up to the one above them.