Problemas em Telas Maiores

china_black · Setembro 20, 2010

Olá pessoal, estou com um problema

Fiz um Css aqui com Conteudo e Rodapé......em 1280x800 ele fica normal, não acontece nada de errado e está tudo alinhado

Testei em uma tela pouca coisa maior e ele desconfigurou totalmente, e em cada navegador de uma maneira, o mais problemático é o Internet Explorer

Acho que estou configurando alguma coisa errada em meu CSS

Através deste link vocês podem ver o projeto:

http://www.fieldcomunicacao.com.br/new/

O código da index está assim:

<!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>::. Atlética UNI-FACEF .::</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	text-align:center;	
	height: 100%;
	width:100%;
	background:#000000 url(img/1__bg.jpg) repeat-x bottom center; height:900px;
	}

#tudo {
	min-height: 100%;
	position: relative;
	}

/* hack para IE6 que trata height como min-height */
* html #tudo {
	height: 100%;
	}

#conteudo {
	margin:0 auto;
	width:1024px;/*aqui tu coloca a largura do teu swf, pra deixa ele centralizado na horizontal*/
	padding-bottom: 200px;/*nesse padding aqui você coloca a altura do rodape mais uns 50px, ex.: rodape tem 50px, padding-bottom: 100px*/
	}
	
#rodape {
	background:#000000 url(img/rodape.png) repeat-x bottom center;
	height:149px;
	position: absolute;
	bottom: 0;
	width:100%;
	color:#FFF;	
	}
	
#email{
	color:#2377C6;
	background-color:#141313;
	border:none;
	font-size: 15px;
	width:220px;
	display:block;
	margin-top:32px;
	margin-left:150px;
	}
	
#envia{
	color:#FFFFFF;
	background-color:#1d1c1c;
	border:none;
	font-size: 14px;
	display:block;
	margin-top:-18px;
	margin-left:396px;
}

#fonte {
	font-size: 15px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	margin-top:-106px;
	margin-left:-690px;
	}
	
#patrocina {
	display:block;
	margin-top:-110px;
	margin-left:310px;
	}

#imagem-rodape{
	
}
	
#clear {
	clear:both;
}
</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="tudo">

  <div id="conteudo">

	<div id="principal">
	  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="850">
	    <param name="movie" value="index.swf" />
	    <param name="quality" value="high" />
	    <param name="wmode" value="transparent" />
	    <param name="swfversion" value="6.0.65.0" />
	    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
	    <param name="expressinstall" value="Scripts/expressInstall.swf" />
	    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	    <!--[if !IE]>-->
	    <object type="application/x-shockwave-flash" data="index.swf" width="1024" height="850">
	      <!--<![endif]-->
	      <param name="quality" value="high" />
	      <param name="wmode" value="transparent" />
	      <param name="swfversion" value="6.0.65.0" />
	      <param name="expressinstall" value="Scripts/expressInstall.swf" />
	      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
	      <div>
	        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
	        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
	      <!--[if !IE]>-->
        </object>
	    <!--<![endif]-->
      </object>
</div>

      <div id="clear"></div>

    </div> <!-- Fim div#conteudo -->
  
  <div id="rodape">
  <img src="img/rodape_img.png" id="imagem-rodape" />
	<p id="patrocina"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="100">
    <param name="movie" value="swf/rodape.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <param name="SCALE" value="noborder" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="swf/rodape.swf" width="560" height="100">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <param name="SCALE" value="noborder" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object></p>
  
	<p id="fonte">Cadastre-se e receba novidades da Atlética!</p>
  <input id="email" name="emailTxt" type="text" value="Digite seu e-mail" />
	<input id="envia" name="bot_envia" type="button" class="envia" value="OK" />
  </div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID2");
</script>
</body>
</html>

Existe algo que eu possa fazer para que todas as telas fiquem do modo padrão?

O conteudo pode ser separado do rodapé, caso for maior a tela o rodapé fique colado embaixo e aumenta entre o flash player e rodapé

Rafelles · Setembro 20, 2010

Cara, evita esses positions de sisplay:block. Não vejo utilidade para essas propriedades no seu código. Há elementos "soltos" que não obedecem posicionamento com relação a outros elementos como por exemplo divs sem declação de classe ou id.

china_black · Setembro 20, 2010

Cara, evita esses positions de sisplay:block. Não vejo utilidade para essas propriedades no seu código. Há elementos "soltos" que não obedecem posicionamento com relação a outros elementos como por exemplo divs sem declação de classe ou id.

Certo, mas porque funciona em 1280 x 800 e não funciona nos outros?

Eu preciso declarar todas as divs e tirar os displays?

Isso você acha que já funciona?

Se a div não tiver nenhuma declaração ela atrapalha no alinhamento dos outros?

Aguardo!

Rafelles · Setembro 21, 2010

Então, fiz um teste rápido aqui tirando os positions e displays e melhorou, mas é claro, vai precisar de uns ajustes. O problema dessas divs sem declaração de propriedades é que, como já disse, ela não vai seguir um padrão de posicionamento e tamanho, o que pode atrapalhar a disposição dos elementos na página. Como você não declarou width para div #tudo a tendência é assumir o valor 100% para essa propriedade, ou seja, em cada resolução o tamanho será diferente; por isso só funciona no 1024.

china_black · Setembro 21, 2010

Então, fiz um teste rápido aqui tirando os positions e displays e melhorou, mas é claro, vai precisar de uns ajustes. O problema dessas divs sem declaração de propriedades é que, como já disse, ela não vai seguir um padrão de posicionamento e tamanho, o que pode atrapalhar a disposição dos elementos na página. Como você não declarou width para div #tudo a tendência é assumir o valor 100% para essa propriedade, ou seja, em cada resolução o tamanho será diferente; por isso só funciona no 1024.

Rafaelles, fiz o que você disse e ele deu uma melhorada mesmo, agora está neste link: http://www.cinechina.xpg.com.br/atletica/index.html

Viu só como está? Tem ali um botão OK que precisa de um display block, será que nele posso usar normalmente??

Vai funcionar a partir de agora/?

Obrigado ;)

Evandro Oliveira · Setembro 22, 2010

Se ao invés de <input>, você utilizar <button>, o próprio elemento já toma o display como inline-block bastando fazer as alterações propícias.

<button id="envia" type="submit" class="envia">OK</button>

china_black · Setembro 22, 2010

Legal, agora deu certo!

Meu código depois de algumas alterações ficou assim:

Fiz alguns testes no IE e Mozilla e me parece que o Rodapé não está colando no final, imaginei que apenas colocando o Bottom:0 já poderia resolver

Será que é isso mesmo!? Ou existe mais alguma coisa que precisa ser feita?

Me parece também que no IE 7 ele fica uma imagem meio estranha em cima do meu rodapé, o que pode ser feito?

Meu site está aqui neste link: http://www.fieldcomunicacao.com.br/new/

<!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>::. Atlética UNI-FACEF .::</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	text-align:center;
	background:#000000 url(img/1__bg.jpg) repeat-x bottom center; height:1000px;
	}

#tudo {
/*	min-height: 100%;
	position: relative;*/
	}

/* hack para IE6 que trata height como min-height */
* html #tudo {
	/*height: 100%;*/
	}

#conteudo {
	margin:0 auto;
	width:1024px;/*aqui tu coloca a largura do teu swf, pra deixa ele centralizado na horizontal*/
	padding-bottom: 200px;/*nesse padding aqui você coloca a altura do rodape mais uns 50px, ex.: rodape tem 50px, padding-bottom: 100px*/
	}
	
#rodape {
	background:#000000 url(img/rodape.png) repeat-x bottom center;
	height:149px;
	bottom: 0;
	width:100%;
	color:#FFF;	
	}
	
#email{
	color:#2377C6;
	background-color:#141313;
	border:none;
	font-size: 15px;
	width:220px;
	margin-top:18px;
	margin-left:-680px;
	}
	
#envia{
	color:#FFFFFF;
	background-color:#1d1c1c;
	border:none;
	font-size: 12px;
	margin-left:22px;
}

#fonte {
	font-size: 15px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:-106px;
	margin-left:-690px;
	}
	
#patrocina {
	margin-top:-110px;
	margin-left:310px;
	}

#imagem-rodape{
	
}
	
#clear {
	clear:both;
}
</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="tudo">

  <div id="conteudo">

	<div id="principal">
	  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="850">
	    <param name="movie" value="index.swf" />
	    <param name="quality" value="high" />
	    <param name="wmode" value="transparent" />
	    <param name="swfversion" value="6.0.65.0" />
	    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
	    <param name="expressinstall" value="Scripts/expressInstall.swf" />
	    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	    <!--[if !IE]>-->
	    <object type="application/x-shockwave-flash" data="index.swf" width="1024" height="850">
	      <!--<![endif]-->
	      <param name="quality" value="high" />
	      <param name="wmode" value="transparent" />
	      <param name="swfversion" value="6.0.65.0" />
	      <param name="expressinstall" value="Scripts/expressInstall.swf" />
	      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
	      <div>
	        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
	        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
	      <!--[if !IE]>-->
        </object>
	    <!--<![endif]-->
      </object>
</div>

      <div id="clear"></div>

    </div> <!-- Fim div#conteudo -->
  
  <div id="rodape">
  <img src="img/rodape_img.png" id="imagem-rodape" />
	<p id="patrocina"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="100">
    <param name="movie" value="swf/rodape.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <param name="SCALE" value="noborder" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="swf/rodape.swf" width="560" height="100">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <param name="SCALE" value="noborder" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object></p>
  
	<p id="fonte">Cadastre-se e receba novidades da Atlética!</p>
  <input id="email" name="emailTxt" type="text" value="Digite seu e-mail" />
	<button id="envia" type="submit" class="envia">OK</button>
  </div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID2");
</script>
</body>
</html>

Agradeço a todos que podem dar uma atenção aqui ;)

Evandro Oliveira · Setembro 22, 2010

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

Arquivado

Problemas em Telas Maiores

Recommended Posts

china_black 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafelles 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

china_black 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafelles 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

china_black 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

china_black 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Fóruns

Tempo Real

Informação importante