Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    8
    Thanked 0 Times in 0 Posts

    3 Column layout.

    Hey I'm trying to convert my website over from using tables as to where I can actually use DIV's instead. I wanted my site to be 3 columns below the header and above the footer.

    I changed my CSS so it looks like this.. :

    Code:
    #header {
    	width: 960px; /* the width of the image you made */
    	background: url(images/hpfbla.png) no-repeat center top; /* You can relocate this file as long as you change the URL listed here */
    	margin: 0px auto 0 auto;
    	padding: 123px 0 0 0;
    }
    #left { 
    	float: left;
    	width: 190px;
    	padding: 5px;
    	min-height: 500px;
    	background: url(images/left.png) repeat-y center top;
    }
    #right {
    	float: right;
    	width: 190px;
    	padding: 5px;
    	min-height: 500px;
    	background: url(images/right.png) repeat-y center top; 
    }
    
    #main {
    	margin: 0 auto 0 auto;
    	padding: 15px;
    	width: 580px;
    	min-height: 500px;
    	background: url(images/center.png) repeat-y center top;
    }
    
    #footer {
    	margin: 0 auto 20px auto;
    	padding: 5px 10px 0 10px;
    	width: 960px;
    	height: 30px;
    	background: url(images/footer.png) no-repeat center top;
    }
    but the website comes out looking like this:
    http://notre.theopak.com/hpfbla2/index.php

    I'm not sure what I need to do to get them lined up and in the right positions.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Notre View Post
    I'm not sure what I need to do to get them lined up and in the right positions.
    First you need to understand how floating is used in the most common 3 column builds.

    It's not (always) a case of bunging three columns together, with a left and a right float and hoping the middle will stay central. It doesn't really work like that and anyone coming from tables would be forgiven for assuming it does, because that's logical. Floated divs do not behave anything like tables.

    So I think you need to overhaul your notion of floats - what they are and how they work in practice, so you can master them for your layout requirements.

    At the risk of parroting something I've recently learned, I think this article should put you right.

    Hopefully you should find a layout model in amongst these which most closely resembles what you are trying to achieve.

    Best of luck with this.

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Just noticed some other things. You need to get rid of the <font> tag because that has limited support now. Instead, use the <H1, H2, etc>, <p> and <blockquote> elements for text and apply styles to them in the CSS. If you have a long <p> and you wanted to change little bits of it, you can always use <span>.

    Don't use <center> anymore. That's dead now, as well.

    Avoid using ID names like "left", "right" and "middle" for your divs. Try to define divs, wherever possible, by their purpose (what is going to go in them) rather than their position - except in the rare cases where their actual purpose is tied to their position.

    In other words, if you wanted, you could reverse the order they appear in the HTML for semantic reasons, and then allow the style sheet to decide in which order they are displayed. That would depend on where your most important information is.

    You will find #column-1, #column-2, or #col-a, col-b, col-c, etc is much more flexible and useful to you in the long run than #left, #right, #middle etc.

    Structurally speaking, you'll need a containing div to surround everything and float that left. Header goes inside first, then float all of the three columns left (or right). Your footer goes in last and is cleared of the floating behaviour with clear:both; before closing the container div.

    And you need to pay special attention to padding. Padding must be accounted for in the div's width, or you'll have problems.

    I tried to rebuild your structure a little but gave up because it is so different to how I would do it now. I believe you'll get just as much, if not more out of reading the article I posted instead.
    Last edited by Doctor_Varney; 08-30-2010 at 11:24 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks sir, But just wondering, why does this work so well and mine doesn't? I have basically everything included.. except the wrapper. Is that what you mean by containing Div? http://www.neuroticweb.com/recursos/....php?idioma=en

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Wrapper=container, yes.

    Yours doesn't work because it looks nothing like the example.

    The example has all three columns floated, while your middle section, (which you've called "main") is not - and you've attempted to put an auto margin on it, which it shouldn't have. The 0 auto margin (if used) should be on the wrapper.

    Also, you have padding in yours and you didn't clear your footer, did you? Those <center> tags in your HTML can't be doing it much good, either.

    And why did you not include the #wrapper?

    Edit: In fact, it looks to me like you've got the #main div confused with the #wrapper. That might explain why it has an auto margin and, well... is coded a bit like most wrappers are...

    Dr. V
    Last edited by Doctor_Varney; 08-30-2010 at 11:59 PM.

  • #6
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    8
    Thanked 0 Times in 0 Posts
    So basically all I need to do is add a wrapper, which wraps around all of the Left, Right, Center.. Does it need to be around header and footer aswell?.. So that it keeps it all contained to one position. Remove the auto margin.. and fix all of my illegal code.

    Reason for most of the illegal code was the website was made back in about 2006, I just copied the template and tried to redo it. Instead of having 3 columns, it had just one where I laid a table over it. Not practical since I want to have the outer two columns stay the same for all pages, so it's a pain when wanting to add or remove something and having go edit the columns on the tables.
    Last edited by Notre; 08-31-2010 at 04:12 AM.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is much general help here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Quote Originally Posted by Notre View Post
    So basically all I need to do is add a wrapper, which wraps around all of the Left, Right, Center.. Does it need to be around header and footer aswell?.. So that it keeps it all contained to one position. Remove the auto margin.. and fix all of my illegal code.
    ~generally you can wrap a #wrapper around the ENTIRE site to center it with margin:auto;

    however there are times when you don't want this (i.e if your "header" needs to run 100% of the browser viewspace, but the "content" is only 900px wide).

    so your mark up can look SOMETHING like this

    Code:
    <div id="wrapper">
    
      <div id="header">
        <!-- header content -->
        <div id="nav">
          <!-- nav bar -->
        </div>
      </div>
    
      <!-- end header, begin content -->
    
      <div id="content">
        <div id="leftsidebar"> </div>
        <div id="rightsidebar"> </div>
        <div id="mainContent">
          <!-- page content here -->
        </div>
      </div>
    
      <!-- end content, start footer -->
    
      <div id="footer">
        <!-- footer content -->
      </div>
    
    </div>
    <!-- end wrapper -->

  • #9
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Notre View Post
    So basically all I need to do is add a wrapper, which wraps around all of the Left, Right, Center.. Does it need to be around header and footer aswell?..
    Yes it does - usually. Not always but for your layout, it's probably best.

    The idea is that the #wrapper is then like a bag, with a handle with your entire page in. For instance, if you applied auto margins to that #wrapper, it'll always center the layout for you. In principle, I suppose you used to do a similar thing with your tables.

    And yes, make sure it emcompasses the #footer as well.

    Quote Originally Posted by Notre View Post
    Reason for most of the illegal code was the website was made back in about 2006, I just copied the template and tried to redo it. Instead of having 3 columns, it had just one where I laid a table over it. Not practical since I want to have the outer two columns stay the same for all pages, so it's a pain when wanting to add or remove something and having go edit the columns on the tables.
    I've always found it best to scrub old stuff and start from scratch. If you try to convert an old table layout to divs there will be mistakes. Much better to start with a clean slate.

    I would replace your HTML structure with what Met's done for you... I've just set it out like this so you can see it more clearly.

    Code:
    <html>
    	<body>
    
    		<!--structure starts-->
    		<div id="wrapper">
    
    			<div id="header">
    				Header
    			</div>
    			
    			<!--columns start-->
    			<div id="column_1">
    				Column 1
    			</div>
    			<div id="column_2">
    				Column 2
    			</div>
    			<div id="column_3">
    				Column 3
    			</div>
    			<!---columns end-->
    
    			<div id="footer">
    				Footer
    			</div>
    			
    		</div>
    		<!--structure ends-->
    	
    	</body>
    </html>
    If you get into indenting your code you'll be able to see instantly what's inside what. With practice, you probably won't need those comments.

    I haven't written any CSS because as yet I'm unsure how the rest of your page will develop. Where you want your navigation, how long you want the page to be, what kind of background and spacing you want between columns, etc, etc... This basic structure is pretty much the accepted standard for your basic header/3-cols/footer model.

    And as I said, you don't want any of that old HTML <center> malarky anymore. To do this properly, you'll have your stylesheet in a seperate .css document and ALL of your styling will take place in there. No more <font> tags messing up your HTML. That includes that <span> you have in there as well. Do it all in the stylesheet... and use #IDs and class names to tie styles to tags. You can probably get rid of that cumbersome script, which Dreamweaver no doubt, piled in there. All you really need in your HTML is the actual content, surrounded by basic tags. Much, MUCH easier to edit.

    Dr. V
    Last edited by Doctor_Varney; 08-31-2010 at 01:35 PM.

  • Users who have thanked Doctor_Varney for this post:

    Notre (08-31-2010)

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This site may be helpful to you.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Out of curiousity, are you using any html editor like Dreamweaver? or using notepad? I ask because dreamweaver has many, many already defined layouts using divs, including the 3 column 5 div layout you are striving for. Its a great way to learn div layout and page structure. Im sure other GUI editors have similar aids as well.

  • #12
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Negative, I'm using textedit on my mac. The only problem is that every part of the index is a separate document, header is header.php, footer is footer.php.. I use php because of many of the scripts that I'm running and that's how my main host set me up. He helped me with my first layout.

    Here's what the regular website is supposed to look like, I'm just trying to clean out all of the old code and get rid of the table. http://notre.theopak.com/hpfbla/index.php

  • #13
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by teedoff View Post
    Out of curiousity, are you using any html editor like Dreamweaver? or using notepad? I ask because dreamweaver has many, many already defined layouts using divs, including the 3 column 5 div layout you are striving for. Its a great way to learn div layout and page structure. Im sure other GUI editors have similar aids as well.
    Notre's page wouldn't be too hard a challenge, even with my limited CSS ability. I used to use Dreamweaver and now avoid it like the plague. Last time I used it was the MX version. It wrote tons of useless JS code at the top to facilitate rollovers but this was completely uneccessary because you can do rollovers simply and elegantly with a few lines of CSS. Unless it has changed dramatically since I used it, I believe Dreamweaver is archaic and can lure newcomers into very bad coding habits. I find the best way to code is by hand into a text/code-editor, like CoolEdit or Notepad++.

    I'll agree, I suppose it's good for introducing you to layouts (and I always did like it's file management) - but then it's an awful lot of money for something that means you still have to strip out and rearrange the code, to make it standards compliant.

    Dr. V
    Last edited by Doctor_Varney; 08-31-2010 at 07:15 PM.

  • #14
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hey Doc, how would I do this if I want it to pull all of the page information from separate files? This is PHP now.. Footer, Header, and Column A & C are all separate and put together in the index or other pages. But I'm not sure how to put it all in the wrapper. Also should I use separate background images for each column or should I use one background image for them all?

  • #15
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Notre View Post
    Hey Doc, how would I do this if I want it to pull all of the page information from separate files? This is PHP now..
    Are you talking about pulling the raw content in from elsewhere? I'm sorry, that is completely outside my depth of knowledge. I actually wanted to do what you're proposing, last year, so I asked very much the same question. The only way I could find was to use iframes, which is like a kind of 'frames-lite' (for want of a better description) which is portable within documents. With iframes, you can place them anywhere you like, inside divs and they can have heights as well as widths. In other words, like frames, but instead more like little windows you can pull content into from elsewhere. Without going into too much more detail, I found them a complete pain in the arse. Personally, I think, for the relative simplicity of your site, I wouldn't bother and just keep the HTML simple and lean, with a seperate style-sheet to control your look. I don't/can't do PHP and know nothing whatsoever about it - but if it turns out you can do this with PHP (and I suspect it's possible with scripts) then all power to you! Personally, I really don't think you need to overcomplicate this, unless you're dealing with a heck of a lot of content, which requires complex data management. I think there's probably much more work in setting that up than just doing it the traditional way.

    I would recommend asking that question as a seperate thread and see what the more experienced coders have to say.

    Dr. V
    Last edited by Doctor_Varney; 08-31-2010 at 09:59 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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