Forums

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

Home Forums CSS Help with div backgrounds

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #24600
    marlonart
    Member

    Here is the link to my blog theme design:
    http://marlonart.com/dev/

    I’m new to CSS but I’ve learned a lot since I’ve started with this project. It’s basically a blog for my website. I downloaded a blank blog template and modified it to suit my needs.

    My current problem is simple, although I haven’t found a simple solution. The backgrounds of the sidebar and main content column don’t want to extend downwards past the actual content. It’s not so apparent with the main column as it is with the sidebar. I need the sidebar and main column to extend to the height of the browser at all times.

    For reference, the way I have the DIVs arranged is like this:

    Shell– wraps around everything. Not sure if this is even
    necessary but for some reason it keeps everything in
    place.
    Wrapper– wraps the container houses a background image.
    Container– houses the post data.
    All of the above are auto centered left and right.
    Topnav– houses the top navigation bar + images. Its within
    the wrapper div.
    Left– left floating image.

    Here’s the code:

    style.CSS

    Code:
    body,h1,h2,h3,h4,h5,h6,blockquote,p{
    margin: 0;
    padding: 0;
    }

    body{
    margin: 0 0 0 0;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    background: #e5e5e5;
    color: #eeeeee;
    background-image: url(images/BGpaper.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;

    }

    #topnav {
    float: left;
    width: 410px;
    margin: 0 auto 0 auto;
    }

    #shell{
    width: 1024px;
    margin: 0 auto 0 auto;
    }

    #top{
    font-size: 32px;
    color: #ffba00;
    width: 473px;
    height: 229px;
    margin: 0 0 0 0;
    background-color: #929292;
    background: url(“images/top.png”);
    }

    #bottom{

    width: 473px;
    height: 80px;
    margin: 0 0 0 0;
    background: url(“images/bottom.png”);

    }

    #right{

    width: 130px;
    height: 331px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url(“images/right.png”);
    background-repeat: no-repeat;
    }

    #left{
    float: left;
    width: 281px;
    height: 459px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url(“images/left.png”);

    }

    #linkbar{

    width: 473px;
    height: 24px;
    margin: 0 0 0 0;
    background: url(“images/mid.png”);
    }

    #wrapper{
    float: left;
    margin: 0 auto 0 auto;
    width: 473px;
    text-align: left;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: repeat;
    background: url(“images/main.png”);

    }

    #container{

    width: 410px;
    margin: 0 auto 0 auto;
    }

    .post{
    padding: 35px 0 10px 0;
    }

    .post h2{
    font-family: Verdana, Sans-serif;
    font-size: 17px;
    }

    p.postmetadata{
    border-top: 1px dotted #878787;

    margin: 5px 0 0 0;
    }

    .navigation{
    padding: 10px 0 0 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    }

    a { text-decoration:none; }
    :link { color: #696969; }
    :visited { color: #66818a; }
    a:active { color: #5f8abb; }
    a:hover { color: #670000; }

    .sidebar{

    font-size: 11px;
    color: #a5a5a5;
    width: 130px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    }

    .sidebar ul{
    list-style-type: none;
    margin: 0;
    padding: 0 10px 0 10px;
    }

    .sidebar ul li{
    padding: 5px 0 5px 0;
    }

    #searchsubmit{
    border: 1px solid #a5a5a5;
    background: #a5a5a5;
    color: #dddddd;
    font-size: 1.1em;
    }

    #s{
    border: 1px solid #a5a5a5;
    background: none;
    color: #5b5b5b;
    font-size: 1.1em;
    width: 115px;
    }

    #sidewrap{
    float: left;
    width: 130px;

    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url(“images/side.png”);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: top center;
    }

    /*
    *{border: 1px solid red;}
    */

    index.PHP

    Code:

    <?php bloginfo('name'); ?><?php wp_title(); ?>

    “>

    ” title=”“>


    Any help would be appreciated. Thanks!

#56299

Hi marl,

I got the simple solution of your problem…try this
html, body
{
height:100%;
margin:0px;
padding:0px;
}
#sidewrap
{
background:transparent url(images/side.png) repeat scroll center top;
float:left;
height:100%;
margin:0;
padding:0;
width:130px;
}

#56330
marlonart
Member

Unfortunately that didn’t seem to work, although I’ll keep trying and playing with it. I forgot to mention that the #sidewrap contains the .sidebar in order to give it a background, much like I did with the #wrapper and #container. Problem is I dont know how to make the background extend down all the way, which is more apparent in the sidebar than the main column. Any other suggestions?

#56348
TheDoc
Member

This, unfortunately, is a common problem with many different solutions (all of them seem to be relatively bad, imo). Here’s one for you that didn’t look too bad:

http://matthewjamestaylor.com/blog/equa … s-no-hacks

And of course, there’s always faux columns:

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

#56356
Soh Tanaka
Member

thanks for that first link doc, that is pretty smart. I never thought of doing it that way :-) We learn something new each day!

#56440
marlonart
Member

No dice. It seems that I’ve run into one of CSS’s limitations. The "faux" columns and even the suggestions from another forum have to do with background color and I need the background image extending down the length of the column. ALA has a page on referencing images with this method but that doesn’t seem to do much either:

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

Also for some reason the "repeat-y" doesn’t work at all and I see no reason why it shouldn’t. Its damn frustrating. Could it be the height of the background image thats causing the problem? The sidebar like the main column has a specific design, so they’re pretty tall pixel wise. The image I need tiled on the sidebar is 130×772. What should I do? Is there anything I can do?

#56442
apostrophe
Participant

Here’s a hack that will force it:

Code:
#sidewrap {
background:transparent url(images/side.png) repeat scroll center top;
float:left;
height:1200px;
margin:0;
padding:0;
width:130px;
}

But it’s not dynamic, if you add another post it won’t extend with the main content.
Your problems are in your markup. You have a really odd hierarchy of divs, the sidebar is not attached to the main content in any way. Most sites do it something like this:

Code:

Yours is somewhat more convoluted with all kinds of strange divs going on in there.
With faux columns the principle is the same whether it’s just color or an image, the content bg and the column bg shoud be one combined image, that way if one extends the other has to grow with it.

#56484
TheDoc
Member
"marlonart" wrote:
No dice. It seems that I’ve run into one of CSS’s limitations. The "faux" columns and even the suggestions from another forum have to do with background color and I need the background image extending down the length of the column.

As far as I’m aware there is no such limitation. It doesn’t matter what is applied to the "background", whether it be a color or an image, the CSS will render it the same regardless.

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