Turn on thread page Beta
    Offline

    1
    ReputationRep:
    Any one know how to make my image tile? I have a 100x100 image that I want to tile downward in a column, but I can't make it work.
    This is what I've got at the moment:

    Htm:
    <div class="rside"></div>


    Css:
    .rside {
    float: right;**
    position: absolute;
    top:0px;
    right:0px;
    width:100px;
    background-repeat: repeat-y;
    background-image:url('jpgs/basic/rside.gif');
    background-attachment: fixed
    }

    I was wondering if you could only do it for the body or something?
    Offline

    0
    ReputationRep:
    (Original post by Aylia)
    Any one know how to make my image tile? I have a 100x100 image that I want to tile downward in a column, but I can't make it work.
    This is what I've got at the moment:

    Htm:
    <div class="rside"></div>


    Css:
    .rside {
    float: right;**
    position: absolute;
    top:0px;
    right:0px;
    width:100px;
    background-repeat: repeat-y;
    background-image:url('jpgs/basic/rside.gif');
    background-attachment: fixed
    }

    I was wondering if you could only do it for the body or something?
    mite sound silly, but check the file paths to imgages, and th external css files.

    Offline

    1
    ReputationRep:
    (Original post by austinmetro)
    mite sound silly, but check the file paths to imgages, and th external css files.


    no, it's not that - if I put in a height it appears perfectly, but then stops halfway down the page. I could do that for every page, but that would sort-of defy the point of the style-sheet!
    Offline

    1
    ReputationRep:
    Oh, thats because without a specified height, div's will only go as far as the content needs them too. So with no set height, and nothing in it, it would just have been 0px tall Unfortunatly you can't use % values for div heights, which is often a bit off putting for people are thinking of going from tables to CSS layouts.

    Could you give us a more detailed description of what you are wanting to do,perhaps we can help. eg Im wondering if you could just make this background a body background image, because it's fairly easy to posistion and control how the image repeats. But it depends on what exactly you are trying to do here
    Offline

    1
    ReputationRep:
    (Original post by MikeH)
    Oh, thats because without a specified height, div's will only go as far as the content needs them too. So with no set height, and nothing in it, it would just have been 0px tall Unfortunatly you can't use % values for div heights, which is often a bit off putting for people are thinking of going from tables to CSS layouts.

    Could you give us a more detailed description of what you are wanting to do,perhaps we can help. eg Im wondering if you could just make this background a body background image, because it's fairly easy to posistion and control how the image repeats. But it depends on what exactly you are trying to do here
    Ah I see - thank you, I'll stop trying! I'm trying to get a background with a strip of colour down the left and right sides, but I want the page to be liquid, so at a higher resolution it will still fill the page. If I just had a background image, it wouldn't be liquid. At the moment I can do the left column as a background. I was wondering if there was a way to set the right column to have the other side as an image background? But then I'll have to set heights for every page. Plus I wanted a header image..
    I think I might have to revise my layout to be honest, as I think I'm making it too complicated.
    Offline

    1
    ReputationRep:
    That sounds similar to my site, only I think you want 3 columns rather than 2. I'd been thinking about doing that myself when I had been coding my site , theres an example page I made up here:

    http://mtkonline.com/example.html

    And the CSS
    http://mtkonline.com/example.css

    The layout code at is simplest is:

    Code:
    <div id="wrapper">
    
    <div id="header"></div>
    	
    <div id="content">
    	<div id="left"></div>
    	<div id="center"></div>
    	<div id="right"></div>
    </div>
    	
    <div id="footer"></div>
    
    </div>
    The wrapper is there to contain everything so you can have a nice border outside, some kind of background etc. You can also use it too thin everything to a set width, and then center the whole lot using
    Code:
    margin: 0 auto;
    Header and footer are self explanatory. The content div holds the left center and right columns. Now each of those columns moves up and down as it's individual content needs it too. So if you want to have background colours or images in each that go all the way to the footer you can run into problems. However theres a nifty little trick, which is why I've lumped them all into the div called content. This one will be as tall as the tallest column. So instead of putting background images for individual columns, you do it with this one div instead giving the illusion that each column has it's own background image. It's explained here if that doesnt make any sense:

    http://www.alistapart.com/articles/fauxcolumns/
    Offline

    1
    ReputationRep:
    (Original post by MikeH)
    That sounds similar to my site, only I think you want 3 columns rather than 2. I'd been thinking about doing that myself when I had been coding my site , theres an example page I made up here:

    http://mtkonline.com/example.html

    And the CSS
    http://mtkonline.com/example.css

    The layout code at is simplest is:

    Code:
    <div id="wrapper">
    
    <div id="header"></div>
    	
    <div id="content">
    	<div id="left"></div>
    	<div id="center"></div>
    	<div id="right"></div>
    </div>
    	
    <div id="footer"></div>
    
    </div>
    The wrapper is there to contain everything so you can have a nice border outside, some kind of background etc. You can also use it too thin everything to a set width, and then center the whole lot using
    Code:
    margin: 0 auto;
    Header and footer are self explanatory. The content div holds the left center and right columns. Now each of those columns moves up and down as it's individual content needs it too. So if you want to have background colours or images in each that go all the way to the footer you can run into problems. However theres a nifty little trick, which is why I've lumped them all into the div called content. This one will be as tall as the tallest column. So instead of putting background images for individual columns, you do it with this one div instead giving the illusion that each column has it's own background image. It's explained here if that doesnt make any sense:

    http://www.alistapart.com/articles/fauxcolumns/
    I think we've been visiting the same websites! Thanks for the reply, I'll look into it a bit later, at the moment I'm running throught the tutorial on www.westciv.com - I think I might have jumped into the deep end before without properly understanding the basics.
 
 
 
Turn on thread page Beta
TSR Support Team

We have a brilliant team of more than 60 Support Team members looking after discussions on The Student Room, helping to make it a fun, safe and useful place to hang out.

This forum is supported by:
Updated: August 3, 2004
Poll
Who is most responsible for your success at university

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Write a reply...
Reply
Hide
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.