Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That will do what's in my attachment.

    Simply put, it's a 2-column centered CSS layout with a twist: the content section (Section 1) is first. Now, with the 2-column centered layouts out there, Section 3 is the first section.

    But...since that's not quite as SE-friendly as the way I propose, it doesn't work.

    Anyone know of a site that's figured this out yet?
    Attached Images Attached Images
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Yep, my site does it (www.neathdesign.com - although host is being retarded and it prob wont load, different story all together). It's the same as the others... except you float the main content and move it over with margins. Just swap places
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Alternatively, float your left left and your right right (both floating) with proper clearing for the footer and you should be set. Just realized that's what I did on my homepage (although both methods should work really)
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Actually...yours doesn't appear to. Yours seems to put the header first, then the content, then the footer. I want to put the content first.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Member Juvenall's Avatar
    Join Date
    Sep 2004
    Location
    #!/usr/bin/Detroit
    Posts
    67
    Member #
    7716
    It shouldn't be that hard to go about it. Let me put together another example page *grins*
    Juvenall Wilson_______[juvenall@gmail.com]_________________
    Forum Directory - ForumFox.com
    YaBB Project Admin/Former allmusic.com designer

  7. #6
    Member Juvenall's Avatar
    Join Date
    Sep 2004
    Location
    #!/usr/bin/Detroit
    Posts
    67
    Member #
    7716
    Alright, 15 minutes later and this is what I've got:

    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 {
    	width:640px;
    	padding:0px;
    	margin:0px;
    }
    #content {
    	margin-top:100px;
    	height:350px;
    }
    #sec1 {
    	float:right;
    	width:440px;
    	height:350px;
    	background:red;
    }
    #sec2 {
    	margin:0px;
    	float:left;
    	width:200px;
    	height:350px;
    	background:yellow;
    }
    #sec3 {
    	width:640px;
    	height:100px;
    	background:blue;
    	position:absolute;
    	top:0px;
    	left:0px;
    }
    
    
    </style>
    </head>
    
    <body>
    <div id="content">
    <div id="sec1">Section 1</div>
    <div id="sec2">Section 2</div>
    </div>
    <div id="sec3">Section 3</div>
    
    
    </body>
    </html>
    Tested and works in Firefox and IE.
    Juvenall Wilson_______[juvenall@gmail.com]_________________
    Forum Directory - ForumFox.com
    YaBB Project Admin/Former allmusic.com designer

  8. #7
    Member
    Join Date
    Aug 2004
    Location
    Ohio
    Posts
    47
    Member #
    7210
    Very nice.

    You'll have to set the width on content to 640 to get it to render right on IE 5.0. I had an idea for how to center it, but IE < 6 breaks just about everything I throw at it.

  9. #8
    Member Juvenall's Avatar
    Join Date
    Sep 2004
    Location
    #!/usr/bin/Detroit
    Posts
    67
    Member #
    7716
    Right, good catch. I tend to avoid support on browsers as old as 5.0 on a few grounds (open security holes, worse support for CSS) but love simple things like that to make it work better *grins*
    Juvenall Wilson_______[juvenall@gmail.com]_________________
    Forum Directory - ForumFox.com
    YaBB Project Admin/Former allmusic.com designer


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:02 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com