SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: flexible header

Hybrid View

  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    flexible header

    I am working on http://www.pmob.co.uk/temp/2colfixedtest_4.htm.

    Left column and Centre column are flexible as you can see at at http://www.pmob.co.uk/temp/2colfixedtest_3.htm
    and http://www.pmob.co.uk/temp/2colfixedtest_2.htm.


    The length of the contents of the columns could be either long and short.

    What I want to is making not only columns(Left & Right)
    but also rows(especially, header) flexible.

    Since the header is fixed by "HEIGHT: 70px",
    It's not flexible Although Left & Centre are flexible.

    Can I make the header flexible?
    (The length of the contents of the header could be either long and short.)


    If you visit at http://220.89.242.19:8500/test/test.cfm, you might understand more clearly about what I am trying to do.
    The following is its whole code.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    	<head>
    		<title>SIS</title>
    		
    		<STYLE type=text/css>
    		
    			HTML { HEIGHT: 100% }
                BODY { HEIGHT: 100% }
    			
    			BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: pink; PADDING-BOTTOM: 0px; MARGIN: 0px; 
    			       COLOR: #000000; PADDING-TOP: 0px }				   				   
    				   
    			#outer { BORDER-RIGHT: #000 1px solid; MIN-HEIGHT: 100%; BACKGROUND: #f8e7ec; 
    					MARGIN-BOTTOM: -52px; MARGIN-LEFT: 160px; BORDER-LEFT: #000 1px solid; COLOR: #000000; HEIGHT: 100% }
    					
    			UNKNOWN { HEIGHT: auto }
    			
    			#header { BORDER-TOP: #000 1px solid; BACKGROUND: yellow; LEFT: 0px; OVERFLOW: hidden; 
    			          WIDTH: 100%; COLOR: #000000; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 70px }
    					  
    			#left { FLOAT: left; MARGIN-LEFT: -159px; WIDTH: 160px; PADDING-TOP: 72px; POSITION: relative }
    			
    			#left P { PADDING-RIGHT: 2px; PADDING-LEFT: 3px }
    			
    			#footer { CLEAR: both; BORDER-TOP: #000 1px solid; WIDTH: 100%; COLOR: #000000; 
    			          BORDER-BOTTOM: #000 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: none; TEXT-ALIGN: center}
    
     			HTML #footer { HEIGHT: 50px }
    			
    			#clearheader { HEIGHT: 72px }
    			
    			#clearfooter {	CLEAR: both; HEIGHT: 40px }
    			
    			DIV { MARGIN-TOP: 0px }
    			
    			P { MARGIN-TOP: 0px }
    			
     			HTML #centrecontent { MARGIN-BOTTOM: 12px; HEIGHT: 1% }
    		</STYLE>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    
    	</head>
    
    	<body>
    	
    		<DIV id=outer>
    			<DIV id=left>
    				<P>
    					Left Content goes here : Left Content goes here : Left Content goes here : 
    					Left Content goes here : Left Content goes here : Left Content goes here : 
    					Left Content goes here : Left Content goes here : Left Content goes here : 
    					Left Content goes here : 
    				</P>
    			</DIV>
    			
    			<DIV id=clearheader></DIV><!-- to clear header -->
    			
    			<DIV id=centrecontent><!--centre content goes here -->
    
    				<P>Centre Content goes here</P>
    
    				<P>
    					2 column layout - any column can be the longest. Footer will stay at bottom 
    					of window unless content is greater then it stays at bottom of document.
    				</P>
    			
    				<P>
    					Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, 
    					Opera7,Netscape 6.2). Opera 6 doesn't like the footer but it's usable.I expect 
    					mac and other browsers will fall over. (<STRONG>*Update*</STRONG> Mac Firebird 
    					and Mac Netscape 6 &amp; 7 (OS9) look perfect in all cases. Mac IE 5.1.7 &amp; 
    					IE5.2.3 and Safari1.1.1 don't like the footer and render it at bottom of the 
    					longest column. However the columns works fine ane the effect is still usable. 
    					Thanks to a number of people for checking this out for me as I don't have a mac 
    					to test on.)
    				</P>
    				<P>The left column colours are the background showing through.</P>
    				<P>
    					There is nothing special about this demo as similar techniques have been used 
    					before, however they are not usually integrated into one example. The secret to 
    					this demo is the left column which is floated negatively from the centre 
    					container. If you float them completely in the gaps at the side then they don't 
    					clear the footer. However if you leave them overlapping the centre content by 1 
    					pixel then the footer is pushed down as required. The difference can be made up 
    					with padding etc.
    				</P>
    				<P>
    					There is nothing special about this demo as similar techniques have been used 
    					before, however they are not usually integrated into one example. The secret to 
    					this demo is the left column which is floated negatively from the centre 
    					container. If you float them completely in the gaps at the side then they don't 
    					clear the footer. However if you leave them overlapping the centre content by 1 
    					pixel then the footer is pushed down as required. The difference can be made up 
    					with padding etc.
    				</P>
    				<P>
    					There is nothing special about this demo as similar techniques have been used 
    					before, however they are not usually integrated into one example. The secret to 
    					this demo is the left column which is floated negatively from the centre 
    					container. If you float them completely in the gaps at the side then they don't 
    					clear the footer. However if you leave them overlapping the centre content by 1 
    					pixel then the footer is pushed down as required. The difference can be made up 
    					with padding etc.
    				</P>
    				<P>
    					There is nothing special about this demo as similar techniques have been used 
    					before, however they are not usually integrated into one example. The secret to 
    					this demo is the left column which is floated negatively from the centre 
    					container. If you float them completely in the gaps at the side then they don't 
    					clear the footer. However if you leave them overlapping the centre content by 1 
    					pixel then the footer is pushed down as required. The difference can be made up 
    					with padding etc.
    				</P>
    			</DIV>
    		
    			<DIV id=clearfooter></DIV><!-- to clear footer -->
    		
    		</DIV><!-- end outer div -->
    
    
    		<DIV id=footer>
    			Footer - | 
    			<A href="http://www.pmob.co.uk/temp/2colfixedtest_3.htm">Left column longest</A> | 
    			<A href="http://www.pmob.co.uk/temp/2colfixedtest_2.htm">Centre column longest</A> |
     			<A href="http://www.pmob.co.uk/temp/2colfixedtest_4.htm">No Column Longest</A> | 
    			- Footer 
    		
    			<P></P>
    		</DIV>
    		
    		<DIV id=header>
    			<p>
    				As the text in this header become large, I like to make this yellow part become large. 
    				However the last part of this text is hidden as you see. How can I fix this?<br>
    				As the text in this header become large, I like to make this yellow part become large. 
    				However the last part of this text is hidden as you see. How can I fix this?<br>	
    				As the text in this header become large, I like to make this yellow part become large. 
    				However the last part of this text is hidden as you see. How can I fix this?<br>	
    				As the text in this header become large, I like to make this yellow part become large. 
    				However the last part of this text is hidden as you see. How can I fix this?<br>	
    				As the text in this header become large, I like to make this yellow part become large. 
    				However the last part of this text is hidden as you see. How can I fix this?<br>	
    				As the text in this header become large, I like to make this yellow part become large. 
    				However the last part of this text is hidden as you see. How can I fix this?<br>	
    
    			</p>
    			 
    			 
    		</DIV>
    
    	</body>
    </html>
    Last edited by dotJoon; Aug 20, 2004 at 03:20.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Your wish is my command

    http://www.pmob.co.uk/temp/2colfixed...ibleheader.htm

    Only tested in ie6 and firefox (I expect ie5 may have problems with it but haven't checked yet)

    Paul
    Edit:


    update: works fine in ie5 and ie5.5 an NN6 (and is even usuable in NN4.7 if you don't mind all the borders and background being missing)

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Great!

    Thank you.


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
  •