SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    ********* and Coffee Addict SmellTheCoffee's Avatar
    Join Date
    Mar 2003
    Location
    Vermont
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Equivalent CSS tag for Align and Valign...

    Hi Everybody,
    What's the equivalent CSS style for the TD Align=Center Valign=Middle? I'm trying to get a banner ad to display in a DIV tag but want it to center up in the middle of the area.

    Thanks in advance!

    Thanks,

    John
    "Your Internet Coffee Filter"

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    text-align:center;
    vertical-align:middle
    Aaron Brazell
    Technosailor



  3. #3
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, the vertical-align property only applies to inline elements. This means that your banner ad (if it's an image) will not centre vertically (because images are block level). A way round this (though I don't really recommend it) is to specify a class for your banner ad image, and set the display to inline. Then you can specify a vertical align property on it:

    img.banner {
    display:inline;
    vertical-align:middle;
    }

    In theory, that should work. In theory.
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  4. #4
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For a better way to achieve vertical centering, take a look at http://www.wpdfd.com/editorial/wpd0103.htm#toptip
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  5. #5
    ********* and Coffee Addict SmellTheCoffee's Avatar
    Join Date
    Mar 2003
    Location
    Vermont
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm? The problem is I'll be serving ads from Burst so I can't really manipulate their code. Here is what I set up so far....

    http://www.smellthecoffee.com/csshome.php

    I'm still learning how to manipulate the DIV tag so don't laugh to hard at the style sheet.

    Thanks,

    John
    "Your Internet Coffee Filter"

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Actually, images are inline by default, not block. The vertical alignment of an image is "baseline" by default, so you'll only have to change that, and your text-align property.

    Further reading:
    http://www.dithered.com/archives/200207.html#04_2
    Gecko-based browsers set the display CSS property for images to a default inline. And the vertical-align property applies to inline elements and it's default value is baseline. So, unless you say otherwise, all images will have a gap of several pixels (the actual size depends on the font-size property for the containing block) below them. This gap is only really noticable (and unwanted) in situations where the image is used outside an inline context. Like when the image is used by itself in a table cell. To get rid of the gap, set the display to block or vertical-align to text-bottom - whatever seems appropriate for the situation. All of this has been mentioned before (many times on Webdesign-L, for instance). There is another situation where you'll run into the gap that is less obvious - in popup windows. If you size your popups to exactly fit an image, the gap will force a vertical scrollbar - maybe a horizontal one forced by the appearance of the vertical one - (unless you have these turned off).
    Hope this helps!
    Quote Originally Posted by Zopester
    Unfortunately, the vertical-align property only applies to inline elements. This means that your banner ad (if it's an image) will not centre vertically (because images are block level). A way round this (though I don't really recommend it) is to specify a class for your banner ad image, and set the display to inline. Then you can specify a vertical align property on it:

    img.banner {
    display:inline;
    vertical-align:middle;
    }

    In theory, that should work. In theory.

  7. #7
    ********* and Coffee Addict SmellTheCoffee's Avatar
    Join Date
    Mar 2003
    Location
    Vermont
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm? Not sure if I get you. Can you post the sample code? Much appreciated!

    Thanks,

    John
    "Your Internet Coffee Filter"

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Sample code:
    Code:
    img.banner {
       text-align: center;
       vertical-align: middle;
    }
    If you want to add "display: inline;" in there, feel free, but that's an image's default display anyway, so it's unnecessary.

  9. #9
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, images are inline by default, not block
    I should read more closely.
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  10. #10
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did anybody manage to make this 'vertical-align' thingy to work, I couldn't. So, as usal I kept playing a bit. I guess, compared with the original code the motto of the day would be 'less is more'.

    I basically got rid of the container divs (except for 'header') and put the styles on the images and the header div.

    There's one little annoyance, when not using the negative margin trick, then there will be a 2px gap to the left of the (floated) logo. If anybody could shed some light on this, I'd be gratefull.

    Anyhow, here's the code, with some comments:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    /* You damn browser! Only where I tell you will you put margins, borders and paddings : */
    body, div, img, a {margin:0; border:0; padding:0;} /* no need for a unit, 0 is 0 */
    #header {
    	height:110px; /*  Always use a unit (px in this case)*/
    	border-bottom: 1px solid black;
    	/* 'hotlinking' your images because I'm to lazy to download them :) */
    	background-image:url(http://www.smellthecoffee.com/images/header/back2.gif) ;
    	text-align:center; /* to center the banner */
    	}
    img#logo {
    	float:left; /* to put the logo on the left */
    	/* IE5.5 leaves a 2px gap to the left of the logo,
    	so I use the folowing trick to shift the logo 2px to the left.
    	In other browsers the left 2px of the logo will dissapear of the screen,
    	i guess you could always use the box model hack if this is a problem. */
    	margin-left:-2px; 
    	}
    /* since both the image and the containing block have a fixed height
       this is (imho) the simplest way to center it vertically: */
    img.banner {margin-top:25px;}
    </style>
    </head>
    <body>
    <div id="header">
    	<a href="/"><img id="logo" src="http://www.smellthecoffee.com/images/header/logo2.gif" width=175 height=110 alt="SmellTheCoffee.com - Your Internet Coffee Filter"></a>
    	<!-- START ADVERT -->
    	<img class="banner" src="http://www.smellthecoffee.com/cantsleep.gif" width="468" height="60"><br />
    	blah, blah, blah
    	<!-- END ADVERT -->
    	</div>
    </div>
    </body>
    </html>
    One drawback of floating the logo is that if the window is narrower then the combined width of the logo and the banner, the banner will move under the logo. On the other hand, this might be a good thing, since it is still fully visible.

    Anyhow, let me know what you think.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  11. #11
    ********* and Coffee Addict SmellTheCoffee's Avatar
    Join Date
    Mar 2003
    Location
    Vermont
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    That looks great! I put it up here if you all want to see Rik's fine work.

    http://www.smellthecoffee.com/csstest.php

    Thanks for the help! Now my big challenge is going to be to squeeze the main menu in. You can see a sample here. Ignore everything below the header...

    http://www.smellthecoffee.com/index2.shtml

    And yes, less is more. I am whiz (or so I think) at tables but this CSS jump has been giving me some headaches. I can't wait to get my sitepoint book!

    Thanks again for all the help!

    Thanks,

    John
    "Your Internet Coffee Filter"

  12. #12
    ********* and Coffee Addict SmellTheCoffee's Avatar
    Join Date
    Mar 2003
    Location
    Vermont
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    Anyone else notice what that post did to the sitepoint header layout? Maybe I shouldn't go CSS. hehe.

    John
    "Your Internet Coffee Filter"

  13. #13
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually that happens randomly when viewing threads in IE for some reason... (I think this time it's the post, but it does it by itself sometimes too )
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.


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
  •