Re: [css-d] How to align vertically some elements inside a DIV with a background image?

[Bill Brown]

Fred Janon wrote:
> I want to align a text input and a button with the bottom of a background
> image. Basically the image has the space for the input and button at the
> bottom. My HTML & CSS show the text input and button superimposed with the
> background image, but at the top.
> 
[snip]
> I know that "vertical-align: bottom" is valid only within an inline element
> but I can't figure out what to use. I tried to use a SPAN instead of a DIV
> but then the image size is not applied anymore.
> I also use the YUI CSS files 'reset-fonts.css' and 'base-min.css' but I
> don't think it's relevant here.
> 
> Thanks for your help.
> 
> Fred

Fred:

You might also try something like this:
<style type="text/css">
.globalheader {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 50% 0;
  width: 780px;
  height: 193px;
  position: relative;
  }
.globalheader form {
  border:0;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  }
.globalheader fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  }
.globalheader legend {
  display: none;
  }
</style>
<div class="globalheader" style='background-image:
url("http://www.google.com/intl/en_ALL/images/logo.gif";)'>
  <form method="get" action="">
    <fieldset><legend>Search</legend>
       <label for="searchaddress"><input value="enter an address here"
                                         size="50"
                                         id="searchaddress"
                                         name="searchaddress"/></label>
       <input value="GO FIND IT!" type="submit" name="search"/>
    </fieldset>
  </form>
</div>

Hope it helps.
Bill


-- 
/**
 * Bill Brown
 * TheHolierGrail.com & MacNimble.com
 * From dot concept...to dot com...since 1999.
 ***********************************************/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/