Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, eu tenho um formulario de busca que ta me dando dor de cabeça, pois no FF,IE6 renderiza legal. Já no IE8 fica todo desformatado. Nem vi no ie7.
O que eu preciso é deixar o submit dentro do input (mesma maneira como aqui do forum, onde tem a imagem da lupa dentro do input) e abaixo deixar as minhas opções de radio button uma ao lado da outra.
vou postar meus códs.
css:
/ BUSCA /
* html, body {
margin:0;
padding:0;
border:none;
height:100%;
font:normal 0.8em/1.5 Tahoma, Arial, Helvetica, sans-serif;
color:#37352F;
background:#fff;
outline:none;
}
#buscador {
float:right;
width:35%;
margin-right:1%;
position:relative;
left:0;
top:2px;
color:#FFF;
font-size:11px;
text-align:center;
}
#search {
float:right;
height:auto;
padding:0;
margin:0;
width:auto;
border:none;
}background:#fff;
border:2px solid #333;
padding:5px 40px 5px 5px;
width:291px;color:#000;
}background:none;
border:0;
margin:7px 0 0 -26px;
padding:0;
width:auto;
position:absolute;
}border:none;
background:none;
width:auto;
vertical-align:middle;
margin-top:1px;
}pagina:
<div id="buscador">
<form method="post" id="searchform" action="#">
<fieldset id="search">
<input value="DIGITE A SUA BUSCA" onfocus="if (this.value == 'DIGITE A SUA BUSCA') {this.value = '';}" onblur="if (this.value == '') {this.value = 'DIGITE A SUA BUSCA';}" name="input_busca" id="input_busca" type="text" />
<input name="" src="lupa.jpg" value="Buscar" id="searchsubmit" class="btn" type="image" title="Buscar" />
<input type="radio" name="escolha" class="radio" value="1" id="1" /> opcao1
<input type="radio" name="escolha" class="radio" value="2" id="2" /> opcao2
<input type="radio" name="escolha" class="radio" value="3" id="3" /> opcao3
<input type="radio" name="escolha" class="radio" value="4" id="4" /> opcao4
<input type="radio" name="escolha" class="radio" value="5" id="5" /> opcao5
</fieldset>
</form>
</div>Peço ajuda de vocês pra deixar ele formatado em todos os navegadores...
Valeu.
só que o meu a lupa fica na direita e ela é o próprio botao de submit.
Uhhnn...
Você não pode fazer assim?
input#YourSubmit{
background: gray url([http://forum.imasters.com.br/public/style_images/imasters2010/search_icon.png](http://forum.imasters.com.br/public/style_images/imasters2010/search_icon.png)) no-repeat 0% 50%;
padding: 0 0 0 25px;
}bom consegui colocar a imagem lupa como back do input e colocar na esquerda.
Por mim não teria problemas de dar uma mudada no form.
Agora o que ta xaropiando é a posição do botão OK do submit que deve ficar ao lado do input e alinhado com ele.
Por último os meus radios buttons não estão ficando lado a lado.
Uhhnn... Desculpa, tinha entendido errado sua dúvida. :P
Tem um link só deste form? Não estou conseguindo renderizar muito bem aqui.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
é apenas um campo input e abaixo com 5 radio buttons de escolha
em 5min posto um link pra ele...
Engraçado, aqui no Google Chrome e Firefox não está sendo renderizado certo. Olhe:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img252.imageshack.us/img252/4678/imasters.png&key=44b20900b6599298d8c2ef57a40e6c894600f675444a3fe9b8c40517b70f826b" alt="Imagem Postada" />
Têm dois input em baixo também. Como está ficando aí?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
no ie8
/applications/core/interface/imageproxy/imageproxy.php?img=http://lh4.ggpht.com/_Ey7aj857FKg/SwMWjMfwSUI/AAAAAAAAADA/z3bGq6oPn9I/s640/erro-ie7.jpg&key=307cb6f3c711a94c6b352743484c81ff3213ec753bdc831c378a4c0204eadaa4" alt="Imagem Postada" />
no FF ultima versão
/applications/core/interface/imageproxy/imageproxy.php?img=http://lh6.ggpht.com/_Ey7aj857FKg/SwMWjL12AUI/AAAAAAAAADE/LwM46ejaiWA/s640/ff.jpg&key=8fab49d898083be981548f735a8310b3093d963ac62f41c3fd87491b3b924ed9" alt="Imagem Postada" />
Resumindo: São estes os meus problemas....
qual é a forma final que deseja em todos os navegadores
poste uma imagem
a forma é essa:
/applications/core/interface/imageproxy/imageproxy.php?img=http://lh5.ggpht.com/_Ey7aj857FKg/SwREyuD2iwI/AAAAAAAAADk/zN4nXPoM-pU/form.jpg&key=5b5d6cddb73915a5b329d9dc6f675efb199add49be8e2384cd2cf9ec0ed470a7" alt="Imagem Postada" />
Vamos lá: é necessário trabalhar com porcentagem? Eu, pessoalmente, não gosto de trabalhar com essa medida para toda a página.
Podia trabalhar com clear: both para que as opções sempre fiquem em baixo.
Trabalhe também com a tag label. ;)
Qual efeito que deseja? De um layout líquido?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
meu site ta alinhado a esquerda, nao precisa ser liquido pq ele tem width fixo.
tenho uma div 100% e 80px de altura. nela tenho um menu <ul><li> e ao lado é pra ficar essa busca.
Então trabalhe com pixels nessa parte da página, vai ter um melhor controle.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Use como background a imagem e ajusta com padding. É só analisar o código da própria busca do fórum.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif