Ir para conteúdo

POWERED BY:

Arquivado

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

Marcio Ricardo

Posicionamento com css

Por , em Desenvolvimento frontend

Recommended Posts

Marcio Ricardo    0

Marcio Ricardo
Postado

Pessoal,

 

è o seguinte. estou estudando css com o livro de maujor. e comecei a fazer um layout de 3 colunas baseado no modelo do livro. so que comecei a implementar algumas coisas q nao tem lá.

 

estou posicionando os elementos com FLOAT. na horiontal tudo funciona perfeito. O problema é na vertical. tem uma div que eu quero posicionar abaixo de uma outra. So que nao quero q elas fiquem coladas. Quero colocar uma distancia de 10px entre elas.

 

Para isso, usei margin-top:10px; No IE ta funcionando. ja no firefox, não. ela continua grudada. Resolvi usar position: relative; top: 10px; mas, novamente, funcionou apenas no IE.

 

Tem algum modo de colocar esse afastamento vertical entre as DIVS, e de preferencia sem ter q usar position. A div de cima se expande conforme o conteudo e a div de baixo tem q ser empurrada pra baixo, qdo a cima se expandir. Se eu usar position, acho q ela vai ficar estatica e nao vai ser empurruda pra baixo, certo?

 

Obrigado a todos desde já.

 

marcio

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mesmo assim... não era melhor usar um "padding" entre essas 2 DIVs?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcio Ricardo    0

Marcio Ricardo
Postado

Pessoal segue os codigos para melhor compreenção sobre os problemas. O problema entre as divs acho q ja consegui resolver. nao sei está correto, mas.... Agora tentei usar um padding para controlar a distancia entre o titulo de nivel 2 na div principal, com a descrição, RESUMO e a margem superior da div que o contem, mas o resultado foi desastroso. ele criou um espaço entre as div´s topoform e topo.

 

bom, por favor veriifiquem e me digam o q ta errado. Ahh, desculpa pela demora. minha internet em casa caiu e tava sem acesso esses dias.

 

Marcação:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>layout com 3 colunas</title>
<link rel="stylesheet" type="text/css" href="3col2.css" media="all" />
</head>

<body>
<div id="tudo">
			   <div id="topoform">aki conterá o form</div>
			   <div id="topo">
						<h1 class="htop">este é o topo</h1>

			   </div>
			   <div id="conteudos">
					<div id="principal">
						 <h2>Resumo</h2>
						 <p>o resumo da obra, ou síntese do conteúdo, destacando a área do conhecimento,  o tema, as idéias principais e, opcionalmente, as partes ou capítulos em que se  divide o trabalho. Deve-se deter no essencial, mostrando qual é o objetivo do  autor, evitando recorrer a detalhes e exemplos, com máxima concisão. Este  momento é mais informativo que crítico, embora a crítica já possa estar  presente;<br />
						   <br />
						 as categorias ou termos teóricos principais de que o autor se utiliza,  precisando seu sentido, o que ajuda evidenciar seu approach teórico, situando-o  no debate acadêmico e permitindo sua comparação com outros autores. Aqui não só  se deve expor claramente como o autor conceitua ou define determinado termo  teórico, mas já se deve introduzir críticas, seja à utilização ou à própria  conceituação feita pelo autor [em uma resenha para revistas especializadas,  esta parte pode ser dispensada, até por economia de espaço, mas é essencial em  trabalhos de aula, em que o recensor é também aprendiz]; </p>

					  <h2>Como elaborar uma resenha</h2>
						 <p>É um texto que,  além de resumir o objeto, faz uma avaliação sobre ele, uma crítica, apontando  os aspectos positivos e negativos. Trata-se, portanto, de um texto de  informação e de opinião, também denominado de recensão crítica.<br />
</p>
					  <h3>Quem é o resenhista</h3>
					  <p>A resenha, por ser em geral um resumo crítico,  exige que o resenhista seja alguém com conhecimentos na área, uma vez que  avalia a obra, julgando-a criticamente.</p>
				 </div>
					 <div id="auxiliar">

						  <div id="contlivro">
						  <h4>Livro recomendado</h4>
						  <img class="livro" src="style/afroasia.jpg" alt="capa do livro" do maujor  />
						  <p class="notalivro"> a editora novatec lançou o livro do maujor</p>
						  </div>						  
					</div>
					<div id="propag">Publicidade</div>

			   </div>
					<div id="navegacao">
						  <h4>Menu de Navegação</h4>
						  <ul id="menu">
							  <li>home</li>
							  <li>quem somos</li>
							  <li>portfólio</li>

							  <li>contato</li>
						  </ul>
					 </div>
					 <div id="rodape">
						   <address>Rua Barão de Ipanema 23.789 Salas 130/135- Rio de Janeiro, Rj</address>
					 </div>
</div>
</body>
</html>



[b]Estilo:[/b]


body {
	   text-align: center;
	   margin:0;
	   padding:0;
	  }
#tudo {
		width:760px;
		margin:0 auto;
		padding:0;
		text-align:left;
		
	  }

	  
#topoform { height:20px;
			background-color:#333333;
			color:#FFFFFF;
			margin-botton:0;	  
		
		  }

#topo {
			height:90px;
		background:#ffd18b;
			margin-bottom:20px;
	  }

.htop {  
	 margin-top:0px;
	 padding-top:10px;
	
   }
#conteudos {
	 width:600px;
	 float:right;
 
   }

#principal {

	  width:400px;
	  float:left;
	  background:#d1ecf6;
		  padding: 0px 10px 10px 10px;
	  margin-bottom:10px;  
	 
   }
   
#auxiliar {
	  width:170px;	  
	  float:right;	  
	  background-color:#333366;
	  padding:0;
	   
			 }
#contlivro { width:160px;
			 
			 background-color:#FFCC99;
			 padding:5px;
			 }
				
	   
img.livro{
	 display: block;
	 width:160px;

		 	}
.notalivro{margin-bottom:5px;
		   margin-top:5px;
}
#propag {width:160px;

		 height:170px;
		 padding:5px;
		 background-color:#FF9900;
		 float:right;
		 margin-top:10px;
		 margin-bottom:20px;
		 		 
		 }		
#navegacao {
	  width:150px;
	  float:left;
	  background:#a2daec;
	 	}
#menu {padding:0;
	   margin:0;
	   list-style:none;
	   }

#rodape {
	   clear:both;
	   height:25px;
	   background:#ffecd1;
	   
	}	
	h4 { margin-top:0px;
	
	}
Paz a todos,

 

Marcio

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado
....

Agora tentei usar um padding para controlar a distancia entre o titulo de nivel 2 na div principal, com a descrição, RESUMO e a margem superior da div que o contem, mas o resultado foi desastroso. ele criou um espaço entre as div´s topoform e topo.

 

Aqui está tudo OK, com o código postado.

 

Padding onde?

Poste a regra CSS com o padding que está causando o problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcio Ricardo    0

Marcio Ricardo
Postado

Ops. Obrigado Maujor, na verdade enviei o post anterior e nao tinha percibido q esse problema já tava resolvido. o eu to querendo na verdade é conseguir diminuir o espaçamento entre Esse titulo (H2) e a margem superior da DIV Principal. tentei, tentei e nao consigo deixar ela encostada no top.

 

segue o estilo:

 

#principal {

 

width:400px;

float:left;

background:#d1ecf6;

padding: 0px 10px 10px 10px;

margin: 0 0 10px 0;

}

 

Acabei de implementar essas regras no estilo e deu certo. isso é o mais correto?

 

h2 {margin-top:0px;

}

 

 

Quanto ao problema citado antes, resta uma duvida. Pq q ao definir espaçamento no elemento inline (h1) eele afastou uma div de outra?

 

segue a parte da marcação e depois a do estilo:

<div id="topoform">aki conterá o form</div>

<div id="topo">

<h1 class="htop">este é o topo</h1>

</div>

 

Estilo

 

 

.htop {

margin-top:10px;

padding-top:10px;

}

 

 

obrigado novamente.

 

marcio

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