Publicado em 19 de mar.

[Resolvido] espaçamento =D

Olá galera do Imasters,

Venho por meio deste tópico pedir ajuda de algum membro experiente que possa me ajuda na seguinte duvida que persiste no meu CSS.

Criei as seguintes divs, como mostra o anexo.

ImageShack

Como vocês podem perceber, as Divs acima estão com um espaçamento maior do que as outras... Como eu poderia resolver este problema ?

Obrigado pela atenção. :rolleyes:

Att,

Liinow

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Andrew Marques· 20 de mar.

As caixas da esquerda(azuis) estão com "float:left" e as da direita(pretas) com "float:right" ? Senão tiverem tente colocar, caso continue tente dar "margin:0;" em ambas

:thumbsup:

Liinow· 20 de mar.

Olá,

Eu fiz essas modificações no meu CSS,veja:

.esque
{

 float:left;
 background-color:Blue;
 width:47%;
 margin-left: 5px;
 margin-top: 5px;
 margin-right: 5px;
 margin-bottom: 5px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 -moz-border-radius:20px 0;
 -webkit-border-radius:20px 0;
 border-radius:20px 0;
}
.direi

{

 float:right;
 background-color:Black;
 width:47%;
 margin-left: 5px;
 margin-top: 5px;
 margin-right: 5px;
 margin-bottom: 5px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 -moz-border-radius:20px 0;
 -webkit-border-radius:20px 0;
 border-radius:20px 0;
}

NetBoy16· 20 de mar.

e como ficou? se possivel poste o link

Layo· 20 de mar.

So uma dica:

Como todos os elementos tem o mesmo valor:

margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;

Basta colocar assim:

margin: 5px;

Liinow· 22 de mar.

Obrigado pela dica Layo. :rolleyes:

Gerciley· 22 de mar.

vê se é isso que você quer.. copie o código e abra ai no seu browser,

<!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>Untitled Document</title>
<script type="text/javascript">
function abre(div)

{

 document.getElementById(div).style.visibility = 'visible';
 document.getElementById('btn').focus();
}
function fecha(div){
 document.getElementById(div).style.visibility='hidden';
}
</script>
<style type="text/css">
.esque

{

background-color:Blue;
width:47%;
height:70px;
margin: 5px;
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
float: left;
}
.direi

{

background-color:Black;
width:47%;
height:75px;
margin: 5px;
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
float: left;
}
</style>
</head>
<body>
<body>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>
<div class="esque">a</div>
<div class="direi">a</div>

</body>
</html>

é só da float: left nas divs da direita e esquerda, e intercala-las no HTML.

Espero ter ajudado.

Abraços

Layo· 22 de mar.

o float esta flutuando sem nada como referencia coloque isso no css v c da certo:

body {

margin: 0 auto;
width: 900px;
}

c baseiei no codigo do gerciley, q esta bem legal...

no html tire um <body> pois tem 2 ... valeu !!!

Liinow· 22 de mar.

Muito obrigado Layo e Gerciley, era isso mesmo. :D

Abraços!