Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS "Simple Challenge"

Discussion in 'Website Design Forum:' started by tbwcf, Jan 13, 2009.

  1. tbwcf

    tbwcf Active Member

    I came across this page Cassatta - by dificilstudio® - www.dificilstudio.com from DFCL's site.

    Thought it was pretty cool. It's made using tables. My collegue (who is a tables fan) asked how it was done and now has one up as its with tables...

    Started thinking how you could do it with css but am getting a bit confused... anyone want to assist??

    This is what I have: ((do we need to so something with negative margins (like the sticky footer trick) ))

    <!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>Untitled Document</title>
    <style type="text/css" media="screen">
    body {
    margin:0px; padding: 0px; width:100%; height:100%; min-height:100;
    }
    #col1{
    width:33.3%; height:100%; min-height:100; float:left; background-color:#eba5c1;
    }
    #col2{
    width:33.3%; height:100%; min-height:100; float:left; background-color:#fffea5;
    }
    #col3{
    width:33.3%; height:100%; min-height:100; float:right; background-color:#544939;
    }
    </style>

    </head>
    <body>
    <div id="col1"> </div>
    <div id="col2"> </div>
    <div id="col3"> </div>
    </body>
    </html>
     
  2. tbwcf

    tbwcf Active Member

    One option to blag it I guess is using 50% padding top and bottom but obvo then you couldn't place any content inside if you want..... CSS would then be:

    <style type="text/css" media="screen">
    body {
    margin:0px; padding: 0px; width:100%; height:100%; min-height:100;
    }
    #col1{
    width:33.3%; min-height:100; float:left; background-color:#eba5c1; padding-top: 50%; padding-bottom: 50%;
    }
    #col2{
    width:33.3%; min-height:100; float:left; background-color:#fffea5; padding-top: 50%; padding-bottom: 50%;
    }
    #col3{
    width:33.3%; min-height:100; float:right; background-color:#544939; padding-top: 50%; padding-bottom: 50%;
    }
    </style>
     
  3. tbwcf

    tbwcf Active Member

    ...maybe answered my own question now you can check here: Neopolitan any one got better suggestions?
     
  4. blueocto

    blueocto Senior Member

    Sorry your Neopolitan link didn't work for me, but I quickly threw this together:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Cassatta - by dificilstudio&reg; - www.dificilstudio.com</title><style type="text/css"><!--* { margin: 0px; padding: 0;}#wrapper { margin: 0 auto; padding: 0; width: 100%; height: 100%;}#col1 { margin: 0; padding: 0; float: left; width: 33.33%; height: 1024px; background-color: #eba5c1;}#col2 { margin: 0; padding: 0; float: left; width: 33.33%; height: 1024px; background-color: #fffea5;}#col3 { margin: 0; padding: 0; float: left; width: 33.33%; height: 1024px; background-color: #544939;}--></style></head><body><div id="wrapper"><div id="col1"> </div><div id="col2"> </div><div id="col3"> </div><div style="clear: both"></div></div></body></html>
    Is that what you were after? Obviously the height is specified and you would have the facility to add content.
     
  5. tbwcf

    tbwcf Active Member

    Thanks blueocto that's pretty much it yeah, the only thing is a bit of a shame that way you get the scroll bar appearing... this is the code for the link I posted:

    HTML:
    <!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>Neopolitan</title>
    <style type="text/css" media="screen">
    body {
    margin:0px; padding: 0px; width:100%; height:100%; min-height:100;
    }
    #col1{
        width:33.3%;
        min-height:100;
        background-color:#eba5c1;
        height: 100%;
        position: absolute;
        bottom: 0px;
        left: 0px;
    }
    #col2{
        width:33.3%;
        min-height:100;
        background-color:#fffea5;
        height: 100%;
        position: absolute;
        left: 33.3%;
        bottom: 0px;
    }
    #col3{
        width:33.3%;
        min-height:100;
        background-color:#544939;
        height: 100%;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    </style>
    
    </head>
    <body>
    <div id="col1"> </div>
    <div id="col2"> </div>
    <div id="col3"> </div>
    </body>
    </html>
     
  6. tbwcf

    tbwcf Active Member

    Sorry - I shld work out how to post the code like you did....
     
  7. Sunburn

    Sunburn Active Member

    hrrm how about this.....

    3 Stripe 1 Div


    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=UTF-8" /><title>3 stripe 1 div</title><style type="text/css">html, body {background: url(stripe.gif) repeat-y  center 0;height:100%;position:relative;margin:0;padding:0;}.center {width:33.3%;margin:0 auto;background-color:#FFFEA5;min-height:100%;}</style><!--[if lte IE 6]>	<style type="text/css">		.center { height: 100%;}	</style><![endif]--></head><body><div class="center"></div></body></html>
     
  8. tbwcf

    tbwcf Active Member

    Hi Sunburn, thanks for that! - took me a while to work out what you did there (as i've spent too long at my desk today I think) but got it now. Interesting call, I wouldn't have thought of doing it like that...

    Thanks!
     
  9. Psygon

    Psygon Junior Member

    Here is another possible solution...

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]"><html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Neopolitan</title><style type="text/css">html { overflow: hidden;}body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%;}#middle { padding: 0; margin: 0; position: absolute;  top: 0px; left: 33%; right: 0px; bottom: 0px; overflow: auto; background-color: #eba5c1}#side-left {  padding: 0; margin: 0; position: absolute;  top: 0px; left: 0px; bottom: 0px; width: 33%; overflow: auto; background-color: #fffea5;;  }#side-right {  padding: 0; margin: 0; position: absolute;  top: 0px; right: 0px; bottom: 0px; width: 33%; overflow: auto; background-color: #544939; }</style><!--[if lt IE 7]><style type="text/css">#main { height:expression(document.body.clientHeight-0); /* 20+20=40 */ width:expression(document.body.clientWidth-66%); /* 200+20+20+20=260 */}#side-left { height:expression(document.body.clientHeight-0); /* 20+20=40 */}#side-right { height:expression(document.body.clientHeight-0); /* 20+20=40 */}</style><![endif]--></head> <body> <div id="side-left"></div> <div id="middle"></div> <div id="side-right"></div></body></html>
    Using the background image is far simpler tho' :D
     
  10. philjohns

    philjohns Senior Member

    Very simple and easy way of doing such a thing using CSS and two divs....

    NEOPOLITAN LINK

    Here's the code:

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    
    	<head>
    		<title>Neopolitan</title>
    
    	</head>
    
    		<style type="text/css">
    body {
    	margin: 0px;
    	padding: 0px;
    	background: #fffea5;
    }
    
    #col-one {
    	width: 33.3%;
    	height: 100%;
    	background: #eba5c1;
    	float: left;
    }
    
    #col-two {
    	width: 33.3%;
    	height: 100%;
    	background: #544939;
    	float: right;
    }
    		</style>
    
    	<body>
    <div id="col-one">
    </div>
    <div id="col-two">
    </div>
    	</body>
    </html>
     
  11. Sunburn

    Sunburn Active Member

    glad you like it :)
     

Share This Page