Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">](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"> 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">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é
>
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!
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.
>
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 ;)
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>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">](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"> 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">
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.