Forums

Give help. Get help.

  • # June 30, 2008 at 3:30 pm

    So I’ve got this page: http://stuckpixelstudio.com/sandbox/troubleshooting/example.html.

    For some reason when you scale the browser window down, weird things start happening. I’m pretty sure it’s because I don’t completely understand relative positioning, because up until now I’ve been using absolute positioning. I just can’t figure out why this is happening.

    If you’ll notice, the top green bar behaves the way I would like for the rest of the page to behave, where when it reaches the left side it stops and the right side gets covered up by the rest of the window, however, the rest of my content does not behave this way.

    I also have a LOT of white space that shows up at the bottom. Not sure why that is either.

    Also, I can’t figure out for the life of me how to get the "Showing 1-10 of 20" to be on the left side, and the "Sort by" to be on the right side and still look right. Any time I’ve made this happen, the Sort by looks like it’s trying to be on a new line.

    Here’s my HTML:

    Code:

    top ad

    Showing 1-10 of 20
    Sort By:
    box ad
    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    And here’s my CSS:

    Code:
    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .everything
    {
    background:url(images/bg.jpg);
    background-position: center top;
    background-repeat:repeat-y;
    margin:-8px auto;
    }

    .searchbox
    {
    background:url(images/topgreen.jpg);
    background-repeat:no-repeat;
    height:30px;
    width:999px;
    text-align:right;
    padding: 3px 50px 0px 0px;
    background-position: center top;
    margin:0px auto;
    }

    .logobox
    {
    background:url(#);
    position:relative;
    left:-370px;
    width:175px;
    min-height:135px;
    background-position: center top;
    margin:0px auto;

    }

    .adbanner
    {
    position:relative;
    top:-120px;
    left:95px;
    min-height:90px;
    width:730px;
    background-position: center top;
    margin:0px auto;

    }

    .adbox
    {
    position:relative;
    top:-90px;
    left:300px;
    min-height:240px;
    width:300px;
    background-position: center top;
    margin:0px auto;

    }

    .contentbox
    {
    position:relative;
    left:-165px;
    top:-340px;
    width:560px;
    min-height:100px;
    padding: 5px;

    background-position: left top;
    margin:0px auto;

    }

    .floatleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }

    .refine
    {
    background-color:#eeeeee;
    position:relative;
    top:-100px;
    left:0px;
    text-align:right;
    min-height:25px;
    width:890px;
    padding:5px;
    background-position: center top;
    margin:0px auto;
    }

    .resultnumber
    {text-align:right}

    Thanks guys.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag