SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: CSS Positioning

  1. #1
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Positioning

    I need help fixing the positioning on my website. Check this out for the interface:

    http://www.oasisbeverages.com/layout/layout1.html

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What needs fixing and what browser are you talking about?

    A little more info wouldn't go amiss

    Paul

  3. #3
    Misfit
    Join Date
    Apr 2000
    Location
    Pennsylvania, USA
    Posts
    2,266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you want the interface to be positioned? Do you want it to fill up the browser window -- no white space? Or do you just need to center what you have now?

    EDIT: Well, I guess I got beaten to the post, I suppose

  4. #4
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need to center what I have now, and clean it up. I'm going to put a BG behind the interface when we're all done. But for now, I would love to clean up the coding and position it dead center on the page.

    As for browsers, I'm shooting for the big 3: IE, Netscape, and Mozilla. But if it works in Mozilla odds are real good it'll work in IE. Alot of the people viewing it will be using just Netscape and IE, but for the sake of me who's a Mozilla user I would like to see it nice too.

    Like I said, I'd like to clean up the coding if we could since it uses pixels and not %, and this is my first time so I'd really like to do it right.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite sure what you are trying to achieve but ie doesn't like position:fixed (except on the body).

    This makes it impossible for the background to be fixed while the content scrolls so you are better off just repeating the bg.

    I've just moved a couple of elements into position but I'm not sure where you are going with this. The page is very high on graphics and takes a long time to load. Also the text isn't very readable on top of that picture.

    Anyway this tidies it up a bit.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {text-align:center;
    }
    #body{
      float: left;
      width: 811px;
      height: 492px;
       background: url(http://www.oasisbeverages.com/layout.../layout_05.jpg) repeat-y left top; 
     overflow:auto;
     }
     #container{
      margin-right: auto; 
      margin-left: auto; 
      width: 828px;
      text-align:left;
     }
     #header{
      width: 828px;
      height: 76px;
     }
     #navbar{
      width: 828px;
      height: 36px;
     }
     #topbar{
      width: 828px;
      height: 9px;
     }
     #bottombar{
     margin-left:8px;
     margin-top:-7px;
     width: 811px;
      height: 7px;
     
     }
     #leftbar{
      float: left;
      width: 8px;
      height: 499px;
     }
     #rightbar{
      float: left;
      width: 8px;
      height: 499px;
     }
    img  {display:block}
     </style>
    </head>
    <body>
    <div id="container"> 
      <div id="header"><img alt="" src="http://www.oasisbeverages.com/layout.../layout_01.jpg" /></div>
      <div id="navbar"><img alt="" src="http://www.oasisbeverages.com/layout.../layout_02.jpg" /></div>
      <div id="topbar"><img alt="" src="http://www.oasisbeverages.com/layout.../layout_03.jpg" /></div>
      <div id="leftbar"><img alt="" src="http://www.oasisbeverages.com/layout.../layout_04.jpg" /></div>
      <div id="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 
    	sit amet enim sed lorem ultricies porttitor. Aenean velit. Morbi rhoncus tempor 
    	neque. Phasellus dolor erat, lobortis non, mattis vitae, venenatis at, ligula. 
    	Suspendisse commodo velit ac massa. Quisque eu mi id mi pulvinar rhoncus. 
    	Quisque eget lorem. Integer ultricies felis. Cras eleifend accumsan nunc. 
    	Cras scelerisque molestie erat. Nunc blandit mollis felis. Curabitur iaculis 
    	metus et leo. Morbi malesuada risus sed elit. Aenean justo. Nulla massa nunc, 
    	sodales non, consequat eget, aliquet at, ante. Ut eu magna eu mauris ornare 
    	pulvinar. Fusce eget ipsum eget metus vestibulum blandit. Sed viverra. Vivamus 
    	egestas, augue nec convallis sodales, dui lectus malesuada arcu, et fringilla 
    	odio neque non tellus. Vestibulum gravida, nibh nec tempus fermentum, arcu 
    	arcu interdum metus, in cursus diam dui nec dolor. Mauris nonummy elementum 
    	libero. Proin feugiat metus. Pellentesque habitant morbi tristique senectus 
    	et netus et malesuada fames ac turpis egestas. Integer libero augue, rhoncus 
    	ut, luctus id, tincidunt non, odio. Sed magna enim, facilisis ut, eleifend 
    	non, accumsan bibendum, enim. Vivamus magna. Integer massa augue, semper at, 
    	scelerisque ut, porta id, velit. Nunc faucibus, pede ac vulputate pulvinar, 
    	pede nisl pretium tellus, at fringilla augue metus eget enim. In ut urna. 
    	Integer enim sem, elementum eu, malesuada in, mattis id, turpis. In vestibulum 
    	metus a urna. Praesent convallis auctor mi. Nam eleifend suscipit erat. Lorem 
    	ipsum dolor sit amet, consectetuer adipiscing elit. Integer vehicula sem sed 
    	ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada 
    	fames ac turpis egestas. 
     </div>
      <div id="rightbar"><img alt=""  src="http://www.oasisbeverages.com/layout.../layout_06.jpg" /></div>
      <div style="clear: both;"></div>
      <div id="bottombar"><img alt=""  src="http://www.oasisbeverages.com/layout.../layout_07.jpg" /></div>
      <div style="clear: both;"></div>
    </div>
    </body>
    </html>
    I know its not what you want but it'll give you a start.

    Paul

  6. #6
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that coding and none of the images showed up.

    **Edit OK awesome, looks real good. Thanks man. I'll work on cleaning up the coding later, thanks again!

    Is there a way I can fit it onto a non-scrolling page? Right now it scrolls a bit.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    well just reduce the sidebars and container a bit
    Code:
    #body{
    float: left;
    width: 811px;
    height: 422px;
    background: url(http://www.oasisbeverages.com/layout.../layout_05.jpg) repeat-y left top; 
    overflow:auto;
    }
    #leftbar{
    float: left;
    width: 8px;
    height: 429px;overflow:hidden;
    }
    #rightbar{
    float: left;
    width: 8px;
    height: 429px;
    overflow:hidden
    }
    Obviously you'll have to match the bottom image up 9if it matters) and of course it does depend on the viewers page height etc.

    Paul

  8. #8
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eeek! That's REALLY small lol! I just want it to fit on the page barely, nothing massively needing resized. I'll play around with it and see what I can get.

    No dice playing with it. What did you mess with to resize it?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just the height in those three styles above lol.

    I only reduced them by about 70px each to fit my page.

    Paul

  10. #10
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just the height...hrmm all right I'll see what I can do.

    When I reduced each by 10 px's, that bottom bar ended up messing up.

    Fixed it.

    I want to reduce the margins tho, they're kinda big. How can I do that?

  11. #11
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    The outlined areas need to be smaller.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thats the body margins.
    Code:
    body {margin:0;padding:0}
    Paul

  13. #13
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thank you kind sir. How do I even center it now that I have the margin set for the body?

    Wow you don't answer this question daily lol.

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .. I'm shooting for the big 3: IE, Netscape, and Mozilla ..
    The big 3 is: IE, Mozilla, Opera. Netscape is powered by the same engine as Mozilla.

  15. #15
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh huh.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    vertical centering is complicated and doesn' produce a very good effect in css. It means wrapping your page in a container and then absolutely positioning 50% form the top then using a negative margin of half the pages height to pull it back.

    e.g.
    Code:
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html,body {
    margin:0;padding:0;
    text-align:center;
    min-height:550px;/*page height*/
    min-width:828px;/*page width */
    }
    #body{
    width: 811px;
    float:left;
    height: 422px;
    background: url(http://www.oasisbeverages.com/layout.../layout_05.jpg) repeat-y left top; 
    overflow:auto;
    }
    #leftbar{
    float: left;
    width: 8px;
    height: 429px;overflow:hidden;
    }
    #rightbar{
    float: left;
    width: 8px;
    height: 429px;
    overflow:hidden
    }
    #container{
    margin-right: auto; 
    margin-left: auto; 
    width: 828px;
    text-align:left;
    } 
    #vertical {
    position:absolute;
    width:100%;
    height:100%;
    top:50%;
    left:0;
    margin-top:-275px;/*half container height*/
    }
    html>body #vertical {height:auto}
    }
    #header{
    width: 828px;
    height: 76px;
    }
    #navbar{
    width: 828px;
    height: 36px;
    }
    #topbar{
    width: 828px;
    height: 9px;
    }
    #bottombar{
    margin-left:8px;
    margin-top:-7px;
    width: 811px;
    height: 7px;
     
    }
    img {display:block}
    </style>
    </head>
    <body>
    <div id="vertical"> 
    <div id="container"> 
    rest of page.............
    ....
    ...
    </div>
    </div>
    This produces the unwanted effect of the top disappearing upwards when the window height is resized smaller. For other browers (not ie) you can use the min-height style in the body as above.

    Paul

  17. #17
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what should I do?

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It all depends on what you want.

    If it were me I'd just place the layout 10px from the top of the page and leave it there. I don't like centred layouts that move up with the window.

    But thats just me

    Otherwise your stuck with the code I posted above

  19. #19
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just gave it a 6 pixel margin. Looks good enough to me.

    It's still big for IE, I still have to scroll.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It's still big for IE, I still have to scroll
    Make it a bit smaller then

    (I'm offline now for about 5 hours so see you later ).

    Paul


Bookmarks

Posting Permissions

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