Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Div positioning woes

    I'm having a bit of difficulty getting my positioning css to behave the way I want it to, I'm pretty sure it's something silly but I'm having dificulty figuring it out for some reason.

    Basically my site is split into 5 parts.

    A Banner part at the top; banner
    2 sidebars left and right,
    A center portion for content with a scrollbar; content
    And a bottom Banner; Bottom

    I placed filler text in all sections and tested at different resolutions, resized my browser in every direction, it was all good

    The moment I placed an image in everything went to hell.

    www.salonatouchofclass.com/main.shtml

    If I switch resolution of resize the browser the image overlaps the content portion of the site.


    This is the css that goes with my test site.

    Code:
    html {
    overflow: hidden;
    }
    
    body 
    {
    background-color: 006699;
    color: #ffffff
    }
    
    ul.Menu
    {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    a.Menu
    {
    float:left;
    width:6em;
    text-decoration:none;
    color:white;
    background-color:purple;
    padding:0.2em 0.6em;
    border-right:1px solid blue;
    }
    
    a.Menu:hover
    {
    background-color:#ff3300
    }
    
    li.Menu 
    {
    display:inline
    }
    
    
    Div.Maindiv
    {
    position: absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    Z-index:0;
    }
    
    Div.Banner
    {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:110px;
    Z-index:1;
    }
    
    Div.Menu
    {
    position: absolute;
    top:110px;
    left:0px;
    height:1.6em;
    width: 100%;
    background-color:purple;
    Z-index:1;
    }
    
    Div.Leftbar
    {
    position: absolute;
    top:140px;
    left:0px;
    height:100%;
    width:15%;
    Z-index:1;
    }
    
    Div.Rightbar
    {
    position: absolute;
    top:140;
    left:85%;
    height:100%;
    width:15%;
    Z-index:1;
    }
    
    Div.Content
    {
    position: absolute;
    top:140px;
    left:15%;
    height:60%;
    width:70%;
    overflow: auto;
    Z-index:1;
    }
    
    Div.Bottom
    {
    position: absolute;
    top:78%;
    left:0px
    height:100px;
    width:100%;
    Z-index:1;
    }
    If anyone can point me in the direction of what I'm doing wrong, I would appreciate it.

    What I would like it to do is if the resolution or browser shrinks, the site will shrink along with it so everything always looks the same, as far as the top and bottom banner and the left and right sidebar goes.


    Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Can you post an image of what the page should look like?

    Thanks.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi,

    welcome to CF.

    I would strat with a few changes.

    1. add a full doctype so that IE will show your site as you code it rather than how it guesses you want it to display.

    2. remove the position:absolutes and see what differecne that makes. If you leave them out, the site will be better able to adjust to different resolutions.

    3. In case you have yet to do it, validate your code. http://validator.w3.org

    hth

    Edit:
    top tips too:
    design in FF and then tweak for IE.
    use the add-on for FF called 'lorem ipsum generator'. saves a lot of typing when using filler text


    bazz
    Last edited by bazz; 07-16-2008 at 03:45 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • Users who have thanked bazz for this post:

    Daakuryu (07-30-2008)

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Picture of the breakdown of the site:
    http://www.salonatouchofclass.com/shell.jpg

    Basicaly everything that isn't the big center square should remain the same no matter the resolution




    Bazz:

    Removing the absolute makes everything disappear

    Didn't even realize my doctype was missing its url

    Thanks for the validator links that helped me fix up the css after I put in the right doctype address


    The only thing that seems to not follow the rules, is that logo. everything else seems to work fine


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •