organizar DIVs no html

[logan_pa 0]

Salve!

Preciso de uma força para organizar as DIVS dentro do HTML.

Fiz uma ilustração para expressar melhor minha dúvida.

 

Antes vamos acessar a página de wireframe (pre-layout).

ACESSAR PÁGINA

 

Agora a ILUSTRAÇÃO

 

Minha dúvida: Está correto organizar as divs como mostra a ilustração ou existe uma maneira mais simplificada e facil?

[micox 2]

Existe uma maneira. Em vez de você ficar posicionando layer por layer, você pode definir uma classe pra eles (tipo 'mininoticias') e colocar apenas o tamanho das mininotícias e o atributo float:left;

 

Cada mininoticia conteria sua imagem de topo (seriam os retangulos azuis que tem acima de cada mininoticia sua), o titulo (Pastor reage a assalto e é baleado nas pernas) e o texto (Ut enim ad minim veniam, quis):

<div class=mininoticia><div class=imgtopo></div><h4>Pastor reage a assalto e é baleado nas pernas</h4><p>Ut enim ad minim veniam, quis...</p></div>

No seu css mininoticia, você configura cada um dos elementos da mininoticia e define o tamanho de todas as mininoticias de uma vez só (além de colocar como float:left)

.mininoticia { width:XXpx; height:XXpx; float:left }.mininoticia .imgtopo{ height:XXpx; background-color:#XXXXX; }.mininoticia h4 { /* coloque suas caracteristicas do titulo */}.mininoticia p { /*coloque as características do texto da noticia */}

Fui... Espero ter ajudado.

 

Tava sumido, mas to voltando... Falows...

[logan_pa 0]

legal micox! tenho uma pergunta: posso usar essa formatação tanto para a noticia principal quanto para as destaques?

[micox 2]

posso usar essa formatação tanto para a noticia principal quanto para as destaques?

você pode usar a mesma estrutura do html porém o CSS será diferente, visto que o visual da notícia principal será diferente.Ah. aconselho também a usar um H1 ou H2 para o título da notícia principal (visto que ela é a notícia principal né :) )TEnte sempre fazer valer isto:HTML = conteudoCSS = visualJavascript = comportamento, açoesEditado:Ah. quase ia esquecendo... Caso a imagem ou foto seja importante no conteúdo ou contexto da notícia, e não seja importante apenas para firulas visuais de sua página, ela deverá ser uma tag img de html mesmo (não se esqueca de definir um atributo alt para ela).Se ela for apenas para firulas visuais, deixe ela como um background em css mesmo...

[logan_pa 0]

RESULTADO DE COMO ESTA FICANDO

 

DÚVIDAS:

- Esta correto o 'margin-left' na imagem e nos titulos? No IE funcionou corretamente, no mozzila não. Tem alguma coisa errada.

 

- O efeito nos links (a.linkum e a.lindois) não funcionaram. Eu adicionei cores e nao adiantou, continuam com cor de link padrão (azul).

 

- Posso usar <H4> e <p> mesmo utilizando link nos textos?

[micox 2]

Minhas considerações:

 

1) Ao usar os pseudo elementos (link visited, hover e active), você não precisa reescrever TOOODO o css novamente. você só precisa escrever o que será alterado. (ah, e eu gosto de dar um espacinho entre os elementos tb) Ex.:

/* este é o pai dos links linkum */a .linkum { font: normal normal bold 15px Trebuchet MS, Sans-Serif, color:#000000;text-decoration:none;  }/* estas são as alterações que o linkum pode sofrer */a .linkum:link { } /* eu não preciso escrever nada já que é tudo igual. pus aqui só pra você saber */a .linkum:visited { color:#666666; } /* alterou a color em relação ao pai apenas */a .linkum:hover {color:#333333;text-decoration:underline; } /* alterou a color e o underline */a .linkum:active { color:#999999; } /* só alterou a cor */

Lembrando que esses pseudo-elementos tem uma ordem certa que eu não lembro. dá uma consultada lá no maujor (www.maujor.com)

 

2) Em vez de definir classes linkum e linkdois, você pode usar o seguinte que ficará mais limpo:

.mininoticia h4 a {blablalblab}.mininoticia p a {lalblabla}

Explicação. O 1o estilo acima (.mininoticia h4 a) seráo aplicado a todo elemento 'a' que estiver dentro de 'h4' que, por sua vez, estiver dentro de uma 'mininoticia'.

Assim você não precisará criar outra classe só pra esses links que estão dentro do h4 e do p.

Ficará (perceba que o linkum foi retirado):

.mininoticia h4 a { font: normal normal bold 15px Trebuchet MS, Sans-Serif, color:#000000;text-decoration:none;  }.mininoticia h4 a:visited { color:#666666; } .mininoticia h4 a:hover {color:#333333;text-decoration:underline; } .mininoticia h4 a:active { color:#999999; }

3) Já que você preferiu usar a tag img em vez de colocar a imagem através de background css, você não precisa da div que receberia a imagem. Ela está em excesso. Coloque a class direto na img:

<div class="imgtopo"><img src="images/img.jpg" width="219" height="122" /></div>

Ficará:

<img src="images/img.jpg" width="219" height="122" class="imgtopo" />

PS.: Nenhum dessas viagem que eu fiz acima foi testada.

PS.2: Aplique essas viagem que eu falei acima e veja se corrigiu seus póbrema.

[logan_pa 0]

ALTERADO

 

Observação:

- A cor do link contina azul.

- As imagens ficaram grudadas mesmo tendo a propriedade margin-left no css.

 

Veja uma ILUSTRAÇÃO CORRETA feita por Gustavo Gatto. Semelhante ao que o Micox disse.

[micox 2]

1) No body adicionei o padding:0px também só por desencargo de consciencia

 

2) Seus estilos de links não estavam funcionando pois você não colocou ';' no final da propriedade 'font' (descobri isso através do console do firefox, ele é muito útil. Fica em Ferramentas:Console do javascript). Os links funcionavam no IE, porque este aceita qualquer lixo errado que vier...

Ah. você também esqueceu o ';' no .mininoticia h4 e no p;

 

3) você esqueceu de colocar o height certo no .imgtopo;

 

4) No html: você setou as classes das imagens no 'id' em vez de no 'class'. Por isso que não funfa de jeito nenhum... Classe é classe, id é id (você define ids no css colocando um '#' antes, mas não é este seu caso. mude para class="imgtopo")

 

como ficou:

body {margin:0px; padding:0px;}/*** Link Mini Notícias ***/.mininoticia h4 a { font: normal normal bold 15px Trebuchet MS, Sans-Serif; color:#000000;text-decoration:none;  }.mininoticia h4 a:visited { color:#666666; }.mininoticia h4 a:hover {color:#000000; text-decoration:underline; }.mininoticia h4 a:active { color:#999999; } .mininoticia p a { font: normal normal normal 13px Trebuchet MS, Sans-Serif; color:#000000;text-decoration:none;  }.mininoticia p a:visited { color:#666666; }.mininoticia p a:hover {color:#000000; text-decoration:underline; }.mininoticia p a:active { color:#999999; } /******* Mini Notícias */.mininoticia { width:219px; height:269px; float:left; border: 1px solid black;}.mininoticia .imgtopo{ height:269px; background-color:#ffffff; margin-left:15px; border:1px solid blue;}.mininoticia h4 { font: normal normal bold 15px Trebuchet MS, Sans-Serif; margin-left:15px;}.mininoticia p { font: normal normal normal 13px Trebuchet MS, Sans-Serif; margin-left:15px;}

[logan_pa 0]

PRONTO, ALTERADO

 

Quase lá. Uma ultima observação:

- No mozilla as imagens estão coladas. Acho que o margin-left nao funfou.

[micox 2]

Simples cara. A largura de suas imagens está maior que a própria div mininoticia. Coloque uma borda vermelha no imgtopo que você vai ver...Pra corrigir é só você definir a largura da imagem no css (ou no proprio fonte da imagem jpg).Outra coisa: você não tirou os class=linkum dos links. Eles não servem mais pra nada.

[logan_pa 0]

AQUI

 

- Faltou desgrudar as imagens no mozilla.

- Como faço para aproximar mais a imagem do titulo?

- Com o float-left ele vai jogando as DIV lado lado até acabar a tela. Após tres div como fazer para pular para próxima linha?

[micox 2]

Se você colocou a largura da imagem igual a largura do div pai, então elas terão o mesmo tamanho mesmo e ficarão grudadas... Coloque um border:1px solid red; na imgtopo que você vai sacar o que eu to falando

[logan_pa 0]

- Com o float-left ele vai jogando as DIV lado lado até acabar a tela. Após tres div como fazer para pular para próxima linha e colocar um quarto?

 

- Na notícia principal, consegui posicionar a imgem e o titulo, falta agora o texto, estou tendo dificuldade.

 

PÁGINA

[micox 2]

- Com o float-left ele vai jogando as DIV lado lado até acabar a tela. Após tres div como fazer para pular para próxima linha e colocar um quarto?

É só você limitar o tamanho da div pai que contem os divs-float. Acho também que se colocar um <br /> talvez resolva.

estou tendo dificuldade.

Qual dificuldade? é só posicionar via css uai...

[logan_pa 0]

Obrigado pela força Micox!

[micox 2]

diboas

[logan_pa 0]

PÁGINA

 

Em "Galeria de Fotos" estou tentanto ajustar o background geral (mais claro) e o de dentro (mais escuro).

Esta dando diferença de tamanho e posicionamento nos dois quando visualizado no IE e no Mozilla. Inclusive tentei utilizar alguns hacks mais não funcionou.

 

Ainda em "Galeria de Fotos"

Os titulos 'h6' e 'p' estão mal posicionado. Usei margin-bottom e padding. Talvez eu tenha utilizado as propriedades erradas, por favor, me digam uma maneira para posicionar.

 

 

Agradeço!

[micox 2]

A parte da galeria:

 

1) a solução foi alinhar a div 'detalhe' ao centro SEM USAR LOUCURAS DE MARGIN NEGATIVO. Pra alinhar algo ao centro você coloca text-align:center no IE e margin:auto pro FF. Depois eu só retirei o float:left do 'detalhe'

<!--- Galeria --><style>/*** Galeria ***/.galeria { width:310px; height:235px; margin: 10px; background-color:#F1FAFF; text-align:center;}  .galeria h4{font: normal normal bold 16px Trebuchet MS, Sans-Serif; text-align: left;} .galeria .detalhe {width:290px; height:85px; margin: auto; background-color: #619CBC;  margin-bottom:15px; text-align: left; }  .galeria img {margin:10px 10px 0 10px; float:left; padding:0px; border:2px solid white; }  .galeria h6{ font: normal normal bold 11px Trebuchet MS, Sans-Serif; color:#fff; margin:10px 0 5px 0;}.galeria p {font: normal normal normal 11px Trebuchet MS, Sans-Serif; color:#fff; margin:0 0 0 10px; }</style><div class="galeria">	<h4>Galeria de fotos</h4>	<div class="detalhe">	<img src="images/img.jpg" width="90" HEIGHT="60" BORDER="0" ALT="Seta" class="img">	<h6>Titulo da galeria</h6>	<p>Descrição da galria, Descrição da galria,</p>	</div>			<div class="detalhe">	<img src="images/img.jpg" width="90" HEIGHT="60" BORDER="0" ALT="Seta" class="img">	<h6>Titulo da galeria</h6>	<p>Descrição da galria, Descrição da galria,</p>	</div>				</div><!--- fim da Galeria -->

[logan_pa 0]

RESULTADO

 

Observações:

- A DIV galeria ficou posicionada abaixo de "Ultimas Notícias", teria como posicionar ao lado?

- Há também uma diferença no posicionamento do titulo h6, do texto p e do 'background-color: #619CBC' no mozilla. Estou tentando alinhá-los agora.

 

Comentário:

Juro que não sabia quanto a NÃO USAR MARGIN NEGATIVA.

Vivendo e aprendendo....

[micox 2]

NÃO USAR MARGIN NEGATIVA

Calma, não é proibido... A questão é que exitiu outra forma mais fácil de fazer. heheh

A DIV galeria ficou posicionada abaixo de "Ultimas Notícias", teria como posicionar ao lado?

Pra posicionar do lado, tenta usar um float:right no galeria.