[Resolvido] [erro-chrome]Layout com Problema

=JD= · Janeiro 29, 2012

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

FIREFOX

IE9

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">
ahahahhaa
</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;}
div#separa-times {border-bottom:1px dashed #000; font-size:1.1em; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
div#times{width:30px; height:30px; margin: 3px 0 3px 3px; float:left;}
div#times{display: inline; float:left;}
div#times a img:hover{border:1px dashed #000;}
div#times img{ width:100%; overflow:hidden}
/*===========================BOX CENTRAL====================*/
div#centro-baixo{height:400px; width: 600px; border:1px solid #f4f4f4; float:left; margin:-170px 0px 0px 31px; border-radius:7px;}

Guilherme Oderdenge · Janeiro 29, 2012

Rapaz, e se eu te dissesse que a coisa tá realmente feia? Não funcionar no Chrome não é um bom sinal de código de qualidade.

Não vou ler e entender o seu código, mas dando uma olhada por cima tem muito gambiarra aí no meio.

E mais: você já pensou a respeito das resoluções dos diferentes monitores? Percebi que você deixou de lado a questão de padronização entre as mais variadas resoluções. Por exemplo, em um 1024x768 o layout com certeza estará quebrado.

Vou te dar um conselho: float: left, clear: both e display: block vão te ajudar e muito a solucionar este caso.

Eu no seu lugar começaria tudo do zero, porque o código além de deplorável, vai te dar muitos problemas futuros, porque você sempre vai estar pendurado à gambiarras.

Conselho de amigo? Comece tudo de novo, do zero. :thumbsup:

Diéssica · Janeiro 31, 2012

Conselho de amigo? Comece tudo de novo, do zero. :thumbsup:

E sem position!

Anselmo Gomes · Fevereiro 3, 2012

Uma dica boa de CSS para manter tudo no lugar é criar DIVs que funcionarão como containers. Elas facilitam a organização do código e economizam programação, já que muitas vezes você precisa se preocupar apenas com o posicionamento de uma DIV para organizar um bloco de código inteiro no lugar.

Algo tipo assim:

<body>
<div id="container_topo">
	<!-- Conteúdo do topo -->
</div>
<div id="container_menu">
	<!-- Conteúdo do menu -->
</div>

<div id="container_corpo">
	<!-- Conteúdo do corpo -->
</div>

<div id="container_rodape">
	<!-- Conteúdo do rodape -->
</div>
</body>

Outra coisa, quanto a resolução de monitor, como disse o Guilherme acima, para seu site aparecer bacana num monitor com resolução 1024x768, por exemplo, ele vai ter que possuir uma largura máxima de 980px. É bom ficar atento a esses detalhes de compatibilidade.

Reforço a dica do pessoal acima. É bom recomeçar!

Honiesty · Fevereiro 3, 2012

Atualmente a resolução "mínima" que você vai encontrar provavelmente é de 1024x768, ainda existe, é claro, monitores por ai de 800x600, mas é muito raro, a maioria dos site é feito em 1024x768 e centralizado, para que se a pessoa use uma resolução maior, sobre espaço nas laterais.

Hoje ja existem TVs de 8K (8000 no eixo X), mas não são muitos que devem usufruir dessa tecnologia kkk, se você pegar sites grandes como exemplo, Facebook, Twitter, Terra, todos tem 1000pixels de largura, e são centralizados.

Em relação ao código desorganizado, você deve ser iniciante como eu, já recomecei todo o código do meu projeto umas 4 vezes '-', não desanime, se esse é um dos seus primeiros sites, você ainda tem muito a aprender, não estipule prazo, pois você vai encontrar muitos problemas, HTML e CSS não são tão simples como parecem,

Float e Clear são os que me deram mais dor de cabeça até agora kkk

Na minha opinião, você deveria recomeçar TODO o site do zero, o que não vai ser muito, já que você já tem as imagens e talz. Crie um tópico aqui sobre o seu site, e vá fazendo passo a passo, colocando no tópico tudo que você está fazendo, e assim os Usuários e moderadores poderão tirar suas dúvidas, e te indicar o melhor método para um efeito final dejesado.

Boa sorte.

=JD= · Fevereiro 3, 2012

Obrigado a todos, vou recomeçar e seguir a idéia do "Honiesty". Vou criar um topico e ir colocando minhas duvidas....

Valeu mesmo galera :thumbsup: :thumbsup:

vonzuben · Junho 7, 2012

faz isso que não terá problema com monitor

#wrapper { margin:0 auto; width: 960px; }

faz um topo e um rodape

e joga um background 100% conforme a imagem do topo e rodape

vai ficar show

Alvaro Jr · Junho 7, 2012

tenho muita paciencia nao alem alem de usar alguma regra pra minimizar eu uso hack --'

Arquivado

[Resolvido] [erro-chrome]Layout com Problema

Recommended Posts

=JD= 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anselmo Gomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Honiesty 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

=JD= 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

vonzuben 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alvaro Jr 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

tratar hora no php

Navbar no Nextjs

Fóruns

Tempo Real

Informação importante