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.
Results 1 to 4 of 4

Thread: Layout problems

  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout problems

    EDIT: Sorry for the size of this post the pics where suppose to be links.... this board must have a different code setup......I am using this link to get the "basic coding" of the css

    http://www.glish.com/css/7.asp
    I know how to use css for basic "text format", but I am now trying to expand my knowledge so that I can use it for "page layout". I am tired of using tables.....

    I took the time to make and upload screen shots so you can see what I need it to look like and what it looks like now.



    I need five parts to my pages, it needs to look like this...the page its self can not scroll at all you have to always see the "logo" and "footer" but the "body" does scroll...
    http://img117.imageshack.us/img117/5593/needsve2.jpg


    This is how it looks with "position: absolute" in FireFox.....(it looks just like I need it to)
    http://img171.imageshack.us/img171/4203/abffgi4.jpg

    This is how it looks with "position: absolute" in IE6....
    http://img47.imageshack.us/img47/2760/abie6fs0.jpg

    This is how it looks with OUT "position: absolute" in FF...
    http://img109.imageshack.us/img109/5243/ffrb4.jpg

    This is hot it looks with OUT "position: absolute" in IE6...
    http://img126.imageshack.us/img126/8342/ie6zi9.jpg


    I can get it to look like i want it to in Firefox (the browser i use...) but it looks nothing like it should in IE6. After some googling I think the problem is that I need "holly hack" so it will work in IE6, but I know that that will not work in IE7. Sorry for the size of this post...but I want to make sure that people get all the information that they need. I have two questions..

    1) How to get "layout.css" to work in IE6....I do not see what part of the "css code" would not work.
    2) I can not test it in IE7 but if it does not look right in IE6 I would not think that it would in IE7....So how do I get it to work in IE7 too?






    NOTES
    1) This is "layout.css"
    2) It works for Firefox
    3) It does not work for IE6 (I do not know how to get it to work).
    4) I use windows 2000, so I do not know what it looks like on IE7.

    Code:
    #top {
    	position: absolute;
    	left: 1%;
    	width: 98%;
    	top: 1%;
    	height: 10%;
    	background: #ffffff;
    	border: 1px solid #000000;
    }
    
    #left {
    	position: absolute;
    	left: 1%;
    	width: 20%;
    	top: 12%;
    	height:76%;
    	background: #7A5DC7;
    	border: 1px solid #000000;}
    
    #center {
    	position: absolute;
    	overflow: auto;
    	left: 22%;
    	right: 22%;
    	top: 12%;
    	height:76%;
    	background: #ffffff;
    	border: 1px solid #000000;}
    
    #right {
    	position: absolute;
    	right: 1%;
    	width: 20%;
    	top: 12%;
    	height:76%;
    	background: #7A5DC7;
    	border: 1px solid #000000;
    }
    
    #bottom {
    	position: absolute;
    	left: 1%;
    	width: 98%;
    	bottom: 1%;
    	height: 10%;
    	background: #ffffff;
    	border: 1px solid #000000;
    }



    NOTES
    1) This is "format.css"
    2) I like to be over organized when I design....so I use two external css the first is for the "text format" and the second is for the "page layout"
    Code:
    p {
    font-family: Georgia;
    text-indent: 3%;
    padding: 2%;
    }



    NOTES
    1) This is "index.html"
    2) This is the test page that I am using just to get started with....
    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=utf-8" />
    		<title>Layout Test 1</title>
    		<link rel="stylesheet" type="text/css" href="css/layout.css" />
    		<link rel="stylesheet" type="text/css" href="css/format.css" />	
    	</head>
    
    	<body>
    	
    		<div id="top">
    		test
    		</div>
    		
    		<div id="left">
    		test
    		</div>
    		
    		<div id="center">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id lorem. Quisque ornare. Integer tristique condimentum nisi. Ut id tellus. Vestibulum sed leo vitae sapien adipiscing condimentum. Vestibulum purus felis, dapibus nec, pellentesque volutpat, porta ut, sem. Pellentesque purus diam, volutpat et, pretium at, ullamcorper vitae, lectus. Fusce blandit. Nulla consequat ligula a nunc. Aenean vel lacus. Vivamus varius. Maecenas ac felis. Donec sagittis mauris sit amet leo.</p>
    			
    			<p>Nam placerat arcu sit amet lacus blandit lobortis. Nam aliquam placerat pede. Etiam vestibulum eleifend nisi. Integer sed metus. Etiam mattis vehicula eros. Proin eu libero. Mauris sapien magna, posuere id, viverra sed, imperdiet ac, neque. Suspendisse auctor. Nullam vitae eros vel elit sodales imperdiet. Nulla facilisi. In sit amet lacus. Nam sagittis orci ac ligula luctus varius. Sed sit amet felis vel turpis ultricies imperdiet.</p>
    			
    			<p>Integer adipiscing diam nec libero. Duis est metus, dignissim ac, posuere vitae, porttitor nec, orci. Donec sed mauris in massa luctus imperdiet. Donec consectetuer elit quis libero. Morbi sed sem at enim pretium molestie. Donec urna ante, imperdiet vel, euismod sit amet, luctus eget, tortor. Nulla dictum. Curabitur pulvinar eros. Sed vitae purus. Nullam sem enim, vulputate eu, placerat id, dapibus vitae, libero. In hac habitasse platea dictumst. Nulla fringilla.</p>
    			
    			<p>Nunc dapibus, erat vel euismod suscipit, lectus sapien malesuada arcu, eget molestie leo magna pharetra tortor. Donec blandit, augue sed viverra consequat, quam sem venenatis urna, at interdum eros lacus at neque. Nam ac sem. Curabitur et enim. Pellentesque in dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla interdum, orci non pretium sollicitudin, est eros bibendum dui, vitae blandit turpis nisi vitae justo. Nam lacus neque, sollicitudin ac, pulvinar feugiat, blandit ut, pede. Integer auctor. Duis erat pede, accumsan egestas, laoreet id, tincidunt id, leo. Maecenas vitae nisl sit amet justo rutrum pellentesque. Suspendisse tincidunt, eros sit amet tincidunt viverra, libero nulla lacinia libero, eu tincidunt ante eros mollis nibh.</p>
    			
    			<p>Cras nonummy sagittis leo. Donec ac orci. Quisque sollicitudin, quam sed vulputate mollis, purus magna suscipit velit, quis consectetuer metus ligula non sapien. Vivamus dictum eleifend dolor. Donec nec risus. Donec volutpat ipsum eu libero. Aenean facilisis urna id ligula. Nam vitae risus. Morbi in nibh. In purus. Pellentesque nec purus. Suspendisse sit amet ligula interdum ligula viverra sodales. Aliquam ullamcorper urna sit amet magna. Nullam et augue.</p>
    
    		</div>
    		
    		<div id="right">
    		test
    		</div>
    		
    		<div id="bottom">
    			<center>
    				 <a href="http://validator.w3.org/check?uri=referer">
    				 	<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
    				 </a>
    			</center>
    		</div>
    		
    	</body>
    
    </html>
    Last edited by dcanup; 12-29-2006 at 09:35 PM. Reason: took out the pics and made them links

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a fact of life. It's ok to occasionally bump a thread, but only when done after an ample amount of time (ie: 2-3 days) have passed without a response, and never more than once,
    errr "Bump"

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100%

    Although I am a serious opponent of persisitent sticky footers and would recommend against using all absolute positioning (although you probably can't avoid it in this case), it seems like you need to explicitly set the height of both the html and the body element to 100%, otherwise the height references of the other elements are inconclusive (it seems FF does this by default); see if that helps with IE6.

    By the way: if you do need to supply specific CSS rules to IE6, you're adviced to use conditional comments rather than hacks.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66 View Post
    Although I am a serious opponent of persisitent sticky footers and would recommend against using all absolute positioning (although you probably can't avoid it in this case), it seems like you need to explicitly set the height of both the html and the body element to 100%, otherwise the height references of the other elements are inconclusive (it seems FF does this by default); see if that helps with IE6.

    By the way: if you do need to supply specific CSS rules to IE6, you're adviced to use conditional comments rather than hacks.
    excellent......that is the right way to help someone new. You told me what you though, then lead me in the right direction giving me links that I can use. Thanks


    SOLVED


  •  

    Posting Permissions

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