Ir para conteúdo

Arquivado

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

Dejay

Problemas com 'margin-top'

Recommended Posts

Rapaziada beleza?

Seguinte, to tentando desenrolar aqui no CSS. Porém eu não tenho conhecimento vasto sobre o assunto.

Quando eu coloco margin-top:10px; numa DIV(Vamos chamar de div1) que está dentro de uma outra DIV (DIV2) as duas são afetadas sendo que eu só queria que ficasse 10px de margin-top na DIV1. Vou postar os codigos, se puderem resolver meu problema ficaria muito grato!

 

index.html

<!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>Rehoboth Crystals</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<!-- TOPO !-->
<div id="barratopo">
  <div id="ligueja">Ligue Já! <strong> 3055.1627</strong></div>
    <div id="botoes"><a href="#"><img src="img/facebook.fw.png" width="30" height="25" /></a></div>
</div>
<!-- FINAL TOPO !-->
<!-- CONTEUDO !-->
<div id="conteudo">
	<div class="logomarca"></div>
</div>
<!-- FINAL CONTEUDO !-->
<!-- MENU !-->
</body>
</html>

css/estilos.css

@charset "utf-8";
/* CSS Document */

body { margin-top:0px; margin-left:0px; margin-right:0px; font-family: 'Open Sans', sans-serif;}
/** TOPO **/
#barratopo {width:100%; height:25px; background:#E5E5E5; }
#ligueja { width:130px; margin-top:5px; margin-left:200px; font:12px Arial, Helvetica, sans-serif; color:#0099FF; float:left;}
#botoes {width:60px; height:25px; margin-right:400px; font:12px Arial, Helvetica, sans-serif; color:#0099FF; float:right;}
/** LOGO **/
#logomarca { width:368px; height:91px; background-image:url(../img/logo.fw.png); background-repeat:no-repeat; margin-top:0px; margin-left:50px; }
/**CONTEUDO**/
#conteudo { width:1000px; height:300px; margin:0 auto; background:#EEE; display:block;}
#conteudo .logomarca { width:368px; height:91px; background-image:url(../img/logo.fw.png); background-repeat:no-repeat; margin-top:10px; margin-left:50px; }
/** MENU **/
#menu { width:450px; height:55px; float:right; margin-right:100px; }

Se puderem ajudar ficaria muito grato galera! Estou usando Dreamweaver CS3.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como resolver esse problema de verdade eu não sei te falar, mas se em vez de margin você utilizar o padding vai funcionar. Tanto do div "conteudo" quanto no div "logomarca".

 

Se você for colocar outro div ao lado do "logomarca" utilize o padding-top no div "conteudo", que aí já vai dar o espaçamento em todos os outros. Mas se for colocar alguma outra coisa colada do div "barratopo" coloca o padding no div "logomarca" mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dejay, tudo bom?

 

Utiliza padding na div pai.

 

exemplo:

 

HTML

<div id="pai">
      <div class="filho"></div>
</div>

CSS

#pai {
   padding-top: 10px;
   background: #fff;
   border: 1px solid #333;
}
.filho {
   background: red;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta isso :

 

Altere só o CSS

@charset "utf-8";
/* CSS Document */

body { margin-top:0px; margin-left:0px; margin-right:0px; font-family: 'Open Sans', sans-serif;}
/** TOPO **/
#barratopo {width:100%; height:25px; background:#E5E5E5; }
#ligueja { width:130px; margin-top:5px; margin-left:200px; font:12px Arial, Helvetica, sans-serif; color:#0099FF; float:left;}
#botoes {width:60px; height:25px; margin-right:400px; font:12px Arial, Helvetica, sans-serif; color:#0099FF; float:right;}
/** LOGO **/
#logomarca { width:368px; height:91px; background-image:url(../img/logo.fw.png); background-repeat:no-repeat; margin-top:0px; margin-left:50px; }
/**CONTEUDO**/
#conteudo { width:1000px; height:300px; margin:0 auto; background:#EEE; display:block; padding:10px; margin-top:10px;}
#conteudo .logomarca { width:368px; height:91px; background-image:url(../img/logo.fw.png); background-repeat:no-repeat; margin-top:10px; margin-left:50px; }
/** MENU **/
#menu { width:450px; height:55px; float:right; margin-right:100px; }

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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