www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: How do I do this..

  1. #1
    Join Date
    Jan 2007
    Posts
    108

    How do I do this..

    Hello...

    I have a fixed width site - 966px centered

    this is what I want to do... 50% of the site background to be one color and the other 50% to be another color... all while my site stays centered with in the browser and I want it to expand with the resolution..

    i put a table in with 100% width but Im not sure how to do what im wanting to do...

    here is a pic of want i mean
    example

    I made my table 2 rows but the more i thought about it i should have made it 3.. one for banner at 260px height one for content and one for footer heigth 55px

    any thoughts on how to do this?

    html
    <body>

    <!-- ==================== stat fullheight table ==================== -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0" id="fullheight">
    <tr>
    <td valign="top">


    <!-- ==================== start wrapper ==================== -->
    <div id="wrapper">

    <!-- ==================== Start header ==================== -->
    <div id="header">

    <!-- ==================== start logo ==================== -->
    <div id="logo"><img src="graphics/logo_200.gif" alt="tatine candles logo" /></div>


    <!-- ==================== end header ==================== -->
    </div>


    <!-- ==================== start content wrapper ==================== -->
    <div id="content-wrapper">


    <!-- ==================== start content ==================== -->
    <div id="content">Content for id "content" Goes Here</div>


    <!-- ==================== end content wrapper ==================== -->
    </div>


    <!-- ==================== end wrapper ==================== -->
    </div>


    </td>
    </tr>

    <!-- ==================== start footer ==================== -->
    <tr>
    <td height="55" bgcolor="#605458">&nbsp;</td>
    </tr><!-- ==================== end footer ==================== -->
    </table><!-- ==================== end full heigth table ==================== -->


    </body>
    css
    html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    }
    #content {
    background-image: url(../images/tb-bg-blue.gif);
    background-repeat: repeat-y;
    width: 966px;
    height: 500px;
    margin-right: auto;
    margin-left: auto;
    }

    #fullheight{height:100%}


    #header {
    width: 966px;
    background-image: url(../images/header-tracer.gif);
    margin-right: auto;
    margin-left: auto;
    display: block;
    padding-top: 60px;
    }
    #content-wrapper {
    width: 966px;
    margin-right: auto;
    margin-left: auto;
    }

    #wrapper {
    width: 100%;
    background-color: #0099CC;
    float: left;
    }

    #wrapper-tb {
    height: 100%;
    }


    #header #logo {
    height: 200px;
    width: 200px;
    margin-left: 133px;
    display: block;
    }

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    There is no use for a table here - tables are for tabular data. The easiest way to do the background is to make a graphic say, 2000px wide by 10px high with each half the colour required, and then centre it as a body background tiled vertically. What are the purple bits at the top? - do they contain anything, or are they just a colour? The purple bits can be a background colour to a full width header div before the centred content div.

  3. #3
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    Mr.,

    Assuming I understood your specifications right, this is how to do it:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>MrMJS's Layout</title>
    <style type="text/css">
    #grandTable { 
    	width: 100%;
    	height: 100%;
    	border-collapse: collapse;}
    td { 
    	border: 1px solid black;}
    #bannerCell { 
    	height: 260px;}
    #contentCell { 
    	width: 966px;}
    #cell_1-2, #cell_3-2, #footerCell { 
    	background: purple}
    #cell_1-3 { 
    	background: blue;}
    #cell_3-3 { 
    	background: lightblue;}
    #footerCell { 
    	height: 55px;} 
    </style>
    </head>
    <body>
    <div align="center">
    <table id="grandTable">
         <tr>
              <td colspan="3" id="bannerCell">Height = 260</td>
         </tr>
         <tr>
              <td id="cell_1-2">1,2</td>
              <td rowspan="2" id="contentCell">Width = 966</td>
              <td id="cell_3-2">3,2</td>
         </tr>
         <tr>
              <td id="cell_1-3">1,3</td>
              <td id="cell_3-3">3,3</td>
         </tr>
         <tr>
              <td colspan="3" id="footerCell">Height = 55</td>
         </tr>
    </table>
    </div>
    </body>
    </html>
    Be sure to copy and paste the whole code, including the doctype-declaration, and to leave that unchanged. (% height can be forced in standards mode, but IE then makes a mess of tables.) Furthermore, if you are going to use divs in the table, be aware of the box model rendering difference between IE and FF/Saf.

    @Centauri: Assuming Mr. also wants 100% height, I would think it is not possible to make this with divs. Most layouts can, but a layout with 100% height and a header and/or footer with a pixel height? I don't think so.

    Anyway, tables were devised for both tabular data and layout purposes, existed even before divs were devised, and were long the one and only layout tool. See http://www.barrypearson.co.uk/articl...es/history.htm .

    - Frank
    Last edited by Frank62; 02-12-2008 at 03:46 AM.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by Frank62
    @Centauri: Assuming Mr. also wants 100% height, I would think it is not possible to make this with divs. Most layouts can, but a layout with 100% height and a header and/or footer with a pixel height? I don't think so.
    Tell that to Paul O'Brien

    Quote Originally Posted by Frank62
    Anyway, tables were devised for both tabular data and layout purposes, existed even before divs were devised, and were long the one and only layout tool.
    Tables were never devised for layout - they only got used for that when people decided they wanted their web pages to look better, and nothing else was availble. Even the person who came up with that idea realises it was a mistake - see The Web is Ruined and I Ruined It.

    In this day and age, accessibility should take precedence over visuals.

  5. #5
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    Centauri,

    Tell that to Paul O'Brien
    I can't find an article on his site that deals with 100% height and a header or footer with pixel height.

    Tables were never devised for layout - they only got used for that when people decided they wanted their web pages to look better, and nothing else was availble.
    In practice, that comes down to exactly the same as I'm saying.

    When Siegel says that he "ruined the internet" because content was mixed with his presentation, he was right. It used to be a horrible job to redo websites, having to redo every page individually, taking everything out of the table cells and putting them in other cells.

    But for that problem, a much better solution has become available since the development of divs and CSS: server-side scripting includes. Simply make one parent page, and have the browser reuse that over and over again, with every time new content. Change the website? Simply change the parent page, and maybe the (one) external style sheet of the content files.

    So, basically, the whole notion of one external style sheet with which one can change all (parent + built-in child) pages is a solution to a problem that does not exist anymore. At least not for the (semi-)professional webmaster.

    No server-side scripting available, or don't wanna have PHP or ASP constantly running on your machine? Load the different content files into an iframe. Works like a charm as well (there is a simple trick to have those files automatically loaded into the parent page, when those files come up in Google).

    Further, modern search engines have no problem whatsover with pages with table layout. And the notion of a "tabled" page loading significantly slower than a "div'ed" one is ridiculous. You can only measure that with 100 or so downloads after eachother and even then the difference is minimal, with modern broadband.

    So this whole crusade against tables is unnecessary and looks much like an Don Quichotte-battle (and it is atmosphere-ruining!!).

    There are circumstances under which divs layout is the only option, so DON'T mistake me for a hardline "tabler", but this does not have to be one of them (depending on the contents and the further to specify layout demands).

    - Frank
    Last edited by Frank62; 02-12-2008 at 05:35 AM.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I could add that in CSS there are still some "hot problems", like vertical centering of the block elements or symmetrical vertical/horizontal extending of "twin" divs (same as cells in a table)... There are some cases in which the CSS "DIV constructed tables" bring more problems than solve.

  7. #7
    Join Date
    Jan 2007
    Posts
    108
    Hello,

    thank you for your help..

    I never wanted to use tables but I couldn't get it right so I tried it that way... I want the site to be 100% height and the footer to be 55 px and always at the bottom of the screen.

  8. #8
    Join Date
    Jan 2007
    Posts
    108
    the header would need to be 260px height and the footer 55px.. content section to fill in the rest of the screen but with footer always at the bottom on screen.. im not sure how to have this do this in css I guess

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Paul O'Brien invented the method of having a 100% minimum height layout with a fixed height footer at the bottom of the screen (unless content pushes it further down). The explanation of it can be seen on his site here (as well as articles on Sitepoint). I have used this technique on quite a few occasions.

    Anyone who regularly uses a screen reader will attest to the difficulties understanding a table layout site.

  10. #10
    Join Date
    Jan 2007
    Posts
    108
    thank you for your help guys!

  11. #11
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    I whipped up a quick example using the colours in your example pic, and the heights in your last post, using two simple graphics which are attached :
    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=utf-8">
    <title>100% height layout</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	height: 100%;
    }
    body {
    	background-image: url(images/bodybak.gif);
    	background-position: center top;
    	background-repeat: repeat-y;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    }
    p {
    	padding-top: 1em;
    }
    #wrapper {
    	min-height: 100%;
    	background-image: url(images/contentbak.gif);
    	background-position: center top;
    	background-repeat: repeat-y;
    }
    * html #wrapper {
    	height: 100%;
    }
    #head_outer {
    	background-color: #605458;
    }
    #head_inner {
    	width: 956px;
    	padding: 0 5px;
    	height: 260px;
    	margin: 0 auto;
    	background-color: #FFFFFF;
    }
    #content {
    	width: 956px;
    	margin: 0 auto;
    	padding-bottom: 55px;
    }
    #footer {
    	height: 55px;
    	background-color: #605458;
    	color: #FFFFFF;
    	margin: -55px 0 0;
    	position: relative;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="head_outer">
    		<div id="head_inner">
    			<p>Header section</p>
    		</div>
    	</div>
    	<div id="content">
    		<p>Content</p>
    	</div>
    </div>
    <div id="footer">
    	<p>Footer</p>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  12. #12
    Join Date
    Jan 2007
    Posts
    108
    wow, thank you for doing that Centauri!!

  13. #13
    Join Date
    Jan 2007
    Posts
    108
    one thing.. I also needed the content div to have a different color or bg and for it to be 100% down to footer...

  14. #14
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    Mr.,

    the header would need to be 260px height and the footer 55px.. content section to fill in the rest of the screen but with footer always at the bottom on screen.. im not sure how to have this do this in css I guess
    That depends. If your contents are stored in a database and are bigger than there is space for on a [let's say] 1024x768 screen, you indeed have to make the layout in divs. Then you have to script-include them into the div contentSection, which you then give "overflow: auto;". That does not work on table cells.

    If the contents are not bigger than there is space for, you can just script-include them into the contentCell.

    If they are bigger, but consist of non-database files on the server (preferably with <head> section), you can just load them into an iframe which you put in the contentCell. Simply replace "Width = 966" with "<iframe name="" src="" frameborder="0" height="100%" width="100%">Still not updating your browser, are ya?</iframe>".

    One more question, and a fairly important one: where is your navmenu gonna be, and how many links must it contain (does it go in its cell in its entirety)? If not, I've got a trick to prevent the cell from being blown up and stil have the menu unfold.

    @Centauri: I will seriously look into your solutions, because I wanna at least know all methods (gotta get some sleep first, though). But if you really want to cater to the blind, do as follows:

    *Put in the layout table summary the text: "This site contains a special index page for screenreaders. Its address is .................."
    * Create such an index page, with an explanation of the site contents and its structure, plus direct links to content files. Obviously, you keep the content files as flat as possible.
    * Prepare for an award for best new site from some foundation for the blind.

    - Frank

  15. #15
    Join Date
    Jan 2007
    Posts
    108
    the navigation menu goes into the content section and will have 6 links. the content will be static text and images.. nothing from a database

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles