Grow your CSS skills. Land your dream job.

Positioning/Resolution Problem

  • # March 1, 2009 at 8:44 am

    http://siephed.org/index.php

    It looks fine in resolutions higher than 1024×768, or anything that’s wider than 1024 pixels. But when you try 1024×768 or lower, the upper navigation bar is messed up. Is there any way else of coding the navigation so it looks the same, but is more fluid?

    I’ve also got another positioning problem, but for a different site, it’s on this thread:
    http://css-tricks.com/forums/viewtopic.php?f=2&t=1732

    Thanks in advance.

    # March 1, 2009 at 9:10 am

    You could try adding a minimum width to the containing div.

    #navtop {
    font-family:Georgia;
    font-size:18pt;
    margin-bottom:0;
    margin-right:4%;
    margin-top:0;
    min-width:500px;
    overflow:auto;
    padding:0;
    text-align:center;
    text-transform:lowercase;
    }

    Of course our beloved IE6 doesn’t support this property but you can supply an IE only hack using a conditional style sheet:

    #navtop { /* IE6 only hack — use in conditional style sheet only */
    width:expression(this.width < 500? "500px" : this.width);
    }

    # March 2, 2009 at 5:31 am

    Hmm… But when I make the browser window even smaller, things tend to move around to places where I don’t want them to go. Is there a way to make it so that when it shrinks smaller than it normally is, the boxes don’t move around, and instead a sidescrol bar appears?

    # March 2, 2009 at 6:12 pm

    You fixed this already, did’t you? Page look fine to me on small resolution.

    # March 2, 2009 at 6:16 pm

    You should just wrap the parent div in a min-width/max width~

    Code:
    .classname {
    min-width: 970px;
    max-width: 1200px;
    }

    For IE6, I usually just stick with a fixed width :-)

    Code:
    *html .classname{
    width: 970px;
    }
    # March 3, 2009 at 5:21 am

    Hmm.. I tried that out, but it didn’t seem to work. But I did manage to find an alternative, so now it looks fine.

    But now that I’ve got that problem tackled, I’ve got a slew more that keeps popping up. *sighs*
    Would anyone mind helping me on MSN? It might be a bit easier and quicker… I feel really idiotic making a whole new topic for every problem that I hit. ><

    Here’s my next problem, though.
    http://siephed.org/47/index.php. There’s a index.html and an index.php file uploaded in that directory. If you look at both, you’ll notice that the header for index.html is where it’s supposed to be, while in the index.php file, there’s a gap that’s filled by the background between the header and the top of the browser window. I have no clue what’s wrong, the only difference in code being that in index.php, the top and bottom halves are spliced so I use <?php include(‘top.txt’); ?> to include them into index.php.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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