Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafinhaphp

Problemas com display:inline

Por , em Desenvolvimento frontend

Recommended Posts

rafinhaphp    0

rafinhaphp
Postado

salve galera... seguinte:

 

da uma olhada na galeria q estou criando:

 

 

no IE as fotos ñ fica INLINE, fica uma debaixo da outra.. e no FF.. a div fica muito pequena e bem menor que a img.. onde esta o erro?? ó meu codigo completo ai:

 

<style>
body{background-color:#25343e}
#divFoto{display:inline;background-color:#BFC8CA;border:solid #75888E 2px;margin:10px;padding:5;width:100%;}
#corpo{border: solid 2px #33454D; background-color:#8E9C9F;width:960px;padding:7px;}
#menu{
display:block;
border: solid 2px #33454D; 
background-color:#5B6D73;
width:97%;
height:320px;
margin-top:10px;
margin-bottom:10px
overflow:scroll; 
overflow-x:hidden; 
visibility: visible;
}
</style>

<script language="JavaScript">

function mudar_tamanho_over(foto){ 
   foto.style.width="90";
   } 
function mudar_tamanho_out(foto){ 
   foto.style.width="80";
   } 
function mudar_cor_over(celula){ 
   celula.style.backgroundColor="#fff";
   } 
function mudar_cor_out(celula){ 
   celula.style.backgroundColor="#BFC8CA"; 
}
</script>


<center>
<div id=corpo>
<center><iframe frameborder="0" name="frame" style="background-color:black;text-align:center"  width="98%" height="400" align="middle" scrolling="auto"></iframe></center>
<div>

<div id=menu >

	 <?php
// variável que define o diretório a ser listado
$dir = "fotos";

// esse seria o "handler" do diretório
$dh = opendir($dir);

// loop que busca todos os arquivos até que não encontre mais nada
while (false !== ($filename = readdir($dh))) {

		
		//Lista os Arquivos encontrados
		echo"
		<div id=divFoto onmouseover='mudar_cor_over(this)' onmouseout='mudar_cor_out(this)'>
		<a  target=frame href=fotos/$filename><img onmouseover='mudar_tamanho_over(this)' onmouseout='mudar_tamanho_out(this)' border=0 src='fotos/$filename' width='80'></a>
		</div>";
	
	
}



?>
</div>
</div>

 

ahhh.. e outra.. eu sou iniciante em... deve ter batante erro ai! rsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

hargon    64

hargon
Postado

Você colocou a largura da div 100%, deve ser menor que isso.

#divFoto{display:inline;background-color:#BFC8CA;border:solid #75888E 2px;margin:10px;padding:5;width:25%;}

No caso de ser várias div com a mesma propriedade, o interessante seria criar uma classe ao invés de ID, pois ID's não devem ser repetidos.

 

Poste o resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

pow intom..eu tenho mó duvida sobre isso... de quando devo uzar class e quando id... eu só usava class..mas ai eu vi q a maioria usava id... e agora to usando só id! rsrsrs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

hargon    64

hargon
Postado

Altera a largura da div, se você deixar 100%, ela vai pegar todo espaço que puder. O ideal aí é você usar em pixel.

 

Sobre Classe e ID, class você deve usar quando vários elementos utilizarão as mesmas propriedades. ID você usa quando deseja se referir a apenas um elemento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

galera.. seguinte;;;;;

Limpei meu codigo... tirai coizas q tava sobrando e dei uma alterada no css... e também mudei pra class...

 

o problema com o IE jah eras... só que o FF ainda esta com problema: vo postar o html e o css aqui:

 

html

<link rel="stylesheet" href="../estilos/galeria_de_fotos.css">

<script language="JavaScript">

function mudar_tamanho_over(foto){ 
   foto.style.width="90";
   } 
function mudar_tamanho_out(foto){ 
   foto.style.width="80";
   } 
function mudar_cor_over(celula){ 
   celula.style.backgroundColor="#fff";
   } 
function mudar_cor_out(celula){ 
   celula.style.backgroundColor="#BFC8CA"; 
}
</script>


<!-- iframe onde é carregado a imagem grande -->
<center><div id=corpo>
<center><iframe frameborder="0" name="frame" style="background-color:black;text-align:center"  width="98%" height="400" align="middle" scrolling="auto"></iframe></center>


<!-- iaqui é listado as imgs -->
<div id=menu >
<?php
// variável que define o diretório a ser listado
$dir = "fotos";

// esse seria o "handler" do diretório
$dh = opendir($dir);

// loop que busca todos os arquivos até que não encontre mais nada
while (false !== ($filename = readdir($dh))) {

		
		//Lista os Arquivos encontrados
		echo"
		<div class=divFoto onmouseover='mudar_cor_over(this)' onmouseout='mudar_cor_out(this)'>
		<a  target=frame href=fotos/$filename><img onmouseover='mudar_tamanho_over(this)' onmouseout='mudar_tamanho_out(this)' border=0 src='fotos/$filename' width='95'></a>
		</div>";
}
?>
</div>
</div></center>

 

css:

/* CSS Document */
body{background-color:#25343e}

.divFoto{
display:inline;
background-color:#BFC8CA;
border:solid #75888E 2px;
margin:10px;
padding:5px;
text-align:center;
}


#corpo{
border: solid 2px #33454D; 
background-color:#8E9C9F;
width:960px;
padding:7px;}


#menu{
display:block;
border: solid 2px #33454D; 
background-color:#5B6D73;
width:97%;
height:320px;
margin-top:10px;
margin-bottom:10px;
padding:15px;
overflow:scroll; 
overflow-x:hidden; 
visibility: visible;

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

manu... eu percebi outro problema...

 

da uma olhadinha ai na galeria.. a foto do leão fica sobre outras img...

 

 

tipo quando a foto é na HORIZONTAL, ela "sobrepoe" as outras fotos....

 

porq isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Observe bem o comentário:

//Lista os Arquivos encontrados
LISTA os arquivos encontrados. Sendo assim, use uma LISTA:

 

<ul id="fotos">
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
</ul>

 

No seu CSS:

 

ul#fotos {
display:table;
padding:0;
margin:0;
list-style:none;
}

ul#fotos li {
float:left;
}

Esta é a estrutura básica para uma listagem de fotos, basta alterar para que fique como você quer.

 

Estude o básico das CSS, aprenda pra que serve uma classe e pra que serve um id. Então faça testes simples para descobrir como as propriedades se comportam. Aqui no fórum tem um monte de material, dê uma olhada na parte de tutoriais e dicas.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

pow manu... verdade! eu nen me lembrei do LI

 

muito mais inteligente usar uma lista mesmo! :blink: rsrsrsrs

 

fico assim então:

 

ul#fotos {
padding:0;
margin:0;
list-style:none;
}

ul#fotos li {
float:left;
display:inline;
margin:10px;
padding:8px;
text-align:center;
background-color:#BFC8CA;
border:solid #75888E 2px;
}

eu só mudei o display pra inline!

mas to ligado que ñ fez muita diferença! porq oq manda ai é o float

 

 

 

bom.. agora tanto no IE como no FF ta blzinha!

só tem mais um problema...

 

exp:

 

tem 3 fotos :

1° height=100

2° height=50

3° height=50

 

na hora de listar, devido ao float:left eu axo,o script lista a 1° foto e ao lado dela as outras 2 junto (2° e 3°)

 

tipo essa ilustração aqui ó:

 

_______....._____

|...........|...|..2°..|

|...........|...|____|

|....1°....|..._____

|...........|...|..3°..|

|______.|...|____|

(PS.. muito mal feita rsrsrs)

 

isso ñ fica muito legaL!!!

 

como resolver esse problema?

sera muito complicado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Rafinha, tem como postar um link com o código funcionando, nem que seja só um exemplo, para que eu possa observar o problema?

 

amigo, eunão recomendo o display: table passado pelo inside, pois ele insiste em dar erros em quando usado junto de float's.

Como assim não recomenda display:table? Você é do W3C? Display é uma propriedade padrão, e o valor table resolve perfeitamente o problema de elementos pai com elementos filho que contenham float. Se da algum erro é erro de quem fez o CSS, não da propriedade.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Define um height para os LI.. assim não vai ocorrer essa quebra entre um e outro, e eles ficarão mais alinhados.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

eu fiz um teste aqui, defini um height e taL...

 

seria até uma boa.. porq fica tudo alinhadinho!

mas se o height da foto for maior doque o definido, a foto passa do LI!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Tentei acessar o link que você passou mas não abriu aqui...

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

eu fiz um teste aqui, defini um height e taL...

 

seria até uma boa.. porq fica tudo alinhadinho!

mas se o height da foto for maior doque o definido, a foto passa do LI!

Hum.. e você queria oq ? esconder a foto ?? :rolleyes:

 

coloca um overflow: hidden no LI.. ai se a foto for maior que o LI, vai esconder oq passar das dimensões que você declarou.

Ou se não for isso, tente padronizar um pouco os tamanhos das fotos editando as imagens mesmo..

 

Vi que tem uma bem absurda, com uns 400px de altura.. :blink:

Não tem como se ter uma 'miniatura' desse tamanho todo..

 

 

Se você tiver como deixar o link no ar, é melhor para que acompanhemos a evolução do código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

galera, foi mal.. é q estou desenvolvendo um esquema em php que cria os albuns dinamicamente, ai to tirando e colocando no ar o tempo todo, mas esse aqui vai fica fixo:

http://adoracaoprofetica.org/webv3painel/g...os/meu%20album/

 

 

kkkkkk... podi cre. eu coloquei aquela bem absurda só pra ter uma noção...

 

manu... verdade, o overflow: hidden é uma boa opção mesmo, a maioria das galeria eu vejo tem esse esquema!

 

eu coloquei la no LI o overflow: hidden; mas eu ñ manjo muio de overflow

e deu certinho só que as img cortadas fico sem o padding da parte de baixo!

 

acredito que eu tenha que usar o clip: rect() né? mas eu não manjo....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

e deu certinho só que as img cortadas fico sem o padding da parte de baixo!

Oras, se você está usando um padding na imagem (<img />, passe a aplicá-lo no elemento pai, no caso, a <li>... Claro, isso tudo depende de como está estruturado e tudo mais...

 

Quanto ao overflow:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif CSS overflow Property

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafinhaphp    0

rafinhaphp
Postado

mas tem um padding na <LI>

mas só a parte de baixo que não esta funcionando!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito