Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z opacity i float w przeglądarce opera
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Pilsener
18.05.2007, 08:46:11
Mam dość ciekawy problem, otóż taki sobie powiedzmy kodzik:

Kod
<style type="text/css">

body {background: khaki;}

#abc {
width: 400px;
background: green;
opacity: 0.75;
}

big {
display: block;
float: left;
font-size: 300%;
background: yellow;
}
</style>

<div id="abc">
<p>
<big>P</big>
osuere. Quisque urna. Cras ut wisi. Phasellus dignissim. Pellentesque habitant morbi tristique bibendum, urna nec dui. Morbi egestas, justo arcu, pellentesque sagittis porttitor. Nulla semper. Morbi felis ut augue. Praesent elit laoreet enim. Maecenas pellentesque eget, condimentum faucibus arcu vitae wisi augue sit amet sagittis libero. Aliquam eleifend, ligula. Nulla.
</p>
</div>


Niby wszystko jest ok, ale:

1. Warstwy mieszają się (zielony z żółtym), ale tylko dla elementów liniowych! (stąd display:block musiałem dać)
2. Kiedy dodam float:left warstwy znowu się mieszają, niezaleznie od tego, czy dałem display:block czy nie

Ratunku!
gekon
19.05.2007, 15:24:30
Opacity jest dziedziczone i nic z tym nie można zrobić.
Pilsener
21.05.2007, 06:24:36
To, że jest dziedziczone, nie tłumaczy zachowania opery.

Podobnie jeśli mam:

Kod
<div id="glowny">
   <div id="lewy"></div>
   <div id="prawy"></div>
   <div id="srodek"></div>
</div>


I nadam opacity divovi głównemu, to divy nakładają się, ale tylko częściowo! (trzeba się nakombinować z ujemnymi marginesami, żeby było dobrze)

Po prostu opera głupieje widząc opacity i tyle...
gekon
21.05.2007, 06:44:41
Nie rozumiem. Zrzut ekranu chociaż smile.gif
barat
21.05.2007, 08:54:50
A nie próbowałeś ominąć dziedziczenia poprzez dodanie dla big{} opacity na 1 ?
Wtedy ta nowa wartość "zniesie" tą "wyżej".
gekon
21.05.2007, 11:57:03
A próbowałeś? Wszystkie elementy potomne rodzica z ustawioną przezroczystością dziedziczą po nim, NIE DA SIĘ tego nadpisać: http://www.glazar.info/opacity.html
barat
21.05.2007, 15:18:44
Może po prostu odpuść sobie przezroczystość - używaj po prostu obrazków ?

Bo z tego co właśnie poczytałem to przezroczystość aplikowana jest do całej warstwy, łącznie z tym co się w niej znajduje.
Przed chwilą zobaczyłem, że nawet ignoruje Float czyli jakby "wyjęcie" jej z tego obiegu ...
Strasznie kłopotliwe ...
Zresztą - to tylko dla firefoxa smile.gif w IE 6.0 nie działa smile.gif
Pilsener
22.05.2007, 10:43:04
Odpuścić? Nigdy w życiu!

Mam kod:

HTML:
Kod
<div id="top">
   <div id="lewy_baner"></div>
   <div id="prawy_baner"></div>
   <div id="srodek_baner">
   </div>
</div>


Chcę, aby ładnie się rozciągało więc dla lewego i prawego float, dla środka width:auto:

Kod
#top {
height: 50px;
filter: Alpha(Opacity=75); opacity: .75;
background: url(grafika/baner_tlo.jpg);
}

#prawy_baner {
float: right;
width: 269px;
height: 50px;
background: url(grafika/baner_prawy.jpg);
}

#lewy_baner {
float: left;
height: 50px;
width: 133px;
background: url(grafika/baner_lewy.jpg);
}

#srodek_baner {
height: 50px;
width: auto;
background: url(grafika/baner_lewy.jpg) no-repeat center;
}


I mamy coś takiego:


Ale widzimy, że:

1. Centrowanie tła wyświetla się poprawnie tylko w IE
2. W operze pomimo tego, że tekst ładnie się wpasowuje, środkowy div się rozjeżdża! Ładnie to widać, kiedy środkowy div koloruje na niebiesko:



Tekst ładnie się wpasowuje, ale czemu tło wyłazi na boki? Jak zaradzić?
Dla środkowego diva daję marginesy i otrzymuje coś takiego:



Widzimy, że centrowanie zalatwione, ale w operze wciąż coś nie gra. Otóż zauważyłem, że w FF i IE opacity jest wyświetalne jako dwie warstwy: treść i tło (co moim zdaniem jest logiczne i praktyczne). Natomiast w operze zobaczymy tyle warstw, ile mamy zagnieżdżonych elementów! (w tym wypadku raz są dwa, raz trzy - stąd różnica kolorków)

Jak zaradzić?
"Zdjąć" 3-cią wartwę nadając całemu topowi marginesy dodatnie, natomiast lewemu i prawemu ujemne. IE nakarmimy position:relative oraz filtrami. Całość wygląda teraz tak:



A tutaj macie wgląd w cały projekt (jestem amatorem, więc proszę się nie śmiać):
http://www.pilsener.fr.pl/test/naglowek.php

Problem kolejny, to wyświetlanie elementów w operze:

Kod
<div>
<h1>Typowy H1</h1>
<h1 style="display:inline">H1 z display:inline</h1>
<h1 style="float:left">H1 z float</h1>
</div>


i CSS:
Kod
div {
padding: 30px;
width: 500px;
height: 300px;
background: green;
opacity: 0.75;
}

body {
padding: 30px;
background: yellow;
}

h1 {
background: blue;
}





W FF wszystko jak po sznurku, a w operze?

Znowu mamy trzy warstwy, ale tylko dla elementów blokowych bez float! Co to za dziwna interpretacja?

Moja opinia o operze jako przeglądarce przyjaznej dla webmajsterów została mocno nadwątlona worriedsmiley.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.