Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Centering problem, Any Suggestions?

    Hi guys, Im new here so if I post this wrongly please let me know.

    Im trying to create a personal photo website and I cant seem to find a way to center everything correctly. So if anyone has any input, please let me know.

    Now let me clarify my situation.

    Currently my HTML is the following:
    Code:
    <body>
      <div id="wrap2">
        <img class="bodypic" src="image.gif">
        <div id="test"></div>
      </div>
    </body>
    </html>
    The first image is how I want everything to look, the objects next to each other horizontally. I can accomplish this by using the following code.

    Code:
    body {
       font-size: 12px;
       font-family: arial, helvetica, sans-serif, sans;
       background: #000;
       text-align: center;
       margin: 0px;
       padding: 0px;
       }
    
    #wrap2 {
       width: 841px;
       padding: 10px;
       margin: 0px auto;
       text-align: center;
       }
    
    #test {
       background: #F00;
       width: 41px;
       height: 307px;
       float: left;
       }
    
    .bodypic {
       padding: 6px;
       background: #E9E9E9;
       border: 1px solid #D1D1D1;
       margin: 0px 0px 0px 0px;
       float: left;
       }
    The problem with this css code is that it won't center everything.

    I tried to take out the Float: left attribute, but the two objects line up vertically.

    Another factor that needs to be considered is that my images are not always the same size. (if they were, I could just define a width to Wrap2 that would fit the two objects exactly.

    I hope this clarifies everything. Let me know if you need more info or have any suggestions.
    Attached Thumbnails Attached Thumbnails CSS Centering problem, Any Suggestions?-image.gif  

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Would it be possible for you to post a link to your site? Is the attachment image.gif the one you used in your html? Can you draw a rough picture of what you want or is image.gif what you are trying to achieve?

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My site is currently not live yet. The image gif is an actual screenshot of what my site looks like, i just used solid colors so I wont consfuse anyone with images.

    This only works because I use float left on the div (called test) and the image. Then I center it by wraping it with another div. The problem with this is that depending on the size of the div and the image, it will not always stay centered.

    Ill try to upload the site tonight.

  • #4
    New Coder
    Join Date
    Sep 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'll need to clear the float on the image. Try removing the 'float: left;' from the test div, and replacing it with 'clear: both;'

    Let me know if that helps.

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the suggestion, it didnt work. By doing what you suggested, the two images are vertically aligned.

    I uploaded a sample of what I want my page to look like, the only problem is that it does not center

    http://www.beyondeight.com/helpCSS/index.htm

    Hopefully someone has a way to fix it.
    Last edited by MC82; 12-20-2005 at 04:17 PM.

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If anyone else has a suggestion, please feel free to chime in =D

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You have used the same id more than once, you can't do that, if you need to use the same styles then use a class. As for your centering, this image
    Code:
    http://www.beyondeight.com/helpCSS/test1.gif
    and this image
    Code:
    http://www.beyondeight.com/helpCSS/css/URL.gif
    Only add up to 739px wide not 900px wide. Seems like you have a problem with your widths. Redo the calculations and double check the widths you are using. When you float elements you can no longer use text-align:center; on them. You can make them display:inline; and use text-align:center; the problem with this though is the smaller image will line up at the bottom of the bigger image.

  • #8
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whoops, I totally forgot that I was using Id on them. I added the last few examples with the intent to use different styles on them but decided to go with just one style. wont happen again =D

    I understand that the two images add up to only 739px. The problem is that test1.gif will not always be of the same size. So this means that if it is any larger, the URL.gif will move below the test1.gif. Is there anyway for me to keep them centered and allow myself to use variable test1.gif sized pictures? (I guess this is basically my question from the beggining). The main goal is not to have the smaller gif move below the larger gif when the larger gif varies its width, all while keeping the two things centered on the page.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read this, it discusses a menu that uses float left but the concept is the same for what you are trying to do.

  • #10
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats perfect thanks. I just discovered that site a few days ago and its awsome. Thanks so much, its exactly what I was looking for.


  •  

    Posting Permissions

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