SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard wide's Avatar
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    1,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering several div's

    Hi all,

    I'm trying to center a top menu that contain 4 divs (more will be added later). You can see the problem here: http://www.tackleprices.com/merchant/index.php


    CSS sheet:

    body {margin:0px;}
    .center {text-align:center}

    }
    #tab1 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
    }
    #tab2 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
    }
    #tab3 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
    }
    #tab4 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
    }
    - How do I center those divs?
    Last edited by wide; May 30, 2004 at 03:04.
    ...

  2. #2
    SitePoint Wizard wide's Avatar
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    1,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use "float:left", then they are placed in the correct order, but in the upper left corner instead.
    ...

  3. #3
    SitePoint Wizard wide's Avatar
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    1,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found a solution:

    CSS:
    --------------------------------------
    body {margin:0px;text-align:center;}
    .center {margin:0px auto;width:40%;position:relative;}

    .tab {
    position: relative;
    top: 39px;
    height: 30px;
    width: 25%;
    margin: 0px;
    background-color: #002651;
    float:left;
    color:#FBF9CA;
    }



    PHP:
    --------------------------------------
    <div class="center">
    <div class="tab">tab1</div>
    <div class="tab">tab2</div>
    <div class="tab">tab3</div>
    <div class="tab">tab4</div>
    </div>
    ...

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

    Note that due to a rounding bug IE will drop the last float unless you reduce one of the floats slightly.

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hay look at that, thanks. I think I will give something similar a go on my problem.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mediaman
    hay look at that, thanks. I think I will give something similar a go on my problem
    This only works when you know the sizes beforehand.

    The parent is set to a percentage of the window and the floats are divided to fit in the parent (e.g. 4 x25% = 100%)

    If you don't know the number of images and the width of the images you want centred then you can't use this method I'm afraid.

    Paul

  7. #7
    SitePoint Wizard wide's Avatar
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    1,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know.
    How would you do it, if you dont know the wide of the objects?
    ...

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by wide
    How would you do it, if you dont know the wide of the objects
    It becomes quite difficult (if not impossible to do properly). You have to use inline elements and add padding to create some size as widths and heights don't take effect on inline elements.

    I did do an example of an inline menu some time ago:
    http://www.pmob.co.uk/temp/hozinlinemenu.htm

    But I don't know how it will stand up ( it works in mozilla and ie5.5 and 6).

    Paul

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

    Heres a quick example of using inline elements that can expand to text etc. (Only tested in ie6, mozilla/firefox and opera7).
    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 {margin:0px;text-align:center;}
    #nav {margin-top:39px}
    #nav span { 
    position: relative;
    padding:10px;
    background-color: #002651;
    color:#FBF9CA;
    line-height:25px;
    }
    </style>
    </head>
    <body>
    <div id="nav">
     <span>tab1</span>
     <span>tab2 a bit longer</span>
     <span>tab3</span>
     <span>tab4</span>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  10. #10
    SitePoint Wizard wide's Avatar
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    1,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much
    ...


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
  •