SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    May 2003
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Equal height columns with background images. How?

    I would like to make use of a 3 column, equal height template credited to http://matthewjamestaylor.com/blog/e...s-3-column.htm

    The code(shown below) is fairly understandable, but I cant seem to figure out how I can make each column have background images that display borders for each column.

    Any hint on how I can achieve this?

    HTML 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-GB">
    <head>
    	<title>3 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="3 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
    	<meta name="keywords" content="3 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
    	<meta name="robots" content="index, follow" />
    	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    	<style media="screen" type="text/css">
    /* <!-- */
    body {
    	margin:0;
    	padding:0;
    }
    #header h1,
    #header h2,
    #header p {
    	margin-left:2&#37;;
    	padding-right:2%;
    }
    #active2 #tab2,
    #active3 #tab3,
    #active4 #tab4,
    #active5 #tab5 {
    	font-weight:bold;
    	text-decoration:none;
    	color:#000;
    }
    #footer {
    	clear:both;
    	float:left;
    	width:100%;
    }
    #footer p {
    	margin-left:2%;
    	padding-right:2%;
    }
    
    /* Start of Column CSS */
    #container3 {
    	clear:left;
    	float:left;
    	width:100%;
    	overflow:hidden;
    	background:#89ffa2; /* column 3 background colour */
    }
    #container2 {
    	clear:left;
    	float:left;
    	width:100%;
    	position:relative;
    	right:33.333%;
    	background:#ffa7a7; /* column 2 background colour */
    }
    #container1 {
    	float:left;
    	width:100%;
    	position:relative;
    	right:33.33%;
    	background:#fff689; /* column 1 background colour */
    }
    #col1 {
    	float:left;
    	width:29.33%;
    	position:relative;
    	left:68.67%;
    	overflow:hidden;
    }
    #col2 {
    	float:left;
    	width:29.33%;
    	position:relative;
    	left:72.67%;
    	overflow:hidden;
    }
    #col3 {
    	float:left;
    	width:29.33%;
    	position:relative;
    	left:76.67%;
    	overflow:hidden;
    }
    /* --> */
        </style>
    
    </head>
    <body id="active3">
    
    <div id="header">
    	<p><a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" title="Equal Height Columns with Cross-Browser CSS &amp; No Hacks">&laquo; Back to the equal height columns article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
    	<h1>Three Column CSS Demo of Equal Height Columns</h1>
    	<h2>Full Cross-Browser CSS. No CSS Hacks. No Images. No JavaScript.</h2>
    
    	<p>
    		<a id="tab2" href="http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm" title="Two Equal Height Columns">2 Column</a> | 
    		<a id="tab3" href="http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm" title="Three Equal Height Columns">3 Column</a> | 
    		<a id="tab4" href="http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm" title="Four Equal Height Columns">4 Column</a> | 
    		<a id="tab5" href="http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm" title="Five Equal Height Columns">5 Column</a>
    	</p>
    </div>
    
    <div id="container3">
    	<div id="container2">
    		<div id="container1">
    			<div id="col1">
    				<!-- Column one start -->
    				<h2>Equal height columns</h2>
    				<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
    				<h2>3 Column Dimensions</h2>
    
    				<p>Each column is 33.33% percent wide with 2 percent padding on each side.</p>
    				<h2>No CSS hacks</h2>
    				<p>The CSS used for this 3 column layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.</p>
    				<h2>No JavaScript</h2>
    				<p>JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.</p>
    				<!-- Column one end -->
    
    			</div>
    			<div id="col2">
    				<!-- Column two start -->
    				<h2>No Images</h2>
    				<p>This three column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
    				<h2>Valid XHTML strict markup</h2>
    				<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
    
    				<h2>This layout is FREE for anyone to use</h2>
    				<p>You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.</p>
    				<!-- Column two end -->
    			</div>
    			<div id="col3">
    				<!-- Column three start -->
    				<h2>Cross-Browser Compatible</h2>
    
    				<p>This 3 column layout has been tested on the following browsers:</p>
    				<h3>iPhone &amp; iPod Touch</h3>
    				<ul>
    					<li>Safari</li>
    				</ul>
    				<h3>Mac</h3>
    
    				<ul>
    					<li>Safari</li>
    					<li>Firefox</li>
    					<li>Opera 9</li>
    					<li>Netscape 7 &amp; 9</li>
    				</ul>
    
    				<h3>Windows</h3>
    				<ul>
    					<li>Firefox 1.5, 2 &amp; 3</li>
    					<li>Safari</li>
    					<li>Opera 8 &amp; 9</li>
    
    					<li>Explorer 5.5, 6 &amp; 7</li>
    					<li>Google Chrome</li>
    					<li>Netscape 8</li>
    				</ul>
    				<!-- Column three end -->
    			</div>
    
    		</div>
    	</div>
    </div>
    <div id="footer">
    	<p>This page uses the <a href="http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm" title="Equal Height Columns with Cross-Browser CSS &amp; No Hacks">Three Equal Height Columns Layout</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a>.</p>
    </div>
    Elgg Customisation & Theme development
    Modx Custom Development
    PHP programming

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hmm, you can target each column via #col1, #col2 and #col 3, so in each you could have a border repeating down one side. Then place a div directly inside that with the border repeated down the other side (assuming the border needs to be on both sides. There would be a bit of tweaking with margins, but it should be possible. If you need a border on all sides, you could, say, have top and right part of the border on one div (and make it taller and wider than the div to account for resizing) and left and bottom on the inner div. Or, of course, you could put a solid border on each div without images.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You'd can make full length borders between the middle column like this.

    Code:
    #container1, #container2{
        background-image:url(images/borderimage.gif);
        background-repeat:repeat-y;
        background-position:100&#37; 0;
    }
    You could just use a normal border but you may need to offset the width by 1px in some way.

    Code:
    #container1, #container2{
    border-right:1px solid #000;
    }

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can make a fluid box with image borders for each column with something like this.

    I have attached the border images used in this demo.

    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>
    <title>Fluid Box</title>
    <style type="text/css">
     
    .container {
    width: 300px;
    color: rgb(0,0,255);
    background: url("roundedRight.jpg") top right no-repeat}
     
    .container a {
    font-size: 12pt}
    .desc {
    font-size: 18pt;
    margin: 0px 0px 0px 0px;
    padding: 20px 0px 0px 20px;
    background: url("roundedLeft.jpg") top left no-repeat}
     
    .link {
    margin: 0px 0px 0px 0px;
    padding: 20px 0px 0px 20px;
    background: url("roundedLeft.jpg") bottom left no-repeat}
     
    .link div {
    display: block;
    padding: 0px 20px 20px 0px;
    font-style: normal;
    background: url("roundedRight.jpg") bottom right no-repeat}
     
    </style>
    </head>
    <body>
    <div class="container">
     <div class="desc">This box is:</div>
        <div class="link">
            <div>
                <a href="#">Indestructable</a> because it is expandable both X and Y directions. 
                <p>Even more text<p>
                <p>Some paragraph text</p>
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>
            </div>
        </div>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kalon View Post
    You can make a fluid box with image borders for each column with something like this.
    That's fine in essence but wont work for the layout in hand though because it's slightly more complicated

    The layout above uses three 100% wide nested divs that are each shifted relatively off to the left of the screen by a third. Inner floats are then placed on these elements that are now lying off the left of the screen and then placed back into view with more relative positioning and placed over the bit of the background that was left showing for each column.

    None of the equal column background colours that you view on the screen are actual columns they are just a third of the 100% original div that you can see. Therefore they don't actually have four corners or two side border because you can only see third of each of them.

  6. #6
    SitePoint Zealot
    Join Date
    May 2003
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank-you guys for responding!! will read through try out your suggestions and share the final solution if I manage.

    if anyone has an alternative, it would be most welcome!

    thanks again!
    Elgg Customisation & Theme development
    Modx Custom Development
    PHP programming

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's fine in essence but wont work for the layout in hand though because it's slightly more complicated
    ok thanks - I didn't have that close a look at the original code.

    But the fluid box would work in this demo, with a bit of minor tweaking, which uses javascript to set all the column heights to the height of the tallest column.

    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> 
    <title></title> 
    <style type="text/css"> 
     
    ul { 
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style-type: none}
     
    #container { 
    border: 1px solid red; 
    width: 800px;
    overflow: hidden; 
    margin: 0px auto 0px auto;
    padding: 20px 20px 20px 20px} 
     
    #sidebar { 
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    border: 1px solid green; 
    float: left; 
    width: 250px} 
     
    #content { 
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    border: 1px solid blue; 
    float: right; 
    width: 490px} 
     
    </style> 
    <script type="text/javascript"> 
     
    window.onload=function() {
     var maxHeight = 0;
    
     //get the column containers
        var colsA = document.getElementById("container").childNodes;
    
        //get the height of the tallest column
        for(var i=0; i < colsA.length; i=i+1) {
         if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
        }
    
     //set all the column containers heights to maxHeight
        for(var i=0; i < colsA.length; i=i+1) {
         if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
        }  
     
    } 
    </script> 
    </head> 
    <body> 
    
    <div id="container"> 
    
        <div id="sidebar"> 
              <ul id="menu_list">
                     <li>Menu item 1</li>
                     <li>Menu item 2</li>
                     <li>Menu item 3</li>
                     <li>Menu item 4</li>
               </ul>
        </div>  
    
        <div id="content"> 
        Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
    Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
    pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
    ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
    aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
    volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
    ante sed, ac turpis dis dui vestibulum aut.
        </div> 
    
    </div> 
    </body> 
    </html>


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
  •