Jump to content


Layout issues: Unwanted spaces

Started by K.A.B., Jun 28 2008 03:18 PM

4 replies to this topic

#1 K.A.B.

    Young Padawan

  • Members
  • Pip
  • 6 posts

Posted 28 June 2008 - 03:18 PM

My layout works perfectly fine except for this tiny thing I cannot figure out. There is a space between the top of the page and the header (which is supposed to be at the very top of the page) and the bottom of the page and the footer (supposed to be at the very bottom). There is a bar of background where the header is supposed to connect to the top of the page and same with the footer. The coding used was CSS. Help please?

Edited by K.A.B., 28 June 2008 - 03:19 PM.

#2 023-jimmy

    Young Padawan

  • Members
  • Pip
  • 44 posts

Posted 28 June 2008 - 06:21 PM

You're probaly using a CSS container that has a Relative positioning. I'd suggest you create a second container with the following properties:

#page_container {
	position: absolute;
	top: 0px;
}

Put the other container in this absolute positioned container and your problem should be solved.

By giving it an absolute positioning you can align it anywhere you want. A relative positioned container always leaves a margin on the edges.

I hope this helps you out :)

Edited by 023-jimmy, 29 June 2008 - 04:57 PM.

#3 K.A.B.

    Young Padawan

  • Members
  • Pip
  • 6 posts

Posted 02 July 2008 - 10:04 AM

Thanks! I tried that, but it didn't work. I haven't positioned anything relatively as it's all just centered & such. Here is the actual code (I took out the actual text/content of the site to make it shorter). It seems pretty basic to me, even the image map was relatively easy...My tech-savvy friend (on vacation in Asia, so I can't contact her...) helped me immensely on this so I'm just kind of stumbling along...

____________________________________________________________

<html>

<head>

<title>TITLE HERE</title>

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body bgcolor=#c4c2b6 text=#736F6E link=#85acc4 alink=#85acc4 vlink=#85acc4>

<div align=center>

<table width=620 height="100%" cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF" background="back01.gif">

<tr>
<td width=620 valign=top align=center>

<MAP name=menu>
<AREA shape=RECT coords=92,210,130,221 href="index.html" title="" target="_top">
<AREA shape=RECT coords=130,210,194,221 href="LINK HERE" title="" target="_top">
<AREA shape=RECT coords=194,210,274,221 href="LINK HERE" title="" target="_top">
<AREA shape=RECT coords=274,210,391,221 href="LINK HERE" title="" target="_top">
<AREA shape=RECT coords=127,227,194,236 href="LINK HERE" title="" target="_top">
<AREA shape=RECT coords=194,227,257,236 href="LINK HERE" title="" target="_top">
<AREA shape=RECT coords=257,227,358,236 href="LINK HERE" title="" target="_top">
</MAP>

<img src="banner.png" width=620 height=369 border=0 usemap="#menu"><br>
</td>
</tr>

<head>
<style type="text/css">
h1 {font-size: 150%}
p {font-size: 90%}
h1 {font-family: arial}
p {font-family: arial}
p {line-height:1.4em}

</style>
</head>


<tr>
<td width=620 height=100% valign=top align=center>

<br><div align=center>
<table width=530 cellpadding=0 cellspacing=0 border=0>
<tr>
<td valign=top align=left>
<div align=justify>

<p><br><br></p>
<p>Text here...,br></p>
<blockquote>
<p><img src="documents.gif" width=11 height=11 border=0> <a href="http..."><B>SUB-LINKS HERE</B></a><br>
Description<br></p>
</div>

</td>
</tr>
</table>
</td>
</tr>

<tr>
<td width=620 height=54 valign=middle align=center>
<img src="footer.jpg" width=620 height=54 border=0><br>
</td>
</tr>

</table>
</div>

</body>

</html>

Edited by K.A.B., 02 July 2008 - 10:07 AM.

#4 Jacorre

    P2L Jedi

  • Members
  • PipPipPip
  • 824 posts
  • Gender:Male
  • Location:USA
  • Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer

Posted 03 July 2008 - 02:34 PM

You shouldn't have a second head section within the body of the page. Remove the following:

<head>
<style type="text/css">
h1 {font-size: 150%}
p {font-size: 90%}
h1 {font-family: arial}
p {font-family: arial}
p {line-height:1.4em}

</style>
</head>

Edited by Jacorre, 03 July 2008 - 02:34 PM.

#5 Ghost

    Honored P2L Member

  • P2L Staff
  • PipPipPip
  • 675 posts
  • Gender:Male
  • Location:Australia

Posted 05 July 2008 - 06:25 AM

Add this to your css:
body{
padding: 0;
margin: 0;
}

Should move your content to the very top.

I'd also suggest moving this to your stylesheet and changing it to css:
bgcolor=#c4c2b6 text=#736F6E link=#85acc4 alink=#85acc4 vlink=#85acc4

css:
body{
background: #c4c2b6;
color: #736F6E;
}

a:link,
a:visited,
a:hover,
a:active{
color: #85acc4;
}

Also, attributes should always be surrounded by inverted comma's.

For example, this:
<td width=620 height=54 valign=middle align=center>

Should be:
<td width="620" height="54" valign="middle" align="center">

And for valid code, image's should have a self closing slash, and an alt tag.
<img src="documents.gif" width=11 height=11 border=0>

Should be replaced with something like:
<img src="documents.gif" width="11" height="11" border="0" alt="Alternate text" />

Same with br's. <br> should be <br />

Like Jacorre said, you should also remove:
<head>
<style type="text/css">
h1 {font-size: 150%}
p {font-size: 90%}
h1 {font-family: arial}
p {font-family: arial}
p {line-height:1.4em}

</style>
</head>

And put the styles in your stylesheet.

But to fix your original problem, removing the padding and margin on body should do the trick. B)
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design