Problem: Jak stworzyć takie coś ? (CSS)

[FlooX]

Witam,

 

Mam do Was pytanie. Jak stworzyć takiego boxa (czy jak to nazwać) jaki widnieje na głównej stronie onetu:

 

 

chodzi mi tutaj między innymi o te przeźroczyste pole z dłuższym tekstem itd. Chciałem sciągnąć ze źródła onetu, ale jest tam taki syf, że ciężko sie połapać. Udało mi się osiągnąć takie coś:

 

 

Jednak jak widac, napisy w polach rpześwitujących są mało czytelne (bo też zmienia im się opacity) mimo wsadzenia do osobnych paragrafów itd..

Może ktoś pomóc ?

 

html:

 TO jest jakiś tytuł 

Polacy robią wioche i nie potrafią grać w piłke nożną nad czym cała polska ubolewa i łączy się w cieprnieniu składając sobie kondolencje :(

 

css:

p.title {
z-index:2;
background:#ff0000;
color:#ffffff;
padding:5px;
margin:5px;
position:absolute;
opacity:0.85;
}
div.text {
z-index:2;
position:absolute;
vertical-align:bottom;
margin-top:50px;
width:410px;
color:#ffffff;
opacity:0.7;
font-weight:400;
background:#787878;
text-transform:none;
}
div.text p {
color:#ffffff;
text-transform:none;
padding:1px 10px;
}
div.focia {
width:410px;
}
img {
position:absolute;
}

[kamil.ochel]

a może wszadź przezroczystego pnga w tło?

 

albo moze obejdz na okolo i zrob sobie jakis akapit w tej ramce i jemu daj opacity dla tekstu 1

[vrocker]

Nie jestem programistą, ale gdy robiłem layout z półprzezroczysta nakładką na zdjęcia na głównej, to potem przy kodowaniu programista wykorzystał jave do tego.

 

pozdrawiam

[FlooX]

@kamil.ochel

przeźroczysty png odpada. IE6 nie obsługuje przeźroczystosci png. Poza tym to jest inaczej rozwiązane na onecie

 

@vrocker

Myśle, że to jest jakieś rozwiązanie i pewnie z racji tego, że nigdzie nie wygrzebałem odpowiedniego atrybutu w css na onecie to pewnie też to mają jakoś javą zrobione. Chociaż jak wyłącze javescript w przeglądarce to przeźroczystość tam nadal jest więc to chyba nie to

 

ja główkuje nadal..

[kamil.ochel]

a probowales tekstowi osobno od tla dac opacity?

[FlooX]

tak, ale to nic nie daje :P

[Lucas]

Mógłbyś wstawić tło i tekst na oddzielne divy i dla diva z tekstem dać 'position:relative' i do tego jeszcze 'top' na ujemną wartość (prawdopodobnie po prostu wysokość diva z tłem)

 

//pusty div z tłem

	Div z textem

 

PS. Sprawdzałem u siebie na FF, IE8 oraz Chrome i działało:)

Edytowane 13 Wrzesień 2009 przez Lucas

[Gość Gosc]

ja mam duzo bardziej proste rozwiazanie i dziala wszedzie,

w tlo DIVa wstaw GIFa z polprzezroczysta, rownomierna siatka 50%

i z banki - wiem ze bedzie troche widac ze to siateczka, ale przynajmniej zawsze zadziala

 

co do przezroczystosci zadawanej w CSS, opacity:

ona niestety dziala na wszystko co jest w kontenerze DIV, wiec nie mozna

nadpisac stylu i raptem ustawic opacity tekstu na 100%... i to najwieksza wada

[FlooX]

@Lucas

No jest to w jakiś sposób rozwiązanie. Jednak wadą jest to, ze gdy tekst będzie zbyt długi to wszystko się rozsypie, a gdyby był on zamknięty w divie to wtedy atrybutem overflow można ukryć nadmiar tekstu

 

@tjviking

Szczerze mówiąc na to nie wpadłem :) Faktycznie gif zawsze zadziała, tylko nie rozumiem o co Ci chodzi z tą siatką ? mógłbyś zademonstrować ?

[Lucas]

Jeśli ustawisz wymiary diva z tekstem na takie jak div z tłem to overflow zadziała - tylko właśnie szkoda, że to musiałoby być na sztywno.

 

Z tym gifem to chyba chodzi o dithering - w przeciwieństwie do png, gif nie może być półprzezroczysty i dlatego należałoby zrobić siatkę.

[Gość Gosc]

@Lucas

No jest to w jakiś sposób rozwiązanie. Jednak wadą jest to, ze gdy tekst będzie zbyt długi to wszystko się rozsypie, a gdyby był on zamknięty w divie to wtedy atrybutem overflow można ukryć nadmiar tekstu

 

@tjviking

Szczerze mówiąc na to nie wpadłem :) Faktycznie gif zawsze zadziała, tylko nie rozumiem o co Ci chodzi z tą siatką ? mógłbyś zademonstrować ?

 

 

masz tutaj pliczek, sciagnij sobie, ustaw jako tlo tego DIVa, tileable

http://tjviking.com/bg.gif

[FlooX]

masz tutaj pliczek, sciagnij sobie, ustaw jako tlo tego DIVa, tileable

http://tjviking.com/bg.gif

 

Od biedy dobre i to :P

dzięki ;)