Imagem canto inferior direito

MTavares · May 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

Edited May 3, 2012 by MTavares

JaguA · May 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 · May 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 · May 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 · May 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..

Sign In

Imagem canto inferior direito

Question

MTavares

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

JaguA

Link to comment

Share on other sites

MTavares

Link to comment

Share on other sites

MTavares

Link to comment

Share on other sites

JaguA

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity