Ir para conteúdo

POWERED BY:

Arquivado

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

Kurosaki

Não centraliza no IE nem com o macete

Por , em Desenvolvimento frontend

Recommended Posts

Kurosaki    0

Kurosaki
Postado

Olá pessoal, já fiz um tópico aqui com uma dúvida do mesmo site mas já resolvi, agora o problema é o seguinte: mesmo usando o truque do text-align:center; na tag body o site não centraliza de jeito nenhum no IE, o site é esse:

 

http://www.otakumaster.com.br/portal/

 

como vocês podem ver abrindo no IE ele fica jogado lá pra direita, já no FF ele fica centralizado certinho, alguem ai por favor da uma revisada no código e me diz onde errei :wacko:

 

style.css

 

body {
	font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #325E89;
	background:url(image_rec/back.jpg) no-repeat;
	background-color:#225EA4;
	text-align:center;
}

a:link {
	color: #1E68BD;
}
a:visited {
color: #1E68BD;
}
a:hover {
	color: #B5B5B5;
}
a:active {
color: #1E68BD;
}

#all {
	margin: 0 auto;
	width: 1075px;
}

#central {
	position: absolute;
	top: 0%;
}
#apDiv1 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: 30px;
}

#canto1 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: 0px;
	top: 0px;
}

#img_random {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: 528px;
	top: 0px;
}
#publicidade_banner1 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: 61px;
	top: 254px;
}
#apDiv4 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: 1px;
	top: 254px;
}
#apDiv5 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: 61px;
	top: 314px;
}
#apDiv6 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	top: 326px;
	left: 51px;
}
#apDiv7 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
#bancada {
	position:absolute;
	background-image:url(image_rec/back_banc.jpg);
	width: 919px;
	z-index:1;
	left: 89px;
	top: 327px;
}
#tudo {
	width: 919px;
	background-image:url(image_rec/back_banc.jpg);
}

#topo {
	width: 919px;
	height: 9px;
	background-color: #ff0;
}

#espaco1 {
	float: left;
	width: 22px;
}

#menu1 {
	float: left;
	width: 176px;
	background-image:url(image_rec/back_menu1.jpg);
}

#menu2 {
	float: left;
	width: 141px;
	background-image:url(image_rec/back_menu1.jpg);
}

#destaque {
	float: left;
	width: 152px;
	height: 140px;
}

#espaco2 {
	float: left;
	width: 25px;
}

#espaco3 {
	float: left;
	width: 42px;
}

#roll {
	float: left;
	width: 343px;
	height: 132px;
	background-image:url(image_rec/projeto1rec_r6_c17.jpg);
}

#livre {
	float: right;
	width: 512px;
	height: 100%;
}

#news {
	float: right;
	width: 512px;
	height: 100%;
	text-align: left;
}

#rodape {
	width: 919px;
	height: 191px;
	background-color: #ccf;
	clear: both;
}
#apDiv2 {
	position:absolute;
	left:990px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
}

#partners a img {opacity: 0.30; /* Safari, Opera and Mozilla */ filter: gray() alpha(opacity=30);}
#partners a:hover img {opacity:1; filter: alpha(opacity=100);}

#menu ul {
	float: right
	background-color: #E4E4E4;
	margin: 0px;
	list-style-type: none;
	width: 145px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 20px;
}

#menu ul li {
height: 20px; /* define uma altura de 20px */
width: 100%; /* define a largura como 100% */
margin-bottom: 5px; /*define a margem inferior para 5px */
border: 1px solid #DFDFE3; /* define as bordas */
} #menu ul li a:hover { /* estado hover */
color: #999999;
text-decoration: none;
height: 18px;
width: 130px;
background-color: #DFDFE3;
display: block;
}

#menu ul li a:active { /* estado ativado */
color: #999999;
text-decoration: none;
height: 18px;
width: 130px;
display: block;
}

#menu ul li a:link { /* estado normal */
	color: #3777B4;
	text-decoration: none;
	height: 18px;
	width: 130px;
	display: block;
}

#menu ul li a:visited { /* estado visitado */
	color: #3576B0;
	text-decoration: none;
	height: 18px;
	width: 130px;
	display: block;
}

#menu ul li a { /*define os espaçamentos*/
padding-top: 3px;
padding-left: 15px;
}
#apDiv8 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	left: -55px;
	top: 123px;
}
#apDiv9 {
	position:absolute;
	left:135px;
	top:117px;
	width:144px;
	height:95px;
	z-index:1;
	text-align: right;
}
#apDiv10 {
	position:absolute;
	left:302px;
	top:51px;
	width:106px;
	height:151px;
	z-index:1;
	text-align: left;
}

 

 

index.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: OtakuMaster 2.0 :: Seu jeito otaku de ser! - Notícias do mundo Otaku - MP3 - Animes - Downloads </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="all">


<div id="central">

  <div id="apDiv1">
  <img src="image_rec/projeto1rec_r1_c2.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="12,137,23,119,67,147,58,166" href="#" />
  <area shape="poly" coords="32,76,47,58,98,111,88,124" href="#" />
  <area shape="poly" coords="86,30,106,22,140,77,122,86" href="#" />
</map>  
</div>
<div id="apDiv10">
<!-- INICIO DO CODIGO DA ENQUETE -->
<script language="JavaScript">
<!--
function Abre(url, width, height)
{
window.open(url,"_blank","resizable=yes,toolbar=no,status=no,menubar=no,scrollbars=yes,width=" + width + ",height=" + height)
}
function Fun_Enviar(formID)
{
	var formularios = document.forms.length;
	for(i=0;i<formularios;i++)
		{
		if(document.forms[i].name==formID)
		{
		var formulario = i;
		break;
		}
	}
	var num_respostas = document.forms[formulario].opcao.length;
	var resposta = num_respostas;
	var respostas = "";
	for(i=0;i<num_respostas;i++)
		{
		if(document.forms[formulario].opcao[i].checked)
			{
			resposta = i;
			if(respostas)
			{
				respostas=respostas + "&";
			}
			else
			{
				respostas=respostas + "?";
			}
			respostas=respostas + "opcao=" + document.forms[formulario].opcao[i].value;
		}
	}
	if(resposta==num_respostas)
	{
	alert("Uma opção deve ser escolhida!");
	}
	else
	{
	Abre("http://www.enquetes.com.br/enquete.asp" + respostas,400,340);
	}
}
//-->
</script>

<form name=frm791025>
<B>Você prefere animes de:</B><BR>
<input type="checkbox" name="opcao" value="4267188">Ação<br>
<input type="checkbox" name="opcao" value="4267189">Drama<br>
<input type="checkbox" name="opcao" value="4267190">Romance<br>
<input type="checkbox" name="opcao" value="4267191">Ficção<br>
<input type="checkbox" name="opcao" value="4267192">Comédia<br>
<input type="checkbox" name="opcao" value="4267193">Terror<br>
<input type="hidden" name="id" value="791025">

<b><a href="java script:Fun_Enviar('frm791025')">Votar|</a></b><a href="java script:Abre('http://www.enquetes.com.br/enquete.asp?id=791025',400,350)"> resultado</a>
</form><br>
<!-- FIM DO CODIGO DA ENQUETE -->


</div>
<div id="apDiv9">
[17/03] Asian Kung-fu Gen...
<br />
[16/03] True Tears - Lanç...
<br />
[15/03] Afro Samurai - Co...
<br />
[14/03] Midori no Hibi - ...
<br />
[13/03] Saint Seiya - Cha...
<br />
[11/03] Gundam 00

</div>
  <div id="canto1"><img src="image_rec/canto1.png" /></div>
<div id="img_random">
<img src="image_rec/projeto1rec_r1_c16.jpg" border="0" />
<div id="apDiv3"><img src="image_rec/button_otm2.gif" /></div>
</div>
  <div id="publicidade_banner1"><img src="image_rec/bannerotm2.jpg" width="468" height="60" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="5,4,464,55" href="http://www.otakumaster.com.br" target="_blank" /></map></div>
	<div id="apDiv4">
	<img src="image_rec/projeto1rec_r2_c2.png" /></div>
<div id="apDiv5"><img src="image_rec/projeto1rec_r3_c3.jpg" />		   
  </div>
	<div id="apDiv2">
	  <div id="apDiv8"><img src="image_rec/button_otm2.gif" width="88" height="31"/></div>
	<img src="image_rec/projeto1rec_r1_c20.png" /></div>
		  <!---bancada--->
<div id="bancada">
<div id="tudo">


	<div id="topo"><img src="image_rec/projeto1rec_r4_c4.jpg" /></div>
	
	<div id="espaco1"> </div>
	
	<div id="menu1">
	  <div align="justify"><img src="image_rec/projeto1rec_r5_c7.jpg" /></div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Equipe</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Comunidade</a></li>
<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Postar News</a></li>
<li><a href="#">Publicidade</a></li>
<li><a href="#">Parceria</a></li>

</ul>
</div>
<br /><br />
	  <img src="image_rec/projeto1rec_r10_c7.jpg" />
<br />
<div id="menu">
<ul>
<li><a href="#">Animes</a></li>
<li><a href="#">Especiais/OVAs</a></li>
<li><a href="#">Filmes</a></li>
<li><a href="#">Mangás</a></li>
<li><a href="#">Tokusatsus</a></li>
<li><a href="#">AMVs</a></li>
<li><a href="#">Design/Acessórios</a></li>
<li><a href="#">Músicas</a></li>

</ul>
</div>
<br /><br />
<img src="image_rec/projeto1rec_r15_c7.jpg" />
<br />
<div id="menu">
<ul>
<li><a href="#">Animes</a></li>
<li><a href="#">Tokusatsus</a></li>
</ul>
</div>
<br /><br />
<img src="image_rec/projeto1rec_r19_c7.jpg" />
<br />
<div id="menu">
<ul>
<li><a href="#">Rapidshare</a></li>
<li><a href="#">Badongo</a></li>
</ul>
</div>
<br />
 
	  <div align="justify"><img src="image_rec/projeto1rec_r21_c6.jpg" /></div>
	  <div align="justify"><img src="image_rec/brancom1.jpg" /></div>
	  <div align="justify"><img src="image_rec/projeto1rec_r23_c7.jpg" /></div>
 <br />
<a href="http://the4elemtsfamily.forumeiros.com/portal.htm" target="_blank">4 Elements family</a><br />
<a href="http://animemangaetvpaga.blogspot.com/" target="_blank">Anime, Mangá & TV </a><br />
<a href="http://www.slamdunk.suprasolucoes.com/" target="_blank">Slam Dunk </a>
<br />
 
	  <div align="justify"><img src="image_rec/projeto1rec_r21_c6.jpg" /></div>	 
	  <div align="justify"><img src="image_rec/brancom1.jpg" /></div>
	  <div align="justify"><img src="image_rec/projeto1rec_r27_c7.jpg" /></div>
	      Soon
	  <br />
 
	  <div align="justify"><img src="image_rec/projeto1rec_r21_c6.jpg" /></div>
	  </div>
	
	<div id="espaco2"> </div>
		<div id="menu2">
		<div align="justify">
		<img src="image_rec/projeto1rec_r5_c10.jpg"/></div>
		<div id="partners">
<br />
<a href="http://www.mp3.animaniaclub.com.br" target="_blank"><img src="http://www.mp3.animaniaclub.com.br/images/bt_parceiros.gif" alt="AMC" width="88" height="31" border="0" /></a>
<br />
<a href="http://www.dragonballbrasil.com.br" target="_blank"><img src="http://www.dragonballbrasil.com.br/img/layout/versao2006/botao2.gif" alt="Dragon Ball Brasil" width="88" height="31" border="0" /></a>
<br />
<a href="http://www.jrock.animaniaclub.com.br/" target="_blank"><img src="http://www.jrock.animaniaclub.com.br/images/bt_jrock.gif" alt="Jrock AMC" width="88" height="31" border="0" /></a>
<br />
<a href="http://www.negimadaisuki.com/" target="_blank"><img alt="negima" src="http://www.otakumaster.com.br/negidaisui.jpg" border="0"></a>
<br>
<a href="http://www.dbzgtl.com" target="_blank"><img alt="negima" src="http://www.dbzgtl.com/dbzgtl.gif" border="0"></a><br>
<a href="http://bruthais.myutsu.net/" target="_blank"><img alt="Bruthais fansubus" src="http://www.otakumaster.com.br/bruthaissub_parceiro.gif" border="0"></a>
<br>
<a href="http://www.tnnac.net/" target="_blank"><img alt="TNNAC Fansub" src="http://www.otakumaster.com.br/images/tnnac-button2.gif" border="0"></a>
<br>
<a href="http://www.tnnac.net/" target="_blank"><img alt="Central de Animes" src="http://centraldeanimes.com.br/cdalg.gif" border="0"></a>
<br>
<a href="http://www.jam-station.com/" target="_blank"><img height="31" alt="Jam Station" src="http://www.jam-station.com/anuncios/jambutton.jpg" width="88" border="0"></a>
<br>
<a href="http://www.tboa.com.br" target="_blank"><img alt="TBoA - The Best of Anime" src="http://www.tboa.com.br/banners_parcerias/banner_88x31.gif" border="0"></a>
<br>
<a href="http://z3.invisionfree.com/Rede_RPG/index.php" target="_blank"><img height="31" alt="Rede RPG" src="http://img118.imageshack.us/img118/9816/buttonprincipalnf8.gif" width="88" border="0" longdesc="http://z3.invisionfree.com/Rede_RPG/index.php"></a>
<br>
<a href="http://www.clananima.com/" target="_blank"><img height="31" alt="Clan Anima" src="/clan.gif" width="88" border="0"></a>
<br>
<a href="http://www.animesenergy.com/" target="_blank"><img height="31" alt="animesenergy" src="http://www.animesenergy.com/botaoae.gif" width="88" border="0" longdesc="http://www.animesenergy.com"></a>
<br>
<a href="http://www.hentaiconnection.kit.net/" target="_blank"><img height="31" alt="Hentai Connection" src="http://www.hentaiconnection.kit.net/button.gif" width="88" border="0" longdesc="www.hentaiconnection.biz"></a>
<br />
<a href="http://www.eomteam.com/" target="_blank" ><img src="http://www.eomteam.com/images/banner/banner_palacio_88x31.gif" alt="Portal Eom Team" width="88" height="31" border="0" /></a>
<br />
<a href="http://www.meta-ro.com/" target="_blank"><img src="http://www.meta-ro.com/banners/88x31.gif" alt="Meta-Ro" border="0" /></a><br />
<a href="http://www.dragonaut-br.com/" target="_blank"><img src="http://www.dragonaut-br.com/buttons/2.gif" alt="Dragonaut-br" border="0" /></a>
<br />
<a href="http://www.sailormoon-portugal.pt.vu/" target="_blank"><img src="http://samuelleca.no.sapo.pt/smpt/imagens/banners/banner1.gif" alt="SailorMoon Portugal" border="0" /></a>
<br />
<a href="http://www.cosplayonegai.com/" target="_blank"><img src="http://www.cosplayonegai.com/co/imagem/botao2.gif" alt="Cosplay Onegai" border="0" /></a>
<br />
<a href="http://www.warezcompany.uni.cc" target="_blank"><img src="http://www.warezcompany.uni.cc/imagens/banner_button.gif" alt="Cosplay Onegai" border="0" /></a>
</div>
<br />
 
		<div align="justify"><img src="image_rec/projeto1rec_r12_c10.jpg" /></div>		  
	  </div>
	  <div id="espaco3"> </div>
	  <div id="destaque">
 <div align="justify"><img src="image_rec/projeto1rec_r5_c15.jpg" /></div>
 <div align="left">
 Inauguração

OtakuMaster: O mais novo site de Animes totalmente feito para os otakus!

Vagas abertas para uploaders! Entre em contato conosco! 
 </div>
	 
	  </div>
	  <div id="roll">
  
	  </div>
	  
<div id="livre" align="left">



</div>


<div id="news">

</div>




	 

	
	
	<div id="rodape"><img src="image_rec/projeto1rec_r34_c4.jpg" /></div>

</div>


  

</div>


</div>
</div>
</body>
</html>

----------------

Now playing: MAXIMUM THE HORMONE - Seiri Tsuu Ha Kannaduki Wo Koo

via FoxyTunes

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Bitencourt    0

Ronaldo Bitencourt
Postado

Kurosaki td bem?

 

cara seguinte vamos primeiro á algumas recomendações !!

 

Só olhando teui code já dá pra ver que do jeito que você estruturou seu CSS você vai ter problemas dessa espécie e muitos problemas por sinal !!

 

deixa eu ver se adivinhei.. no meio do caminho você teve muitos problemas com posicionamento e tenhp certeza nunca utilizou tanto uma calculadora quanto nesse layout estou errado ?

 

 

poisé cara um dos problemas é a utilização de posições absolutas.. tente ver isso.. eu particularmente só uso uma position:absolute;

quando quero que alguma div se sobreponha sobre outra !!!

 

outra coisa seu code por tentar fazer dentro dos padrões deixa muito a desejar como por exemplo

links sem a tag TITLE

imagens com LARGURA E ALTURA NA TAG DA IMAGEM E SEM O ATRIBUTO ALT

elementos block de elementos inline

 

enfim vendo teu code já se percebe alguns erros que só pelo proprio XHTML pode dar pau e renderizar de maneira indevida!!

 

 

minha dica é para melhorar seu XHTML use a WEB DEVELOPER e aperte ctrl+shift+H e tente começar a validar se naum valida tente arrumar erro por erro e ver oque a w3c diz sobre o problema ocorrido !!

 

fazendo isso você já vai ver seu mundo melhorar dia-a-dia

 

heehh abraço !!!

 

e bom trabalho esta no caminho !!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurosaki    0

Kurosaki
Postado

obrigado pelo comentário Ronaldo, estarei revendo meu código, mas quanto ao w3c eu já fui lá e foi encontrado 99 erros, analisei outros sites do estilo do meu que funcionam perfeitamente em qualquer navegador e davam mais de 200 erros, mas mesmo assim estarei analisando, valeu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

obrigado pelo comentário Ronaldo, estarei revendo meu código, mas quanto ao w3c eu já fui lá e foi encontrado 99 erros, analisei outros sites do estilo do meu que funcionam perfeitamente em qualquer navegador e davam mais de 200 erros, mas mesmo assim estarei analisando, valeu.

Só pondo minha opnião ;) , só por que um site "roda perfeito" em todos navegadores que você testou não siguifica que ele seja sematico.

 

não use position:absolute;(só em alguns casos) para posicionar o layout, uso para por objetos por cima de tudo (efeito POP-UP)

 

não use BR para posicionar o layout tambem, use em textos para gerar quebra de linha no "meio de um paragrafo".

 

e isso que você fez não é correto e é um dos principais motivos dos erros retornados pelo w3c:

<form name=frm791025>
<B>Você prefere animes de:</B><BR>
<input type="checkbox" name="opcao" value="4267188">Ação<br>
<input type="checkbox" name="opcao" value="4267189">Drama<br>
<input type="checkbox" name="opcao" value="4267190">Romance<br>
<input type="checkbox" name="opcao" value="4267191">Ficção<br>
<input type="checkbox" name="opcao" value="4267192">Comédia<br>
<input type="checkbox" name="opcao" value="4267193">Terror<br>
<input type="hidden" name="id" value="791025">

<b><a href="java script:Fun_Enviar('frm791025')">Votar|</a></b><a href="java script:Abre('http://www.enquetes.com.br/enquete.asp?id=791025',400,350)"> resultado</a>
</form><br>
ao inves de BR utilize LABEL e FIELDSET para formar o formulario.

 

e evite atributos como 

align="justify">
use CSS.

 

falow abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

#all {
	margin: 0 auto;
	width: 1075px;
}

Essa largura já é maior que a mostrada na minha resolução por exemplo, uso 1024x768.

São todos esses "position:absolute", que estão detonando o teu layout..

 

O IE está alinhando absolutamente apartir do centro (já você declarou "text-aling:center"), por isso a barra de rolagem

horizontal tão grande.

Se todos tem o mesmo valor de z-index, então, qual é a vantagem de declarar isso??

 

Qualquer propriedade, com valor nulo(propriedade: 0), não deve ser declarada unidade. você fez:

#central {
	position: absolute;
	top: 0%;
}
Isso não faz o menor sentido... imagina: se é 0px, é tb 0%, que é tb 0em... então, não coloque unidade nesse caso.

 

Reveja todos esses positions, posso afirmar que muitos deles não são nenhum pouco necessários. O problema não está em "fazer um site funcionar sem validar", e sim montar uma estrutura xHTML, que roda por "bug", através de falhas...

Na base do "tentativa e erro".

 

O teu problema não é o IE, que não está renderizando o código corretamente, e sim um CSS cheio de pequenas falhas.

 

Já vi alguem comentando isso aqui no forum... "Parece que geral se vicia em position: absolute".

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Bitencourt    0

Ronaldo Bitencourt
Postado

na verdade kurosaki oque eu acho é que voc~E tens que refazer todo o teu XHTML e CSS dai sim vai ver uma luz no fim do tunel !!!

 

 

abraços!!!

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