Ir para conteúdo

POWERED BY:

Arquivado

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

mcarvalho11

Redirecionar arquivo CSS dependendo do Browser do Usuário

Por , em Desenvolvimento frontend

Recommended Posts

mcarvalho11    0

mcarvalho11
Postado

E ae pessoal!

 

Estou criando um site e quero que o mesmo utilize uma folha de estilo dependendo do navegador que o mesmo estiver utilizando! (vou crira um css para cada navegador)!

Sendo assim primeiro peciso criar um javascript que identifique qual é o navegador que o usuário esta utilizando e que a partir desta identificação, direcione qual a folha de estilo deve ser utilizada naquela situação!

 

Se alguém puder me dar este help!

 

Desde de já agradeço!!

 

Att

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
(vou crira um css para cada navegador)!

não faça isso amigo!

 

Qual a sua dificuldade ? e pq você acha q precisa disso ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

mcarvalho11    0

mcarvalho11
Postado

não faça isso amigo!

 

Qual a sua dificuldade ? e pq você acha q precisa disso ?

 

Bom na realidade é que me pareceu uma solução mais fácil!!

O site é em uma pagina só! Eu uso este script para movimentar o menu!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script> $(function(){ $(".1").click(function(){ $("html, body").animate({scrollTop:0},"fast"); }) ;}) </script>
<script> $(function(){ $(".2").click(function(){ $("html, body").animate({scrollTop:1200},"fast"); }) ;}) </script>
<script> $(function(){ $(".3").click(function(){ $("html, body").animate({scrollTop:2400},"fast"); }); }) </script>
<script> $(function(){ $(".4").click(function(){ $("html, body").animate({scrollTop:3600},"fast"); }); }) </script>

html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RSplay</title>
<link rel="stylesheet" href="css/template.css" type="text/css" />

<BODY onLoad=hidden()>
<script language="JavaScript">
<!--
function hidden(){document.body.style.overflow='hidden';}
//-->
</SCRIPT>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script> $(function(){ $(".1").click(function(){ $("html, body").animate({scrollTop:0},"fast"); }) ;}) </script>
<script> $(function(){ $(".2").click(function(){ $("html, body").animate({scrollTop:1200},"fast"); }) ;}) </script>
<script> $(function(){ $(".3").click(function(){ $("html, body").animate({scrollTop:2400},"fast"); }); }) </script>
<script> $(function(){ $(".4").click(function(){ $("html, body").animate({scrollTop:3600},"fast"); }); }) </script>

</head>

<body>


<div id="centro">

<div id="logoimg">
	<img src="images/logo.png" alt="RSplay" />
</div>

	<nav id="menu1">
		<ul>    
      			<li><a class="1" href="javascript:;">HOME</a></li> 
			<li><a class="2" href="javascript:;">PORTIFÓLIO</a></li>       	
       		<li><a class="3" href="javascript:;">SERVIÇOS</a></li>        	
       		<li><a class="4" href="javascript:;">CONTATO</a></li>        
		</ul>
   	</nav>

<div id="tela2">
   <a href="http://kifuzue.com.br" target="_blank" id="Kif"><img src="images/kifuzue.png" alt="Kifuzue" /></a>
   <h2>www.kifuzue.com.br</h2>

<p>Site da banda Kifuzue de São Leopoldo</p>

   <p> </p>



   <a href="http://selecaodafirma.com.br" target="_blank" id="sdf"><img src="images/sdf.png" alt="Kifuzue" /></a>

    <h2>www.kifuzue.com.br</h2>

<p>Site Seleção da Firma FC</p>

   <p> </p>

   <div id="logo3">
<img src="images/logo2.png" alt="RSplay2"/>
</div>

</div>

	<div id="menu2">
		<ul>
       		<li><a class="1" href="javascript:;">HOME</a></li> 
			<li><a class="2" href="javascript:;">PORTIFÓLIO</a> </li>       	
       		<li><a class="3" href="javascript:;">SERVIÇOS</a> </li>        	
       		<li><a class="4" href="javascript:;">CONTATO</a> </li>        
		</ul>          
	</div>

<div id="tela3">
<p> </p>
<h2>HOSPEDAGEM E DOMÍNIO</h2>

<p>Configuração de Hospedagem e <br />
Registro de Domínio </p>
<p> </p>
<p> </p>
<h2>CRIAÇÃO DE WEBSITES</h2>

<p>Desenvolvimento e Otimização de <br />
Websites persolizados </p>
<p> </p>
<p> </p>
<h2>IMAGENS E LOGOTIPO</h2>

<p>Criação de Logotipo e Logomarcas,<br />
edição de fotos e imagens digítais </p>

<div id="logo2">
<img src="images/logo2.png" alt="RSplay2"/>
</div>
</div>

<div id="menu3">

<ul>
       <li><a class="1" href="javascript:;">HOME</a></li> 
	<li><a class="2" href="javascript:;">PORTIFÓLIO</a> </li>       	
       <li><a class="3" href="javascript:;">SERVIÇOS</a> </li>        	
       <li><a class="4" href="javascript:;">CONTATO</a> </li>        
</ul>          
</div>

<div id="tela4">
<div id="menu4">

<ul>
       <li><a class="1" href="javascript:;">HOME</a></li> 
	<li><a class="2" href="javascript:;">PORTIFÓLIO</a> </li>       	
       <li><a class="3" href="javascript:;">SERVIÇOS</a> </li>        	
       <li><a class="4" href="javascript:;">CONTATO</a> </li>        
</ul>          
</div>



<div id="form">
<form action="http://www18.locaweb.com.br/scripts/FormMail.pl">
<input type=HIDDEN name="email" value="">
<input type=HIDDEN name="redirect" value="">
<input type=HIDDEN name="subject" value="Formuláro de Contato">
Nome:  <input name="Nome_Visitante" type="text" size="50"><br> <br>
E-mail: <input name="Email_Visitante" type="text"  size="49"><br> <br>
Comentários: <textarea name="Comentario" type="text" cols="50" rows="8" value="125"> </textarea>
<br> 
<br>
<button type="submit">Enviar</button>

</form>
</div>

<div id="logo4">
<img src="images/logo2.png" alt="RSplay2"/>
</div>

</div>
</div>


</body>

</html>

 

 

 

só que assim, to achando bem complicado posicionar as divs para que funcione em todos os navegadores!!

 

da uma olhada no css:

 

* { margin:0; padding:0; list-style:none; vertical-align:baseline; }

a:link, a:visited {text-decoration: none}
a:hover {text-decoration: underline; color: #f00}
a:active {text-decoration: none}

body {font-family: 'PT Sans', Verdana, Geneva, sans-serif; color: #fff; background: #070707; }
h2 {color: #8CB143; }
#centro {background:#212121; height: 4500px; width: 534px; position: absolute; Left: 30%;}

#logoimg {margin: 30% 0 0 0; padding: 0 0 0 5%;}
#menu1 { margin: -280px 0px 0px -150px;  text-align: left; font-size: 22px;	}
#menu1 ul li a {text-decoration: underline overline; text-decoration: none; color:#FFFFFF }
#menu1 ul li a:hover { color: #8DB143;}

#tela2 {margin: 900px 15px 0 -10px; padding:2% 2% 2% 2%; height: 520px; background:#070707; text-align: left; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
a#Kif img { border: 8px solid #1D1D1D; }
a#Kif:hover img { border: 8px solid #8DB143; }
a#sdf img { border: 8px solid #1D1D1D; }
a#sdf:hover img { border: 8px solid #8DB143; }
#menu2 { margin: -340px -150px 0px 0px; text-align: right; font-size: 22px;	}
#menu2 ul li a { text-decoration: underline overline; text-decoration: none; color:#FFFFFF }
#menu2 ul li a:hover { color: #8DB143;}
#logo3 {margin: -100px 0 0 400px ; padding: 0 0 0 2%;}

#tela3 {margin: 900px -10px 0 15px; padding: 10% 2% 2% 2%; height: 400px; background:#070707; text-align: right; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#logo2 {margin: 30px 500px 0 -10px ; padding: 0 0 0 5%;}
#menu3 { margin: -300px 0px 0px -150px; text-align: left; font-size: 22px;}
#menu3 ul li a {text-decoration: underline overline; text-decoration: none; color:#FFFFFF }
#menu3 ul li a:hover { color: #8DB143;}

#tela4 {margin: 900px 15px 0 -10px; padding: 50px; height: 400px; background:#070707; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
#form { margin: -180px 0px 0px 0px; }
#menu4 { margin: 100px -220px 0px 0px; text-align: right;font-size: 22px;}
#menu4 ul li a {text-decoration: underline overline; text-decoration: none; color:#FFFFFF}
#menu4 ul li a:hover { color: #8DB143;}

input {border:1px solid #8DB143; background:#8F8F8F;}
input:focus {background:#D1E1B0;}
textarea {background:#8F8F8F; border: 1px solid #8DB143; font-family: 'PT Sans', Verdana, Geneva, sans-serif; font-size:11px; width:430px; height:200px;} 
textarea:focus {background:#D1E1B0;}
#logo4 {margin: -30px 0 0 380px; }

button {
width:96px;
height:43px;
background-image:url(images/bt.png);
}

O que você acha?

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo2605    10

marcelo2605
Postado

Tente usar um reset.css. Eu uso este

 

Fazer um CSS para cada navegador não é produtivo. Se a sua página está diferente em cada navegador é porque tem alguma coisa de errado com o seu código.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito