|
HTML - Html/css Fluid/fixed Layout
I'm having so much trouble with this. I have a site (from photoshop) that will have have fluid layout (100% width) but I want the footer to "stick" to the bottom of the window (unless content goes longer).
Here is content part of the html (which is a bit messed up now from trying many things) <div id=container> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr></tr> <tr> <td height="235" bgcolor="#FFFFFF"> </td> <td width="1000" rowspan="5" valign="top"><!-- ImageReady Slices (screencapture3.psd) --> <table width="1002" height="400" border="0" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td height="58" colspan="9"><img src="images/rightthere_01.jpg" width="417" height="58" alt="" /></td> <td colspan="10"><img src="images/screencapture2_01.jpg" width="583" height="58" alt="" /></td> </tr> <tr> <td colspan="9"><img src="images/rightthere_logo.jpg" alt="" width="417" height="76" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/seniors.jpg" alt="" width="140" height="177" border="0" /></td> <td width="139" rowspan="2"><img src="images/caregivers.jpg" alt="" width="139" height="177" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/physicians.jpg" alt="" width="142" height="177" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/disabilities.jpg" alt="" width="162" height="177" border="0" align="top" /></td> </tr> <tr> <td height="101" colspan="9"><img src="images/inhome_tagline.jpg" alt="" width="417" height="101" border="0" /></td> </tr> <tr> <td colspan="19" bgcolor="#69781B"><img src="images/nav_top.jpg" width="1000" height="51" alt="" /></td> </tr> <div id:navigation></div> <td width="59"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','images/about_ro.jpg',1)"><img src="images/about.jpg" name="Image44" border="0" id="Image44" /></a></td> <td width="15"><img src="images/div1.jpg" width="15" height="17" alt="" /></td> <td width="144"><a href="why.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image45','','images/why_ro.jpg',1)"><img src="images/why.jpg" name="Image45" width="144" height="17" border="0" id="Image45" /></a></td> <td width="17"><img src="images/div2.jpg" width="17" height="17" alt="" /></td> <td width="114"><a href="what.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image46','','images/what.jpg',1)"><img src="images/what.jpg" name="Image46" width="114" height="17" border="0" id="Image46" /></a></td> <td width="17"><img src="images/div3.jpg" width="17" height="17" alt="" /></td> <td colspan="4" bgcolor="#8B9849"><a href="who.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/who_ro.jpg',1)"><img src="images/who.jpg" name="Image43" width="127" height="17" border="0" id="Image43" /></a></td> <td width="16"><img src="images/div4.jpg" alt="" width="16" height="17" align="left" /></td> <td colspan="3"><a href="consider.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image47','','images/consider_ro.jpg',1)"><img src="images/consider.jpg" name="Image47" width="195" height="17" border="0" id="Image47" /></a></td> <td width="19"><img src="images/div5.jpg" width="19" height="17" alt="" /></td> <td colspan="2"><a href="careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image48','','images/careers_ro.jpg',1)"><img src="images/careers.jpg" name="Image48" width="188" height="17" border="0" id="Image48" /></a></td> <td width="19"><img src="images/div6.jpg" width="19" height="17" alt="" /></td> <td width="70"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image49','','images/contact_ro.jpg',1)"><img src="images/contact.jpg" name="Image49" width="70" height="17" border="0" id="Image49" /></a></td> </tr> <tr> <td colspan="19" bgcolor="#6A791C"><img src="images/nav_bot.jpg" width="1000" height="42" alt="" /></td> </tr> <tr></tr> <tr> <td colspan="7"><div id=leftcontent> <h4>Left Content</h4> </div></td> <td width="4"> </td> <div id=maincontent> <td colspan="11"><h1>Main Content</h1></td> </div> </tr> <tr> <td><img src="images/spacer.gif" width="59" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="15" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="144" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="114" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" alt="" /></td> <td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" alt="" /></td> <td width="42"><img src="images/spacer.gif" width="42" height="1" alt="" /></td> <td width="76"><img src="images/spacer.gif" width="76" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="16" height="1" alt="" /></td> <td width="48"><img src="images/spacer.gif" width="48" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="139" height="1" alt="" /></td> <td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="19" height="1" alt="" /></td> <td width="115"><img src="images/spacer.gif" width="115" height="1" alt="" /></td> <td width="73"><img src="images/spacer.gif" width="73" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="19" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="70" height="1" alt="" /></td> </tr> </table></td> </tr> <tr> <td height="110" bgcolor="#869343"> </td> <td height="110" bgcolor="#6A791C"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </tr> </div> <div id= "footer"> <td width="100%" height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <td width="0%" bgcolor="#859242"> </td> <td width="1000" bgcolor="#697819"><img src="images/footer.jpg" alt="" height="79" /></td> <td width="26%" bgcolor="#697819"> </td> </tr></table> </div></tr></tr></body> </html> and my css p { color: #6a6a6a; font-size: 15px; line-height: 20px; font-family: georgia, "Lucida Grande", Verdana, Arial ; top: 0; margin-top: 0; } h1 { color: #667824; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; } h4 { color: #4d4f53; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; } h2 { color: #667824; font-size: 20px; font-family: Arial, Verdana } h3 { color: #fff; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; } ul { color: #667824; font-weight: bold; font-size: 12px; font-family: verdana, Arial ; line-height: 14px; } h5 { color: #4d4f53; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; } A:link {text-decoration: none; color: 667824} A:visited {text-decoration: none; color: B71234} A:active {text-decoration: none} A:hover { color: B7CEC4; text-decoration: none; } html, body { margin:0; height: 100%; width: 100% } body >#container { margin:0; padding:0; height:auto; min-height:100%; position:relative; } #clearfooter {overflow:auto; padding-bottom: 79px;} #maincontent { float:left; min-width: 100px; } #leftcontent { min-width: 50px; } #left{ left: -1; right: 0; min-width: 100px; max-width: 200px; min-height: 235px; } #centerleft{ left: -1; right: 0; min-width: 172px; max-width: 200px; min-height:100px; } #right { position:relative;/*ie needs this to show float */ min-width:1px; max-width:200px; float:right; } #footer { width:100%; text-align:center; position:relative; margin:0; height:79px; clear:both; } #navigation { max-width: 1000px; vertical-align; top; text-align: left; } table { border-collapse: collapse; } please help. Similar TutorialsHello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though I want to create a html page which should not have address back, Back and Forward button. any help ? can i have fixed layout for only some part of a table? I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! in the past when ever I have string that is longer than the width specified in the <td>it always automatically line breaked for me. But now I am encountering an issue with the <td> stop auto line breaking, and instead just increase the width of the table to make the string fit in 1 line. if anyone know whats possibly causing this problem please reply, any thing suggestion is greatly appreciated. Thanks In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites. I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell. which idea is better and which is better design that allows future extensibility? cheers I was wondering how I can go about making a single HTML page that all my pages reference to place menus and pictures. The only thing I want to change is content in the middle portion of the page but I don't want to use frames. I have a css already made and that works wonderfully it's just a bit tedious to go through and edit each html document individually every time I change something on the menu's or pictures. As far as I can tell I can't do that in the CSS (place the HTML code directly I mean for divs and such). Any help is greatly appreciated. hey guys! I have a strange problem and I have no idea even what to ask google to find a solution... I'm writeing a simple html page. I have one outside div and everithing must be inside of it. I created some green and yellow borders just to see if layout works fine... The problem: There is some text in the main section. You can see it HERE. But if I add some text to that same middle div inside the table, than the table jums outside of its containing div. Check out HERE. The main(middle) div has overflow property set to "-moz-scrollbars-vertical;". So it should not make bigger div, but just bigger vertical scroll. The table height property is set to 100%. Any ideas??? _________________________________________________________________ You can also download the whole page via this LINK. I just finished writting an HTML email. All looked fine when it was in the browser then I tested it in my email client and all the layout is wrong. my </BR> dont seem to have any affect also im not sure why only some of the   are being shown and not displayed as spaces (??) Heres the code : Code: Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit
MIME-Version: 1.0
<html>
<style type="text/css">
body {
font-family:verdana;
font-size:90%;
line-height:160%;
}
table.mainsection {
background-color:#838B8B;
width:50%;
color:white;
text-align:left;
font-size:99%;
padding:1px;
margin-top:5px;
}
table.subsection {
background-color:#B7C3D0;
color:white;
width:49%;
color:white;
text-align:left;
font-size:88%;
margin-left:14px;
margin-top:5px;
padding:1px;
}
</style>
<body>
<img src="http://graphics.adaptec.com/us/templates/head_logo.gif" />
<p>
<table class=mainsection >
</tr>
<th>Logical device information</th>
<tr>
</table>
Logical device number 0</br>
   Logical device name : RAID1Mirror</br>
   RAID level : 1</br>
   Status of logical device : Optimal</br>
   Size : 476150 MB</br>
   Read-cache mode : Enabled</br>
   Write-cache mode : Enabled (write-back)</br>
   Write-cache setting : Enabled (write-back)</br>
   Partitioned : No</br>
   Protected by Hot-Spare : No</br>
   Bootable : Yes</br>
   Failed stripes : No</br>
<table class=subsection >
</tr>
<th>Logical device segment information</th>
<tr>
</table>
   Segment 0 : Present (0,0) </br>
   Segment 1 : Present (0,1) </br>
<table class=mainsection >
</tr>
<th>Physical Device information</th>
<tr>
</table>
   Channel #0:</br>
      Transfer Speed : SATA 3.0 Gb/s</br>
      Device #0</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,0</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
      Device #1</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,1</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
<table class=mainsection >
</tr>
<th>Controller information</th>
<tr>
</table>
   Controller Status : Optimal</br>
   Channel description : SATA</br>
   Controller Model : Adaptec 2420SA</br>
   Controller Serial Number : CCEE20</br>
   Physical Slot : 2</br>
   Installed memory : 128 MB</br>
   Copyback : Disabled</br>
   Background consistency check : Disabled</br>
   Automatic Failover : Enabled</br>
   Defunct disk drive count : 0</br>
   Logical devices/Failed/Degraded : 1/0/0</br>
<table class=subsection >
</tr>
<th>Controller Version Information</th>
<tr>
</table>
   BIOS : 5.2-0 (15611)</br>
   Firmware : 5.2-0 (15611)</br>
   Driver : 1.1-5 (2459)</br>
   Boot Flash : 5.2-0 (15611)</br>
<table class=subsection >
</tr>
<th>Controller Battery Information</th>
<tr>
</table>
   Status : Not Installed</br>
</p>
</html>
Thanks, Hello, My website needs a fresh-over, so I decided to fix everything up to the XHTML 1.0 Standard. While doing that, I've also been trashing some of the old layouts and trying to make my website more clear & surmountable, both for the search engines & the surfing user. When working on the links page, I ran into problems though. The table and images simply didn't do the same I wanted them to do, and I've been trying several re-designs to make things alright again. Here is what I've got until now (Image Removed): (A) The content on the website, is not taking 100% width & height. If I use 100% & 100% height on the page, I'll just get this. (B] The table needs the same width as the body (100%). But I am still unable to use neither width or height, as it looks like they don't really do any matters in this case. There must be a bug somewhere inside the HTML or CSS Code, that makes this page very hard to give layout. I just cannot find it myself, so I am asking for your help. It can be because I am using a wrong attribute or tag to create the layout of my website, but I am sure that you got more knowledge on that area, than I. You can see the webpage yourself by clicking on the below URL: Link Removed Thank you, Urnemanden Hi all, I love the design of this forum. I have a very annoying HTML problem and really need help. Would REALLY appreciate it. On some of the pages there's too much space between the table cells. I've tried EVERYTHING and couldn't find the source of the problem. Take it as a challenge and please help... Try this: http://www.canaseed.com/Search.aspx?search=csdc I've attached a gif file that describes the problem. Thank you so much for your help... Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hello, I am trying to get a fluid page design going, however it won't work I have a div called content set up, and I am trying to get it so that whatever the information amount it will conform to that size, because information gets populated into that div. How do i get this to happen? here is the code that I have for the page. Code: #content {
width : 880px;
color : #333;
background : #f6f6ea url(images/bbg.jpg);
margin : 0 0 0 0;
padding-top : 10px;
padding-left : 20px;
}
Hello, Lately I've been getting more into HTML/CSS, but I have a problem. What I'm trying to do is make the website the same size on every browser window / resolution. I have heard Fluid Layouts does the trick, however I have not clue how to do that. I've tried going by tutorials, but no one really explains it step by step. What I was wondering if anyone has a link to a "Video Tutorial" on learning how to do Fluid Layouts, or if anyone knows a different way to accomplish this. Thank you Ok so here I am yet again with another mess on my hands. I know tables are tales of yore so I have recently dived into the world of divs. Well now I find myself with a coding issue that I could easily achieve with a table no problem. If I was using a table I could set a BG image and then I could put text over the image or another transparent image over that. I am wanting to achieve the same effect but with divs. If I am not mistaken all I have to do is create a div and float another div on top of that div however this I am finding is not as easy for the CSS beginner. Mind you I am not new to programming. So how is it done? here is a link to the site I am working on DeeJayOctane I am wanting to put text on top of the image in the nav div. But yet again this alludes me for some odd reason. Any help would be appreciated! Thanks Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. |
|||||||