Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background colour repeat

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #42671
    PaulB1974
    Member

    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

    #124170
    Paulie_D
    Member

    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.

    #124172
    planetabhi
    Member

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

    #124173
    PaulB1974
    Member

    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!)

    #124175
    PaulB1974
    Member

    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 :'(

    #124180
    Kitty Giraudel
    Participant

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

    #124181
    Paulie_D
    Member

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

    See?…no positioning at all!

    #124182
    PaulB1974
    Member

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

    #124183
    PaulB1974
    Member

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

    #124184
    Paulie_D
    Member

    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.

    #124199
    PaulB1974
    Member

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

    #124200
    clagob
    Member

    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.

    #124201
    clagob
    Member

    <div id="main">

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

    </div>

    #124202
    Paulie_D
    Member

    >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. :)

    #124203
    PaulB1974
    Member

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • The forum ‘CSS’ is closed to new topics and replies.