Jump to content

Alinhar input field e botão


Th3Alchemist
 Share

Recommended Posts

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

Link to comment
Share on other sites

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>

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

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).

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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á!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.