SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Elastic Equal coloumns pmob

    Hi there.

    I am using pmob's 2 coloumn equal coloumns (which is has a fixed left col and fluid right) example to try and make it elastic (using ems)

    His example is basically this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    #wrapper
    {
    background:#809900;
    }
    
    #nav
    {
    width:220px;
    float:left;
    margin-left:-219px;/* 1px less because of older mozilla*/
    position:relative;/* keep it visible*/
    left:-1px;/* line it up exactly*/
    }
    
    #content{ margin-left:220px;background:#ffffcc;}
    .innerfix{width:100%;margin-right:-1px;float:left;position:relative;}
    
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {display:inline-block;}
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    </style>
    </body>
    
    <head>
    <div id="outerx3" class="clearfix">
    	<div id="mainx3" class="clearfix">
    		<div class="innerfix">
    			<div id="lcolx3">
    				<ul>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    				</ul>
    
    			</div>
    			<p>This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content
    							: This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content:</p>
    		</div>
    	</div>
    </div>
    So im not exactly sure how to go about making it elastic. When I tried it broke the layout. Any help is appreciated.

    Thanks

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

    ? what did you do with the code ?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <style type="text/css">
    <!--  -->
    *{padding:0;margin:0;}
    
    body{
    font-size:75&#37;;
    font-family:Verdana,Georgia,"Lucida Sans Unicode",sans-serif;
    }
    
    .wx{width:64em;}
    
    div{font-size:1em;}
    
    ul,p{padding:5px;}
    
    #outerx3{
    background:#809900;
    overflow:hidden;
    margin:0 auto;
    }
    
    #mainx3{margin-left:18em;background:#ffffcc;}
    
    #lcolx3{
    width:18em;
    float:left;
    margin-left:-17.9em;/* 1px less because of older mozilla*/
    position:relative;/* keep it visible*/
    left:-.1em;/* line it up exactly*/
    }
    
    .innerfix{overflow:auto;}
    * html #innerfix{float:left;}
    * html #innerfix p{height:1%;}
    
    .clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
    }
    .clearfix{display:inline-block;}
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
     -->
    </style>
    </head>
    <body>
    
    <div id="outerx3" class="w">
    <div id="mainx3" class="clearfix">
    
    <div id="lcolx3">
    <ul>
    <li><a href="##">Link a</a></li>
    <li><a href="##">Link b</a></li>
    <li><a href="##">Link c</a></li>
    <li><a href="##">Link d</a></li>
    <li><a href="##">Link e</a></li>
    <li><a href="##">Link f</a></li>
    </ul>
    
    <p>Start <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 /><br /><br /><br />
     -->
    End</p>
    
    
    </div>
    	
    <div class="innerfix">
    
    <p>This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content
    : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content:
    </p>
    <p>Start <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 /><br /><br /><br />
     -->
    End</p>
    </div>
    
    </div>
    </div>
    
    
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried changing the 2 things that say 220px and 1 thing that says 219px to 10em

    Thanks for the response i will try it out in a second

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thank you, it worked, previously i didnt have the .1em thing, as i though it was only needed for pixels.

    There is still a couple of small issues i would like to have cleared up.

    Please take a look here: http://neb.enterdesign.com.au/

    1. The text in <code> is bigger in IE and Opera than in FF. How can i make it the same in all browsers?

    2. Not so important but, in IE5 (fine in 5.5) the text in #nav seems to have a larger line-height.

    Thanks!

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

    1 Yes , if this is bothering you , use filters to get the proper size in each browser

    2 Not in my IE5 ( my example from above ), debug it on haslayout for UL LI A ( * html .nav li{height:1&#37;;} )

    PS this is nonsense code ( add borders and get troubles )
    .innerfix{width:100%;margin-right:-1px;float:left;position:relative;}

    use
    .innerfix{overflow:auto;}
    * html #innerfix{float:left;}
    * html #innerfix p{height:1%;}

  6. #6
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Sorry, what do you mean by filters? I dont understand why it is happening.

    nonesense code, hey? thats from pmob's example of equalising coloumns

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

    Filters at your own risk
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	* html * body .wr {background:#ffff00;} /* IE4 */
    	
    	head+/* */body .wrg{background:#ffff00;} /* FF */
    	
    	html:first-child>body .wrf{background:#ffffcc;} /* OP Cascades, last in css sheet */
    	
    
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html + body .wra {background:#ffff00;} /* IE5 */
    	* html *body .wrb {background:#ffff00;} /* IE5 */
    	* html .wrc{background=#ffff00!;} /* IE5.5 */
    	@media all{ * html b\ody .wrd {background:#ffff00;} /* IE 6 */
    	*:first-child+html .wre{background:#ffff00;} /* IE 7 */
    	
    	</style>
    	<![endif]-->
    </head>
    <body>
    <div class="wr">IE 4</div>
    <div class="wra">IE 5</div>
    <div class="wrb">IE 5</div>
    <div class="wrc">IE 5.5</div>
    <div class="wrd">IE 6</div>
    <div class="wre">IE 7</div>
    <div class="wrf">OP</div>
    <div class="wrg">FF NS Moz OP</div>
    <p><br /><br /></p>
    <div class="wr wra wrb wrc wrd wre wrf wrg">Check</div>
    </body>
    </html>
    width:100&#37;;margin-right:-1px; this drags the content box to the right, as far as the 1px ? hook to get the columns equalize
    You use em's
    The model can be cranked up with borders, and even be 100% high, but not with that code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>equal columns</title>
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	
    	html,body{height:100%;}
    	
    	p,h1,h2{padding:0px;font-size:1em;}
    	
    	body{
    	background:#a2a2a2;
    	text-align:center;
    	font-size:75%;
    	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
    	}
    	
    	div{text-align:left;}
    
    	.w{margin:0px auto;}
    	.w{width:64em;}
    	.wx{width:80%;}
    	
    	.wra,.he,.na,* html .ar,.la,* html .al,.lla,.fo{border-color:#0000ff;border-style:solid;}
    	.wra,.ar,.he,.na,.l,.ll{position:relative;}
    	
    	.wra{
    	background:#d8d8d8;
    	border-width:0 1em;
    	margin-top:-5em;
    	}
    	head+body .wra{min-height:100%;background:#c6c6c6;}
    	
    	.ar{margin-right:16em;z-index:1;}
    	.al{margin-left:16em;/* z-index:2;*/}
    	
    	.he{
    	background:#ff8c00;
    	height:7em;
    	border-width:6em 0 1em 0;
    	}
    	
    	.l,.ll,.la,.lla{width:16em;}
    	.l{margin-left:-15.9em;float:left;left:-.1em;/*  */}
    	.ll{margin-right:-15.9em;float:right;left:.1em;/*  */}
    	
    	head+body .la,head+body .lla{position:absolute;top:0;bottom:0;}
    	head+body .la{left:0;background:#b4b4b4;border-width:0 1em 0 0;}
    	head+body .lla{right:0;background:#d8d8d8;border-width:0 0 0 1em;}
    	
    	.l,.ll,.q{/* text-align:right; */}
    	head+body .q{overflow:hidden;padding:0 1em;}
    
    	.fo,.na{background:#fbfbfb;height:3em;}
    	
    	.fo{border-width:1em;}
    	
    	.he,.na{margin:0 -16em;}
    
    	.na{border-width:0 0 1em 0;}
    	
    	head+/* */body .fc:after{ 
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	h2{clear:both;}
    	/*  */
    	html body .la,* html body .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
    	html body .lla,* html body .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
    	head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;}
    	* html body .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
    	
    	/* hide left col
    	.l,.la{display:none;}html .al{margin-left:0;border-left:none;}html body .he,html body .na{margin-left:0;}head+body .q{overflow:auto;padding:0 1em 0 0;}
    	 */
    	/* hide right col */
    	.ll,.lla{display:none;}html .ar{margin-right:0;border-right:none;}html body .he,html body .na{margin-right:0;}head+body .q{overflow:auto;padding:0 0 0 1em;}
    
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .wra,* html body .al, * html body .ar{height:100%;}
    	
    	* html .ar{border-width:0 1em 0 0;background:#b4b4b4;}
    	* html .al{border-width:0 0 0 1em;background:#c6c6c6;}
    	
    	* html .he,* html .na{margin:0 -17em;/*  */}
    	
    	* html .l{left:-1.1em;/*  */}
    	* html .ll{left:1.1em;/*  */}
    	
    	* html .la,* html .lla{display:none;}
    	
    	* html .q{float:left;}
    	* html .q h2{height:1%;}
    	
    	* html .fc,* html p{height:1%;} /* IE 5 5.5 6 haslayout */
    	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
    	* html .la,* html .lla{display:none;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="wra w">
    
    <div class="ar">
    <div class="al fc">
    
    <div class="he"><h1>header</h1></div>
    
    <div class="na"><p>nav</p></div>
    
    <div class="l">
    <p>L Start Start Start<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    End</p>
    </div>
    
    <div class="ll">
    <p>R Start Start Start<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    End</p>
    </div>
    
    <div class="q">
    <h2>content</h2>
    <p>C Start Start Start<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    End</p>
    </div>
    
    </div>
    </div>
    
    <span class="la"></span>
    <span class="lla"></span>
    
    </div>
    
    <div class="fo w"><p>footer</p></div>
    
    </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I dont think you understood what i originally said...
    I said if you look at http://neb.enterdesign.com.au/ the font size in the <code> element is different sizes in different browsers. (bigger in IE and opera and smaller in firefox) The text on the rest of the page is however fine.

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

    Yes use the filters for the code Tag ?

    (IE 7 filter) code{font-size:1em;}
    (FF filter) code{font-size:1em;}
    (OP filter) code{font-size:1em;}
    etc

    PS Australia, down under, hmmmm must be because you are always hanging upside down

  10. #10
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I see what you are saying. But i dont know why they are different sizes in the first place :S

    PS. Something about Netherlands goes here

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

    Code tags indeed are very different in size cross browser, why ? , maybe somebody else knows the answer to it

  12. #12
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe i should use <pre> instead? ill try it out now and see what happens. Sitepoint uses <pre> and they are the same size in each browser

  13. #13
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no luck, same thing.


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
  •