I'm trying to get a basic layout done for a site. It will need to be three columns and look very similar to this layout: http://www.positioniseverything.net/ordered-borders-center.html (Only difference - needs to be a bit wider, or just tell me how to adjust the width myself) I don't need images, I don't need content filled in. All I need is this layout coded and broken up into "header.php", "footer.php", "template.php" (to use as the main template), and a stylesheet. Basically, a bare-bones 3 column layout. (I'll put in images, do the background colors, etc. myself) I heard using tables is no good, heard CSS is easier.... I just need something simple to plug my site into! I am frustrated as hell with this and I don't want to do it anymore! Can anyone PLEASE help?????? Please let me know if you can, and let me know your price and when it can be finished. I am a speedy Paypal payer!
Well tables can be easier if you use a program or don't know css. But here I made this up for ya <html> <head> <title>Yeah?</title> <style> #container { width: 1000px; } #top { border: 2px solid #000000; background: #CCCCCC; padding: 5px; } #left { float:left; width: 200px; } #middle { float:left; width: 600px; } #right { float:left; width: 200px; } #bottom { border: 2px solid #000000; background: #CCCCCC; } </style> </head> <body> <div id="container"> <div id="top"> My Site </div> <div> <div id="left"> Look some left content! </div> <div id="middle"> Look some middle content! </div> <div id="right"> look some right content! </div> </div> <div style="clear:left"></div> <div id="bottom"> Bottom content! </div> </div> </body> </html> Code (markup):
I thought i would post here just so that if anyone else has a similar problem then this may help them too.. im just too kind 4 files make this a more dynamic method, footer.php to include the footer, header.php to include the header, htmlinclude.php which is the main page structure, page.php here is the page (duplicate this for as many pages as you want, this is the content) and stylesheet.css.. well you can guess what that is. This will be a long post so please dont curse for spam stylesheet.css: @charset "utf-8"; /* CSS Document */ html, body {margin: 0; padding: 0; border: 0;} body { color: #000; background-color: #eee; font-family: verdana, sans-serif; font-size: 80%; text-align: center; margin: 30px 0; } p {margin: 0; padding: 8px;} h2 {font-size: 1.2em; text-align: center; padding: 10px;} .clear { clear: both; } a {text-decoration: underline; font-weight: bold; color: #000;} .alignright {margin-top: 0; text-align: right;} .small {font-size: .9em;} .wrapper { margin: 0 auto; width: 697px; text-align: left; background: #add8e6; border: 2px solid #000; } /*** Below is the Tan hack, needed because the decorative side borders (thin black) on .wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/ * html .wrapper { width: 700px; w\idth: 697px; } .outer { border-left: 150px solid #fcc; border-right: 130px solid #cfc; background: url(images/blackline.gif) 100% 0 repeat-y; } /*** These are the visible side col BG's. The image BG is needed to replace a side border on div.inner, which can't be used because of problems in Mozilla. The image substitutes for the thin black divider between the right green col and the center col. If the black divider is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different BG location, due to a BG placement variation. ***/ * html .outer { background: url(images/blackline.gif) 565px 0 repeat-y; } .inner { margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/ width: 548px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/ border: 2px solid #000; border-width: 0 0 0 2px; } /*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully) ***/ * html .inner { width: 100%; } .float-wrap { float: left; width: 567px; margin-left: -150px; /*** Same length as left column width ***/ } /*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, div.left is carried over into the proper position. ***/ .left { float: left; width: 147px; position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/ } .right { float: right; width: 130px; position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/ } * html .right { margin: 0 -130px 0 0; /*** IE gets this margin. ***/ } .center { float: right; width: 415px; } .wide { background-color: #ffc; /* header and footer colours */ width: 100%; border: 2px solid #000; font-size: 1.4em; font-weight: bold; } .wide p {padding: 5px;} .top {border-width: 0 0 2px;} .bottom {border-width: 2px 0 0;} /* Mozilla bug fixes */ html>body .inner, html>body .float-wrap { border-bottom: 1px solid transparent; } footer.php: <?php $footer = "<body><div class='wide bottom'><p>Footer</p></div> </div></body> "; return $footer; ?> header.php: <?php $header = "<body><div class='wide top'> <p> <span style='float: right; font-weight: bold; font-size: .6em;'> <a href=''index.php'><strong>Link</strong></a> </span> Title </p> </div></body> "; return $header; ?> page.php: <?php $main = "<div class='float-wrap'> <div class='center'> <h2>First in source</h2> <p> Middle column text </p> </div> <!-- end centered div --> <div class='left'> <h2>Left</h2> <p> Left column text </p> </div> <!-- end left div --> <div class='clear'></div> </div> <div class='right'> <h2>Right</h2> <p> Right column text </p> </div> <!-- end right div --> <div class='clear'></div> "; include ("htmlinclude.php"); echo htmlinclude($header,$jsscript,$main,$footer); ?> htmlinclude.php: <?php function htmlinclude($header,$jsscript,$main,$footer) { include ("header.php"); include ("footer.php"); $jsscript = "<script type='text/javascript'>if (window.self != window.top) window.top.location = window.self.location; </script>"; $page = "<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <title>Ordered Borders Layout</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <link rel='stylesheet' type='text/css' href='stylesheet.css' />" . $jsscript . "</head><body> <div class='wrapper'> " . $header . " <div class='outer''> <div class='inner'> " . $main . " </div> </div> " . $footer . " </body></html>"; return $page; } Enjoy! (files sent as files to method poster)
WOW, You guys rock! Thank you SO much for your quick help! (And thank you to "lassie", too, for offering assistance via PM) I can't believe the helpful folks here! Just one question... and sorry if it's a stupid one. Using Oxi's code, how would I increase the width of the entire .... layout? (Don't know how to word it... basically, how do I make it fit like 90% of the screen?) wwwbryan: THANK YOU for taking the time for your code. I received Oxi's first via PM, but I think yours is awesome, too! I really appreciate your fast assistance, you guys!