Sent by Bill Brown on 26 June 2008 12:12
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.
>
> CSS:
>
> .globalheader {
> width: 780px;
> height: 193px;
> }
> .globalheader input{
> vertical-align: bottom;
> }
>
> HTML:
>
> <div class="globalheader" style='background-image:
> url("${createLinkTo(dir:'images',file:'header.png')}")'>
> <input value="enter an address here" size="50" name='searchaddress'/>
> <input name="search" value="GO FIND IT!" type="submit">
> </div>
>
> 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
Hi Fred,
Something like .globalheader{background-position:0 100%;} MIGHT be
helpful but it's difficult to tell exactly what you're looking for here.
Do you have a real-world URL we can look at? I'm assuming that's NOT the
actual HTML source you're using...no <form> element...no <labels> around
or connected to the inputs...no <fieldsets>. That in and of itself could
be a source of some trouble. No way of knowing for sure.
Certain DOCTYPEs will let you get away with this, but without an actual
example /in context/, it's hard to give you a real concrete answer.
Bill Brown
TheHolierGrail.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
