Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background colour for the whole column

    Hello

    In my css layout, i have three coloumns and each coloumn has a background colour. My probelm is, the background colour only goes as far as the text is and the rest of the area is white. Below is my .css file. Where should i make the change so that the whole colooumn has the background colour regardless of weather there is any text in it or not?

    Code:
    html,body{margin:0;padding:0}
    
    body{font: 76% arial,sans-serif}
    
    p{margin:0 10px 10px}
    
    a{display:block;color: #981793;padding:10px}
    
    div#header h1{height:80px;line-height:80px;margin:0;
    padding-left:10px;background: #EEE;color: #79B30B}
    
    div#content p{line-height:1.4;background:#0033FF}
    
    div#navigation{background:#0033FF}
    
    div#extra{background:#0033FF}
    
    div#footer{background: #333;color: #FFF}
    
    div#footer p{margin:0;padding:5px 10px}
    
    div#wrapper{float:left;width:100%;height:100%}
    div#content{margin: 0 200px}
    div#navigation{float:left;width:200px;margin-left:-100%}
    div#extra{float:left;width:200px;margin-left:-200px}
    div#footer{clear:left;width:100%}

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi Deagle,

    Use the height and/or min-height property, which will set a height for said class or ids (and thus will show the bg color)

    Note IE doesnt support min height, if you are going to use that and want it to work in IE 6 and higher, you can use this hack:
    Code:
    .exampleclass {
         min-height:300px;
         height:auto !important;
         height:300px;
         background-color:#FF0000;
    }
    Best Regards,

    Drew

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello FWDrew.

    Thank you for the IE hack code. Should i add the height property to all three classes ( content, navigation, extra ) or is there a way for me to do this to all classes by adding it in just one place?

    Another problem is if i use <p> tags that part of the coloumn remains white. Will adding the height property solve this or is there another property i should add?

    Any help with this will be appreciated.

  • #4
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Quote Originally Posted by Deagle View Post
    Hello FWDrew.

    Thank you for the IE hack code. Should i add the height property to all three classes ( content, navigation, extra ) or is there a way for me to do this to all classes by adding it in just one place?

    Another problem is if i use <p> tags that part of the coloumn remains white. Will adding the height property solve this or is there another property i should add?

    Any help with this will be appreciated.
    Hi again

    Anyway you could post a link? It would make it much easier to solve the problem

    Regards,

    Drew

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    You need to make an illusion to make it work.

    Make a background picture 1px tall divided into 3 pieces, each one with the color and width of each of the respective columns. Apply the image as background-image for the container div containing all 3 columns.

    Now, quit the background colors you've applied to the columns and use the image instead.

  • #6
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello FWDrew

    Here is the link : test

    On that page, click 'change style to style3' link on the right coloumn. That is the css file im testing with. I will appreciate any help with this.

    EDIT: Thanks CaptainB. I will try it out and let you know how it goes.
    Last edited by Deagle; 05-18-2008 at 11:24 AM.

  • #7
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    EDIT: What i have done is, i have repeated an image but it still does not go all the way down and skips at the <p> tags. Below is my new css code:

    Code:
    html,body{margin:0;padding:0}
    
    body{font: 76% arial,sans-serif}
    
    p{margin:0 10px 10px}
    
    a{display:block;color: #981793;padding:10px}
    
    div#header h1{height:80px;line-height:80px;margin:0;
    padding-left:10px;background: #EEE;color: #79B30B}
    
    div#content p{line-height:1.4;background: white url(mc.jpg);background-repeat: repeat}
    
    div#navigation{background: white url(lc.jpg);background-repeat: repeat-y}
    
    div#extra{background: white url(rc.jpg);background-repeat: repeat-y}
    
    div#footer{background: #333;color: #FFF}
    
    div#footer p{margin:0;padding:5px 10px}
    
    div#wrapper{float:left;width:100%}
    div#content{margin: 0 200px}
    div#navigation{float:left;width:200px;margin-left:-100%}
    div#extra{float:left;width:200px;margin-left:-200px}
    div#footer{clear:left;width:100%}
    Any help with this will be appreciated.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This site may help you.

    Faux columns


    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello effpeetee

    I have three different images ( lc.jpg, mc.jpg, rc.jpg ) and i have three different coloumns. I have used the same repeat code from the link but it doesnt go all the way down. Am i missing something in my code?

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    You might want to have a look @ this example. The background image file is attachted.
    (download code and image to see it live on your computer)

    EDIT: I see you have 3 different images. You should make those 3 images into ONE image and repeat that one in your container.

    Code:
    <!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">
    * {				margin:0px; 
    				padding:0px;
    				}
    
    #container {	background-image:url(background.jpg);
    				background-repeat:repeat-y;
    				width:600px;
    				}
    				
    #right {		width:150px;
    				float:left;
    				}
    				
    #middle {		width:300px;
    				float:left;
    				}
    				
    #left {			width:150px;
    				float:left;
    				}
    
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="left">
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id massa tincidunt libero tempor sollicitudin. Nam iaculis enim a neque. Fusce molestie. Integer mauris tellus, luctus id, cursus sed, egestas porttitor, pede. Suspendisse semper ultricies lorem. Nulla facilisi. Etiam lobortis. Nullam magna dui, sodales nec, molestie eget, faucibus eu, orci. Fusce velit turpis, convallis et, adipiscing in, fringilla id, arcu. Donec sollicitudin arcu at enim. Integer eget lorem porta odio tempus hendrerit. Nunc vestibulum. Morbi faucibus. </p>
    </div>
    <div id="middle">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc cursus sapien nec lacus. Donec odio libero, blandit sit amet, elementum ac, vulputate at, magna. Etiam bibendum. Phasellus vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque, lectus a luctus fermentum, mi mi gravida turpis, quis molestie lorem nisl ut elit. Nulla tincidunt feugiat odio. Mauris elit mi, laoreet vitae, blandit sit amet, pharetra eu, massa. Etiam magna eros, dictum et, cursus eu, mollis non, libero. Nunc vestibulum, risus et tempor imperdiet, justo enim dignissim tellus, ac rutrum pede felis nec turpis. Phasellus risus. Donec eu purus. Maecenas consectetuer ultricies sapien. Mauris eu massa. Aliquam nibh massa, rhoncus vel, hendrerit eget, facilisis dapibus, pede. </p>
    
    <p>Sed lobortis, libero eget iaculis semper, urna dui posuere purus, quis lacinia magna felis vitae augue. Integer egestas. Mauris lacinia eros sed neque. Nam cursus turpis ut nisl. Vestibulum dolor enim, facilisis sit amet, gravida nec, euismod a, sapien. Aliquam rutrum sagittis eros. Integer commodo dignissim tortor. Aenean sit amet nulla. Nullam vehicula tincidunt lorem. Proin metus felis, euismod ut, adipiscing nec, rhoncus ut, elit. Nullam augue. Aliquam nulla quam, feugiat id, facilisis malesuada, porta at, ante. Praesent molestie rutrum dolor. Morbi ut lacus non ipsum vestibulum vehicula. Nulla pellentesque. Proin id magna vel velit varius porttitor. Pellentesque eget odio eu eros tincidunt aliquam. </p>
    
    <p>Nulla tristique lacus. Fusce luctus massa sit amet est. Donec iaculis orci. Proin interdum. Sed luctus sem a diam faucibus adipiscing. Nullam lorem nisi, condimentum in, cursus eget, tincidunt a, nisl. Donec ligula. Curabitur vel arcu non sapien auctor malesuada. Proin dictum nunc sit amet sem. Maecenas arcu quam, pretium et, elementum sed, egestas vitae, nisi. Integer dignissim sem nec nibh. Etiam fringilla risus nec magna. </p>
    
    <p>Maecenas sed massa vitae lacus laoreet dignissim. Nulla neque dolor, aliquam ac, molestie sit amet, placerat vel, libero. Nam imperdiet vehicula dolor. Proin ac urna eget leo tincidunt tincidunt. Sed fringilla pede sed leo. Proin non diam. Suspendisse sed erat ut ipsum placerat accumsan. Nam sem est, malesuada quis, eleifend venenatis, cursus et, nisi. Donec feugiat aliquam turpis. Nunc sit amet lorem. Nunc tempor blandit est. Fusce lobortis, risus id feugiat congue, magna velit pellentesque urna, nec pharetra ipsum dui ac arcu. </p>
    
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id massa tincidunt libero tempor sollicitudin. Nam iaculis enim a neque. Fusce molestie. Integer mauris tellus, luctus id, cursus sed, egestas porttitor, pede. Suspendisse semper ultricies lorem. Nulla facilisi. Etiam lobortis. Nullam magna dui, sodales nec, molestie eget, faucibus eu, orci. Fusce velit turpis, convallis et, adipiscing in, fringilla id, arcu. Donec sollicitudin arcu at enim. Integer eget lorem porta odio tempus hendrerit. Nunc vestibulum. Morbi faucibus. </p>
    
    
    </div>
    <div id="right">
    <p>Maecenas sed massa vitae lacus laoreet dignissim. Nulla neque dolor, aliquam ac, molestie sit amet, placerat vel, libero. Nam imperdiet vehicula dolor. Proin ac urna eget leo tincidunt tincidunt. Sed fringilla pede sed leo. Proin non diam. Suspendisse sed erat ut ipsum placerat accumsan. Nam sem est, malesuada quis, eleifend venenatis, cursus et, nisi. Donec feugiat aliquam turpis. Nunc sit amet lorem. Nunc tempor blandit est. Fusce lobortis, risus id feugiat congue, magna velit pellentesque urna, nec pharetra ipsum dui ac arcu. </p>
    
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id massa tincidunt libero tempor sollicitudin. Nam iaculis enim a neque. Fusce molestie. Integer mauris tellus, luctus id, cursus sed, egestas porttitor, pede. Suspendisse semper ultricies lorem. Nulla facilisi. Etiam lobortis. Nullam magna dui, sodales nec, molestie eget, faucibus eu, orci. Fusce velit turpis, convallis et, adipiscing in, fringilla id, arcu. Donec sollicitudin arcu at enim. Integer eget lorem porta odio tempus hendrerit. Nunc vestibulum. Morbi faucibus. </p>
    </div>
    
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Background colour for the whole column-background.jpg  

  • #11
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello CaptainB.

    The reason i have three different images is because the layout i am using is liquid. It stretches according to the screen resolution. How will i do after i merge the three images into 1?

    I also looked at the exaple. It works in IE but not in my FF. The background image does not show up. Is it working fine in your FF?

  • #12
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Ahh.... Well, then I guess it's going to be tougher. I always design in fixed width, so I'm not that familiar with liquid layouts. The solution might not work then.


    Sorry, I forgot to clear the floats. Add this just between the last two div closing tags:
    Code:
    <br style="clear:both;" />

  • #13
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all your help. I ended up using fixed layout.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •