SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice implementing a CSS frames-like layout (IE vs FF)

    Hello all,

    I've just started designing a site for a friend's company, and it's been a while since I did any real design work - last time really was when frames weren't seen as A Bad Thing I've got a rough design drafted in Illustrator, which they like, and I could implement it easily with frames but I'd like to avoid that (I aim to use CSS and PHP/SSI's for the layout of the site meaning each HTML file is as near as possible just content and a couple of includes for headers/footers).

    My CSS knowledge is pretty poor, I've seen close to the effect I'm after but after a couple of days playing around my brain is a bit fried and so I was hoping someone might be able to help.

    Firstly, the layout I hope to achieve is linked to below. As you can see, I've annotated it with what I see as the "frames" (and the fact that I just want the contentArea bit to scroll). I quite like the drop shadow and the white "main" bit on the blue background, so I'd like to keep those. (Note that where it says "This should scroll", I was referring to the whole "contentArea" frame, not that little list thing)



    I've pretty much done it in Firefox (roughly!) as seen in the next screenshot, except that it doesn't resize properly below about 640px wide (not a huge deal really). However, the same thing in IE6 (as in the other s/shot) loses its ability to scroll. I've read lots about the various limitations and workarounds for IE CSS problems, but I'm not quite sure which applies to me.





    The CSS used is below (and the HTML is just simple <div id="contentArea"> ... (logoArea/bodyArea/footerArea div's here) ... </div>), it's really just hacked together from a few tutorials.

    Code:
    /* Reset */
    
    * {
    	margin:0;
    	padding:0;
    }
    
    /* Define layout of elements */
    
    body {
    }
    
    #contentArea {
    	position:absolute;
    	top:0;
    	left:10%;
    	right:10%;
    	width:80%;
    	height:100%;
    	z-index:50;
    }
    
    body>#contentArea {
    	position:fixed;
    }	
    
    #logoArea {
    	position:absolute;
    	top:0;
    	left:10%;
    	width:80%;
    	height:100px;
    	z-index:0;
    }
    
    body>#logoArea {
    	position:fixed;
    }
    
    #bodyArea {
    	width:80%;
    	top:120px;
    	left:10%;
    	position:absolute;
    	bottom:120px;
    	margin:0 auto;
    	overflow:auto;
    }
    
    #footerArea {
    	position:absolute;
    	bottom:0;
    	left:10%;
    	width:80%;
    	height:100px;
    	z-index:0;
    }
    
    body>#footerArea {
    	position:fixed;
    }
    	
    /* Define styling of elements */
    
    body {
    	background:#ff0;
    }
    
    #contentArea {
    	background:#f00;
    }
    
    #logoArea {
    	background:#0f0;
    }
    
    #bodyArea {
    	background:#00f;
    }
    
    #footerArea {
    	background:#f0f;
    }
    If anyone could give me their input, especially on how to fix the site in IE6 (I guess I *could* just have the header/footer scroll with the page but I refuse to be beaten by M$ ), it'd be great.

    Cheers,
    Tom

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Your HTML also, Please

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, here's the HTML:

    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" xml:lang="en-UK" lang="en-UK">
    	<head>
    		<title>Layout Test 2</title>
    		<link rel="stylesheet" type="text/css" href="test_styles.css"/>
    		<!--[if lte IE 6]>
    
    		<![endif]-->
    	</head>
    	<body>
    		<div id="contentArea">
    			<div id="logoArea">
    				Logo here	
    			</div>
    			<!--div id="bodyAreaWrapper"-->
    				<div id="bodyArea">
    					<p>Body here
    					<p>Body here
    					(etc....)
    				</div>
    			<!--/div-->
    			<div id="footerArea">
    				Footer area
    			</div>
    		</div>
    	</body>
    </html>
    Cheers,
    Tom

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd recommend checking out the 'fixed' layouts at:
    http://www.cssplay.co.uk/layouts/
    http://www.pmob.co.uk/


Bookmarks

Posting Permissions

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