Jump to content

  2. →
  3. →
  4. →

Photo

Divs Filho Herdando Opacidade

Started By Nicholas Pufal, 30/07/2008, 18:47

  • Faça o login para participar
26 replies to this topic

#1 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 18:47

Matei um problema e me encurralei com outro.

Para fazer a opacidade de uma DIV, estou usando:

div#pai {
margin:60px auto 0px auto;
width:772px;
background-color: #3a3532;

filter: alpha(opacity=80);
opacity: .8;
}


Funciona que nem uma luva... Testei no Linux, Windows, MAC e em diversos navegadores. Tudo beleza.

Porém, agora que fui desenvolver os menus que ficam dentro dessa DIV pai, os mesmos estão absorvendo aquela opacidade 80% setada na DIV pai... Se eu setei eles na DIV pai, eu quero só na div pai pô!! :boxing:

Enfim, preciso arranjar um meio de não herdar as propriedades da div pai ou então um meio de na lista ordenada do meu menu, setar a opacidade para 100% (mas eu já tentei e tentei isso, e também não rolou).

Alguma dica?

Obrigado
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#2 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 30/07/2008, 19:42

Firehalk, essa semana eu estava pensando nisso. Eu acho que não tem como, não dessa forma... :ponder:

Tem gente que faz isso:

<div id="Pai"> </div>
<div id="Filho">Conteúdo sem opacidade</div>
A div pai fica com a opacidade e a div filho fica posicionada com position absolute sobre a div pai. Mas pra mim isso é pura gambiarra, não é semântico fazer isso.

Uma solução que eu proponho para você é usar PNG com opacidade como fundo. Uma imagem de 1x1 px não vai pesar nada e o site continuará semântico. ^_^
att,
Muller Dias
ex-administrador Fórum WMO

#3 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 30/07/2008, 19:57

http://developer.moz..._and_Background
;)
Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#4 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 20:19

Pois é '' sem.Ponto, eu estava agora mesmo guglando sobre isso aí...

Um cara que me pareceu ser bem experiente, comentou o mesmo num fórum gringo. De que por mais que tu coloque opacidade 100% nas divs filho, não vai rolar, vai ser apenas descartado ou decrementada mais ainda a opacidade. Isso porque a div pai - gostando ou não - manda para todas as filho aquela opacidade...

Eu pensei em usar PNG transparent e dar um repeat no meu background... mas pelo que eu lembre, só vai funcionar se eu usar em uma image (<img...). Sendo assim esta opção está descartada (eu me lembro que em um outro site que desenvolvi com transparência + PNG, foi uma boa dor de cabeça no início).

Cristiano, valeu demais pelo link. Dei uma lida por alto aqui, mas parece que vai me dar a luz que preciso hehehe

Acho que a solução vai ser colocar fora essa div mesmo. Aí é só usar z-index e position:absolute pra deixar a div transparent no lugar certo (inclusive também fala disso no link que o Cristiano passou).

Assim que tiver algo mais concreto, posto aqui.

Valeuzão!

Edição feita por: Firehalk, 30/07/2008, 20:20.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#5 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 30/07/2008, 22:07

Não não... funciona em qualquer elemento, basta você especificar. ;)

Para isso você precisa ter o iepngfix: Attached File  iepngfix.zip   1.58KB   16 downloads

Vamos supor que o fundo deverá aparecer na Div Pai:

<div id="Pai">
	ddsfsdf
</div>

Em sua página coloque o seguinte entre as tags <head></head>:
<!-[if lte IE 6]>
<style type="text/css"> #Pai { behavior:url(iepngfix.htc);} </style>
<![endif]->

Pronto! Agora você pode carregar a imagem PNG como background normalmente no CSS...

#Pai {
	background: url(imagem.png) repeat;
}

No IE 6 funciona perfeitamente, no IE 5.5 eu não tenho certeza. Acho que eu esqueci de colocar mais alguma coisa... se alguém souber, me lembra aí... ^_^

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#6 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 31/07/2008, 09:39

Hmmm eu estava falando justamente disso quando postei. Pois o PNG Fix que eu usava, tinha que usar sempre em imagens.

Vou dar uma olhada com calma nesse seu aí ;)

Ainda não cheguei a conclusão nenhuma sobre como vou fazer a opacidade. Com o z-index e absolute tentei aqui mas vai complicar demais para manter a minha página. Vou tentar esse seu método, valeu (y)

Em breve posto aqui.

sem.ponto, funcionou perfeitamente :click:

Eu tinha postado um monte de coisas aqui, mas resolvi editar, porque na verdade eu estava passando por uma "crise de antismo" e editando a div errada no meu código. Aí logicamente, que as coisas se complicam...

Enfim, passada essa crise (eu prefiro pensar que é stress, mas vamos deixar assim...) tudo funcionou legal (y)

Brigadão velho!

Edição feita por: Firehalk, 31/07/2008, 10:32.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#7 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 01/08/2008, 10:24

o png fix que conheço não pode usar png com fundo replicado, pois ele vai alterar isso, o fundo vai ficar no-repeat e a na posição 0 0. bem o que eu usava era o do jquery, esse eu já não sei, ele valida? pois eu trabalhei num site que tinha que ter uma transparencia nas bordas, e o fundo era em degrade, usei um jquey que add isso. mas tente fazer antes uns lances bizarros com transparencia, mas estava tendo o mesmo problema, e o problema do jquery tb.

editado:

fiz um teste aqui numa imagem com texto...

Ele não repete a imagem, ele estica... bizarro meu...

vê se ta certo:

[codebox]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<style type="text/css">

.master{
behavior:url(iepngfix.htc);
background: url(imagem.png) repeat;
height:900px;
width:600px;
}

</style>

<body>

<div class="master">
</div>

</body>
</html>[/codebox]

SS -->

Attached File  imagem.JPG   106.68KB   17 downloads

Edição feita por: Édipo Costa Rebouças, 01/08/2008, 10:49.

#8 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 01/08/2008, 13:16

Até o ponto que eu sei, o repeat não funciona.

Eu usei a técnica milenar chinesa de colocar uma outra div ... mas sem uso de position aboslute. Usei relative com margem negativa.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#9 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 01/08/2008, 13:20

Épido, você usou o iepngfix que eu postei anteriormente? Aquele é a versão 1.0, eu também tenho a versão 2.0 que vem com uma correção para background repeat. Mas não basta só usar a versão 2.0, existe um macete que quase ninguém conhece...

A primeira coisa que você deve fazer é mudar para o iepngfix 2.0. Feito isso, está na hora de colocar o macete na página. Entre as tags <head></head>, você deve chamar um JS:

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

Segue o iepngfix 2.0 e o iepngfix_tilebg.js: Attached File  iepngfix2.0_e_iepngfix_tilebj.zip   3.69KB   17 downloads

Pronto! Agora seu background não vai se esticar e vai se repetir como você queria. ^_^

Aproveitando o tópico, você colocou o CSS fora das tags <head></head>. Olhá lá...

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#10 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 01/08/2008, 14:27

Até o ponto que eu sei, o repeat não funciona.

Eu usei a técnica milenar chinesa de colocar uma outra div ... mas sem uso de position aboslute. Usei relative com margem negativa.



Hmmm aqui funcionou numa boa. Aliás, o repeat foi a parte que me deu menos dor de cabeça. Fiz um quadradinho de 1px X 1px (PNG-24 transparente), dei repeat e pimba... funcionou redondo!

Testei no Linux, Mac, Windows... Firefox, Caminaoseioque (do Mac), IEs (5.5, 6.0, 7.0), Opera (Linux, Windows), Safari (Mac, Windows)...

Só no Konqueror que não rolou de nenhuma forma, porque ele ainda não seu alphas creio eu.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#11 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 01/08/2008, 14:37

Hmmm aqui funcionou numa boa. Aliás, o repeat foi a parte que me deu menos dor de cabeça. Fiz um quadradinho de 1px X 1px (PNG-24 transparente), dei repeat e pimba... funcionou redondo!

Uma imagem 1x1 px repetida ou esticada dá no mesmo. :P

Na verdade essa sua imagem de 1x1 px se esticou, ela não se repetiu. Só é possível perceber se você usar uma imagem com duas cores ou mais.
att,
Muller Dias
ex-administrador Fórum WMO

#12 brunoXP

brunoXP

    EFEI EÔ

  • Conselheiros
  • 2226 posts
  • Sexo:Masculino
  • Localidade:Campinas/Itajubá

Posted 01/08/2008, 20:39

Estou com um problema em um site, o script não funciona.

Em vez de eu colar o site, é mais fácil vocês mesmos visualizarem: http://www.uairrior.unifei.edu.br/ .
Em anexo a estrutura das pastas do site.

Attached File  Untitled_1.jpg   50.77KB   10 downloads

Alguém sabe onde pode estar o problema?
Bruno Toffolo
· Conselho / WebFórum

#13 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 01/08/2008, 21:25

Não teria que ter "/2008" na frente das urls das seguintes linhas?

No CSS
img, div, a, input, script { behavior: url(/componentes/ie_png_fix/iepngfix.htc) }

No .htc
if (typeof blankImg == 'undefined') var blankImg = '/componentes/ie_png_fix/blank.gif';

Da forma que está parece que está buscando os arquivos em www.uairrior.unifei.edu.br/componentes/ie_png_fix/ invés de buscar em www.uairrior.unifei.edu.br/2008/componentes/ie_png_fix/. :ponder:

Tenta mudar para:

No CSS
img, div, a, input, script { behavior: url(/2008/componentes/ie_png_fix/iepngfix.htc) }

No .htc
if (typeof blankImg == 'undefined') var blankImg = '/2008/componentes/ie_png_fix/blank.gif';

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#14 broderyk

broderyk

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Não informado

Posted 04/01/2013, 02:13

Uma opção é colocar um PNGzinho (repeat) transparente de fundo :-)
Em anexo um exemplo preto 80% 16x16

Attached Files


#15 yentran422

yentran422

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Masculino

Posted 16/01/2015, 06:05

questão de escuro no site é o script não funciona

---

baixar facebook, baixar facebook movel


Voltar para CSS & Semântica (Tableless)


0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq