HTML - 3 Columns With Header And A Footer
So we got 3 columns with a header. I tried to put a footer underneath it all, but until now... no result. Anyone who can help me out?
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>driekleur pagina</title> <style type="text/css"> html,body { margin:0; padding:0; height:100%; } #header{ position:absolute; top:0; left:0; width:100%; height:15%; background-color:#222222; } #linkerkolom { width:15%; height:100%; float:left; background-color:#776644; } #middelste_kolom { width:70%; height:100%; float:left; background-color:#fff; } #rechterkolom { width:15%; height:100%; float:left; background-color:#776644; } #footer { background-color:#f9ffff; position:absolute; border:solid 1px #CCCCCC; border-bottom:0px; border-left:0px; border-right:0px; bottom:0; left:0; width:100%; height:22px; } </style> </head> <body> <div id="header"></div> <div id="linkerkolom"></div> <div id="middelste_kolom"></div> <div id="rechterkolom"></div> <div id="footer"></div> </body> </html> Similar TutorialsThanks to Coothead over here I got what I wanted. Unfortunately the web is so .. how do you say it... polluted... that sometimes it is really hard to find what you want, not to say impossible. So I got: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>driekleur pagina</title> <style type="text/css"> html,body { margin:0; padding:0; height:100%; } #linkerkolom { width:15%; height:100%; float:left; background-color:#776644; } #middelste_kolom { width:70%; height:100%; float:left; background-color:#fff; } #rechterkolom { width:15%; height:100%; float:left; background-color:#776644; } </style> </head> <body> <div id="linkerkolom"></div> <div id="middelste_kolom"></div> <div id="rechterkolom"></div> </body> </html> But how do you create a header? Lets say about 3 inches in height. And in the color black. I tried to do it but I failed. Anyone? Hello HTML experts. I need someone's help urgently. I am trying to obtain the header & footer html of my site. I know I'm supposed to go to VIEW SOURCE and whatnot....but then when I get there I get stuck as I do not understand this html stuff........ Please help me...... My site is dishnetworkoffers.net I have a number of webpages that I want to have the same footer I think I have that working correctly but I also tried to give them all the same header and they are really messed up now. My css style sheet is not connecting to my page do you have any idea why? If you can tell me how to fix it that would really help me out to. Thanks Snot www.tarantuladatabase.com p.s. I am only looking at the index page. I know the rest are broken HI I have a .htm file in which i dynmically insert the data. Now wht i want that i want to put header and footer in each print page of thta html file , dynmically thoroght VB.NET Code. The header and footer can contail , the company logo, Title of page and so on. can u big boss please tell me how can i do this. Thanks Hi all, How would you go about setting up your header and footer so that if you need to make a change it would apply to all of your sites without having to manually go through and change the html on each individual one. I haven't made web sites in over a decade, and I am afraid using frames is quite out of date =). Thanks, Ryan Ok, so basically, I have a website with a lot of pages. I have made a top menu bar, which goes on every page, and a copywrite notice for the bottom. I was wondering if its possible to maybe put those in some kind of external file, which will make them appear on every page, like a CSS file, so I don't have to paste that onto every page. The reason I asked, is because sometimes the menu is gonna change and I don't want to have to edit EVERY page of my site just for that. And if it does work, could someone tell me how to do it? I tried <header> </header> and <footer></footer> in a CSS but they didn't appear on my page, and yes, the page calls the CSS file correctly, because the styles still load up. Any help would be GREATLY appreciated!!! Hello. First time here asking for help. Hope there's a solution! The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. Hello, I would like to make my two column web page into 3 columns and dont know how to do this. It is a template and I cannot figure out where to put the <td>. My site is online and then I hope to delete this link if it is possible. Please no negative remarks as I am notlooking for visitors I just want help. please. ] Here is the code I want to put into the code but not sure where to put it to get the 3rd column. I hope someone will be kind enough to help . thanks. <td width="200"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <p> <a href="index.html">Home</a> </p> </td> </tr> </table> ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same. the address is www.themonsterbox.com thanks in advance for any help. I've been playing about with columns, and it really bugs me when I cant get to do it correctly, I need to know how to make a three column page like this one- http://watchseries.eu/ I know there is a lot of float involved, and no matter how much I try, I cannot get the hang of it. I've also read the column tutorial on this forum with no help. How hard can it be? I already posted a similair item like this on a dutch forum (for those who do not know: I am dutch) but that ended in no result. Imagine yourself the painting from I think it was Barnett "Who is afraid of red, yellow and blue. Or better... take the French flag ( http://www.e-s-e-a.com/FRENCH%20FLAG.png ) Now could you or anyone else write me the script that would give me three columns? The left column 15% The right column 15% The middle column 70% I read that giving the columns a width in percentages was better because of screensizes. No header. No footer. Just 3 columns. It has to be like the French flag all over your screen. Well you don't have to give the columns exactly the same colors but it would be nice. Hi all, I'm new to the forum and was hoping I could get some quick help, since I am not a web publishing expert. I've got a basic table set up with multiple rows but different column widths (i.e. 2 columns in one row, 3 columns in another row, both rows with different column widths). Basically I want each row to span the entire table width. However, it comes out fairly mutated instead :: 1st row becomes 2 filled and 1 empty column, 2nd row becomes 3 columns that are unequally spaced. In one row, <table width="100%" border="2" bordercolor=BLACK cellspacing="0" cellpadding="10"> <tr valign="top"><td width="50%" align="center"> SOME BODY TEXT HERE</p></td> <td width="50%" align="center" bgcolor="#FFFFFF"> SOME BODY TEXT HERE</p></td> </tr> Closely following that row, another row with:: <tr valign="top"> <td width="33.3%">SOME BODY TEXT HERE</td> <td width="33.3%">SOME BODY TEXT HERE</td> <td width="33.3%">SOME BODY TEXT HERE</td> </tr> </table> What's wrong here? PS This is for an HTML e-mail marketing campaign, so I do not believe CSS is an option This is my code. I am getting the results as rows/horizontally. I want the entire results to be displayed in 2 columns. can anyone help me out.? mport_request_variables('p','p_'); $connect=mysql_connect('localhost','********','********') or die('could not open:'. mysql_error()); mysql_select_db('gkkilaru_db'); $result=mysql_query("SELECT * FROM human WHERE $p_Searchtype='$p_Search'"); if (mysql_num_rows($result)>0) { echo "<table cellpadding='1' cellspacing='1' bordercolor=pink width='800' border='1'>"; echo "<tr align='center'>"; echo "<td>KEGG_ID</td>"; echo "<td>Gene_Name</td>"; echo "<td>Uniprot_ID</td>"; echo "</tr>"; while($row = mysql_fetch_object($result)) { echo "<tr align='center'><td>"; echo $row->KEGG_ID; echo "</td><td>"; echo $row->Gene_Name; echo "</td><td>"; echo $row->Uniprot_ID; echo "</td><td>"; } } else { echo "<tr align='center'><td>"; echo "<br/><br/><font size='4' color='red'>"; echo "No Records Found!</p>"; echo "</td></tr>"; } //mysql_close($connection); } break; } I tried to solve this...but I was unable to do it. Please help me I feel rather stupid asking this question, because I'm certain it's so simple to fix... Please see this HTML eBay template http://www.bluelagoonproducts.com/template-noncss.html As you can see there are 2 main colums: A - The menu (Store catagories) on the left B - Content (Description) on the right. I need the menu on the left to stay at the top, rather than in the middle. When column B has more content or paragraphs than column A, Column B stays in the middle relative to the page. Hope someone can help? Hello, I would like to add a table or <diiv> behind the columns on this blogger template and add a border to it. I'm not so sure of how to do this. I'm new to blogger XML templates. Please excuse me, I'm a little rusty. It's a free template called WhiteMagic and it has CSS in it as well. In this kind of template what kind of table or div should I add and what code? I'm not quite sure on what code to put for a table or <div>. Do you know? or maybe a website that can point me to it? Example: http://solitude-of-heart.blogspot.com/ I'm not going to use that template^ because it doesn't meet the rest of my needs. However I'd like to add a table or div that has a border. Here is an updated code. http://pastebin.com/W1Ff7BpQ My website: www.MarinaElizabeth.com customized WhiteMagic Thank you in advance I am adding an event to a web page I have inherited from someone else. I don't have access to the CSS styles in the webpage, so I have to use existing styles. The page is supposed to line up in two columns, and used to do that before my updates today, but for some reason now is all in one long column. I could use another set of eyes, as I can't seem to see the reason it is having problems. Can you help me? I need to get an answer this morning or I will have to change the page back so that it looks correctly even if it has old information. I was wondering how I can make 3 equal size div columns inside of a iframe? Because my site www.PrimeNewsCenter.com and I have 3 iframes right now inside the main iframe on the front page and although it looks good in IE it looks really bad in all other browsers and divs dont look like that. Thanks! Hi, Basically I was wondering how I can give a page "columns" I want to set it up with the normal heading I'm using, then do something like this: (column 1) ______ | ______ (column 2) _______________ | ________ ... Sign Up ________ | _______ Member Name: _ [box] ___________________________ Password: _ [box] Seriously, why does it hate me? The math is all correct and it lays out perfectly fine in firefox as expected. Can anyone give me a tip as to what's wrong here before I trash this whole idea and go with a reliable table. 2 columns. 15px left and right margins on the "left" column, 470px wide 15px right margin on the "right"column, 455px wide Code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { margin: 0; padding: 0; width: 970px; background: #e1e1e1; } #wrap { padding: 10px 0; background: #fff; } #left { margin: 0 15px; width: 470px; height: 100px; float: left; background: #f00; } #right { margin: 0 15px 0 0; width: 455px; height: 100px; float: right; background: #666; } </style> </head> <body> <div id="wrap"> <div id="right"></div> <div id="left"></div> <div style="clear: both;"></div> </div> </body> </html> |