Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 3 FirstFirst 1 2 3 LastLast
Results 11 to 20 of 21
  1. #11
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Quote Originally Posted by Wolf_ODonnell
    div.float {float: left; border: 0px; margin: auto 0px; height: 60; width: 230}
    It looks like you've got them reversed. Maybe that's the problem?

  2.  

  3. #12
    Junior Member
    Join Date
    Jun 2005
    Posts
    19
    Member #
    10364
    Quote Originally Posted by Shadowfiend
    It looks like you've got them reversed. Maybe that's the problem?
    I've tried it the other way around as well.

  4. #13

  5. #14
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I am now exceedingly confused as to what you're trying to do. You've got a div floating left and you want it centered? And every one of those images is a div? What exactly are you trying to achieve, layout-wise?

  6. #15
    Junior Member
    Join Date
    Jun 2005
    Posts
    19
    Member #
    10364
    Quote Originally Posted by Shadowfiend
    I am now exceedingly confused as to what you're trying to do. You've got a div floating left and you want it centered? And every one of those images is a div? What exactly are you trying to achieve, layout-wise?
    The original page is located at http://www.starwing.co.uk/interviews...wer_select.htm.

    Each image is a button link to someone's work. He placed it in a two column table, I assume, so that people in smaller screen resolutions could still have both columns in the window without a horizontal scrollbar appearing.

    However, I realised that this would look quite sparse and spartan, especially since I removed the original background.

    So I decided to simulate a table with the div tags. This, I hoped, would give the appearance of the original table but as many columns as the screen resolution would allow. That way, no matter what resolution, the viewer would see enough columns to fill up the available viewing space.

    Unfortunately, this got rid of the original centre alignment of the "table". The original admin didn't like that and wanted me to centre the whole lot.

  7. #16
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Aaahhhh, now that makes sense. Sorry I was so slow on the uptake. Okay, well, the problem is that when you float something it goes outside the normal flow of elements, so when you centered the containing div it didn't affect the floated divs. So, first of all, you want to unfloat the divs. Because divs are block-level elements, however, they automatically cause line breaks before and after themselves. As such, you want to either change the divs' CSS, adding the property `display: inline;', or you want to replace them all with spans. Then it should work. Try it and let me know; I tested the spans version but the display: inline; should have the same effect.

  8. #17
    Junior Member
    Join Date
    Jun 2005
    Posts
    19
    Member #
    10364
    Ooh, that's great. In fact, that solves the problem of the top three pictures, which I had put in a tables format, because I wanted the one below the top two to be centred between the two.

    Brilliant! Thank you very much!

    (Though I've been doing CSS for quite some time, my knowledge is only limited to CSS that affects the styles of fonts).

  9. #18
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    :-) Glad to know that fixed it. It sometimes scares me how much CSS can do. I'm thinking I still know the minority of what it does...

  10. #19
    Junior Member
    Join Date
    Jun 2005
    Posts
    19
    Member #
    10364
    Damn it! It no longer works. I attempted to change the tables at the top, but I ended up destroying the centre align of the pictures below.

    Now I can't centre them anymore using the method you suggested.

    The css should look like this, right?

    div.center {margin: auto 0px}
    div.float {float: left; display: inline; border: 0px; height: 60;
    width: 230}
    div.spacer {clear: both}

    EDIT: Never mind. I've just fixed it.

  11. #20
    Senior Member GeZe's Avatar
    Join Date
    Dec 2003
    Posts
    330
    Member #
    4381
    post by glyakk

    actually you can center/position vertically as well as horozontally.. here is one method I use.
    HTML Code:
    div {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    border: 1px solid #555;
    }

    Absolute positioning will do the trick. Just make sure its outside of any other positioned containers so it will default to the browser window. You must have a static value for width and hight set for this to work, I used 100px for both. Then you set the left edge of your container to start half way across the browser screen(left: 50%), and back it up HALF of your width(margin-left: -50px). You then do the same for the vertical positioning. Set the top edge to start half way down your screen, then back it up half of your height. And thats it.
    From a thread I posted
    http://www.webdesignforums.net/showthread.php?t=15201
    -GeZe


Page 2 of 3 FirstFirst 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com