Jump to content

Archived

This topic is now archived and is closed to further replies.

Gray_Fox

Vertical expansion + borders ...

Recommended Posts

Ok first of all hi (this is my first topic here) and thanks for even reading this.
This is my problem.

I'll start by giving you guys the code I made so far (see under the quote for my problems)

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FreaksUnited LAN-PARTY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
font: normal 12px Verdana;
color: #CCCCCC;
height: 100%;
margin:0;
padding:0;
min-height:100%;
text-align: left;
}

#wrapper {
position: relative;
width: 800px;
margin-left: -400px;
left: 50%;
height: 100%;
}

#banner {
width: 750px;
height: 155px;
}

#left {
width: 180px;
float: left;
}

#mainContentArea {
width: 620px;
height: 645px;
margin-left: 155px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
min-height:95%;
margin:0;
position:relative;
}

.LeftBoxArea {
width: 180px;
padding-bottom: 0px;
min-height:95%;
margin:0;
position:relative;
}

.leftBoxContent {
padding: 5px;
font-size: 10px;
background-color: #C3C9D5;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}

.leftBoxEnd {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

.leftsponsors {
text-align: center;

}
.notbold {
font-weight: normal;
}

.vetgroen {
font-weight: bold;
color: #009900;
}
ul {
list-style-image: none;
list-style-type: none;
color: #0000FF;
font-weight: bold;
margin: 0px 0px 0px 10px;
padding: 0px;
}

#footer {
border-style: none none none none;
border-width: 1px;
border-color: #000000;
position:relative;
margin-top: 0em;
}

#nonFooter{
position: relative;
min-height: 100%;
}

* html #nonFooter {
height: 100%;
}

</style>
</head>
<body>
<div id="wrapper">
<!-- Begin wrapper -->
<div id="nonFooter">
<!-- Begin non-footer -->
<div id="banner">
<!-- Begin banner -->
<img src="FU_Banner.jpg" alt="FU_Banner"> </div>
<!-- End banner -->
<div id="left">
<!-- Begin 'left' navigation bar -->
<div class="LeftBoxArea"> <img src="FU_left_FU-lanparty.jpg" alt="FU_left_FU-lanparty">
<!-- FU-Lan Party picture (veranderd nooit) -->
<div class="leftBoxContent">
<ul>
<li> > News <br>
> Info <br>
> Compos <br>
> Deelnemers <br>
> Route <br>
> Crew <br>
> Foto Album <br>
> Forum <br>
> Irc <br>
> Sponsors <br>
</li>
</ul>
</div>
<img src="FU_left_FU-leden.jpg" alt="FU_left_FU-lanparty">
<!-- leden, naargelang hoe je bent ingelogdt staat hier 'inloggen' , 'leden' , 'crew' -->
<div class="leftBoxContent">
<ul>
<li> > Vrienden <br>
> Inschrijven
<p> </li>
<span class="notbold">Freak United LAN 5</span><br>
<span class="vetgroen">Betaald</span>
</ul>
</div>
<img src="FU_left_FU-sponsors.jpg" alt="FU_left_FU-lanparty">
<!-- leden, naargelang hoe je bent ingelogdt staat hier 'inloggen' , 'leden' , 'crew' -->
<div class="leftBoxContent">
<div class="leftsponsors">
<!-- lijst van alle sponsors, de class 'leftsponsors' zorgt dat deze gecentreerd staan, de P-tags voor de spaties ervoor en tss -->
<p> <img src="FU_IT-ware.jpg">
<p> <img src="FU_Pool-fiction.jpg">
<p> <img src="FU_Hout.jpg">
<p> <img src="FU_Powerhost.jpg">
<p> <img src="FU_WSN.jpg">
<p> </div>
</div>
</div>
</div>
<!-- End 'left' navigation bar -->
<div id="mainContentArea"> </div>
<div id="footer">
<!-- Begin Footer -->
</div>
<!-- End Footer -->
</div>
<!-- End non-footer -->
</div>
<!-- End wrapper -->
</body>
</html>
[/quote]

Now first the site should expand in the the height when there is a lot of text in the content area, I don't know how I can do this !!!
And second of all the problem that has kept me up for several nights (I'm probably just a fool with a typical n00b question) I should have a border around the whole site. I tried to give the "wrapper" a border, that didn't work, ... I tried to give the "mainContentArea" a right & bottom border, that didn't work at all....

What do I do wrong?

Share this post


Link to post
Share on other sites
[!--quoteo(post=368654:date=Apr 25 2006, 06:30 PM:name=Gray_Fox)--][div class=\'quotetop\']QUOTE(Gray_Fox @ Apr 25 2006, 06:30 PM) [snapback]368654[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Ok first of all hi (this is my first topic here) and thanks for even reading this.
This is my problem.

I'll start by giving you guys the code I made so far (see under the quote for my problems)
Now first the site should expand in the the height when there is a lot of text in the content area, I don't know how I can do this !!!
And second of all the problem that has kept me up for several nights (I'm probably just a fool with a typical n00b question) I should have a border around the whole site. I tried to give the "wrapper" a border, that didn't work, ... I tried to give the "mainContentArea" a right & bottom border, that didn't work at all....

What do I do wrong?
[/quote]

First you have to change the wrapper position attribute to absolute, the elements within the wrapper need to be set to relative. You had the wrapper position set to relative so it only wrapped around the banner part.

If you want your site to adjust the height to the amount of text/images/etc you have the best way to do this is to set (in your case) the wrapper height to 'auto'.

For the border simply add 'border: 1px solid #000000;' to the #wrapper id.

I've placed the CSS code in an external CSS file called layout.css, when your site becomes larger it is easier to manage the code because you have the layout in a single file.

[div align=\"center\"]layout.css[/div]
[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
html, body {
font: normal 12px Verdana;
color: #CCCCCC;
height: 100%;
margin:0;
padding:0;
text-align: left;
}

#wrapper {
position: absolute;
top: 0px;
left: 100px;
width: 800px;
height: auto;
border: 1px solid #000000;
}

#banner {
top: 0px;
left: 0px;
width: 750px;
height: 155px;
}

#left_wrapper {
top: 0px;
left: 0px;
margin: 0px;
float: left;
width: 180px;
}

#mainContentArea {
position: relative;
top: 5px;
left: 0px;
float: right;
width: 620px;
height: auto;
text-align: center;
}

.LeftBoxArea {
width: 180px;
padding-bottom: 0px;
min-height:95%;
margin:0;
position:relative;
}

.leftBoxContent {
padding: 5px;
font-size: 10px;
background-color: #C3C9D5;
}

.leftBoxEnd {
border: 1px solid #000000;
}

.leftsponsors {
text-align: center;
}

.notbold {
font-weight: normal;
}

.vetgroen {
font-weight: bold;
color: #009900;
}

ul {
list-style-image: none;
list-style-type: none;
color: #0000FF;
font-weight: bold;
margin: 0px 0px 0px 10px;
padding: 0px;
}

#footer {
border: 0px solid #000000;
position:relative;
margin-top: 0em;
}

#nonFooter{
position: relative;
min-height: 100%;
}

* html #nonFooter {
height: 100%;
}
[/quote]

[div align=\"center\"]index.html[/div]
[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FreaksUnited LAN-PARTY</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>
<div id="wrapper">
<div id="nonFooter">
<div id="banner"><img src="FU_Banner.jpg" alt="FU_Banner"></div>
<div id="left_wrapper">
<div class="LeftBoxArea"><img src="FU_left_FU-lanparty.jpg" alt="FU_left_FU-lanparty">
<div class="leftBoxContent">
<ul>
<li>
News<br />
Info<br />
Compos<br />
Deelnemers <br />
Route<br />
Crew<br />
Foto Album<br />
Forum<br />
Irc<br />
Sponsors<br />
</li>
</ul>
</div>
<img src="FU_left_FU-leden.jpg" alt="FU_left_FU-lanparty">
<div class="leftBoxContent">
<ul>
<li>
Vrienden<br />
Inschrijven
<p>
</li>
Freak United LAN 5
<span class="vetgroen">Betaald</span>
</ul>
</div>
<img src="FU_left_FU-sponsors.jpg" alt="FU_left_FU-lanparty">
<div class="leftBoxContent">
<div class="leftsponsors">
<p><img src="FU_IT-ware.jpg">
<p><img src="FU_Pool-fiction.jpg">
<p><img src="FU_Hout.jpg">
<p><img src="FU_Powerhost.jpg">
<p><img src="FU_WSN.jpg">

</div>
</div>
</div>
</div>
<div id="mainContentArea">
<center><h1>content here!!</h1></center>
</div>
<div id="footer"></div>
</div>
</div>

</body>
</html>
[/quote]

[div align=\"center\"]index.html with css code[/div]
[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FreaksUnited LAN-PARTY</title>
<style type="text/css">

html, body {
font: normal 12px Verdana;
color: #CCCCCC;
height: 100%;
margin:0;
padding:0;
text-align: left;
}

#wrapper {
position: absolute;
top: 0px;
left: 100px;
width: 800px;
height: auto;
border: 1px solid #000000;
}

#banner {
top: 0px;
left: 0px;
width: 750px;
height: 155px;
}

#left_wrapper {
top: 0px;
left: 0px;
margin: 0px;
float: left;
width: 180px;
}

#mainContentArea {
position: relative;
top: 5px;
left: 0px;
float: right;
width: 620px;
height: auto;
text-align: center;
}

.LeftBoxArea {
width: 180px;
padding-bottom: 0px;
min-height:95%;
margin:0;
position:relative;
}

.leftBoxContent {
padding: 5px;
font-size: 10px;
background-color: #C3C9D5;
}

.leftBoxEnd {
border: 1px solid #000000;
}

.leftsponsors {
text-align: center;
}

.notbold {
font-weight: normal;
}

.vetgroen {
font-weight: bold;
color: #009900;
}

ul {
list-style-image: none;
list-style-type: none;
color: #0000FF;
font-weight: bold;
margin: 0px 0px 0px 10px;
padding: 0px;
}

#footer {
border: 0px solid #000000;
position:relative;
margin-top: 0em;
}

#nonFooter{
position: relative;
min-height: 100%;
}

* html #nonFooter {
height: 100%;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="nonFooter">
<div id="banner"><img src="FU_Banner.jpg" alt="FU_Banner"></div>
<div id="left_wrapper">
<div class="LeftBoxArea"><img src="FU_left_FU-lanparty.jpg" alt="FU_left_FU-lanparty">
<div class="leftBoxContent">
<ul>
<li>
News<br />
Info<br />
Compos<br />
Deelnemers <br />
Route<br />
Crew<br />
Foto Album<br />
Forum<br />
Irc<br />
Sponsors<br />
</li>
</ul>
</div>
<img src="FU_left_FU-leden.jpg" alt="FU_left_FU-lanparty">
<div class="leftBoxContent">
<ul>
<li>
Vrienden<br />
Inschrijven
<p>
</li>
Freak United LAN 5
<span class="vetgroen">Betaald</span>
</ul>
</div>
<img src="FU_left_FU-sponsors.jpg" alt="FU_left_FU-lanparty">
<div class="leftBoxContent">
<div class="leftsponsors">
<p><img src="FU_IT-ware.jpg">
<p><img src="FU_Pool-fiction.jpg">
<p><img src="FU_Hout.jpg">
<p><img src="FU_Powerhost.jpg">
<p><img src="FU_WSN.jpg">

</div>
</div>
</div>
</div>
<div id="mainContentArea">
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaa
aaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>
<div id="footer"></div>
</div>
</div>

</body>
</html>
[/quote]

If you have any question, just let me know :)

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.