Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, boa noite!
Estou com um problema na vizualização do layout do site, de um projeto que estou realizando.
No Firefox e no IE9 ele é executado de forma correta, porém no Chrome ele tem problemas com algumas divs.
Queria saber oq fazer. Abaixo vou postar 3 fotos além do código do index e do css.
Quero dizer antes, que algumas imagens e espaços estão ocupados apenas para vizualização.
CHROME
/applications/core/interface/imageproxy/imageproxy.php?img=http://img545.imageshack.us/img545/5759/sitechrome.png&key=c28ac1b92d3036eaa772d57fd82b13a83e0d6c011941c0815f6b2c7de33be42b" alt="sitechrome.png" />
FIREFOX
/applications/core/interface/imageproxy/imageproxy.php?img=http://img407.imageshack.us/img407/4737/sitefirefox.png&key=df2fc5f55e46a193aeeb458828ccf16ff4c12535f8fd23e516b4900998cc355a" alt="sitefirefox.png" />
IE9
/applications/core/interface/imageproxy/imageproxy.php?img=http://img717.imageshack.us/img717/990/siteie.png&key=a043cb803e16de6c0e328b55be865daa72541a5e1984e643719c517fa87ed082" alt="siteie.png" />
Agora os códigos
index.html
<!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>Portal News</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.min.js"></script>
<script type="text/javascript" src="js/carrossel.js"></script>
</head>
<body>
<div id="geral">
<div id="topo">
<div id="topo-cima" >
<div id="topo-img">
<a href="#" ><img src="images/logo.png" alt="" border="0" /></a>
</div><!--topo-img-->
<div class="search-topo">
<div id="topo-search">
busca
<form method="get" name="s" id="form-search" action="#"/>
<input type="text" name="s" class="search-input" id="s" onclick="this.valie=''"/>
<input type="submit" value="enviar" class="search-submit" />
</div><!--topo-search-->
</div><!--class-search-topo-->
<div id="topo-letreiro">
<a href="#" >PORTAL DO ESPORTE</a>
</div>
<div id="topo-banner" ><div class="publicidade">Publicidade</div>
<ul>
<li><a href="#" class="banner1"><img src="images/banner1.png" alt="" border="0" /></a></li>
<li><a href="#" class="banner2"><img src="images/banner2.png" alt="" border="0" /></a></li>
<li><a href="#" class="banner2"><img src="images/banner3.png" alt="" border="0" /></a></li>
</ul>
</div><!--topo-banner-->
<div id="topo-menu" >
<ul id="menu-categorias">
<li><a href="#" class="Brasil">Brasil </a></li>
<li>|</li>
<li><a href="#" class="Europa">Europa</a></li>
<li>|</li>
<li><a href="#" class="Americas">Sul-Americano</a></li>
<li>|</li>
<li><a href="#" class="Mundo">Mundo</a></li>
</ul>
</div>
</div><!--topo-cima-->
</div><!--topo-->
<div id="box-central">
<div id="blocos">
<div id="primeiro-bloco">
<div class="blocos-central-left" >
<div class="bloco-left1"><a href="#" ><span>Noticia Principal 1</span> <p>Aconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhaha</p></a></div>
<div class="bloco-left2"><a href="#" ><span>Noticia Principal 2</span><p>Aconteceu coisa tal etc ahahahhaha</p></a></div>
<div class="bloco-left3"><a href="#" ><span>Noticia Principal 3</span><p>Aconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhahaAconteceu coisa tal etc ahahahhahaAconteceu coisa tal</p></a></div>
</div>
</div>
<div class="blocos-central-centro">
<div id="blocos-center1">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-parte-1"><a href="#1" ><img src="images/image_news1.jpg" width="85px"/><span>Promoção</span></a></li>
<li class="ui-tabs-nav-item" id="nav-parte-2"><a href="#2"><img src="images/image_news2.jpg" width="85px" /><span>Novo Uniforme</span></a></li>
<li class="ui-tabs-nav-item" id="nav-parte-3"><a href="#3"><img src="images/image_news3.jpg" width="85px" /><span>Novo Uniforme 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-parte-3"><a href="#4"><img src="images/image_news4.jpg" width="85px" /><span>Filme</span></a></li>
</ul>
<div id="1" class="ui-panel" style="">
<img src="images/image_news2.jpg" alt="" />
<div class="info">
<h2><a href="#">IMAGEM 1</a></h2>
<p>Informação sobre a imagem 1. Noticia da Imagem 1 Informação sobre a imagem 1. Noticia da Imagem 1 Informação sobre a imagem 1. <a href="#">veja aqui</a></p>
</div>
</div>
<div id="2" class="ui-panel ui-tabs-hide" style="">
<img src="images/image_news1.jpg" alt="" />
<div class="info">
<h2><a href="#">IMAGEM 2</a></h2>
<p>Informação sobre a imagem 2. Noticia da Imagem 2 <a href="#">veja aqui</a></p>
</div>
</div>
<div id="3" class="ui-panel ui-tabs-hide" style="">
<img src="images/image_news3.jpg" alt="" />
<div class="info">
<h2><a href="#">IMAGEM 3</a></h2>
<p>Informação sobre a imagem 3. Noticia da Imagem 3 <a href="#">veja aqui</a></p>
</div>
</div>
<div id="4" class="ui-panel ui-tabs-hide" style="">
<img src="images/image_news4.jpg" alt="" />
<div class="info">
<h2><a href="#">IMAGEM 3</a></h2>
<p>Informação sobre a imagem 3. Noticia da Imagem 3 <a href="#">veja aqui</a></p>
</div>
</div>
</div>
</div>
<div class="blocos-central-right">
<div class="blocos-right1">
<div id="separa-times">Seu Time</div>
<div id="times"><a href="#"><img src="images/sao_paulo_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/corinthians_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/cruzeiro_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/flamengo_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/Fluminense_NOVOEscudo_45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/santos_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/palmeiras_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/sao_paulo_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/corinthians_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/cruzeiro_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/flamengo_45x45.png" alt="0" border="0" /></a></div>
<div id="times"><a href="#"><img src="images/Fluminense_NOVOEscudo_45.png" alt="0" border="0" /></a></div>
</div>
</div>
</div>
</div>
<div id="centro-baixo"></div>
</div>
</div><!--geral-->
</body>
</html>style.css
*{ margin:0px; padding:0px; }
body { background-color:#f4f4f4; font-size:62.5%;}
a{ text-decoration:none; cursor:pointer; color:#1E90FF}
a:hover{text-decoration: underline;}
img{border: 0px;}
div#geral{height:960px; background:#333; margin:0 auto;}
#divclear{clear:both;}
div.publicidade{ font-size:0.9em;}
/=================TOPO=======================/
div#topo {background: #ccc; width:99.9%; height:110px; border:1px solid #000; margin:0 auto; font-size:1.6em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
div#topo-img{float: left; margin: 5px 5px 10px 10px; width:300px; height:0 auto;}
/===============SEARCH FORM==============/
form{ margin:0; padding:0;}
div#topo-search{ height:30px; font-size:1.3em;}
form#form-search{margin: 5px 0 0 0; padding:0px; line-height:28px;}
div.search-topo{float: left; padding-top:8px; padding-left:20px; padding-right:20px;}
.search-input{width:187px; margin:1px; font-size:1.3em; border:1px solid #333;}
.search-submit{font-size: 1.2em; border: 1px #000 dashed; background-color: #f4f4f4}
.search-submit:hover{background-color: #C00; cursor:pointer;}
/==============TOPO LETREIRO==============/
div#topo-letreiro{ float: left; font-size:2.8em; padding-right:20px;}
div#topo-letreiro a:hover{text-decoration: underline;}
/===============BANNER TOPO==============/
div#topo-banner{float:left; padding:5px; border:1px solid #333; margin:10px 0 5px 0;}
div#topo-banner li{ display: inline;}
/==================TOPO-MENU==============/
div#topo-menu{ font-size: 1.6em; float: left; background: #f4f4f4;border:1px solid #000; border-radius:5px; margin-left:280px;; margin-top:5px; margin-bottom:2px;}
div#topo-menu li{ display: inline; padding:2px;}
div#topo-menu li a:hover{text-decoration: underline;}
div#topo-menu li a.Brasil{ color: #090;}
div#topo-menu li a.Europa{ color: #900;}
div#topo-menu li a.Americas{ color: #06F;}
div#topo-menu li a.Mundo{ color: #FC0;}
/===========================BOX CENTRAL====================/
div#box-central{ heigth: 960px; font-size:1.6em; margin:0 auto;}
div#primeiro-bloco{height:0 auto; margin:38px 0px 10px 35px;}
div.blocos-central-left{border:1px #090 solid; width:525px;; background:#f4f4f4;border-radius: 7px; float: left; height:0 auto; }
div.blocos-central-left a{color: #000;}
div.blocos-central-left a:hover{text-decoration: underline;}
div.bloco-left1{font-size: 2.3em; border-bottom:1px dotted #000;}
div.bloco-left1 p{font-size: 16px;}
div.bloco-left2{font-size: 1.8em; border-bottom:1px dotted #000;}
div.bloco-left2 p{font-size: 16px;}
div.bloco-left3{font-size: 1.4em;}
div.bloco-left3 p{font-size: 16px;}
div.blocos-central-centro{width:700px; height:500px; float:left; margin-left: 30px; background:#FCO; text-align:center; margin-top: 0px;}
h1{padding:10px; font-size:30px; color:#024769; margin-left:70px; }
h3{text-align:left; padding:10px 0 0 10px;}
div#blocos-center1{width:420px; padding-right:300px; position:relative; border:5px solid #f4f4f4; border-radius:4px; height:266px; background:#95cbe9}
div#blocos-center1 ul.ui-tabs-nav{position:absolute; top:0; left:435px; list-style:none; padding:0; margin:0; width:285px;}
div#blocos-center1 ul.ui-tabs-nav li{padding:1px 0; padding-left:13px; font-size:0.7em; color:#666;}
div#blocos-center1 ul.ui-tabs-nav li img{float: left;margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; }
div#blocos-center1 ul.ui-tabs-nav li span{font-size:1.4em; font-family:verdana, Arial; line-height:18px;padding-left:-15px;}
div#blocos-center1 li.ui-tabs-nav-item a{display:block; height:60px; color:#333; background:#fff; margin-left:5px; margin-top:1px; line-height:20px;}
div#blocos-center1 li.ui-tabs-nav-item a:hover{background:#f2f2f2}
div#blocos-center1 ul.ui-tabs-nav li.ui-tabs-selected a{background:#efd279}
div#blocos-center1 .ui-panel{width:450px;height:250px;background:#999; position:relative;}
div#blocos-center1 .ui-panel .info{position:absolute; top:180px; left:0; height:86px; background:rgba(0,0,0,0.75); width:100%;}
div#blocos-center1 .info h2{font-size:1.2em; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; }
div#blocos-center1 .info p{font-size:0.8em; color:#f0f0f0; margin: 0 5px; font-family: verdana,arial; line-height:15px; height:100%;}
div#blocos-center1 .info a:hover{color: #f0f0f0; text-decoration:underline;}
div#blocos-center1 .ui-tabs-hide{display:none;}
div.blocos-central-right{border:1px #090 solid; background:#f4f4f4;border-radius: 7px;
width: 200px; float:left; margin: 0px 0px 0px 25px; font-size:1.2em; margin-left:40px;}Carregando comentários...