Th3Alchemist 1 Denunciar mensagem Publicado 5 de Janeiro de 2012 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 Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
HappyHippyHippo 1185 Denunciar mensagem Publicado 5 de Janeiro de 2012 com o input a width 100% nunca conseguirar por isso da forma como pretendes IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
mjamado 42 Denunciar mensagem Publicado 5 de Janeiro de 2012 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. Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
clera 4 Denunciar mensagem Publicado 5 de Janeiro de 2012 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.... Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
mjamado 42 Denunciar mensagem Publicado 5 de Janeiro de 2012 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. Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
taviroquai 57 Denunciar mensagem Publicado 5 de Janeiro de 2012 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> Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
clera 4 Denunciar mensagem Publicado 5 de Janeiro de 2012 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. Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
HappyHippyHippo 1185 Denunciar mensagem Publicado 5 de Janeiro de 2012 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 ... IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
taviroquai 57 Denunciar mensagem Publicado 5 de Janeiro de 2012 tambem me parece que é preciso a div, que dê a margem para o input ficar com width a 100%.. É isso clera... basta aquela div... Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
mjamado 42 Denunciar mensagem Publicado 5 de Janeiro de 2012 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. Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
Th3Alchemist 1 Denunciar mensagem Publicado 5 de Janeiro de 2012 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 Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
mjamado 42 Denunciar mensagem Publicado 5 de Janeiro de 2012 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. Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
taviroquai 57 Denunciar mensagem Publicado 5 de Janeiro de 2012 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> Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites
Th3Alchemist 1 Denunciar mensagem Publicado 6 de Janeiro de 2012 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á! Partilhar esta mensagem Ligação para a mensagem Partilhar noutros sites