Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi pessoal!
Estou com um problema em meu layout!
Visualizando-o pelo Google Chrome, nada de erro ocorre. Já pelo Firefox, ou Internet Explorer 8, o rodapé fica com uma espécie de borda branca de 2px em toda sua volta.
O que faz com que a imagem se desloque.
Segue abaixo os códigos HTML e CSS, bem como o link para acesso e visualização nos browsers.
http://ragnacorp.forbrazil.com.br/site/index.php
CSS:
* {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Geneva, Arial;
font-size: 8pt;
} list-style: none;
} text-decoration: none;
color: #FFF;
} text-decoration: none;
color: #FFF;
} text-decoration: none;
} text-decoration: none;
color: #FFF;
} background: #39465a;
} margin: 15px auto;
width: 958px;
} background-image: url("../img/tentativa_02.jpg");
height: 191px;
} background-image: url("../img/tentativa_03.gif");
height: 41px;
} background: #39465a;
width: 789px;
margin: 0 0 30px;
} float: left;
} float: left;
margin: 0 3px;
background: #efefef;
width: 779px;
border-left: 1px #313d4d solid;
border-right: 1px #313d4d solid;
} float: left;
width: 378px;
margin: 0 0 0 7px;
} float: left;
width: 185px;
height: 175px;
margin: 2px;
background: #39465a;
} float: left;
margin: 0 0 0 7px;
} float: left;
width: 251px;
height: 110px;
margin: 2px;
background: #39465a;
} float: left;
width: 381px;
height: 173px;
margin: 2px 0 0 2px;
background: #c9d5e7;
border: 1px #b0bdd0 solid;
} padding: 5px 5px 2px 10px;
margin: 5px 0 70px;
background: #fff;
border-top: 1px #b0bdd0 solid;
border-bottom: 1px #b0bdd0 solid;
} color:#47546c;
font-size: 10pt;
font-weight: bold;
} height: 20px;
padding: 3px 0 0 5px;
} border-top: 1px dashed #c9d5e7;
border-bottom: 0px dashed #fff;
color: #fff;
background-color: #fff;
height: 1px;
} font-size: 9pt;
} float: left;
width: 759px;
margin: 2px 2px 0 9px;
background: #c9d5e7;
border: 1px #b0bdd0 solid;
} margin: 35px 0 25px;
background: #fff;
border-top: 1px #b0bdd0 solid;
border-bottom: 1px #b0bdd0 solid;
} float: right;
margin: 0 0 30px;
width: 169px;
} float: right;
} float: right;
margin: 0 3px;
background: #2d3647;
width: 159px;
border-left: 1px #485365 solid;
border-right: 1px #485365 solid;
} display: block;
padding: 3px 10px;
margin: 1px 10px 0 11px;
background: #39465A;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} display: block;
padding: 3px 10px;
text-decoration: line-through;
margin: 1px 10px 0 11px;
background: #39465A;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} display: block;
background-color: #f1d64e;
} text-decoration: none;
color: #000;
} display: inline-block;
padding: 14px 12px 15px;
margin: 0px 3px 0px 10px;
height: 6px;
border-width: thin;
} padding: 6px 11px 15px;
margin: 0px 3px 0px 10px;
background: #39465A;
border: solid;
border-color: #313949;
border-width: thin;
height: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
} padding: 0 0 0 12px;
} color:#FFF;
display: inline;
} color:#66FF00;
} float: right;
padding: 0 13px 0 0;
}<!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)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>@RagnaCORP.com # Seu Servidor Brasileiro de Ragnarök! </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="mae">
<ul class="status_server">
<li>Login-Server: <span><?php include "verifica_6900.php"; ?></span> |</li>
<li>Char-Server: <span><?php include "verifica_6121.php"; ?></span> |</li>
<li>Map-Server: <span><?php include "verifica_5121.php"; ?></span> |</li>
<li>Jogadores Online: <?php include "verifica_players.php"; ?></li>
<li class="status_login">Bem-vindo! | Login | Registrar</li>
</ul>
<div id="topo"></div>
<div id="menu_horizontal">
<ul class="botao_menu_horizontal">
<li><a href="#">Home</a></li>
<li><a href="#">Painel de Controle</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Ajude o Servidor</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Regras de Conduta</a></li>
<li><a href="#">Staff</a></li>
</ul>
</div>
<div id="menu_vertical">
<img src="img/tentativa_05.gif"/>
<div class="menu_vertical_meio">
<ul class="botao_menu_vertical">
<li><a href="#">Página Principal</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Downloads</a></li>
<li class="off"><a href="#">Central de Notícias</a></span></li>
<li class="off"><a href="#">Hall da Fama</a></li>
</ul>
</div>
<img src="img/tentativa_09.gif"/>
<div class="menu_vertical_meio">
<ul class="botao_menu_vertical">
<li><a href="#">Crie sua Conta</a></li>
<li><a href="#">Painel de Controle</a></li>
<li><a href="#">Confirme seu VIP</a></li>
<li><a href="#">Centro de Vendas</a></li>
<li class="off"><a href="#">Pontuação em Eventos</a></li>
<li class="off"><a href="#">Entrar em Férias</a></li>
</ul>
</div>
<img src="img/tentativa_12.gif"/>
<div class="menu_vertical_meio">
<ul class="botao_menu_vertical">
<li><a href="#">Ajude o Servidor</a></li>
<li><a href="#">Planos de Conta VIP</a></li>
</ul>
</div>
<img src="img/tentativa_14.gif"/>
<div class="menu_vertical_meio">
<ul class="botao_menu_vertical">
<li><a href="#">Informações do Servidor</a></li>
<li><a href="#">Como Votar no Servidor</a></li>
<li><a href="#">Horários da WOE</a></li>
<li><a href="#">Guia para Jogar</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Staff</a></li>
</ul>
</div>
<img src="img/tentativa_16.gif"/>
</div>
<div id="conteudo">
<img src="img/tentativa_04.gif"/>
<div id="conteudo_dentro">
<div id="caixa_propaganda">
<div class="propaganda"></div>
<div class="propaganda"></div>
<div class="propaganda"></div>
<div class="propaganda"></div>
</div>
<div class="texto">
<div class="titulo">
<img src="img/titulo.gif"/>
<img src="img/rodape.gif"/>
</div>
<div class="texto_dentro">
<ul>
<li class="dica"><span>1.</span> Acesse o painel de controle e crie sua conta de acesso.</li>
<hr width="370px" noshade>
<li ><span>→</span> Painel de Controle</li>
<hr width="95px" noshade>
<li class="dica"><span>2.</span> Faça o download do patch e instale-o na pasta do Ragnarök.</li>
<hr width="370px" noshade>
<li><span>→</span> Patch RagnaCORP v3.0</li>
<hr width="120px" noshade>
<li class="dica"><span>3.</span> Abra o executável RagnaCORP.exe e aguarde as atualizações.</li>
<hr width="370px" noshade>
<li class="dica"><span>4.</span> Clique em JOGAR, crie seu personagem e aproveite.</li>
<hr width="370px" noshade>
</ul>
</div>
</div>
<div class="texto">
<div class="titulo">
<img src="img/titulo2.gif"/>
<img src="img/rodape.gif"/>
</div>
<div class="texto_dentro">
<ul>
<li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
<hr width="370px" noshade>
<li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
<hr width="370px" noshade>
<li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
<hr width="370px" noshade>
<li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
<hr width="370px" noshade>
<li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
<hr width="370px" noshade>
<li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
<hr width="370px" noshade>
</ul>
</div>
</div>
<div id="propaganda_top">
<div class="propaganda2"><a href="[http://www.topragnarok.com.br/?s=vote&id=5814">OBS: Lembre-se, o problema é no rodapé abaixo do conteúdo.
A imagem cria bordas de 2px em toda sua volta, o que faz com que se desloque para o lado e para baixo.
Isso no Firefox e IE, com o Google Chrome fica tudo perfeito.
Valeu pessoal!
Olá,
PS: não há maneira de coloccar um height no campo code. Senão os posts ficam muito extensos.
Cumprimentos.
@2Flex
Grande 2Flex!
Tudo resolvido rapaz, você é fera mesmo!
Só pra constar, você só alterou aquela border lá mesmo, né? E pelo que vi adicionou um alt="" nas imagens...
Confirme se foi só isso mesmo?
OBS: Não sei se dá pra colocar height, vou tentar da próxima vez.
Sobre outra questão agora: O que achou dos códigos? Estão limpos? Tentei deixar super organizado, segui a dica de muitos amigos aqui do fórum, que sugeriram que eu fizesse quase tudo em div e utilizasse o menor número de imagens possível. Consegui fazer todos os blocos em div dentro do conteúdo. Ficou bem bacana!
O que achou?
>
Olá,
PS: não há maneira de coloccar um height no campo code. Senão os posts ficam muito extensos.
Cumprimentos.
Você pode usar o [ s p o i l e r ]. Exemplo:
Teste
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Olá,
Amigo Thiago Retondar Obrigado pela dica.
Amigo drgomesp acrescentei uns px no seu CSS e no HTML também dei um toquezito. Adicionei também o list-style: none no *** e eliminei o ul**.
Acho que também tinha um fechamento de div (</div>) a mais. Em relação ao código, está muito bom sim ;). Ah é verdade, no <hr> você tinha um um atributo em desuso. Retirei também. Se for a comparar os dois códigos notará as pequenas diferenças ;).
Fico feliz ter ajudado amigo, qualquer coisa apite que tentarei sempre que souber.
Força com o projecto.
Cumprimentos
Olá,
Amigo o problema vem de ter imagens dentro de Ancoras de Linkagem, exemplo:
<a><img src="" /></a>Você deve de ter uma linguagem qualquer por trás que poderá estar a gerar isso ou a referênciar, pois no HTML eu não vi. No entanto para resolver isso acrescentei isto:
* {
border: none;
}Alterei também seu código CSS e HTML:CSS:
* {
a:link, a:visited, a:hover, a:active {
body {
div#mae {
div#mae div#topo {
div#mae div#menu_horizontal {
div#mae div#conteudo {
div#mae div#conteudo img {
div#mae div#conteudo div#conteudo_dentro {
div#mae div#conteudo div#conteudo_dentro div#caixa_propaganda {
div#mae div#conteudo div#conteudo_dentro div#caixa_propaganda div.propaganda {
div#mae div#conteudo div#conteudo_dentro div#propaganda_top {
div#mae div#conteudo div#conteudo_dentro div#propaganda_top div.propaganda2 {
div#mae div#conteudo div#conteudo_dentro div.texto {
div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro {
div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro ul li span {
div#mae div#conteudo div#conteudo_dentro div.texto div.titulo {
div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro ul hr {
div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro ul .dica {
div#mae div#conteudo div#conteudo_dentro div.noticias {
div#mae div#conteudo div#conteudo_dentro div.noticias div.noticias_dentro {
div#mae div#menu_vertical {
div#mae div#menu_vertical img {
div#mae div#menu_vertical div.menu_vertical_meio {
div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical li {
div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical li.off {
div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical li:hover {
div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical a:hover {
div#mae div#menu_horizontal ul.botao_menu_horizontal li {
div#mae div#menu_horizontal ul.botao_menu_horizontal li:hover {
div#mae ul.status_server {
div#mae ul.status_server li {
div#mae ul.status_server span {
div#mae ul.status_login {
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
PS: Organizei o código, mas aqui o textarea altera um pouco os espaçamentos daçççç xP
Cumprimentos