SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with table-less design with DIVs

    I'm trying to get an image to center vertically but not shift horizontally at all. It's a vertically aligned name of a site (sorry, no URL yet) and I just need it to stretch to the center of the page vertically at higher resolutions but keep its horizontal position. Any ideas on how to do this?

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    goma,

    Go on over to http://www.bluerobot.com and take a look at their 2 CSS Centering techniques. I think this will answer your question.

    Shoop

  3. #3
    SitePoint Enthusiast AlbinoRhyno's Avatar
    Join Date
    Feb 2002
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a positioned div (top:10px), and align=center. Should do the trick.

  4. #4
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a positioned div (top:10px), and align=center. Should do the trick.
    Am i missing something ?
    How can that do the trick ?

    He wants to align his image/text vertical and with the code you provide it aligns 10px under the top of the page) and in the horizontal middle.

  5. #5
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    splash-screen ?

    Goma do you wanna use this for a splashscreen ?

    Ofcourse it's depending on what kind of site you are making ( IE personal or commercial ) and personal preference but if it's for a commercial website splashscreens are a no-no.

  6. #6
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming your using a class for this image called "verticle" and it is aligned with the body of the page. Verticle is a lot more tricky than horizontal positioning but this might work, but I think it's as easy as defining a top margin or position.

    Code:
    .verticle {
    position: absolute; ( or relative )
    top: 50% ( this should do it )
    margin: 0px auto; 
    }
    
    or
    
    .verticle {
    margin: 50% auto; }


  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to add to what Spider wrote. This will not result in the image being positioned EXACTLY in the middle. It will position the top of the DIV to the middle of the page. This may or may not be what you're looking to do.

    If it doesn't look right, play with the percentages until you've got it like you want it.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a nice tip...

    Thanks Creole



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
  •