2 replies [Last post]
tommuir
Offline
Regular
Upper east side
Last seen: 13 years 45 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>KKPortfolio.net</title>
    <meta http-equiv="CACHE-CONTROL" content="PUBLIC">
    <meta name="DESCRIPTION" content="description!">
    <meta name="KEYWORDS" content="keywords!">
    <meta name="ROBOTS" content="INDEX,FOLLOW">
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <script language="javascript" type="text/javascript" src="nav.js"></script>
    <style type="text/css">
   
                             /*Positioning CSS */
        #track1{
                width: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
                }
        #object1{
                 position: absolute;
                 left: 0px;
                 top: 0px;
                 }
        #object2{
                 position: absolute;
                 right: 0px;
                 top: 0px;
                 }
        
        #footPosDiv{
                 width: 100%;
                 position: absolute;
                 left: 0px;
                 top: 181px;
                   }
        #nav{
                 width: 23%;
                 position: absolute;
                 left: 2%;
                 top: 200px;
            }
        #navTop{
                 width: 100%;
                 height: 21px;
                }
        #content{
                 width: 71%;
                 position: absolute;
                 left: 27%;
                 top: 200px;
								 padding: 0px;
								 margin: 0px;
                 }
        #contentTop{
                 width: 100%;
                 height: 21px;
                    }
        #track2{
                 width: 100%;
                 height: 125px;
                 position: absolute;
                 left: 0px;
                 bottom: 0px;
                 }
        #object3{
                 position: absolute;
                 left: 0px;
                 bottom: 0px;
                 }
        #object4{
                 position: absolute;
                 right: 0px;
                 bottom: 0px;
                 }
        
   
    </style>
  </head>
  <body>
    <!--                Explain header and footer layout
     
        What appears in the top of the browser window in the header and
        at the bottom in the footer as one image, is infact 3 seperate
        sections, positioned in such a way that the image should look
        complete, full  quality and full width in any screen-rez above
        800*600. This is easily explained by employing the analogy of 
        'tracks' and visualizing 2 'layers' of images. The lower layer
        is always 100% of the screen width and cantains the first image.
        The two other images are on a layer above: One at the very left
        of the screen and one at the very right. As you re-size the browser
        window, what you're effectively doing, is changing the relationship
        between the position of the top and bottom layers, giving a trully
        accessable design!
     -->
                                   <!-- theHeader -->
                         <img src="images/track1.jpg" id="track1">
												 <img src="images/object1.jpg" id="object1">
												 <img src="images/object2.jpg" id="object2"> 
												            <!-- /theHeader-->
																		
                            <!-- Helps to postion the footer -->
 
                        <div id="footPosDiv">
												
                          <div id="nav" class="contentDiv">
													    <img src="images/contentHead.jpg" id="navTop">
														  <script language="javascript" type="text/javascript">
                                for(var i=0; i\<links.length;i++){
																    document.write('<a href="'+links[i]+'">'+text[i]+'<\/a><br>');
																		}
                              </script>
													</div>

                          <div id="content" class="contentDiv">
													    <img src="images/contentHead.jpg" id="contentTop"> 
															 What appears in the top of the browser window in the header and at 
												 			  the bottom in the footer as one image, is infact 3 seperate sections,
															   positioned in such a way that the image should look complete, full 
																  quality and full width in any screen-rez above 800*600. This is easily
                                   explained by employing the analogy of 'tracks' and visualizing 2 'layers'
																	  of images. The lower layer is always 100% of the screen width and contains
																		 the first image. The two other images are on a layer above: One at the very 
																		  left of the screen and one at the very right. As you re-size the browser window,
																			 what you're effectively doing, is changing the relationship between the position
																			  of the top and bottom layers, giving a trully accessable design!
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				<br>
																				
													</div>
                                                         <!-- theFooter-->
                                             <img src="images/track2.jpg" id="track2"> 
																						 <img src="images/object3.jpg" id="object3">
																						 <img src="images/object4.jpg" id="object4"> 
																						             <!-- /theFooter-->
                          </div>
                                                 <!-- /Helps to postion the footer -->
    </body>
</html>

I'm having huge problems with getting the footer at the bottom of the page, cab you help?

i am not here

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 40 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

How to position a footer...

With all your divs being absolutely positioned it is not possible to get to the 'bottom' of your page to put the footer.

Absolute positioned divs are taken out of the normal flow of the page.

You could position your content div first, using a static div (default), and give it a left and top margin to make it appear to be absolutley positioned.

#content{width: 71%; padding: 200px 0 0 0; margin: 0 0 0 27%;}

Put the content div FIRST in your html.

The footer should then appear at the end of the content.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

How to position a footer...

You're trying ti use breaks to position your footer. Try this:

#footer {
position: absolute;
width: 100%;
bottom: 0
}

Verschwindende wrote:
  • CSS doesn't make pies