[Resolvido] Problema com layout

[NetBoy16 72]

Fala pessoal, to tendo um probleminha nesse site, o fundo de madeira que pertence a div container nao está cobrindo toda a pagina(ver bonus), já deixei com repeat-y e nao defini uma altura, mas ainda continua assim, oque mais eu tenho que fazer ?

[William Bruno 1501]

cara.. a estrutura está ruim.

 

não trabalhe com margins negativas, você não precisa de nenhuma.

não trabalhe com valores muito grande de margins(maior que 100px), você tb não precisa de nenhuma.

 

você não está usando float onde deveria, pq está fazendo o trabalho do float, apenas com margin.

Recomece. Repense essa estrutura.

[NetBoy16 72]

Mas por exemplo se eu nao der um margin-left negativo ali no ultimas coberturas, a div nao fica aonde eu quero, como faco pra contornar isso ?

[William Bruno 1501]

A #conteudo devia ter mais de 800px de largura, e usando float.

 

você tem 1 coisa do lado da outra,

a da esquerda tem q ter float left, e a da direita tem q ter float right.

 

ai embaixo, você tem uma coisa q ocupa 100% de largura, então como essa ta embaixo dos floats, essa coisa tem q ter clear: both;

 

e assim por diante.

 

 

 

não use margins negativas.

[NetBoy16 72]

Nao sei se eu entendi direito, mas o conteudo tem 800px que fica dentro do cont que tem 900px, mas fiquei meio confuso na explicacao :upset:

[Thiago Moraes 32]

Coloque um <p> com a regra clear: both no final da div #container, embaixo de todos os elementos.

[NetBoy16 72]

um <p> vazio ? porque ?

[Marrabel 20]

Nao sei se eu entendi direito, mas o conteudo tem 800px que fica dentro do cont que tem 900px, mas fiquei meio confuso na explicacao :upset:

 

É simples amigo,

 

Exemplo:

 

CSS:

/* seletor do conteudo que irá ficar a esquerda

#esquerda{
float:left;
}

/* seletor do conteudo que irá ficar a direita
#direita{
float:right;
}

/* e para o "quebrar" este float, usar um clear
#clear{
clear:both;
}

 

HTML:

 

<div id="esquerda">Esquerda</div>
<div id="direita">Direita</div>
<div id="clear"></div> ' Aqui ele "quebra" os floats acima para que nao envolva o restante do layout...

<div id="rodape">Rodape</div>

 

Espero ter ajudado.

 

Abs.

[NetBoy16 72]

Ah tah, entendi oque você quis dizer, entao, eu tenho as divs com floats e o clear eu sempre uso no rodape, isso é habito, mas vlw mesmo assim :grin:

 

E WBruno, realmente eu tava sendo um margin maniaco e usando margin até pra fazer o trabalho dos floats :yay:

Agora o layout ta certinho, vlw e muito obrigado a todos, agora só resta uma unica coisa, se vcs verem o site vao perceber que a img do menu ta por baixo, mas nao importa o quanto eu aumente o z-index, ele nao fica pro cima de jeito nenhum, alguém sabe como resolvo isso ?

[William Bruno 1501]

#menu -> relative z-index 2

#cont -> relative z-index 1

 

 

porém veja, q o logo deveria ser um absolute, pois está em cima do conteúdo.

você colocar a div menu com 100px de altura, e uma imagem do menu com 240px de altura, é "gambirra"

[NetBoy16 72]

O menu era absolute, mas dai dependendo da resolucao ele saia do lugar.

 

beleza, so precisei aplicar relative e z-index 3 no rodape e dai ficou perfeito, muito obrigado :lol:

[William Bruno 1501]

O menu era absolute, mas dai dependendo da resolucao ele saia do lugar.

então você estava usando o absolute de forma errada.

 

E eu disse para apenas o logo ser absolute, e não todo o topo.

 

leia:

http://forum.imasters.com.br/topic/458212-proprieedade-position/page__view__findpost__p__1813851

[NetBoy16 72]

ahh ta certo, eu tinha aplicado position absolute na div menu, entao fiz um teste e apliquei na img e agora ficou fixa no lugar, vlw :grin:

[Thiago Moraes 32]

um <p> vazio ? porque ?

 

O tópico está resolvido, mas só pra complementar....

 

O <p> vazio teria a mesma função que a <div> vazia com clear:both, a diferença é q você não precisaria declarar largura, altura, como na div.

[William Bruno 1501]

O <p> vazio teria a mesma função que a <div> vazia com clear:both, a diferença é q você não precisaria declarar largura, altura, como na div.

se você usar uma div vazia com clear:both; você tb não precisa declarar altura e largura.

 

Levando em consideração que P tem semântica, e DIV não... eu prefiro usar uma DIV vazia, doque um P vazio.

[Thiago Moraes 32]

se você usar uma div vazia com clear:both; você tb não precisa declarar altura e largura.

 

Isso é verdade...prefiro usar <p> porque me da uma margem de espaçamento por padrão.

 

Levando em consideração que P tem semântica, e DIV não... eu prefiro usar uma DIV vazia, doque um P vazio.

 

Na questão da web semantica, qual a diferença de um <p> para uma <div>?

[NetBoy16 72]

Na questão da web semantica, qual a diferença de um <p> para uma <div>?

 

<p> é destinado a marcacao de paragrafo, e nao pra usar como layout

[Thiago Moraes 32]

<p> é destinado a marcacao de paragrafo, e nao pra usar como layout

 

A aplicação da tag de acordo com a documentação HTML, eu já sei...A minha dúvida é em relação a web semântica.

 

Em nenhum momento falei pra usar a tag <p> como layout.

[Evandro Oliveira 331]

A aplicação da tag de acordo com a documentação HTML, eu já sei...A minha dúvida é em relação a web semântica.

 

Em nenhum momento falei pra usar a tag <p> como layout.

 

E por um acaso a documentação HTML não define a semântica de cada elemento??

[William Bruno 1501]

Na questão da web semantica, qual a diferença de um <p> para uma <div>?

Vou escrever de novo:

div não tem semântica. Então na websemântica, usamos DIV para estruturar layouts, pois em html4 e xhtml1, não temos outros elementos destinados a dar significado às partes do layout.

Ou seja, blocos do site, que precisam ser divididos de outro blocos.

 

Dentro desses blocos, podemos colocar qq coisa, varios <p>, <a>, <img />...

http://revolucao.etc.br/archives/a-semantica-do-span-e-do-div/

 

 

A tag <p> é destinada a marcar parágrafos. Idéias, trechos de um texto. Cada quebra de linha, cada vez que a professora nos mandava pular uma linha, contar 2 dedos da folha, e escrever mais na frente.

 

 

Era isso que você queria saber @Thiago ?