SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 2 or 3 Colum layout with tiliing background

    Hello Paul,

    Been a while since i've chkd the formus here.
    I have a small query, have been tryin to wrk out a method to perfect a 2 or 3 column layout with tiling bg which is not wrkin.

    I referred to the SitePoint book i purchased in which it says using Javascript I can acheive the same. Is there a way to do so w/o using js ??

    I wrked on a sample, the code for whick is below, pls have a look and show a way out. Thanks,

    style defined i the head tags as below:
    <style>
    #left {
    float: left;
    width: 200px;
    }
    #center {
    margin-left: 210px;
    margin-right: 210px;
    background-color: #ccc;
    }
    #clear {
    clear: both;
    }
    </style>

    in my body this is what's ther:
    <div id="wrapper">
    <div id="left">
    raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>
    </div>

    <div id="center">
    kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhd<br><br>
    </div>
    <div id="clear"></div>
    </div>

    Once i run this file, u'll notice the grey bg for the center div does not meet the lenght that of the left div.

    Please find a way out for me, else i'll have to revert to an HTML solution to the same.

    Thanks,
    Raj

  2. #2
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nother issue with the above, i can't set the body a background color attribute since theres other on the page as well.
    the kinda page i'm referrin to is :
    http://www.shaadi.com/partner_search...ord-search.php.

    In the above link the grey patch needs tiling using css, so pls suggest accordingly.

    thnx

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

    Well nearly all the techniques for equalising columns are covered in the 3 col demo sticky thread and either involve using negative margins or a repeating background image.

    The simplest method is just to repeat a background gif down the side of the main container and then float your left content on top of that. There are examples of 2 column layouts in the demo that show both these methods so its not worth going over them again here.

    I wasn't quite sure what I was looking for in the above link but the answer will be the same if the question is about equalising column etc.

    Obviously you can only set one colour for the body background so I'm not quite sure what you mean. Of course you can wrap your page up in another outer and give a background to that - if thats what you meant.

    Have a look at the 3 col demo and if it doesn't answer your question then come back and I will try and offer some specific code for you

    Paul

  4. #4
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bg tiling

    Hi Paul,

    thnkx for your prompt reply. well i had infact seen the 3 page layout from the link u provided b4 postin my message. there-in u mentioned passing attributed to the body tag

    body {
    padding:0;
    margin:0;
    background:#eee;
    color: #000000;
    }
    and this one

    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

    like i said since the body bgcolor is yellow on
    http://www.shaadi.com/partner_search...ord-search.php

    the pag bove can't pass it to the LEFT panel where i have some partner srch links, etc...

    nwyas like u mentioned, guess i'll have to use a bg img, or

    may be i can try incorporatin HTML framewrk for the left + content area.
    only framewrk, rest of the details within can be done usin DIVs.
    Hope the above doesnot affect my page d/l speed largely.

    thnx,
    Raj

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    nwyas like u mentioned, guess i'll have to use a bg img, or
    A bg image is the easiest solution. You should make the image as wide as the column but make it about 5pixels high. Any smaller and it takes too long too redraw and any bigger then it adds to the page load.

    If you look at my demos you see that the backgrounds load quick enough not to woory about and the background image should be less than 1k anyway unless you are going for some complicated effect.

    Paul

  6. #6
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Paul,

    thnx for the optinos provided, am using a background image, since it wrks pretty well, just need to chk the same in IE 5.0 and NS 7.0.

    I'm not sure but i think the pages should work fine in th Mac browsers as well.

    Regards,
    Raj

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you have a link to the page I have ie5 installed and can check for you if you want

    Paul


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
  •