organizar DIVs no html

[micox 2]

Crins, não precisa de hack.

 

Lembra-se deste post: http://forum.imasters.com.br/index.php?s=&...ndpost&p=539733

??

 

Pois é... Ele fala da diferença de margin e padding entre diversos navegadores. Como você não fez a correção global que eu sugeri (preferiu a correção rápida), agora está tendo os problemas futuros que eu previ.

 

Se quiser uma solução rápida pra isso, é só aplicar a zeragem dos margin e padding só na classe galeria mesmo:

.galeria * { margin:0px; padding:0px;}

Talvez resolva, na verdade eu nem testei (talvez o problema nem seja este). Vê aí se resolve...

 

PS.: A propósito, parece que hoje é teu niver. Se for, parabéns ae...

[micox 2]

Ae crins, dei uma testada aqui e realmente seu problema não era por causa dos padding e margin não.

Daí fiz um limpa naquele pequeno pedaço do maisfotos.

 

1) De acordo com a websemantica, excesso de tags não é bom e não serve pra nada. você tinha só uma tag p que não tava servindo pra nada dentro de uma div. Era melhor você escolher se usa a div ou a p.

Em vez de escolher um das duas, eu preferi escolher a tag <a> visto que aquilo será um link.

 

2) Daí simplesmente apliquei as mesmas regras na tag <a> (lembrando de colocar um display:block nela pra ela ter o mesmo comportamento de uma div).

 

<a href="maisfotos.htm" class="link_maisfotos"> mais galeria de fotos >></a>

.galeria .link_maisfotos {display:block;clear:both;width:290px; background-color:#568EAC; margin:auto; font: normal normal normal 11px Trebuchet MS, Sans-Serif; color:#fff; text-align:right;}

Simplão e resolveu.

[logan_pa 0]

Perfeito Micox. Funcionou!!

 

Ah! E valeu pelos parabéns, meu aniversário foi ontem.

 

Veja como ficou legal

 

Pergunta: como faço para p/ texto "mais galeria de fotos >>" não ficar colado na borda?

[micox 2]

use padding

[estevao_lucas 0]

eaw crins! beleza cara!ai...parabens pelo aniversário!rsrseh.....tava olhando seu site agora......pow...tah ficando fera em!mas olhando lah no outras noticias, vih q você tah adicionando o bullet no proprio codigo html! q o certo seria no css....naum eh?? pois você estaria botantando estilo na html....o q naum é pedido pelo w3c!!soh um detalhe q percebi! flw

[logan_pa 0]

padding-left?

[pa_bruno 0]

onde for preciso ué... se quiser soh na esquerda coloque left...vai testando

[estevao_lucas 0]

acho q tah colando na borda da direita naum eh?entaum ficaria padding-right:mas se quiser na espaço acima e em baixo, bote umpadding:3px 5px 3px 0;ou o q melhor agradar!rs

[logan_pa 0]

Funcionou Lucas! Usei:

padding-right:

Valeu!

[logan_pa 0]

<!--- Menu --><div id="menu">			<ul id="menu_horizontal">		<li class="azul"><img src="images/setinha_menu.gif" width="9" height="5" border="0" alt="setinha" class="icon"/><a href="index6.php" title="Retorne à página inicial">HOME</a></li>		<li><img src="images/setinha_menu.gif" width="9" height="5" border="0" alt="setinha" class="icon"/><a href="fotos.php" title="Veja todas as galerias de fotos">FOTOS</a></li>		<li><img src="images/setinha_menu.gif" width="9" height="5" border="0" alt="setinha" class="icon"/><a href="noticias.php" title="Listar todas as notícias">NOTÍCIAS</a></li>	</ul></div><!--- Fim Menu -->

 

/*** Link Menu ***/#menu_horizontal li a:link {font: normal normal bold 19px Arial, Sans-Serif;color: #326D99;text-decoration: none;}#menu_horizontal li a:visited {font: normal normal bold 19px Arial, Sans-Serif;color: #326D99;text-decoration: none;}#menu_horizontal li a:hover {font: normal normal bold 19px Arial, Sans-Serif;color: #fff;text-decoration: none; background-color:#FFBB00;}

Com o código acima, como faço para colocar mais de um tipo de estilo na lista (li). Quero colocar uma cor para FOTOS e outra para NOTÍCIAS.

[micox 2]

Ae crins, acho que, por tudo que nós já ensinamos e aprendemos aqui, você já sabe... É só pensar um pouco.Com certeza você já sabe.As vezes é mais rápido e fácil testar do que esperar a resposta de alguém...

[logan_pa 0]

ok micox, to tentando.

[logan_pa 0]

Que tal?

 

#menu_horizontal li {list-style-type: none; margin:-3px 0 0 10px; font: normal normal bold 19px Arial, Sans-Serif;text-decoration: none;}/*** Link Menu ***/.li_azul a:link {color: #326D99;text-decoration: none;}.li_azul a:visited {color: #326D99; text-decoration: none;}.li_azul a:hover {color: #fff;background-color:#0D80C9;text-decoration: none;}.li_verde a:link {color: #6C9454;text-decoration: none;}.li_verde a:visited {color: #6C9454; text-decoration: none;}.li_verde a:hover {color: #fff;background-color:#6C9454;text-decoration: none;}

 

<li class="li_azul"><li class="li_verde">

USANDO DOIS TIPOS DE ESTILOS EM UMA LISTA

[pa_bruno 0]

tem codigo desnecessario... olhe meu artigo de reciclagem de css e veja no q pode reciclar...

[logan_pa 0]

Salve galera!

A layout está ganhando vida e ficando cada vez mais interessante. Passei a usar uma cor para cada link. AZUL para o "Notícias", VERDE para "Fotos" e AMARELO para "Informativos".

 

OLHE COMO ESTÁ FICANDO

 

Tenho algumas dúvidas em relação a página FOTOS.

 

1. A página está com diferença no navegador IE com relação a espaçamento. Porque?

2. Agora abra a Ilustração. Como faço para alinhar os titulos e os textos como mostra a linha vermelha?

3. E por fim, gostaria de uma avaliação no código. Bruno Dulcetti e Estevão Lucas, vejam o que vocês acham da minha reciclagem, no que devo melhorar?

 

CSS

[pa_bruno 0]

cara... qnd você tem as duvidas, tem q imaginar as possibilidades... se você naum seta um width, ele vai se esticar ateh onde você mandar... você tem q setar o width como o da foto...e cara, desculpa, mas naum faço consultoria de graça para melhoria de códigos... ;)

[logan_pa 0]

Eu também não estou podendo pagar. No entanto valeu aí a intenção. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[logan_pa 0]

/******* Mini fotos ***/.minifoto { width:243px; height:269px; float:left; margin-bottom:25px;}.clear {clear:both;}.minifoto .imgdestaquedois{width:80px; height:60px;  border:3px solid #608900; margin:10px; float:left;  padding:0px;} .fundo {width:350px; height:auto; float:left; background-color:#C2D497;}.bg {width:744px; height:25px; float:left; margin-bottom:15px; background-color:#DEF3B4; border-bottom: 1px dashed #000000;}.minifoto h4 { font: normal normal bold 15px Trebuchet MS, Sans-Serif; color:#4F6815; margin:3px; }.minifoto h5 { font: normal normal normal 12px Trebuchet MS, Sans-Serif; margin:3px 0;  margin-bottom:1px;}.minifoto p { font: normal normal normal 13px Trebuchet MS, Sans-Serif; margin-left:7px;}

Considerando ocódigo acima, estou tendo problemas para alinhar a foto dentro de <div class="fundo"> no IE. Gostaria de saber se há solução sem precisar de usar hack para posicionar. No mozilla posicionou legal.

 

PÁGINA

[logan_pa 0]

Problema resolvido.

Usei hacks para posicionar. Não tive opção.

 

.minifoto .imgdestaquedois{width:80px; height:60px;  border:3px solid #608900; margin:10px; float:left; _margin: 10px 10px 0 8px;} .fundo {width:350px; float:left; background-color:#EBF6D2; _height:90px; _margin: 20px 0px 0 0px _padding-bottom:20px;}

Valeu pela força Bruno!

[logan_pa 0]

Está acontecendo algo estranho com a folha de estilo da minha página. Ele funciona no mozilla mais no IE não.

 

LINK AQUI