Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Liinow

[Resolvido] espaçamento =D

Por , em Desenvolvimento frontend

Recommended Posts

Liinow    0

Liinow
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liinow    0

Liinow
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

e como ficou? se possivel poste o link

Compartilhar este post

Link para o post
Compartilhar em outros sites

Layo    10

Layo
Postado

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;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gerciley    14

Gerciley
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Layo    10

Layo
Postado

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 !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito