Ir para conteúdo

POWERED BY:

Arquivado

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

Liriu

Remover margem entre elementos

Por , em Desenvolvimento frontend

Recommended Posts

Liriu    0

Liriu
Postado

Pesoal depois das dicas do meu amigo Ramal refiz hoje o codigo do jeito que ele sugeriu ( ou quase )Mas estou com um problema o qual ja esta explicado na propria imagem:

As div que defini responsaveis por essas partes sao: nav ( menu preto ) post ( corpo branco ) e dentro da div post a div title ( barra laranja)

problemax.jpg

 

Uploaded with ImageShack.us

 

 

Bom eu gostaria que estivesse assim:

 

problema2s.jpg

 

Uploaded with ImageShack.us

 

Bom segue meu codigo acredito que agora muito melhor.

 

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></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div class="tudo">

       <div class="header"></div>
       <div class="nav"></div>
       <div class="menu"><h1></h1></div>
       <div class="post">
       <div class="title"></div>
</div>


<div id="footer">
</div>
</body>
</html>

 

css

 

* {
   padding: 0;
   margin: 0;
   border: 0;
}
.tudo {
margin:opx;
padding:0px;

      }

body { background:url(imagens/bg.gif);
      ont-family: "Trebuchet MS", sans-serif;
   font-size: medium;
   margin:0px;
   padding:0px;
}

.header {
         background:url(imagens/hd.png) no-repeat;
	  height:300px;
	  width:630px;
	  margin-left:140px;
	  padding: 0px;
	  border:0px 0px 0px;

}

.menu { background:#FFFFFF url(imagens/bdfooter.png) no-repeat bottom;
       float:right;
	width:300px;
	height:300px;
	margin-right:25px;
	}

.nav {
background: url(imagens/borda.png);
width:659px;
height:71px;
margin-left:150px;
border:0px;
}

.post { background:#FFFFFF;
       width:659px;
    height:800px;
	margin: 0px 455px 0px 150px;
	margin-bottom:24px;
	position:relative;

	} 

.title { background:url(imagens/title.jpg) ;
        margin-top:15px;
	 width:620px;
	 height:52px;
	 margin-left:19px;

	 }






#footer{ 
     background:#131313 url(imagens/bgfooter.jpg) repeat;
  height:100px;
  }

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

acontece um collapse das margens.

 

use um padding na parte branca, ficara ate mais 'semantico' digamos assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Entao estude.

 

 

 

Falei o mais portugues possivel.

 

parte branca = 

.post { background:#FFFFFF;

 

padding = http://maujor.com/tutorial/paddingtut.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liriu    0

Liriu
Postado

Willian sei oque e padding mas como quer que eu aplique?

ja coloquei padding-top: 0px;

 

usei todos como 0px mas nao mudou nada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Julio Graffin    0

Julio Graffin
Postado

Cara,

 

vi que o seu código não está devidamente semântico:

 

1. Busque colocar divs principais(header, content, menu, footer...) com "id", das quais não irão mais repetir no documento, as que forem repetir serão "classes", saca?

2. Vi que seu container .tudo não está com valores corretos: .tudo {margin:opx;padding:0px;}. Você colocou um "opx" ao invés de "0px", e ainda não definiu se ele tem um tamanho, uma posição.

3. Tá passando propriedades erradas: ont-family: "Trebuchet MS", sans-serif;

4. Você ja zerou margens, paddings e borders das tags usando *, pra que zerá-las de novo no documento??

 

Esse site é uma ótima fonte de pesquisa, estude melhor por aqui.

 

É isso, espero ter ajudado.

Abraço, e bons estudos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Willian sei oque e padding mas como quer que eu aplique?

você vai trocar o margin por padding.

 

Pegou agora ?

 

trocar:

.title { 
   margin-top:15px;

por:

.post {
padding-top: 15px;

dessa forma, no .title, fica:

.title { 
   margin-top:0px;

 

:lol:

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