[CSS] Div w div w div itd.- IE kaszani + czcionki w IE Opcje

[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:

[HTML] pobierz, plaintext 
<div id="id_1">
    <div id="id_2">
        <div class="id_3">
        </div>
    </div>
</div>
[HTML] pobierz, plaintext 

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ć:

[HTML] pobierz, plaintext 
<font class="styl_w_ktorym_font_size_ustawiony_jest_na_12"><a class="two" href="onas.php">firma</a></font>
[HTML] pobierz, plaintext 

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.

[HTML] pobierz, plaintext 
a.two:active {color:#a0a3a6; text-decoration:none; font-size:12px;}
a.two:link {color:#a0a3a6; text-decoration: none; font-size:12px;}
a.two:visited {color:#a0a3a6; text-decoration:none; font-size:12px;}
a.two:hover {color:white; text-decoration:none; font-size:12px;}
[HTML] pobierz, plaintext 

i teraz tylko

[HTML] pobierz, plaintext 
<a class="two" href="onas.php">firma</a>
[HTML] pobierz, plaintext 

[zaaap]

No tak, głupi bład, px, rzeczywiscie działa, dzieki.

Teraz prosze o porade w kwestii divów.

[!*!]

a po co używasz

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]

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]

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]

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

Ten post edytował zaaap 8.12.2008, 13:52:53

[erix]

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

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

Ten post edytował erix 8.12.2008, 17:03:00

[zaaap]

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

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?

[erix]

http://letmegooglethatforyou.com/?q=png%20IE

[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