Grow your CSS skills. Land your dream job.

Background colour repeat

  • # February 12, 2013 at 6:29 am

    Hello guys I am brand new :)

    I have the following css rules: -

    div#main {
    position:absolute;
    margin-top:260px;
    margin-left:5px;
    padding-top:30px;
    float:left;
    width:700px;
    background: url(../images/black_fade_bg.png) repeat;
    }

    div#sidebar {
    margin-top:260px;
    padding-top:30px;
    float:right;
    margin-right:5px;
    width:330px;
    background: url(../images/black_fade_bg.png) repeat;
    }

    The problem I have is that the height of the content in the “main” div is different in each page and mostly supersedes the sidebar so the background tiled image stops on that side and the main div rolls over on to the footer.

    I really hope this makes sense, here is the url and I am new to CSS :)

    http://www.brighteroutlookwindows.com/2013/web/about.php

    Thanks guys :)

    Paul

    # February 12, 2013 at 6:41 am

    I would tell you just to wrap the main & sidebar in a div and apply the background image to that div instead of the inside ones.

    That might still work but you have so much unnecessary absolute positioning going on I suspect this might break your page layout completely.

    Is there a reason why you are using absolute positioning?

    It’s really not necessary most of the time…there are much better ways of laying out pages these days.

    # February 12, 2013 at 6:49 am

    Quick resolve :
    1) Loose **position** from **div#main**
    2) In **div#sidebar** reduce** width** to **320px**

    # February 12, 2013 at 6:49 am

    Hey Paulie_D

    Thanks – I did create a “content” div and wrapped both main and sidebar in it but it wouldn’t work for some reason!

    I’m really quite new to positioning and css in general as I used tables (aarrgh!)

    # February 12, 2013 at 6:51 am

    Thanks planetabhi – that worked although the background of the sidebar now doesn’t reach the bottom! JUST when I though I was getting the hang of CSS :'(

    # February 12, 2013 at 7:21 am

    If I may, there is no point in qualifying your selectors, especially since you are using IDs which are by definition unique.

    # February 12, 2013 at 7:33 am

    You might want to try a layout a little more like this: http://codepen.io/anon/pen/jLxKD

    See?…no positioning at all!

    # February 12, 2013 at 7:34 am

    Hi and thanks -not sure what that means though sorry :(

    # February 12, 2013 at 7:37 am

    Thanks Paulie_D and I think I might have to do some more learning!!!

    # February 12, 2013 at 7:39 am

    I think what Hugo means is there is no need to put **div#sidebar** because you can only have one thing with an ID of sidebar so **#sidebar** is enough.

    # February 12, 2013 at 8:01 am

    Oh I see! I got that from the Lynda.com tutorial lol

    # February 12, 2013 at 8:12 am

    Hi
    Just move the background to #content.

    #content{background: url(“../images/black_fade_bg.png”) repeat scroll 0% 0% transparent;}
    .clear{clear:both}

    at the end of each #main and #sidebar append something like

    PS: avoid the use of postition:absolute, if not necessary.

    # February 12, 2013 at 8:14 am

    <div id="main">

    <div class="clear"></div>

    </div>

    # February 12, 2013 at 8:26 am

    >I got that from the Lynda.com tutorial lol

    I wonder how old that tutorial is?

    If it was suggesting absolute positioning…it must be ancient. :)

    # February 12, 2013 at 8:26 am

    Thanks clagob – I never did understand the “clear” thing :/

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".