Alinhar input field e botão

[Th3Alchemist]

Boas!

Estou a tentar alinhar um botão para pesquisar o que se encontra na input ao lado... Gostava que esse botão ficasse ao lado direito da input form, de forma:

O botão terá uma largura estática;

O input + botão partilham uma largura de 100%

Ou seja, ao redimensionar a largura da página, somente o input mudará de tamanho, mas mantendo o botão sempre ao lado direito dele...

http://img88.imageshack.us/img88/8546/capturadeecraem20120105.png

Tentei várias coisas mas acabei por limpar tudo... O código que tenho é este:

<div style="text-align: center; width: 100%;">
     <input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
     <input type="button" class="botaovms" value="Procurar" onclick="codeAddress()" />  
</div>

 

Agradecia ajuda

[HappyHippyHippo]

com o input a width 100% nunca conseguirar por isso da forma como pretendes

[mjamado]

com o input a width 100% nunca conseguirar por isso da forma como pretendes

Esse é o primeiro passo, remover essa largura do input. Já agora, o div também não precisa (em teoria, os div ocupam sempre 100%).

Mas o resto é fácil: basta dares posicionamento absoluto aos input e jogar com os left e right de cada um até ficarem alinhadinhos.

<div>
     <input id="address" type="text" value="Rua, Cod. postal, Localidade" style="position: absolute; left: 0px; right: 60px;" />
     <input type="button" class="botaovms" value="Procurar" onclick="codeAddress()" style="position: absolute; right: 0px;" />  
</div>

[clera]

sim mas depois para teres o input do tamanho total menos o botão ainda são precisas algumas divs pelo meio para fazer a manha..

é por estas e por outras que deviam ser possiveis variaveis no css....

[mjamado]

sim mas depois para teres o input do tamanho total menos o botão ainda são precisas algumas divs pelo meio para fazer a manha..

Não, não são. O código que eu coloquei funciona por si só.

é por estas e por outras que deviam ser possiveis variaveis no css....

É possível fazer cálculos em CSS (3), mas só é suportado no IE 9+ e Firefox 4+. Mas, no geral, é má ideia (os cálculos, devido à sua própria natureza transitória, são reavaliados a cada mudança no estado do browser, desde resizes a scrolls).

[taviroquai]

Só consegui assim...

<div>
<div style="margin: 0 110px 0 0;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
</div>
<div style="float: right; position: relative; top: -23px; width: 90px;">
	<input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>
</div>

Ou sem floats...

<div style="position: relative;">
<div style="margin: 0 110px 0 0;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
</div>
<div style="position: absolute; right: 0; top: 0; width: 90px;">
	<input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>
</div>

[clera]

Não, não são. O código que eu coloquei funciona por si só.

Só consegui assim...

<div>
<div style="margin: 0 110px 0 0;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
</div>
<div style="float: right; position: relative; top: -23px; width: 90px;">
	<input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>
</div>

tambem me parece que é preciso a div, que dê a margem para o input ficar com width a 100%..

de qualquer forma ja tinha experimentado o teu codigo @mjamado, e não funcionava..

É possível fazer cálculos em CSS (3), mas só é suportado no IE 9+ e Firefox 4+. Mas, no geral, é má ideia (os cálculos, devido à sua própria natureza transitória, são reavaliados a cada mudança no estado do browser, desde resizes a scrolls).

com scrolls, tirando casos particulares não é preciso fazer calculos nenhums..agora com resizes sim, o que normalment faço é tratar disso com javascript.. e para não subrecarregar tanto, em certos casos, utilizo um timer, para refazer os calculos apenas passados x millisegundos de ter havido um resize.

[HappyHippyHippo]

com scrolls, tirando casos particulares não é preciso fazer calculos

ai, ai ... estas a pensar so na horizontal,

e a vertical ?? basta pensar nos sticky footers ...

[taviroquai]

tambem me parece que é preciso a div, que dê a margem para o input ficar com width a 100%..

É isso clera... basta aquela div...

[mjamado]

Argh! :buck2: Essas div a mais não são semânticamente relevantes...

Só o Chrome é que respeita correctamente o meu código - esqueci-me que os outros browsers dependem do valor do atributo size para definirem uma largura aos input...

com scrolls, tirando casos particulares não é preciso fazer calculos nenhums..agora com resizes sim, o que normalment faço é tratar disso com javascript.. e para não subrecarregar tanto, em certos casos, utilizo um timer, para refazer os calculos apenas passados x millisegundos de ter havido um resize.

Eu não estou a dizer se é preciso ou não; estou a dizer que os browsers que o suportam reavaliam as expressões de calc quando existem resizes ou scrolling.

Mas são raríssimos os casos onde isso é preciso. Na esmagadora maioria das vezes, CSS chega.

[Th3Alchemist]

OK pessoal, muito obrigado.

mjamado, o teu código funcionou bem, tive somente que fazer uns ajustes nas margens.

                <div>
                    <div style="margin: 0 110px 0 0;margin-right: 80px;">
                        <input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
                    </div>
                    <div style="float: right; position: relative; right: -20px; top: -26px; width: 90px;">
                        <input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
                    </div>
                </div>

 

http://img15.imageshack.us/img15/8546/capturadeecraem20120105.png

[mjamado]

OK pessoal, muito obrigado.

mjamado, o teu código funcionou bem, tive somente que fazer uns ajustes nas margens.

O que usaste é do taviroquai, a mim mete-me fastio por causa do uso de elementos sem significado semântico.

Eu teria usado o atributo contenteditable de um span, ou algo do género, para atingir o mesmo efeito.

[taviroquai]

Também não gosto da div ali mas... resolve.

Como o clera disse... basta 1 div à volta do input[text]... experimenta assim, sem floats:

<div style="position: relative;">
<div style="margin-right: 80px;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%; margin-right: 110px;" />
</div>
<input style="position: absolute; right: 0; top: -1px; width: 90px;" type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>

[Th3Alchemist]

O que usaste é do taviroquai, a mim mete-me fastio por causa do uso de elementos sem significado semântico.

Eu teria usado o atributo contenteditable de um span, ou algo do género, para atingir o mesmo efeito.

Descupla pelo meu engano, agradeço aos dois, testei ambos os códigos e ambas funcionem bem para o meu problema.

Também não gosto da div ali mas... resolve.

Como o clera disse... basta 1 div à volta do input[text]... experimenta assim, sem floats:

<div style="position: relative;">
<div style="margin-right: 80px;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%; margin-right: 110px;" />
</div>
<input style="position: absolute; right: 0; top: -1px; width: 90px;" type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>

Quando puder experimento isso... Obrigado desde já!