SitePoint Sponsor

User Tag List

Page 65 of 66 FirstFirst ... 1555616263646566 LastLast
Results 1,601 to 1,625 of 1630
  1. #1601
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/2colmac.htm
    http://www.pmob.co.uk/temp/mac3column.htm

    Which one was the one that failed in Opera? Is it actually impossible in Opera or have you not been able to do it-if it is impossible, then why?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  2. #1602
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Ryan,

    The opera problem is a consistent problem with the 100% height routines and which we spoke about in relation to sticky footer techniques.

    The problem is that on first load Opera is fine but if you resize the browser window vertically the footer (or the 100% height element) doesn't follow suit unless you refresh once the window has been moved. This has to be a vertical movement because a horizontal movement usually triggers a refresh in some way.

    In newer versions of Opera the 100% height also fails unless you use position:absolute on the body of use an overflow on html.

    There are ways around it but the best way to make Opera work is to use an old safari min-height trick of using a 100% height 0px wide float as in my early demos which is why they always worked in opera.

    You can se it in action here.

    http://www.pmob.co.uk/temp/sticky-footer2.htm

    Hope that answerrs your question.

  3. #1603
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yea it does thanks.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #1604
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/sticky-footer2.htm

    That is not a sticky footer, it is not sticking to my browser...the content is making it go too down...not what you wanted correct?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #1605
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    not what you wanted correct?
    It's doing exactly what it was designed to do.

    I think you may be misunderstanding what a sticky footer is. A sticky footer is not a fixed footer.

    A sticky footer is designed to sit at the bottom of the viewport on pages where there is not much content. This avoid the problem where you only have a couple of lines of text (such as an a small contact page or similar) which looks strange with the footer being high up the page.

    However on pages that have more content than can fit in the viewport the footer sits at the bottom of the document content below the fold as per normal. A fixed footer on the other hand always sits at the bottom of the viewport and the content scrolls behind it.It is not the same as a sticky footer.

  6. #1606
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What if you want the content to scroll instead :O..I gotcha now lolz.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #1607
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.
    Sorry to disturb you.

    I don't understand why on earth
    ie 6 go nuts with this layout:

    Code HTML4Strict:
    <!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="it" lang="it" dir="ltr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="index,follow" />
    <meta name="content-language" content="it" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" href="/favicon/favicon.ico" />
    <link rel="bookmark" href="/favicon/favicon.ico" />
    <meta name="author" content="Whisher" />
    <title>&nbsp;Php&nbsp;&rsaquo;&nbsp;Home</title>
    <style type="text/css">
    	/* GENERAL TAGS */
    * {
    	margin: 0;
     	padding: 0;
        outline: none;
    }
    a:link, a:visited,a:hover,a:active{
    	text-decoration: none; 
    }
    img,fieldset{ 
    	border:none;   
    }
    ul,ol{
    	list-style: none;
    }
    h1{
       font-size: 2em;
    }
    h2{
    	background: #93c3cd url('../images/pattern-container.png') repeat left top;
    	text-indent: 10px;
       	font-size: 1.2em;
       	color: #333333;
    }
    h3{
       font-size: 1.2em;
    }
    h4{
       font-size: 1em;
    }
    p{
       font-size: 1em;
    }
    blockquote, input, li, select, th, td  {
       font-size: 1em;
    }
    div{
       text-align: left;
    }
    th, td{
       text-align: left;
    }
    code, tt, pre{
    	font-size: 120%;
    }
    hr{
    	display:none;
    }
    /* MAIN */
    body {
    	font-size: 80%;
     	font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif;
    	background-color:#FAE3E8;
    	text-align:center;
    	color: #111111;
    }
    #container {
    	width: 980px;
    	background-color:#93c3cd;
    	border:1px solid #ff6b7f;
    }
    /* HEADER */	  
    #header{
    	height: 120px; 
    	background: #db4865 url('../images/header-background.jpg') no-repeat left top;
    }
    #header h1{
    	height: 120px; 	
    	font-size: 1em;
    } 
    #header h1 a,#header h1 a:hover{
    	height: 120px;
    	display: block;
    	font: normal 1em Georgia, "Times New Roman", Times, serif;
    	color:#ffffff;	
    } 
    /* NAVIGATION */
    #navigation{
    	height: 50px;
    	background-color: #35414f;
    	border-top:1px solid #ff6b7f;
    	border-bottom:1px solid #2c4359;
    }
    #navigation li {
    	display: inline;
    	padding-right: 10px;
    }
    #navigation li a,#navigation li a:hover{
    	line-height: 50px;
    }
    #navigation li a{
    	color: #e1e463;	
    }
    #navigation li a:hover {
    	background-color: #e1e463;
    	color: #35414f;	
    }
     
    /* CONTENT */
    #left-content {
    	margin-left:-199px;/* must be 1 pixel less than width*/
    	float:left;
    	width:200px;/* must be same as left margin on #wrapper-content*/
    	position:relative;
    	left:-2px;/* line up exactly */
    	display:inline;/* ie fix*/
    }
     
    #right-content {
    	margin-right:-199px;/* must be 1 pixel less than width*/
    	float:right;
    	width:201px;/* must be same as right margin on #wrapper-content*/
    	position:relative;
    	right:-2px;/* line up */
    	display:inline;/* ie fix*/
    }
    #center-content{
    	padding:10px;	
    }
    #wrapper-content {
    	background-color:#DAEBEE;
    	margin-left:200px;
    	margin-right:201px;
    }
    /* 3 pixel jog*/
    * html #left-content{margin-right:-3px;}
    * html #right-content{margin-left:-3px;}
    /* mac hide and combat ie's 3 pixel jog \*/
    * html #center-content{overflow:hidden;float:left;width:100%}
    * html #wrapper-content {height:1%;}
    #footer {
    	clear:both;
    	height:50px;
    	background-color:#db4865;
    }
    #footer h3 a,#footer h3 a:hover{
    	line-height:50px;
    	color:#ffffff;
    }
    /* UTILITIES */
    .center{
    	margin:0 auto;
    }
    .clearer{
    	height:1px;
    	overflow:hidden;	
    	margin-top:-1px;
    	clear:both;
    }
     
    /* LEFT-CONTENT TREE */
    #menu-tree{
    	width: 195px;
    	margin-left: 5px;
    	background-color: red;
    }
    /* RIGHT-CONTENT WINDOWS */
     
    table.features{
    	width: 200px;
    }
    table.features thead{
    	display: none;
    }
    table.features tr.feature-style-1{
    	font-weight: normal;
    }
    table.features tr.feature-style-2{
    	font-weight: bold;
    }
    table.features tr.feature-style-3{
    	color: #ff3853;
    	font-weight: bold;
    }
    table.box-image td{
    	vertical-align: middle;
    	text-align:center;
    	background-color: red;
    }
    table.box-image td img{
    	vertical-align: middle;
    }
     
     
     
     
    </style>
    </head>
    <body>
    <div id="container" class="center"> 
    	<div id="header">
        	<h1><a href="/" title="Php ">Php</a></h1>
     
      	</div> <!-- end of header -->
      	<div id="navigation">
        <ul class="nav current-index"><li class="index"><a href="index.php" title="index">Home</a></li><li class="chisiamo"><a href="/chisiamo" title="chisiamo">Chi siamo</a></li><li class="contatti"><a href="/contatti" title="contatti">Contatti</a></li></ul>  	</div> <!-- end of navigation -->
      	<div id="wrapper-content"> 
    		<div id="left-content">
    		<h2>Store</h2>
     
    			<ul id="menu-tree" class="menu-tree">
                    <li><a href="?id=88" title="Bicilcletta" class="selected">Bicilcletta</a><ul>
                        <li><a href="?id=90" title="Bicicletta da donna">Bicicletta da donna</a></li>
                        <li><a href="?id=103" title="Bicicletta da corsa">Bicicletta da corsa</a></li>
                        <li><a href="?id=100" title="bicicletta da uomo">bicicletta da uomo</a></li>
                        <li><a href="?id=101" title="Bicilcette da bambino">Bicilcette da bambino</a></li>
     
                    </ul></li>
                    <li><a href="?id=89" title="Accessori">Accessori</a><ul>
                        <li><a href="?id=94" title="Guanti">Guanti</a><ul>
                            <li><a href="?id=95" title="Lana">Lana</a></li>
                            <li><a href="?id=96" title="Cotone">Cotone</a></li>
                        </ul></li>
                        <li><a href="?id=98" title="Parabrezza">Parabrezza</a></li>
     
                    </ul></li>
                    <li><a href="?id=92" title="Abbigliamento">Abbigliamento</a><ul>
                        <li><a href="?id=102" title="Mutande">Mutande</a></li>
                    </ul></li>
                    <li><a href="?id=97" title="Moto">Moto</a></li>
    </ul>
    		</div> <!-- end of left-content -->
     
    	    <div id="right-content"> 
     
         		<div class="windows">
    <h2>Vetrina</h2>
    <table class="features" cellpadding="0" cellspacing="1">
    <caption>Coppi extra special</caption>
    <thead>
    <tr><th>Nome</th><th>Descrizione</th></tr>
    </thead>
    <tbody>
    <tr class="box-image">
    	<td colspan="2">
     
    	<a href="/2c00557b82.jpg" title="coppi-bicicletta-corsa" rel="lightbox">
    <img src="/thumb_2c00557b82.jpg" alt="coppi-bicicletta-corsa" title="coppi-bicicletta-corsa" class="punch" />
    </a>
    	</td></tr>
    		<tr class="feature-style-1">
    	<td>Gearing :</td>
    	<td>Shimano extra xl</td>
    	</tr>
    		<tr class="feature-style-1">
     
    	<td>Frame :</td>
    	<td>Allumin carbon extra</td>
    	</tr>
    		<tr class="feature-style-3">
    	<td>Price :</td>
    	<td>2000 eur</td>
    	</tr>
     
    	 <!-- end feature -->
    	</tbody>
    </table>
    	 <!-- end item -->
     
    </div>
    <div class="windows">
    <h2>Offerte</h2>
    <table class="features" cellpadding="0" cellspacing="1">
    <caption>Free auto cycle</caption>
    <thead>
    <tr><th>Nome</th><th>Descrizione</th></tr>
     
    </thead>
    <tbody>
    <tr class="box-image">
    	<td colspan="2">
    	<a href="/3e5c600f6d.jpg" title="Free_Bicycle_Screens" rel="lightbox">
    <img src="/thumb_3e5c600f6d.jpg" alt="Free_Bicycle_Screens" title="Free_Bicycle_Screens" class="punch" />
    </a>
    	</td></tr>
    		<tr class="feature-style-2">
    	<td>Frame :</td>
    	<td>extra</td>
     
    	</tr>
    		<tr class="feature-style-1">
    	<td>Gearing :</td>
    	<td>Shimano extra</td>
    	</tr>
    		<tr class="feature-style-3">
    	<td>Price :</td>
     
    	<td>1000 eur</td>
    	</tr>
    	 <!-- end feature -->
    	</tbody>
    </table>
    	 <!-- end item -->
     
    </div>
    <div class="windows">
    <h2>Usato</h2>
     
    <table class="features" cellpadding="0" cellspacing="1">
    <caption>Classic</caption>
    <thead>
    <tr><th>Nome</th><th>Descrizione</th></tr>
    </thead>
    <tbody>
    <tr class="box-image">
    	<td colspan="2">
    	<a href="/7bbbde37fc.jpg" title="bicicletta classica" rel="lightbox">
    <img src="/thumb_7bbbde37fc.jpg" alt="bicicletta classica" title="bicicletta classica" class="punch" />
    </a>
    	</td></tr>
     
    		<tr class="feature-style-1">
    	<td>Gearing :</td>
    	<td>Manuale base</td>
    	</tr>
    		<tr class="feature-style-1">
    	<td>Frame :</td>
    	<td>Ferro pieno</td>
     
    	</tr>
    		<tr class="feature-style-3">
    	<td>Price  :</td>
    	<td>800 eur</td>
    	</tr>
    	 <!-- end feature -->
    	</tbody>
    </table>
     
    	 <!-- end item -->
     
    </div>
     <!-- end window -->
     
     
     
    	    </div> <!-- end of right-content -->
     
        	<div id="center-content"> 
          		      		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
     
    <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
     
    <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor</b>. Ut fringilla. Suspendisse potenti. <b>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh</b>. Nunc feugiat mi a tellus consequat imperdiet. <b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
     
    		</div> <!-- end of center-content -->
     
        	<div class="clearer"></div>
      	</div> <!-- end of wrapper-content -->
      	<div id="footer"> 
        	<h3><a href="/" title="Php fake shop">Php</a></h3>
      	</div> <!-- end of footer -->
    </div> <!-- end of container --></body>
    </html>

    without the tables in right-content it
    works fine.

    Bye.

  8. #1608
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have added 10px padding to the center-content and as it is already 100&#37; wide that makes it too big and throws everything out.
    Code:
    #center-content {
        /*padding:10px;*/
    }
    * html #center-content {
        overflow:hidden;
        float:left;
        width:100%
    }
    Remove the padding from #center-content and apply it to an inner element instead, or apply to existing inner elements to save adding extra divs.

    #center-content p{padding:0 10px;margin:.5em 0 1 em}

  9. #1609
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You have added 10px padding to the center-content and as it is already 100% wide that makes it too big and throws everything out.
    Code:
    #center-content {
        /*padding:10px;*/
    }
    * html #center-content {
        overflow:hidden;
        float:left;
        width:100%
    }
    Remove the padding from #center-content and apply it to an inner element instead, or apply to existing inner elements to save adding extra divs.

    #center-content p{padding:0 10px;margin:.5em 0 1 em}
    Thanks

  10. #1610
    SitePoint Member taylorsatula's Avatar
    Join Date
    Apr 2009
    Location
    Michigan, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya but you could do a if IE stylesheet
    ThreePixelDrift
    Code SQL:
    mysql query DELETE ie6 FROM the_world
    Coda, CSSedit, Photoshop
    Leopard, XP, Ubuntu 8.10

  11. #1611
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That is more work then simply typing in * html #elemtn.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #1612
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ^yes. It's also harder to get back to later. With a single CSS sheet, you can ctrl+f anything : )

    I'm sure Paul has one somewhere but there's also the matryoshka float trick for 3-colomn height (though depending on how you do it you can get an unwanted vertical scrollbar). A float in a float in a float in a float.

  13. #1613
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What's the "matryoshka" float trick
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #1614
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    What's the "matryoshka" float trick
    See here for Stommes previous example.

    It has limited use as one column controls the other two (unlike my methods where each floated columns pulls all the other ones with it.).

  15. #1615
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh that's what thats' called? Awesome. I used to call it equal floating columns trick to my friends.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #1616
    SitePoint Addict Kysmiley's Avatar
    Join Date
    Dec 2004
    Location
    Isonville KY
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Paul I am looking at your layout for the 2 colum main with the sidebar on the right. My wife likes the layout. When I tried to look at the coding it only showed the the HTML coding. When I brought up the CSS coding it was all garbled. Would you still have this CSS coding somewhere?
    Pat

  17. #1617
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you have the link to the live page (for us) then I can provide you the CSS.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #1618
    SitePoint Addict Kysmiley's Avatar
    Join Date
    Dec 2004
    Location
    Isonville KY
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan this is the URL... http://www.pmob.co.uk/temp/2col_main.htm after I have the main CSS body I will be able to make changes to background and text or what my wife wants. She is the BOSS she yells I jump LOL

  19. #1619
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Look at the HTML again. A few lines down from the top you'll see this:
    <link href="2columngray.css" rel="stylesheet" type="text/css" />

    The href is where the CSS is. so, http://www.pmob.co.uk/temp/2columngray.css

    which is here:
    Code:
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html,body {
    		margin: 0;
    		padding: 0;
    }
    body {		
    		font: x-small arial, hevetica, sans-serif;
    		text-align: center;
    		color: #505367;
    		background-color: #e0e0e0;
    }
    		
    #container {
    		margin-left:auto;
    		margin-right:auto;
    		width: 730px; 
    		min-height:100%;
    		text-align: left;
    		background: #CEE0E1 url(images/toddbg.gif) repeat-y right top;
    		border-left: 1px solid #a1a1a1;
    		border-right: 1px solid #a1a1a1;
            position:relative;
    		}
    /* commented backslash hack v2 \*/ 
    * html #container {height:100%;}		
    * html #container {width:732px;w\idth:730px;}
    * html body{font-size:xx-small;f\ont-size:x-small}
    /* end hack */ 
    
    #mainheader {
    		position:absolute;
    		left:0;top:0;
    		height: 160px;
    		width:100%;
    		background-color: #fff;
    		border-bottom: 1px solid #e6e6e6;
    		z-index:1;
    }
    #header {
    		height: 125px;
    		width:100%;
    		background-color: #D1DCE9;
    		margin: 0px 0px 5px 0px;
    		border-top: 1px solid #e6e6e6;
    		border-bottom: 1px solid #e6e6e6;
    		position:relative;
    		z-index:2;
    		overflow:hidden;
    }
    
    * html #mainheader {height:161px;he\ight:160px}
    * html #header {height:127px;he\ight:127px}
    #mainnav {
    		width:100%;
    		height: 20px;
    		background-color: #f5f5f5;
    		border-top: 1px solid #e6e6e6;
    		border-bottom: 1px solid #e6e6e6;
    		position:relative;
    		z-index:2;
    }
    * html #mainnav{height:22px;he\ight:20px}		
    #sidebar {
    		float: right;
    		width: 170px;
    		padding:5px 0 ;
    }
    #content {
    		width: 553px;
    		padding:5px 0 ;
    		}
    #content p, #sidebar p, #mainnav p, #header p,#footer p  {margin:0 5px 5px 5px}		
    #footer	{
    		position:absolute;
    		bottom:0;
    		width:100%;
    		height: 24px;
    		background-color: #f5f5f5;
    		border-top: 1px solid #e9e9e9;
    }
    #footer p {margin:0;padding:0}
    * html #footer {height:25px;he\ight:24px;}
    
    .divider1 {
    	width:100%;
    	height:5px;
    	overflow:hidden;
    	background:#fff;
    	position:relative;
    	border-bottom: 1px solid #e6e6e6;
    }
    
    #clearfooter {height:27px;width:100%;clear:both}
    .blank , .blank2 {
    	position:absolute;
    	left:547px;
    	width:7px;
    	height:0px;
    	overflow:hidden;
    	border-top:	1px solid #fff;
    }
    .blank {top:-1px;}
    .blank2 {bottom:-1px;border-top:1px solid #fff;
    }
    Though it looks pretty old, and likely can be done in Strict.

    Quote Originally Posted by Ryan
    Oh that's what thats' called? Awesome. I used to call it equal floating columns trick to my friends.
    Heck, I dunno what it's called. Some guy from India showed it to me and it reminded me of those Russian dolls (matryoshka dolls, a doll in a doll in a doll) so, the name fits.

  20. #1620
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Though it looks pretty old, and likely can be done in Strict.
    Yes that's from 2003 and is in desperate need of updating

    I've put the css in the head to make it easier to grab. (That example uses a background image for the columns and some nasty empty elements to rub out the background.)

  21. #1621
    SitePoint Addict Kysmiley's Avatar
    Join Date
    Dec 2004
    Location
    Isonville KY
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I did find the CSS coding before but for some reason when I opened the file it was all garbled, full of little sqaure boxes in place of text.
    Pat

  22. #1622
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Sounds like it was opened as something other than a text file, and whoever was opening the file didn't know to treat it like text. Like looking at an image file in a text editor-- looks pretty weird and garbled.

  23. #1623
    SitePoint Member
    Join Date
    May 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul ... u the man !.... I was stuck on a equal column 100% height problem but with the help of your thread that began in 2003 ... helped me out very much and also your layout website. The trick with the image repeat duz the work, im quite happy with this .

    Thanks alot.

  24. #1624
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ClevaTreva's link isn't working any more...

  25. #1625
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by csspisces View Post
    ClevaTreva's link isn't working any more...
    If you tell me which post it was in I'll remove it


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
  •