Jump to content

Archived

This topic is now archived and is closed to further replies.

logan_pa

organizar DIVs no html

Recommended Posts

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...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

<!--- 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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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... ;)

Share this post


Link to post
Share on other sites

/******* 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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.