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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question A couple of CSS questions.

    Before I start, here is the site that I will be referring to:hBB

    In CSS, I cannot seem to vertically align any text. This is the code I'm using for the header part on my page:

    #header {
    background-color: #FFFFFF;
    color: #000000;
    border: 2px solid #CCCCCC;
    width: auto;
    height: 100px;
    text-align: center;
    margin-bottom: 10px;
    vertical-align: auto;
    }
    Also, to center align the page, I have used the following:

    margin-right: auto;
    margin-left: auto;
    This works for Netscape 6, Opera 6 and Opera 7. It does not have any effect in IE6. Is there anything else I could use.

    Thanks in advance.

  • #2
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    as far as I know, there isnt any vertical align formatting in CSS, I may be wrong though.

    To center content, I use

    Code:
    CSS:
    
    body {
       margin: 0px auto 0px auto;
       text-align: center;
    }
    
    .wrapper {
       margin: 0px auto 0px auto;
    }
    
    
    XHTML:
    
    <body>
    
       <div class="wrapper">
    
            .... content in here
    
       </div>
    
    </body>
    Hope this helps.

  • #3
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    There's vertical-align:top/middle/bottom Don't think there's an auto though

  • #4
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot

    Woops, I meant to edit the auto bit. I had tried middle, top and bottom but it had no effect at all on the text. I thought I'd just try auto out of hope, but it didn't work.

  • #5
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ive seen the vertical align used but it never actually seems to do anything? does anyone know anything about this?

  • #6
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Not sure how it works really. Better wait for the experts . It seemed to work for me though on my smilies for my site. I got them aligned to the bottom and they're staying inline with the text now.

  • #7
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I set it to 500px (just to see if anything happened), it made the area with "This is where the logo will go." really tall (500 pixels I'm guessing :P). The text stayed at the top though?

  • #8
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just to clear a couple of points up:

    vertical-align
    lots of stull on "auto"
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    center align:
    Code:
    margin: 0 auto;

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE, and vert. alignment

    IE (5.x, 6?) doesn't understand the margin: auto bit; as a hack, to center a block element, its parent should have a text-align: center property, which IE will incorrectly apply to the block element as well. Inside the centered block, text alignment may have to be corrected again. Do specify margin-left / -right: auto as well for compliant browsers.

    The vertical-align property only applies to inline elements / content and table cells; check the specs for more detail: CSS 2.1: vertical-align.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #11
    New Coder
    Join Date
    Mar 2004
    Location
    Helsingborg, Sweden
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, you wanna do pretty much anything with IE you have to hack something or other...
    Remember trying to get max width working in it. :P

  • #12
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've decided that (just this once) I'll use a table. It will hopefully get removed when I get a logo as it should take up the full space.

  • #13
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: IE, and vert. alignment

    Originally posted by ronaldb66
    IE (5.x, 6?) doesn't understand the margin: auto bit;
    IE 6 does.

    Originally posted by jdan
    Yea, you wanna do pretty much anything with IE you have to hack something or other
    Not true, I make a point never to use hacks and I've created (what I consider to be) a pretty decent layout.

    Originally posted by spl1nter
    I've decided that (just this once) I'll use a table.
    NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

    The key is not to rely on fixed width content areas, but to determine the width of the content area via the left and right margins.
    For example, the layout code that I posted a link to above has a content area with left and right margin widths of 170px.
    Since then I have re-done the styles to have a left and right margin of 28% at the sides, this makes the page look fine on 640x480 and on higher resolutions such as 1024x768. You can see the layout in action here and here.

    Your current layout could quite easily be converted into CSS while at the same time making it more fluid. If you still insist on centring a fixed width block of content then do this:

    position:absolute;left:50%;

    And then have a margin-left: set to minus half of the content width, so for instance if the content block is 200px wide you would do this:

    margin-left:-100px;

    Unfortunately if the content is very wide (like on yours) then on a smaller resolution the left hand side of the content will be cut off, but the user will still be able to scroll to the right and see the content over there.

    Fluid layouts are the furture!!!
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #14
    Regular Coder
    Join Date
    Feb 2004
    Location
    Scotland
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I needed to vertically align the text, not horizontally.

    It's OK, I managed to do it with

    Code:
    position: relative;
    top: 50%;
    But then I decided that I probably wouldn't need it and got rid of it :P

    I have now got the design ready and you can see it here.

    If you go to the updates page you'll see how much CSS has helped the site.

  • #15
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm still seeing tables...
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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