Scene
-
Posts
1 -
Joined
-
Last visited
Never
Scene's Achievements
Newbie (1/5)
0
Reputation
-
[!--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 :)