SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with absolute positioning

    hi - kind of new to css (or more importantly absolute position using css rather than tables).

    am building a site which requires a central images in the middle of the page and then 10 absolute images spaces around this central image (dynamic images, but consist height and width) - different images will be displayed depending on what image is chosen from the database.

    also need another 5 images boxes in the centre of the main image - plus a few information boxes where text will be shown around this central image.

    ok so the main question i suppose is where do i start? what steps should be taken to build this bottom up?

    do i design the css sheet first - and if so where can i find some good resources on this?

    i suppose this will be the first of many questions...

    thanks in advance.

    tim

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

    Quite a complicated question you've asked there [img]images/smilies/wink.gif[/img] .

    The best way I can answer it is to show you an example so forgive the long code:
    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>Centre image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    height: 100%; 
    }
    .central {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px; /*half image height */
    margin-left: -150px; /*half image width */
    background-image: url(c.gif);
    height: 300px;
    width: 300px;
    }
    .central img {
    margin-top: 125px;
    margin-left: 8px;
    float: left;
    }
    .box1 {
    color: #000000;
    background-color: #FFFFCC;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -110px;
    top: -110px;
    }
    .box2 {
    color: #000000;
    background-color: #FFFFCC;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 310px;
    top: -110px;
    }
    .box3 {
    color: #000000;
    background-color: #FFFFCC;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -110px;
    top: 100px;
    }
    .box4 {
    color: #000000;
    background-color: #FFFFCC;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 310px;
    top: 100px;
    }
    .box5 {
    color: #000000;
    background-color: #FFFFCC;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -110px;
    top: 310px;
    }
    .box6 {
    color: #000000;
    background-color: #FFFFCC;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 310px;
    top: 310px;
    }
    </style>
    </head>
    <body>
    <div class="central">
    <img src="img1.gif" width="50" height="50" alt="" /> 
    <img src="img2.gif" width="50" height="50" alt="" /> 
    <img src="img3.gif" width="50" height="50" alt="" /> 
    <img src="img4.gif" width="50" height="50" alt="" /> 
    <img src="img5.gif" width="50" height="50" alt="" /> 
    <div class="box1"><p>Box 1</p></div>
    <div class="box2"><p>Box 2</p></div>
    <div class="box3"><p>Box 3</p></div>
    <div class="box4"><p>Box 4</p></div>
    <div class="box5"><p>Box 5</p></div>
    <div class="box6"><p>Box 6</p></div>
    </div>
    </body>
    </html>
    The above code works in Ie6, Mozilla 1.2 and Opera 6 and as there are no padding or margins used it will work in Ie5 as well (I hope but haven't tested).

    The centre image has been put into the background of the central div so that you can simply overlay it with your 5 floated images.

    All the other divs have been placed in relation to the centred div which should give you a fluid page to some extent. I think you should be able to bend the code to your needs as it does show how to position elements quite clearly.

    There are a number of threads in the forums that debate some of the techniques used here and might be worth a read for a fuller explanation:

    http://www.sitepointforums.com/showt...hreadid=105867
    http://www.sitepointforums.com/showt...hreadid=105256
    http://www.sitepointforums.com/showt...hreadid=102706

    & here's a tutorial on positioning that might be of use:
    http://www.westciv.com/style_master/...ning_tutorial/

    The above code is not meant to be a complete solution but hopefully will give you some idea of how to achieve your aims [img]images/smilies/smile.gif[/img] .

    Paul

  3. #3
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice - thanks mate - an excellent starting place for me.

    tim

  4. #4
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1 thing i dont get:
    Code:
    .box1 { 
    color: #000000; 
    background-color: #FFFFCC; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    left: -110px; 
    top: -110px; 
    } 

    why are there -ve values; what do they do and how are they treated by the browser?

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

    The negative values are used to position the content in relation to the main central div. I have made the central div the starting point by absolutely positioning it and then placing the other elements inside the div but them removing them from the flow by also using absolute positioning.

    As the main div is positioned absolutely in the centre of the page the other divs are then positioned from that centre div. If a nested div was positioned at left: 0px & top 0px then that would the nested div at the top left of the central div.

    In order to move the nested divs outside the central div you will need to use negative margins for top to go upwards and negative margins for left to go to the left.

    What I'm basically saying (very badly) is that the central divs top left co-ordinates are effectively 0,0. So to go above or to the left will need some negative numbers.

    Hope that makes sense. (If you look at the example I gave you on screen it should make sense when you read this (with any luck [img]images/smilies/wink.gif[/img] ))

    Paul

  6. #6
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem:

    the page i am working on can be found here - http://www.rentassist.com.au/poker/tim/index.htm

    you can see the table is in the right position, with the first card <div class="flop1"> putting the Ace of Spades in the right position. but then I make "flop2" which is 60 pixels to the right and i thought it would put the Ace of Clubs to the right of it (with 10 pixel space).

    Code:
    .central {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -163px; /*half image height */
    margin-left: -348px; /*half image width */
    background-image: url(./images/bg2.jpg);
    height: 375px;
    width: 695px;
    }
    .central img {
    margin-top: 125px;
    margin-left: 8px;
    float: left;
    }
    .flop1 {
    height: 70px;
    width: 50px;
    position: absolute;
    left: 200px;
    top: 0px;
    .flop2 {
    height: 70px;
    width: 50px;
    position: absolute;
    left: 255px;
    top: 0px;
    even when i change the left position in flop 2, it wont put the card in the right place.

    plus not sure but here is html
    Code:
    <body>
    <div class="central">
    <div class="flop1">
    <img src="./images/card1-14.bmp" width="50" height="70" alt="" /> 
    </div>
    <div class="flop2">
    <img src="./images/card2-14.bmp" width="50" height="70" alt="" /> 
    </div>
    </div>
    </body>
    help please!

    thanks tim.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    You've missed the closing bracket off your flop1 style.
    }

    Otherwise I think it's all correct.

    Paul

  8. #8
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep thanks working fine - am i correct in thinking once i have all the positioning correct (maybe up to about 40 different spots around the table) i can dynamically change the cards coming from a database?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I assume that if you keep the image names in a database and then use something like PHP to reference the names in your page then all your positioning should stay intact as you will only be changing the image names.

    However I am only just learning databases myself so you will probably need to ask in the appropriate forum but I'm sure it can be done.

    Paul

  10. #10
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gday all:

    have come across a small problem:

    at the site: http://www.watchpoker.com/tim/index2.htm

    the btmbox is totally gray. i know want to have two white boxes over the top of this grey box.

    this is the html code i am trying to use
    Code:
     
    <!-- btm bar -->
    <div class="btmbar">
    <div class="btmtxtbox">
    links
    </div>
    <div class="advertise">
    advert
    </div>
    </div>
    and this is the relevant section from the .css file
    Code:
     
    .btmbar {
    color: #000000;
    background-color: #CCCCCC;
    height: 100px;
    width: 650px; 
    position: absolute;
    left: 0px;
    top: 490px; 
    border:1px solid #999999;
    }
    .btmtxtbox {
    color: #000000;
    background-color: #FFFFFF;
    height: 90px;
    width: 310px; 
    position: absolute;
    left: 10px;
    top: 495px; 
    border:1px solid #999999;
    }
    .advertise {
    color: #000000;
    background-color: #FFFFFF;
    height: 90px;
    width: 310px; 
    position: absolute;
    left: 320px;
    top: 495px; 
    border:1px solid #999999;
    }

    for reasons unbeknown to me, i can't get the two boxes to appear on top of the btmbar box. is it something to do with z-indexes? or should i rearrange the html some other way?

    thanks tim.

  11. #11
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    think i worked it out using float:right and float:left.

  12. #12
    SitePoint Zealot heathmont's Avatar
    Join Date
    May 2002
    Location
    Melbourne
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another question, the cards dont show up when i open the page in netscape 6.2? why?

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

    I don't think netscape likes bitmap files (bmp).

    Try changing one of the cards in your graphics editor to gif format and see if that works.

    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
  •