Jump to content

Vertical expansion + borders ...

Gray_Fox

By Gray_Fox
in CSS Help

 Share

Recommended Posts

Gray_Fox Newbie

Gray_Fox

Posted
Posted
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?
Link to comment
Share on other sites
Scene Newbie

Scene

Posted
Posted
[!--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 :)
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.