Imagem canto inferior direito

MTavares · Maio 3, 2012

Olá pessoal.

Meu forte não é webdesign, por isso vim buscar ajuda com os feras. Estou desenvolvendo um site aonde quero colocar uma imagem em cada canto do site, ou seja, uma imagem no canto superior direito e esquerdo e imagem no canto inferior direito e esquerdo. A imagem é aquelas floral. Consegui colocar as imagens funfando nos lados direito e esquero superior e no lado esquerdo inferior, só que o lado direito inferior não vai para o lado direito nem rezando :rolleyes: . Veja abaixo o código:

Lado esquerdo superior

.esquerdo-superior{ 
background-image:url(imagens/esquerdo-superior.png); 
width:262px; 
height:261px; 
float: left;
margin-top: 0px;
margin-right: 0px;
}

Lado direito superior

.direito-superior{ 
background-image:url(imagens/direito-superior.png); 
width:262px; 
height:261px; 
float: right;
margin-top: 0px;
margin-right: 0px;
}

Lado esquerdo inferior

.esquerdo-inferior{ 
position:absolute;
background-image:url(imagens/esquerdo-inferior.png);
float:left;
width:262px; 
height:261px;  
bottom:0;
}

Lado direito inferior (aqui que está o problema...)

.direito-inferior{ 
position:absolute;
background-image:url(imagens/direito-inferior.png);
float:right;
width:262px;
height:261px; 
bottom:0;
}

Alguém sabe me informar aonde está o erro? :blink:

Obrigado

Editado Maio 3, 2012 por MTavares

JaguA · Maio 3, 2012

Tem como me passar toda a base do seu html e css para eu rodar e ve como ta ficando ?

muito estranho pois da forma que você descreveu é como se alguma div estivesse no meio impedindo dele ir para o lado direito...

toda via antes de posta o código tenta antes da parte inferior da um clear para limpa os float pode ser que seja isso....

MTavares · Maio 3, 2012

Olá JaguA. Na verdade comecei agora o site. Veja abaixo o HTML completo (coloquei o CSS direito na página):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
                 font-size:12px;
                 font-family:Arial;
    margin-right:0;
    margin-top:0;
    margin-left:0;
    margin-bottom:0;
}
.principal{
    position:relative;
    width:100%;
    height:1597px;
    background-color:#FFF;
    margin:0 auto;
    background:#02CBFF url(imagens/fundo.png)top left repeat-x fixed;
    }

.esquerdo-superior{ 
background-image:url(imagens/esquerdo-superior.png); 
width:262px; 
height:261px; 
float: left;
margin-top: 0px;
margin-right: 0px;
}
.direito-superior{ 
background-image:url(imagens/direito-superior.png); 
width:262px; 
height:261px; 
float: right;
margin-top: 0px;
margin-right: 0px;
}
.esquerdo-inferior{ 
position:absolute;
background-image:url(imagens/esquerdo-inferior.png);
float:left;
width:262px; 
height:261px;  
bottom:0;
}
.direito-inferior{ 
position:absolute;
background-image:url(imagens/direito-inferior.png);
float:right;
width:262px;
height:261px; 
bottom:0;
}
</style>
<body>
<div class="principal">
<div class="esquerdo-superior"></div>
<div class="direito-superior"></div>
<div class="esquerdo-inferior"></div>
<div class="direito-inferior"></div>
</div>
</body>
</html>

Obrigado.

MTavares · Maio 3, 2012

Consegui resolver. Veja abaixo a solução. não sei se esta´correto, só sei que funfou!

position:absolute;
background-image:url(imagens/direito-inferior.png);
width:262px;
height:261px; 
float: right; 
margin-bottom: 0;
position: absolute; 
right: 0px; 
bottom: 0;

Obrigado.

JaguA · Maio 3, 2012

pois é cara, tentei fazer diversas formas aqui e não deu certo também, precisa obrigatoriamente ter o right: 0 e o bottom 0 para que ele mostre a imagem... mas de qualquer forma resolveu e isso que importa.

Agora Tavares você deixo 2 vezes position absolute.. você já tinha declarado ela antes de chamar a imagem depois colocou novamente aposta o margin rsrs..

Entrar

Imagem canto inferior direito

Pergunta

MTavares

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

JaguA

Link para o comentário

Compartilhar em outros sites

MTavares

Link para o comentário

Compartilhar em outros sites

MTavares

Link para o comentário

Compartilhar em outros sites

JaguA

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades