Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Div w div w div itd.- IE kaszani + czcionki w IE
Forum PHP.pl > Forum > Przedszkole
zaaap
Witam, uhm od czego by tu zacząc. Moze od poczatku.

PROBLEM 1.
Tworze cos nowego i postanowilem to oprzec na divach... No i tu problemy sie zaczynaja, tzn problemy z IE. Otoz, nie chce mi dzialac cos takiego:
  1. <div id="id_1">
  2. <div id="id_2">
  3. <div class="id_3">
  4. </div>
  5. </div>
  6. </div>


W css:
Kod
id_1 {
width:100%;
position:relative
}

id_2{
margin-left:auto;
margin-right:auto;
width:800px;
position:relative}

id_3{
margin-top:50px;
position:absolute;
}


Efekt pozadany: FF


Efekt niepożądany: IE


Chodzi mi o połozenie tego ciemniejszego diva. Powinien byc ograniczone divem id_2, czyli chodzi o odstep z lewej. Raczej nie idzie wpisanie na sztywno ogleglosci gdyz div id_2 jest wysrodkowany i u ludzi z rozdzielczoscia inna niz moja wszystko sie wykrzaczy. Czyli nie kumam, czemu nie chce przejac od rodzica (probowalem rozne opcje, prosze o wskazowki).

PROBLEM 2.

IE nie chce mi sie zastosowac do wielkosci czcionki! Probowalem z hackami na If IE... ale jest bardzo na to odporne i za nic nie chce zmienic czcionki. W akcie desperacji zrobilem nawet cos takiego:

Kod
a.two:active {color:#a0a3a6; text-decoration:none; font-size:12;}
a.two:link {color:#a0a3a6; text-decoration: none; font-size:12;}
a.two:visited {color:#a0a3a6; text-decoration:none; font-size:12;}
a.two:hover {color:white; text-decoration:none; font-size:12;}


Lecz dalej wskazane linki mam czcionka 16, chociaz linki maja postać:
  1. <font class="styl_w_ktorym_font_size_ustawiony_jest_na_12"><a class="two" href="onas.php">firma</a></font>


To dalej napis firma pozostaje nie taki jak trzeba, czyt. nie zmienia sie nic a nic.

Bede wdzieczny za rady...
piotrooo89
ad 2.
czcionce musisz nadać jakąś wartość tzn %, px, em.

  1. a.two:active {color:#a0a3a6; text-decoration:none; font-size:12px;}
  2. a.two:link {color:#a0a3a6; text-decoration: none; font-size:12px;}
  3. a.two:visited {color:#a0a3a6; text-decoration:none; font-size:12px;}
  4. a.two:hover {color:white; text-decoration:none; font-size:12px;}


i teraz tylko
  1. <a class="two" href="onas.php">firma</a>
zaaap
No tak, głupi bład, px, rzeczywiscie działa, dzieki.

Teraz prosze o porade w kwestii divów. worriedsmiley.gif
!*!
a po co używasz

Cytat
position:relative;
position:absolute;


skoro bez tego div wyśrodkowany będzie w obrębie i tak położonego.
zaaap
Otoz po to, zeby uniknac tego:


Czyli po daniu margin-top zjezdza mi wszystko zamiast tylko ciemnego paska. (PROBLEM 2. nadal aktualny, to screen z FF)

To moze od razu zaprezentuje PROBLEM 3.
Napis chce mieć białą czcionką na divie, ktory jest polprzezroczysty. Jest to do zrobienia? Na jakims forum (stare posty) pisali, ze div bedzie dziedziczyl prezroczystosc i nie da sie tego obejsc a co za tym idzie napis bedzie przezroczsty rowniez (polprzezroczysty).
Moze to sie zmieniło a moze niedouczeni userzy to pisali?
!*!
to taj float dla 3:

Kod
#id_1 {
background-color: #ededed;
width: auto;height: auto;
}

#id_2{
margin-left:auto;
margin-right:auto;
padding-top: 20px;
padding-right: 20px;
background-color: red;
width:800px;
height: 600px;
}

#id_3{
float: right;
color: #ffffff;
background-color: blue;
width:350px;
height: 100px;
}


co za róznica czy będzie #id_3 mieć ustaloną szerokości czy nie skoro, dla #id_2 ustawiasz 800px, w rozdziałce 800x600 i tak się rozjedzie.
zaaap
OK. Rozwiazalem sprawe, zupelnie przypadkowo chwile przez twoim postem. Otoz wewnatrz id_3 dalem diva test
Kod
.test{
position: absolute;
}


I działa elegancko, ale dlaczego, to juz nie wiem. Hmm ale wielkie dzieki za rade, na pewno to wyproboje.
Teraz jesli ktos sie orientuje co do problemu 3 to byłbym wdzieczny.
Probowalem w srodku tego przezroczystego diva dac diva, w ktorym bym usuwał ta cala utworzona przezroczystosc (napis ma byc bialy), lecz nic to nie dało. Pomysły?
!*!
a jak robisz tą przeźroczytosć? daj dla diva tło z plikiem PNG 50% alfa i biały tekst.
zaaap
Cytat(!*! @ 8.12.2008, 13:41:06 ) *
a jak robisz tą przeźroczytosć? daj dla diva tło z plikiem PNG 50% alfa i biały tekst.


Tego IE na pewno nie pociagnie...jako, ze nie obsluguje przezroczystosci PNG.
diva robie standardowo:
Kod
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
piotrooo89
Cytat(zaaap @ 8.12.2008, 13:22:42 ) *
Probowalem w srodku tego przezroczystego diva dac diva, w ktorym bym usuwał ta cala utworzona przezroczystosc (napis ma byc bialy), lecz nic to nie dało. Pomysły?


poczytaj to mojej produkcji i działa u mnie fajnie.
zaaap
Cytat(piotrooo89 @ 8.12.2008, 13:49:06 ) *
poczytaj to mojej produkcji i działa u mnie fajnie.

Tak, wiem, czytałem to z rana dzis. Caly twoj blog nawiasem mowiąc. Ale to chyba ma za zadanie zrobic przezroczystość a nie ją "ominąć"? I dodam, ze w FF działa w IE tez, wiec nie potrzebny mi hack na IE tylko zeby dziecko div pozbylo sie wlasciwosci po rodzicu (lub sprytnego obejscia tej kwestii dziedziczenia).
erix
Cytat
dziedziczyl prezroczystosc i nie da sie tego obejsc a co za tym idzie napis bedzie przezroczsty rowniez (polprzezroczysty).
Moze to sie zmieniło a moze niedouczeni userzy to pisali?

Nie pozbędziesz się tego tak łatwo. Jak przelewasz wodę z miski do miski i barwisz ją w pierwszej na jakiś kolor, to już nie "wyrzucisz" tego koloru. Woda nie będzie przezroczysta. (bez kombinowania z chemią tongue.gif).

Musisz mieć albo obiekt równorzędny w hierarchii, albo jako tło dajesz półprzezroczysty PNG.
zaaap
Cytat(erix @ 8.12.2008, 17:02:34 ) *
Nie pozbędziesz się tego tak łatwo. Jak przelewasz wodę z miski do miski i barwisz ją w pierwszej na jakiś kolor, to już nie "wyrzucisz" tego koloru. Woda nie będzie przezroczysta. (bez kombinowania z chemią tongue.gif ).

Musisz mieć albo obiekt równorzędny w hierarchii, albo jako tło dajesz półprzezroczysty PNG.


No dobrze, jak radziecie dałem te PNG. W FF ok, w IE efekt spodziewany...


Sugestie?
zaaap
Hyh szukalem i szukalem, probowalem i probowalem i cos w koncu zatrybiło. Nie jest to rozwiazanie idealne, ale polecam ludziom z podobnym problemem, czyli:
div z przezroczystym tłem PNG. klik
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.