SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)

    Vertically centering linked image and form

    I need a little help in vertically centering this image and form within the .right div. Any pointers?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .right {
    	float: right;
    	width: 400px;
    	height: 58px;
    	line-height: 58px;
    	vertical-align: middle;
    	border: 1px solid red;
    }
    .right a, .right form {
    	display: inline;
    	height: 58px;
    	line-height: 58px;
    }	
    </style>
    </head>
    <body>
    <div class="right">
      <a href="#" title=""><img src="http://www.lifegoggles.com/images/feed-icon32x32.png" alt="" /></a>
      <form method="post" action="#">
        <input name="email" type="text" value="" />
        <input type="submit" value="Get FREE Updates!" />
      </form>
    </div>
    </body>
    </html>
    Cheers,

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the technique that Paul O'Brien and I use: Vertically Centering Elements of Unknown Heights

    P.S. Why are you using XHTML 1.0 Transitional?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    My eyes aren't the best, so I can't tell if this is correct or a pixel or so off.

    Code css:
    .right {
    	float:right;
    	width:400px;
    	height: 58px;
    	border:#FF0000 1px solid;
    	line-height: 58px;
    }
    .right form, .right img  { display: inline; vertical-align:middle; }
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    ...basically vertical-align gets applied to children, not parents.
    Ryan B | My Blog | Twitter

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't work in IE6 or Opera though.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    ...basically vertical-align gets applied to children, not parents.
    That's a little misleading (with your wording) as vertical-align only applies to inline elements within a single line (or table-cell). It doesn't apply to block elements at all.

    You apply the vertical-align to the inline element you want aligned and really has nothing to do with parents and children as inline elements could have a parent child relationship.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Need a little more help in understanding this one.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .valignmid1 {
      position: relative;
      display: table;
      vertical-align: middle; 
    }
    .valignmid2 {
      width: 100&#37;;
      display: table-cell;
      vertical-align: middle;
      position: relative;
    }
    
    #container {
    	padding: 0 10px;
    	text-align: left;
    	background: url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/chungo_bg_grey_right.gif) repeat-y right bottom;
    }
    /* Header */
    #header {
    	padding-top: 2px;	
    	color: #FCFEF4;
    	margin: 0 -8px;
    	font-size: .9em;
    	height: 58px;
    	width: auto;
    	background: url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/headerbar_tall.png) repeat-x right bottom;
    }
    #header h3 {
    	line-height: 58px;
    }
    
    #header .inner {
    	margin: 0;
    	padding: 0;
    	height: 58px;
    	background: url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/header_left_tall.png) no-repeat left bottom;
    }
    #header .inner .left {
    	float: left;
    	width: 300px;
    	height: 58px;
    }
    #header .inner .left a img {
    	margin: 2px 0 0 2px;
    }
    #header .inner .middle {
    	overflow: hidden;
    	height: 58px;
    	text-align: center;
    	min-width: 150px;
    }
    #header .inner .right {
        float:right;
        width:390px;
    	padding-right: 10px;
        height: 58px;
    	text-align: left;
    }
    #header .right form, #header .right form div { width: 100%; vertical-align: middle; }
    /* Top navigation setup */
    #nav {
    	clear: left;
    	margin: 0 0 5px 0;
    	background: #ECECEC url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/single_post_right_tall.gif) repeat-x bottom right;
    }
    #nav .inner {
    	font-size: 1em;
    	color: #888;
    	line-height: 25px;
    	background: transparent url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/single_post_left_tall.gif) no-repeat bottom left;
    	overflow: hidden;
    	width: 100%;
    }
    #nav .inner ul {
    	margin: 0 400px 0 0;
    	padding: 0 16px;
    	list-style-type: none;
    }
    #nav .inner .right {
    	float: right;
    	width: 320px;
    	text-align: right;
    	padding-right: 10px;
    }
    #nav .inner ul li {
    	float: left;
    	padding: 0;
    	margin: 0;
    }
    #nav .inner ul li a { 
    	float: left;
    	padding: 0;
    	margin: 0;
    	padding: 0 10px 0 0;
    	text-decoration: none;
    }
    
    /* Global Styles */
    html {
    	background: #BEBEBE url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/chungo_bg_grey_right.gif) repeat-y top right;
    }
    body {
    	background: #BEBEBE url(http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/chungo_bg_grey_left.gif) repeat-y top left;
    	margin: 0px;
    	padding: 0px;
    	font-family:'Trebuchet MS','Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
    	font-size: 80%;
    	color: #000000;
    	text-align: center;
    }
    img {
    	border: none;
    }
    h1 {
    	margin: 0px;
    	font-size: 2.2em;
    	line-height: 47px;
    	height: 47px;
    	background: none;
    	text-decoration: none;
    	border: none 0px;
    }
    h2 {
    	color: #5CA605;
    	font-weight: normal;
    	font-size: 1.8em;
    	line-height: 1.2em;
    	margin: 0;
    	padding: 0;
    }
    h2 a:link, h2 a:visited {
    	color: #5CA605;
    	font-weight: normal;
    	text-decoration: none;
    	background: none;
    	}
    
    h2 a:hover, h2 a:active {
    	color: #679000;
    	font-weight: normal;
    	text-decoration: none;
    	background: none;
    }
    
    h3 {
    	font-size: 1.4em;
    	line-height: 1.4em;
    	height: auto;
    	margin: 0px;
    	padding: 0px;
    	font-weight: bold;
    	color: #5CA605;
    	background: none;
    }
    a {
    	color: #78A515;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:visited {
    	color: #999;
    }
    a:hover, a:active {
    	background: none;
    	color: #679000;
    }
    blockquote {
    	border-left: 4px solid #3F3F3F;
    	padding: 0 10px;
    	margin: 0 0 0 10px;
    	font-style: italic;
    }
    code {
    	display: block;
    	padding: 10px;
    	color: #444E1F;
    	background: #F5F8E8;
    	font-size: 1.2em;
    	border-top: 2px solid #D0EC98;
    }
    p {
    	line-height: 1.4;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
      <div id="header">
        <div class="inner">
          <div class="left"> <a href="http://www.lifegoggles.com"><img id="pngfixband" src="http://www.lifegoggles.com/wordpress/wp-content/themes/cordobo-green-park-09-beta-09/images/logo1.png" alt="Life Goggles" height="58" width="262" /></a> </div>
          <div class="right valignmid1">
    	    <form method="post" action="http://www.feedblitz.com/f/f.fbz?AddNewUserDirect" class="valignmid2">
              <div>
    		  	<span class="valignmid2"><a href="http://feeds.feedburner.com/Lifegoggles" title="Subscribe to Life Goggles" rel="alternate" type="application/rss+xml"><img src="http://www.lifegoggles.com/images/feed-icon32x32.png" alt="" /></a></span>
                <input name="wmail" maxlength="255" type="text" value="" />
                <input name="feedid" type="hidden" value="141444" />
                <input name="submit" type="submit" value="Get FREE Updates!" />
              </div>
            </form>
          </div>
          <div class="middle">
            <h3>The Green
              <!--<script language="JavaScript1.1" src="http://www.lifegoggles.com/quotes.js"></script>-->
              Blog</h3>
          </div>
        </div>
      </div>
      <div id="nav">
        <div class="inner">
          <ul>
            <li><a href="http://www.lifegoggles.com">Home</a></li>
            <li><a href="http://www.lifegoggles.com/competitions/">Competitions</a></li>
            <li><a href="http://www.lifegoggles.com/articles/">Articles</a></li>
            <li><a href="http://www.lifegoggles.com/email-updates/">Email Updates & RSS</a></li>
            <li><a href="http://www.lifegoggles.com/archives/">Archives</a></li>
            <li><a href="http://www.lifegoggles.com/about/">About</a></li>
            <li><a href="http://www.lifegoggles.com/contact-us/">Contact/Advertise</a></li>
          </ul>
          <div class="right">
            <form method="get" action="http://www.google.co.uk/custom">
              <div>
                <input type="hidden" name="domains" value="Life Goggles" />
                <input type="text" name="q" size="15" maxlength="255" value="" />
                <input type="submit" name="sa" value="Search" />
                <input type="radio" name="sitesearch" value="" checked="checked" />
                <span>Web</span>
                <input type="radio" name="sitesearch" value="www.lifegoggles.com" />
                <span>This site</span>
                <input type="hidden" name="client" value="pub-1168336685536997" />
                <input type="hidden" name="forid" value="1" />
                <input type="hidden" name="channel" value="9275245989" />
                <input type="hidden" name="ie" value="ISO-8859-1" />
                <input type="hidden" name="oe" value="ISO-8859-1" />
                <input type="hidden" name="flav" value="0000" />
                <input type="hidden" name="sig" value="YjWcLXYL_xlovxqF" />
                <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" />
                <input type="hidden" name="hl" value="en" />
              </div>
            </form>
            <!-- SiteSearch Google -->
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>
    I've tried to apply those techniques, but it's throwing me because I need two inline elements - or floated(though I think that will break the centering)..

    I've tried a few things and just can't get this to center without floating and applying padding to the top of the elements until it's just right.

    I'd like to know more about the vertical-align method you've used, it's still pretty mystical to me at the moment.

    P.S. Why are you using XHTML 1.0 Transitional?
    I knew someone would pick that up pretty quick - Because the form was invalid without it that's why!
    It's what the site is currently running under, Don't worry I'm moving it to a strict doctype.

    Thanks,

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you've got there is a <div> that is acting like a table, then you've got a <form> that's acting like a table-cell inside it. What you need is two table-cells. The IE hack is more difficult to explain. I suggest you put contrasting background colors on each of the three classes to see what's happening.

    Remove this:
    Code:
    #header .right form, #header .right form div { width: 100&#37;; vertical-align: middle; }
    and remove the width:100% declaration from .valignmid2
    Add these:
    Code:
    #header .right img {
      vertical-align: bottom;
    }
    #header .right span {
      width: auto;
    }
    and do this:
    Code:
          <div class="right valignmid1">
                  <span class="valignmid2"><a href="http://feeds.feedburner.com/Lifegoggles" 
            title="Subscribe to Life Goggles" rel="alternate" class="valignmid3"
            type="application/rss+xml"
            ><img src="http://www.lifegoggles.com/images/feed-icon32x32.png" alt="" /></a></span>
    	    <form method="post" action="http://www.feedblitz.com/f/f.fbz?AddNewUserDirect" class="valignmid2">
              <div class="valignmid3">
                <input name="wmail" maxlength="255" type="text" value="" />
                <input name="feedid" type="hidden" value="141444" />
                <input name="submit" type="submit" value="Get FREE Updates!" />
              </div>
            </form>
          </div>
    and you'll need this for IE/Win:
    Code:
    <!--[if lte IE 7]><style type="text/css">
    .valignmid2 {
      top:50%;
      left:0;
      float: left;
    }
    .valignmid2 .valignmid3 {
      top:-50%;
      position:relative;
    }
    </style><![endif]-->
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •