PDA

View Full Version : Issues with HEIGHT



nplaneta
Jul 18th, 2009, 07:50 PM
Hi,

This is probably a VERY basic question, but I simply need to limit the height of my page to a certain number of pixels. I think the problem rests in the relative positioning of the text and objects.

Currently when I view my page I can scroll down way too far, I just need to cut off that excess space. Here is my stylesheet and html code:

body {
background-color: rgb( 84, 33, 134);
}

img {/* border style for all images */
border: 0;
}

:link { color: rgb(0, 0, 255); } /* for unvisited links */
:visited { color: rgb(0, 0, 255); } /* for visited links */
a:active { color: rgb(0, 0, 255); } /* when link is clicked */
a:hover { color: rgb(84, 33, 134); } /* when mouse is over link */

div.container{
width: 100%;
height: 10%;
}

div.container2{
width: 595px;
}

img.banner{
z-index: 1;
}

img.center{
z-index: 1;
position: relative;
top: -58px;
}

p.links{
z-index: 2;
position: relative;
left: 56px;
top: -66px;
font-size: 17px;
color: rgb( 84, 33, 134);
}

img.picture{
z-index: 2;
position: relative;
left: -145px;
top: -405px;
}

p.caption{
z-index: 2;
position: relative;
left: -150px;
top: -400px;
font-size: 16px;
color: rgb( 0, 0, 255);
}

p.credit{
z-index: 2;
position: relative;
left: -150px;
top: -407px;
font-size: 16px;
color: rgb( 0, 0, 255);
}

p.title{
z-index: 2;
position: relative;
left: 40px;
top: -710px;
font-variant: small-caps;
font-size: 30px;
color: rgb( 84, 33, 134);
}

p.content{
z-index: 2;
position: relative;
left: 140px;
top: -722px;
color: rgb( 84, 33, 134);
width: 260px;
font-size: 18px;
}




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Planeta Cancer Foundation</title>
</head>

<body>
<div class="container" align="center">

<div class="container2">

<img class="banner" src="Banner.jpg" alt="">
<p class="links"> <a href="index.html"><font color="purple">home</font></a> | <a href="http://www.steveplaneta.blogspot.com">blog</a> | <a href="story.html">steve's story</a> | <a href="donate.html">donate</a> | <a href="about.html">about us</a> </p>
<img class="center" src="Center.jpg" alt="">
<img class="picture" src="DadHome.jpg" alt="">
<p class="caption">Steve proving he's THE MAN</p>
<p class="credit">(Photograph by: Kasey Planeta)</p>
<p class="title"><u>Home</u></p>
<p class="content" align="justify">
Paddy, this is where the content of each page will go.
I am going to copy and paste this sentance a few times
to give you an idea of how much space there is.
I am going to copy and paste this sentance a few times
to give you an idea of how much space there is.
I am going to copy and paste this sentance a few times
to give you an idea of how much space there is.
I am going to copy and paste this sentance a few times
to give you an idea
</p>
</div>
</div>
</body>
</html>



THANK YOU

effpeetee
Jul 18th, 2009, 09:29 PM
Just for convenience, I have put it here (http://exitfegs.co.uk/Aplaneta.html). As I do not have the images, it may not help much.

It would help to know your resolution and browser.

Frank

brandon1
Jul 18th, 2009, 09:47 PM
Ok, well the issue came from all of the negative top positions you made, although you were moving them up, the elements that were "top:-xxx" were still holding space in their origional positions.

there is a fix to this, but this design warrants a redesign since not all browsers support negative positioning.

instead of using a img tag (which is what is forcing the rest of this content down, all you have to do is assign container2 a background-image and set container2 width and height. Now you can have all of that content inside of the div.

and, instead of using relative positioning at all, all you have to do is use "float:left" on both columns of content, which will get it all close to the positions you want. then just use exact widths of each of those columns and some padding and you can get the desired results.

here is the start of this type of layout that i setup for you.
http://www.blendedcodes.com/Z3eUyUAf

Hope this helped!