PDA

Click to See Complete Forum and Search --> : page length confusion

Lola8
05-15-2008, 10:51 PM
I am new to web design and am confused about how page length works. My page is set up as such: a white rectangular body that displays content and is surrounded by a gray background (which fills the rest of the browser).

I tried to insert a rather long text into one of the pages within my site. I expected the white section to lengthen according to the amount of text I inserted, but instead the text overflowed onto the gray part.

How do I make the main body of my page lengthen according to the amount of content that it is meant to display? Do I set a length? Why did the white part remain the same size and the text overflow onto the gray?

Thanks for your time/help.

Here is my code;
XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>writing/title>
<link rel="stylesheet" type="text/css" href="../style.css" />
<meta name="generator" content="BBEdit 8.7" />
</head>
<body>

<div id="wrap">

<div id="header">
<p id="navbuttons">
<a href="../index.html"class="current">home</a>
<a href="artists.html">artists</a>
<a href="writing.html">writing</a>
<a href="listings_news.html">news+listings</a>
<a href="links.html">links</a>
<a href="about.html">about</a>
<a href="contact.html">contact</a>


</div> <!-- end #header -->

<div id="main">

<div class="new">
<h1> New </h1>

</div> <!-- end .new -->


<div class="essays">
<h1>Essays</h1>
<p><a href="kiki.html">Daniil Leidermann: <br/> Living or Dead: Kiki Smith, the Abject and the Grotesque <a/></p>

</div> <!-- end .essays -->

<div class="reviews">

<h1>Reviews</h1>


</div> <!-- end .reviews -->


</div> <!-- end #main -->



</div> <!-- end #wrap -->

</body>
</html>


************************************************
CSS:


/* alignment ------------- */

html, body, main {
height: 100%;
}

body {margin:0;padding:0; background: #717D7D; /*overflow:hidden;*/}

#wrap {
max-width: 900px;
min-width: 480px;
background:url(header_graphic.jpg) no-repeat;
width:90%;
margin:20px auto;
padding:30px 20px 0 0;
min-height: 100%;
}

#navbuttons {position:relative;top:-.6em;left:14em}

#main {float:left;
width:75%;

}

/* index ------------- */

.upnow h1 {margin-left:80px; margin-top:70px;}

.table p {margin-left:90px; margin-top:20px;}

.photo img {left:3em;position:relative; margin:20px;margin-top:0px;}
.photo img {border:none;}

/* artists ------------- */

.feature h1 {margin-left:100px;margin-top:70px;}

#album {position:relative;margin-top:50px;margin-left:75px;}

/* writing ------------- */


.new h1 {position:relative;margin-top:50px;margin-left:100px;}

.essays {position:relative;margin-top:30px;margin-left:100px;}

.reviews {position:relative;margin-top:2em;margin-left:100px;}

/* about ------------- */

.about p {position:relative;margin-top:100px;margin-left:100px;width:500px;}
.about2 p {position:relative;margin-left:100px;width:500px;}
/* links ------------- */

.links {text-align:center;margin-left:190px;margin-top:100px;position:relative;}

/* contact ------------- */

.info p {position:relative;margin-top:100px;margin-left:100px;width:500px;}

/*news and listings*/

table, td {border:none}
.news {width:200px;position:relative;margin-top:50px;margin-left:100px;}

#sidebar {position: absolute; left: 60%; top: 10em; width: 220px;background:#6699CC;padding:4px;align:top; border: 2px dashed black;}


/* text styles ------------- */

#navbuttons {font-family: "Futura", sans-serif; font-weight:lighter;right:-6em;font-size:14px;color:black;text-transform:uppercase;word-spacing:20px}


a {text-decoration:none;color:black;hover:none}
a:link {color:black;}
a:visited {color:#333333;}
a:hover, a:focus {color:red;text-decoration:underline;}
a:active {color:red;}
a:hover.current {color:gray;cursor:default}

/* index ------------- */


.upnow h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;}
.table p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px; white-space:non-wrapping;}

/* artists ------------- */

.feature h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;}


/* writing ------------- */

.new h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 18px;text-transform:uppercase;}

.essays h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;}

.essays p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;}


.reviews h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;}

/* iframe ------------- */

/*
iframe {
position: absolute; left: 60%; top: 10em; width: 200px;
scrollbar-face-color:##FFFFFF;
scrollbar-shadow-color:#d7d7d7;
scrollbar-highlight-color:#d7d7d7;
scrollbar-3dlight-color:#d7d7d7;
Scrollbar-Darkshadow-Color:#d7d7d7;
scrollbar-arrow-color:#7a7a7a;
scrollbar-track-color:#FFFFFF;
} */

/* about ------------- */

.about p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;}

.about2 p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;}

/* links ------------- */

.links h1, h2 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 16px;text-transform:uppercase;}

.links p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;}


/* contact ------------- */

.info p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;}


/*news and listings*/



.news h1 {font-family: "Futura", sans-serif;font-size:18px;font-weight:lighter;text-transform:uppercase;}

.news p {font-family: "Futura", sans-serif;font-size:14px;font-weight:lighter;}

.news p3

#sidebar h2, p {font-family: "Futura", sans-serif;font-size:14px;font-weight:lighter;}

h2 {text-align:center;}
Centauri
05-16-2008, 12:34 AM
From the code above, I cannot see anything that provides the "white rectangular body" - the only background colour I can see set is the grey background (#717D7D), apart from #sidebar which is not used. It could be that floats just need to be cleared, but not sure unless I know what is producing the white area.
Lola8
05-16-2008, 12:37 AM
I thought that the "main" division constituted as the white body...is this wrong?
Centauri
05-16-2008, 02:50 AM
#main has no background set, so it will be transparent and just show the grey from the body. If you want this to be the white area add background-color:#FFF; to its css.
Lola8
05-16-2008, 06:13 AM
Thanks, that's what I thought you might say. I am attaching a screen shot just so that you can see precisely what I am talking about.
Centauri
05-16-2008, 07:34 AM
Doesn't make things much clearer - what is doing the left stripes in the white area ? - I assume a repeated graphic, but cannot identify this in your code. Would be much easier if the example where live online.
Lola8
05-16-2008, 09:27 AM
The left stripes are a graphic/ jpg image that I inserted as a background. I have not yet purchased a domain so unfortunately I cannot put it up live. I might be able to host it through my school website or through mac.com - I will research this and let you know.

Thanks for all of your help!
Centauri
05-16-2008, 10:06 AM
Is that graphic listed in the code above ?
Lola8
05-16-2008, 10:14 AM
Yes, it's in this section:


#wrap {
max-width: 900px;
min-width: 480px;
background:url(header_graphic.jpg) no-repeat;
width:90%;
margin:20px auto;
padding:30px 20px 0 0;
min-height: 100%;
}
Centauri
05-16-2008, 11:03 AM
Ahh - I assumed that must have just been the logo due to the no-repeat. Is this graphic a very long one to acccomodate any expected length of content?

As the contents of #wrap are floated, setting the overflow will force it to surround floats :#wrap {
max-width: 900px;
min-width: 480px;
background: #FFF url(header_graphic.jpg) no-repeat;
width:90%;
margin:20px auto;
padding:30px 20px 0 0;
min-height: 100%;
overflow: hidden;
}The background colour setting will also help if the graphic is not long enough.