Too much space

[StudentofLife]

I am redesigning a website and am having a problem with too much space between a title and the navigation bar. Also too much space at the top. I have 0 on padding so I'm not sure how to move things up. I have enclosed the code.

Thanks Russ

<p><center><font color="#008080"><font size="5">the SALEM SOLUTIONS group</font></center><CENTER><br><map name="TestMap">
<area href="

http://www.salemsupport.com/index.htm"

shape="rect" coords="214, 50, 266, 68">
<area href="

http://www.salemsupport.com/idx.htm"

shape="rect" coords="338, 50, 461, 68">
<area href="

http://www.salemsupport.com/client.htm"

shape="rect" coords="461, 50, 586, 68">
<area href="

http://www.salemsupport.com/it.htm"

shape="rect" coords="268, 69, 398, 89">
<area href="

http://www.salemsupport.com/network.htm"

shape="rect" coords="395, 70, 594, 89"></map>
<IMG SRC="careerstest.gif" border=0 usemap="#testMap" width="609" height="103" ></CENTER></p>
<p class="MsoNormal" style="tab-stops:1.0in 4.0in">&nbsp;</p>

 

[Vragabond]

Well, usually, space on top is controlled by margin and padding on the body element. So switching that to 0 usually helps:

body {
  padding: 0;
  margin: 0;
}

You are also placing everything in paragraphs, which add margins on top and bottom. In the code provided however, your image is separated from the text only by a single <br />, which shouldn't create such a margin by default. It could be that the center element is causeing some problems -- I am not sure how that element behaves, since I never use it. I can't really see the reason why you would begin one center and then close it only to begin next center element immediately. If <center> behaves somewhat like <div align="center"> then that ending old and begining new can be the cause of the extra break. Also, I would include a doctype if you don't have one already.

 

[StudentofLife]

I will take the extra center out. What would you use instead of <p> ?

 

[Vragabond]

Well, I suppose <p> is the correct element, if you consider that a paragraph. If not, then I suppose a div would work as well. Also, you can style the p to remove the margins. Lookin at your current code, I would probably opt for div.

 

[ChrisHunt]

I'd mark it up like this:

<div id="header">
  <h1>the SALEM SOLUTIONS group</h1>
  <map name="TestMap">
    <area href="/index.htm" shape="rect" coords="214, 50, 266, 68">
    <area href="/idx.htm" shape="rect" coords="338, 50, 461, 68">
    <area href="/client.htm" shape="rect" coords="461, 50, 586, 68">
    <area href="/it.htm" shape="rect" coords="268, 69, 398, 89">
    <area href="/network.htm" shape="rect" coords="395, 70, 594, 89">
  </map>
  <img src="careerstest.gif" usemap="#testMap" width="609" height="103" >
</div>

Then I'd use CSS to style it as I wanted it:

   #header {
      text-align: center;
   }

   #header h1 {
      color: #008080;
      font-size: large; /* or whatever size you like */
      line-height: 1;  /* squeeze out some more whitespace! */
      margin: 0;
   }

   #header img {
      border: 0;
   }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd