Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Henriquebrq

Botoes

Recommended Posts

Existe algum geito fazer uma botao por css que fique bom tanto no ff opera e ie?

 

.botao {   display:block; font:8px arial;color:#000;text-decoration:none;background:#FBF9FA;border:1px solid #eee;height: 20px;width: 50px;}  .botao:hover { background:#fff;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, mas uma vez você não tá sendo nada claro. Escreva melhor suas dúvidas.Bom, caso você esteja usando float e o float esteja sobre outra div. É só você usar o clear:both (ou left ou right) no div que tá por baixo.Caso sejam divs com posicionamento absoluto, use o z-index.Seja mais claro, senão não há como ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

o clear no internet explorer funciona mas no ff e no opera nao sobrepoe as outras divsex: Estou listando um conteudo e la em baixo tem o rodapé , o rodapé no ie fica la em baixo até ai belezamas no ff e no opera fica por cima do conteudo ele nao abaixa junto com o conteudo fica em cima?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, seeempre usei o clear both e sempre funcionou no IE e FF (são os browsers que eu testo).Leia os artigos que estão pendurados neste fórum (os do pa_bruno) com bastante atenção que você achará o que quer...Mas eu sempre uso o clear both e meu rodapé abaixa belezão junto com o conteudo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Da uma olhadinha

 

[

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>		<link rel="STYLESHEET" type="text/css" href="/meu/css/orca.css" /><title>::::</title>	<meta http-equiv="Content-Type" con tent="text/html; charset=iso-8859-1"></head>	<body bgcolor="#CCCCCC"><div class="geral">   <div class="topo"> </div>  <div class="pesquisar"> 	<div> 	  <form name="form2" method="post" action="" >		<strong><font color="#B62821" size="2" face="Arial, Helvetica, sans-serif">Procurar 		no site </font></strong> 		<input name="textfield3" type="text" size="25" class=botao>		<input type="submit" name="Submit2" value="ok" class=caixa_texto>	  </form>	</div>  </div>  <div class="top2">top</div>  <div class="menu">menu</div>  <div class="lateral">lateral</div>  <div class="conteudo"> 	<div class="topico"> 	  <dl>		::Relação de Orçamentos Novos:: 	  </dl>	</div>	<div class="opcoes"> 	  <div class="pos"><a href="#" class="botao2">Adicionar Produto</a></div>	  <div class="pos"><a href="#" class="botao2">Alterar Produto</a></div>	  <div class="pos"><a href="#" class="botao2">Excluir Produto</a> </div>	  <div class="pos"><a href="#" class="botao2">Salvar Orçamento</a> </div>	</div>	<div class="texto"> 	  <div class="pos2">Produtos</div>	  <div class="pos2">Quantidade</div>	  <div class="pos2">Tipo</div>	  <div class="pos2">Preço</div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>	<div class="texto2"> 	  <div class="pos3"> <a href="#" class="botao3">		<input name="" type="checkbox" value="" />		</a></div>	  <div class="pos4"><a href="#" class="botao3">MP300</a></div>	  <div class="pos5"><a href="#" class="botao3">05</a></div>	  <div class="pos6"></div>	  <div class="pos7"><a href="#" class="botao3">Fosco</a></div>	  <div class="pos8"></div>	  <div class="pos9"><a href="#" class="botao3">R$:000,00</a></div>	</div>  </div>  <div class="rodape">Todos Direitos reservados a </div></div>			 		</body>	</html>

* { margin: 0; padding: 0; } /* Zerando as margens e preenchimentos de todas as tags */body { text-align: center; } /* definindo o alinhamento do texto para o centro */p { margin: 0 0 -5px 0; } /* definindo a margem dos parágrafos */.geral{		background-color:#ffffff;	width: 770px; 	margin: auto;	}.pesquisar{	text-align: right;	margin-top:5px;	background-color:#ffffff; 	height:20px;	width:770px;	}.botao{			 font-family:arial;			 background-color:#ffffff; 			 border: 1px solid #bbbbbb; 			 font-size:8pt;			 font-weight: bold;			 color: #000000;			 text-align:center;			 }.caixa_texto{			 font-family:arial;			 background-color:#ffffff; 			 border: 1px solid #bbbbbb; 			 font-size:6pt;			 font-weight: bold;			 color: #000000;			 text-align:center;					  }	.top2{	background-color:#eeeeee;/*top*/	height:50px;	width:770px;	float:left;	}.menu{	background-color:#eeeeee;	height:350px;	width:70px;	float:left;	}.lateral{	background-color:#eeeeee;	height:350px;	width:70px;	float:right;	}.conteudo{  		background-color:#eeeeee;	height: 350px;	width: 630px;	float:left;					}.topico{			 font-family:arial;			 background-color:#cccccc; 			 font-size:12pt;			 font-weight: bold;			 color: #000000;			 text-align:left;			 height: 20px;			 width: 630px;					  }			  			  .botao2{   display:block;font:11px arial;color:#777;text-decoration:none;background-color:#FBF9FA;border:1px solid #eee;height: 20px;width: 130px;padding:0px 0px 0px 0px;} .botao3{   display:block;font:11px arial;color:#777;text-decoration:none;background-color:#FBF9FA;border:1px solid #eee;height: 20px;width: 630px;padding:0px 0px 0px 0px;}  .botao2,.botao3:hover { background-color:#ffffff;height: 20px;width: 130px;}.botao3:hover { background-color:#ffffff;height: 20px;width: 630px;}.opcoes{ float:left;height: 25px;width: 630px;background-color:#eeeeee;}.pos{ float:left;margin-right:20px;height: 20px;width: 130px;background-color:#fff;  }.texto{ float:left;height: 20px;width: 630px;background-color:#F9FAFB;}.pos2{ font-family:arial;font-size:13pt;font-weight: bold;color: #000000; float:left;height: 20px;width: 157px;background-color:#cccccc;  }.texto2{ font-family:arial;font-size:13pt;font-weight: bold;color: #000000; float:left;height: 20px;width: 630px;background-color:#F9FAFB;clear: both;}.pos3{float:left;text-align:center;padding-left:20px;  }.pos4{ padding-left:2px;margin-top:2px;text-align:left;font-family:arial;font-size:9pt;font-weight: bold;color: #000000;float:left;  }.pos5{ padding-left:140px;margin-top:2px;text-align:center;font-family:arial;font-size:9pt;font-weight: bold;color: #000000;float:left;}.pos6{ padding-top:2px;text-align:center;font-family:arial;font-size:9pt;font-weight: bold;color: #000000;float:left;}.pos7{ padding-left:142px;margin-top:2px;text-align:center;font-family:arial;font-size:9pt;font-weight: bold;color: #000000;float:left;}.pos8{ padding-top:2px;text-align:center;font-family:arial;font-size:9pt;font-weight: bold;color: #000000;float:left;}.pos9{ padding-left:115px;margin-top:2px;text-align:center;font-family:arial;font-size:9pt;font-weight: bold;color: #000000;float:left;}.rodape{	clear: both;	font-family:verdana;	text-align:center;	font-size:8pt; 	font-weight:bold;	color:#cccccc;	background-color:#ffffff;	height:20px;	width:630px;		}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, eu não costumo ficar estudando código pra entregar pronto de mão beijada não (principalmente um código gigantesco que nem o seu). Rolava pelo menos de você resumir o código né? tirando aquele excesso de div de botão...É como uma assinatura que eu usava dizia: "Não dê o peixe (código pronto), ensine a pescar..."você leu os artigos? Aposto que não. Vá lá e leia (http://forum.imasters.com.br/index.php?showtopic=152734).Aí sim, caso não consiga, resuma seu código, poste ele aqui, que nós te auxiliaremos com ele.Espero que eu não tenha sido grosso, quero apenas ajudar...

Compartilhar este post


Link para o post
Compartilhar em outros sites

O problema está na classe conteudo e rodapé eu queria que o o conteudo nao sobrepuse-se um encima do outro.To ferrado se não conseguir fazer isto hoje da uma mao ai?Esses tutoriais eu ja li e nao consigo achar o meu problema

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tá ok cara, vou abrir uma excessão. Perae que to olhando.Editado: Cara, to vendo que você tá confundindo um pouco as coisas. A filosofia tableless não significa a exclusão total de tabelas de seu código, mas a sua utilização nos locais apropriados (dados tabulares). você não precisa ter medo de tabelas.Pelo que percebi (não sei se estou certo), você queria fazer tipo uma lista de produtos e preços, é isso?Caso seja isso: NÃO TENHA MEDO DE TABELAS pois isto é um dado Tabular.você também não precisa ficar criando mil classes com vários atributos/propriedades parecidas. Utilize o agrupamento de propriedades (pesquise aqui no fórum).Seu código está muito sujo e desorganizado. Aconselho que o refaça completamente, se possível usando tabelas onde deve ser usado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só que ja fiz issso e ai agora fica dificil eu achei melhor por que depois irei colocar php neles por tabelas tb dava só que agora ja o fiz então Mas voce nao achou o problema né?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se você fizer com tabelas fica muito mais fácil que corrigir.Como ví que no caso de eu te entregar o código pronto não ajudaria em nada no seu aprendizado, preferí não fazer e te aconselhar a fazer em tabelas (este fórum é pra aprendizado e não pra achar webmasters que trabalham de graça. heheh)Eu lí e achei VÁRIOS problemas. Até que começei a alterar, mas o trabalho seria gigantesco. Então é melhor fazer em tabelas.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como fazer na tabela do geito que esta ai

Cara, pra você fazer em tabelas é só você pegar seu conteúdo e ir jogando dentro das TR's e TD's... O básico do básico do html uai...Erros que ví:- Acredito que as classes "textoX" não precisariam ter float left- os botões não precisariam ter paddings de Vários píxels...Cara, siga meu conselho. Apague aquela coleção de Divs, apague propriedades de posicionamento das suas classes (position,float,etc) e faça uma tabelinha simples (pode ser no dreamweaver mesmo) é rápido e fácil...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim a tabela eu sei fazer como é que eu faço para quando eu passe o mouse por cima va mudando de cor que nem eu fiz ali?

Erros que ví:- Acredito que as classes "textoX" não precisariam ter float left

E como faria para alinhar na horizontal as divs que estão dentro ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

E como faria para alinhar na horizontal as divs que estão dentro ?

As 'divs que estão dentro' é que devem ter o float left.

como é que eu faço para quando eu passe o mouse por cima va mudando de cor que nem eu fiz ali

- Para navegadores que seguem padrões w3c você usa pseudo elemento :hover (o mesmo que se usa em links)- Pra navegadores que não suportam o :hover (leia IE) use java script:onmouseover="this.style.backgroundColor:vlavlvlav" onmouseout="this.style.backgroundColor:corantiga"

Compartilhar este post


Link para o post
Compartilhar em outros sites

Qual é op certo

As 'divs que estão dentro' é que devem ter o float left.

Eu colocar float:left uma unica vez ?Eu deixo meu codigo css mais organizado se pegar as propriedades text entr outras e ir alinhado?E as divs devo usar menus possivel?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.