[Resolvido] Layout CSS

[Diego Macêdo 6]

Estou querendo alinhar as imagens do slideshow de forma correta dentro da DIV "CONTAINER", mas não entendi o pq ela está lá fora.

 

Link: http://www.ansefalagoas.com.br/

 

Conto com a ajuda de vocês. O site final deverá ficar assim:

[lucasmartins 6]

Para mim ela está dentro da div aqui cara, testando com o IE8...

[Diego Macêdo 6]

Estou usando Firefox 3.5.4 e não está... :wacko:

 

A única coisa a mais que vai ter de diferente no código atual pra essa imagem, é que vai ter 2 colunas na região central, onde eu vou fazer uma coluna de 200px na esquerda e o restante do conteúdo ficará a direita.

[lucasmartins 6]

Estou usando Firefox 3.5.4 e não está...

 

Hmmmm...

 

tente colocar a classe clearfix na div pai do site... ou na div pai do slideshow...

 

da uma olhadinha: http://ainternetenossa.wordpress.com/2009/11/04/resolvendo-o-problema-de-float-no-css-com-a-classe-clearfix/

 

Abraços,

Lucas Martins

[Diego Macêdo 6]

Não resolveu.

 

Joguei a classe na div "container" e testei tb na div "slideshow" e não resolveu, continuou td na mesma.

 

Alguma sugestão a mais?

[Thiago Retondar 18]

Estranho. Não consegui identificar claramente o porque do erro. =/ Se tirar o funciona...

 

Já tentou posicionar com position?

 

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

[Diego Macêdo 6]

Já fiz uns testes com o position, mas nada ajudou.

 

Muito estranho isso.

 

Tô quase desistindo de fazer esse site em tableless e fazer no velho estilo de tabelas. :wacko:

[lucasmartins 6]

Tô quase desistindo de fazer esse site em tableless e fazer no velho estilo de tabelas.

 

Se é loko.. heahauhuae!!

 

Cara, estava analisando melhor aqui em casa, tenho quase certeza de que já sei o problema...

 

Preciso analisar melhor dps no meu notebook (que está no escritório =/) que tem o firebug...

 

Tenta aumentar um pouco o width e height das div que cobre o slideshow... as vezes pode ser isso, ele não deve estar cabendo ali e pula pra fora =P

 

Abraços

[Fredvan 0]

Boa tarde pessoal!

 

Pelo o que eu percebi, a div do slideshow está fora do contexto realmente.

 

Percebi que você fez a div "TOPO" e a "SLIDESHOW" dentro de topo né?

 

Então faça o seguinte: na div TOPO defina o 'position:relative;' e na div SLIDESHOW defina o 'position:absolute;' daí é só controlar as coordenadas da div SLIDESHOW passando parâmetros 'top:(valor)px;' e 'left:(valor)px;'

 

Espero que consiga agora, boa sorte!

[Maujor 144]

Altere sua CSS como mostrado a seguir:

 

#logo {	
 background-position:125px 0; /* acrescente */
}

#menu_horizontal {	
 width:750px; /* altere */	
}

#topo {
 padding-top:1px; /* acrescente */	
}

[Diego Macêdo 6]

Grande mestre Maujor, sua dica resolveu meu problema!

 

Agora estou querendo resolver os seguintes problemas:

1- O menu horizontal não está preenchendo com o branco completamente, alguns espaços estão "transparentes".

2- Teoricamente, não era pra div "centro" e "copyright" estar DENTRO da div "container"? Estão tb foram :wacko: (Não liguem para aquelas cores verde, vermelho e roxo, só apenas pra eu ter uma visão de onde estão se encaixando as divs)

 

Porque a minha idéia agora é montar 2 colunas na região do "centro" onde lá na imagem do site estão as notícias. Será tipo uma coluna na esquerda mais fina e outra da direita que ficará o conteúdo do site em si.

 

Por enquanto acho que são essas as minhas dúvidas.

[Maujor 144]

Altere assim:

 

#container {
 overflow:auto; /* acrescente */
}


#menu_horizontal {
 width:740px; /* altere */
 margin:0; /* altere */
 padding:5px 0 0 130px; /* acrescente */
}

#separador_horiz {
 width:870px; /* altere */
 margin:0; /* altere */
}

[Diego Macêdo 6]

Boa Maujor!

 

Por isso sou seu fã! http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif

 

Fiz uns ajustes básicos e estou querendo fazer uma separação da div "separador_horiz" da div "centro", mas não quero deixar o fundo transparente, quero que fique branco.

 

Tentei o margin (ficou transparente) e padding (engrossou a linha). Quais outras opções eu tenho para fazer essa linha divisória separar do centro uns 5px?

 

Outro detalhe que estou percebendo, é que as divs "centro e copyright" (e suas filhas) não estão dentro da div "container". Porque isso?

[Maujor 144]

Para o separador:

#centro {
border-top:5px solid #fff; /* acrescente */
}

Para ficar dentro do container faça como eu indiquei anteriormente:

(você não acrescentou ainda)

#container {
 overflow:auto; /* acrescente */
}

[Diego Macêdo 6]

Realmente eu me passei e não vi esse detalhe do overflow! Desculpa! http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

Maujor, você me ajudou bastante. Mais uma vez, mto obrigado!

 

Agora vou continuar no desenvolvimento do restante do site e quando surgir mais dúvidas sobre ele, vou postar aqui.

[Diego Macêdo 6]

Fiz a introdução de um texto aleatório na div "direita" e ela desceu, criando até uma barra de rolagem na vertical e horizontal.

 

Teoricamente era pra cada div se comportar como um bloco que iria empurrando os de baixo de acordo com o tamanho das divs superiores.

O que houve?

 

Também gostaria de saber como dar um espaço na parte interna em relação a parte externa. Seria utilizando "margin", "padding", ou o que?

[William Bruno 1501]

Teoricamente era pra cada div se comportar como um bloco que iria empurrando os de baixo de acordo com o tamanho das divs superiores.

O que houve?

Não sei. Tem um link para verificarmos ?

 

Também gostaria de saber como dar um espaço na parte interna em relação a parte externa. Seria utilizando "margin", "padding", ou o que?

 

Depende.

Dá uma estudada em boxmodel

http://maujor.com/tutorial/csscaixa.php

[angelorubin 142]

Bom dia pessoal,

 

Se você estiver seguindo o fluxo normal do elemento nivel de bloco (div por exemplo) sem altera-lo como por exemplo utilizando-se de (float, position), a resposta é sim eles serão empilhados na vertical, mas caso você tenha alterado este fluxo normal dos elemento a resposta seria não.

 

O espaçamento externo entre elementos nivel de bloco ou elementos inline se dão através de (MARGIN).

 

No caso de espaçamento interno do elemento pode utilizar (PADDING).

 

Lembrando que o espaçamento externo (MARGIN) entre os elementos não se somam e o elemento que possuir definido o espaçamento maior prevalece.

 

Por exemplo:

 

Um elemento DIV com margin-bottom igual a 20 pixels e outro elemento DIV com margin-top igual a 40 pixels, teoricamente teriamos uma distancia de 60 pixels (40px + 20px) entre os elementos, mas isso não ocorre ( * eu não sei explicar isso, acredito que o maujor possa nos esclarecer ! ) as margens se sobrepõe e o que prevalece é a distância maior entre os elementos que no nosso exemplo é a de 40 pixels.

 

Espero ter ajudado.

 

angelorubin.

[Maujor 144]

Providência no.1: Validar o documento no W3C - Link para o validador

Segundo o validador existem DIVS não fechadas no seu documento.

Pode ser que isto esteja causando o problema.

Valide seu documento e volte a postar.

 

@Angelo Rubin:

Você mesmo deu a resposta para o que você não sabe.

As especificações das CSS preconizam que margens verticais se sobrepõem e vale a maior delas.

Mas, para elementos flutuados elas não se sobrepõem, neste caso se somam.

[Diego Macêdo 6]

William Bruno, o link está no primeiro post. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Bom Maujor, eu consegui validar o arquivo e também o CSS, apesar de lá aparecer "Alertas", mas os erros em si eu resolvi.

 

Já o angelo eu não vou nem comentar.. falou, falou e num disse nada... :P

 

Problema continua... :wacko: