SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Centering Container & Images

    Firstly, I am pretty new to CSS so I may get my wording wrong here... but I am trying to convert all my web page tables over to CSS. The end results need to produce a:

    1. One expandable container centered in the middle of the web page.
    2. Images (all of different sizes) within that container are inserted randomly under a list of items... but centered within the container.
    ex: 1. blah blah blah
    2. blah blah blah
    -image centered within the contained area-
    3. blah blah blah
    - another image of different size centered within contained area-

    I am using the following code for the container centered within the web page:

    #center {
    background-image: url(inner.gif);
    width:700px;
    height:350px;
    position:absolute;
    top:20%;
    left:50%;
    margin:-50px auto auto -350px;
    border:5px solid black;
    }
    This looks and works great in IE-- but doesnt expand within the content in Mozilla. Is the code bad for Mozilla or should I be looking for a CSS code error elsewhere in my document? Any other suggestions on how to acheive a 1 centered expandable container on a page?

    Second issue: The images--I was trying to use this code to position my images:

    img.top {
    margin-left:175px;
    }
    Of course, this doesnt center every image because they vary in size. Is there 1 code that I can use that will position each image in the center( horizontally) of the container or do I have to create a code for each different size? Some of my pages have upward of 20 images, so I'm really looking for a catch all horizontal centering code.

    I havent loaded any pages on the web yet, so I can't attach a link for viewing... Hoping that the info above is enough... Many thanks for any assistance

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The container won't expand with the content because you have specified a fixed width of 700px for it. If you want it to expand as the text is enlarged, use "width: 70em" or similar; or if you want it to expand with the screen size use "width: 80%" (or whatever is required).

    For horizontal centering of images, you can use this:
    Code:
    img {
      display: block;
      margin: 0 auto;
    }
    I think that should work, although I haven't tried it.

  3. #3
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. The image code worked great! And your suggestion for the containter set me on the right path!! Thanks again!


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
  •