Forum PHP.pl > [XHTML/CSS] z-index a style polozenia diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [XHTML/CSS] z-index a style polozenia diva

Forum PHP.pl > Forum > Po stronie przeglądarki

kamiseq

9.04.2006, 20:51:48

chodzi mi o to ze z-index nie chce dzialac dopuki nie dam position: absolute

chcialbym zeby jednemu divowi nadac styl float: left i drugiemu tez i nadac rozne wartosci z-index tak aby na siebie naszly?

nie chce dzialac:), bo sprawdzalem(chyba ze cos zle poustawialem w stylach); czy jest jakis sposob zeby to ominac?

bardzo by mi sie przydalo bo robic layout na top, left, right jest malo efektywne. co chce osiagnac? efekt ze tekst z diva nizej wchodzi pod graficzne elementy diva nad soba.

tak na marginesie dlaczego nikt tego nie wykorzystuje do ochrony zdjec? z tego co zauwazylem to uzywacie php do nalozenia dodatkowej warstwy, podczas gdy bez wysilku mozna rozciagnac dodatkowy div nad tym zdjeciem i to tak samo zablokuje mozliwosc sciagniecia zdjecia na dysk, myle sie?

sztosz

9.04.2006, 21:52:44

Cytat(kamiseq @ 2006-04-09 20:51:48)

to tak samo zablokuje mozliwosc sciagniecia zdjecia na dysk, myle sie?

Niestety mylisz się, wytarczy w źródło spojrzeć aby "wyczaić" link do pliku graficznego, a potem to już z górki

yavaho

9.04.2006, 22:44:15

Cytat(kamiseq @ 2006-04-09 21:51:48)

chodzi mi o to ze z-index nie chce dzialac dopuki nie dam position: absolute

Jezeli uzywasz stylu float, to nie nalozysz jednej warstwy na druga. Ten styl definiuje jak mają sie układać obok siebie sąsiednie elementy, a nie jeden na drugim.
A z-index stosuje sie najczesciej ze stylem position:absolute (albo i zawsze z nim jak sie nie myle?)

Jak ulozysz kilka wastw jedna na drugiej stosujac styl position:absolute to stylem z-index zmienisz tylko kolejnosc ulozenia warstw (jedan na drugiej) w stosunku do kolejnosci w jakiej wystepuja w kodzie html.

Cytat(kamiseq @ 2006-04-09 21:51:48)

tak na marginesie dlaczego nikt tego nie wykorzystuje do ochrony zdjec?

Uzywa, uzywa tylko sie nie chwali

Jak by sie pochwalił to by nie miało to sensu.

Cytat(kamiseq @ 2006-04-09 21:51:48)

z tego co zauwazylem to uzywacie php do nalozenia dodatkowej warstwy

Tu masz troche błedne myślenie - php moze jedynie generować kod html lub css.

revyag

10.04.2006, 08:34:30

z-index można zastosować z position: absolute,relative,fixed, ale ie nie obsługuje fixed, więc jesteśmy właściwie ograniczeni do tych dwóch pierwszych.

@kamiseq php można użyć do ochrony zdjęć, tworząc kod który będzie je generował w w odpowiedni sposób(możesz poszukać na forum, bo był taki temat parę razy), ale nigdy nie uzyskasz 100% zabezpieczeń.

kamiseq

12.04.2006, 22:52:07

nie chce zakladac nowego tematu wiec.....
mam taka stronke[link]
i jak widziecie jest tam czerwony prostokat.

chce zeby to wygladalo tak jak sobie zaprojektowalem [projekt]

nadalem mu z-index :20;
tylko pojawia sie problem ze:
1) jak przypisze tamtemu blokowi position absolute to nie wiem jak go ułozyc zeby zawsze byl w tym samym miejscu przy roznych rozdzielczosciach( moze to nie jest problem)
2) jak dam relative to wtedy sie uklad kaszani bo przegladarka rezerwuje miejsce na ten blok mimo ze nie ma go w tamtym miejscu

wiem ze moge to zrobic inaczej ale narazie chcialem tak:]
jakas pomoc?:]

yavaho

12.04.2006, 23:43:47

Jak nadajesz elementowu styl position absolute to wtedy musisz mu ustalic gorny i lewy margines od krawedzi wczesniejszego elementu (rodzica) w ktorym ten elemet sie znajduje.
W Twoim przypadku wczesniejszym elementem nie moze być body lub element ktorego szerokosc moze byc zmienna w zaleznosći od rozdzielczosci ekranu.

[HTML] pobierz, plaintext 
<html>
<body style="text-align:center;">
<div style="width:400px; margin:auto; text-align:left; background:#eeeeee;">
<div style="position:absolute; margin: 0 0 0 300px; width:100px; height:100px; border: 1px solid red;"></div>
tekst<br /><br /><br /><br /><br />
tekst<br /><br /><br /><br /><br />
tekst<br /><br /><br /><br /><br />
</div>
</body>
</html>
[HTML] pobierz, plaintext

Ale ta grafike mozesz rownie dobrze wstawic jako niepowtarzajace sie tło wyrownane do prawej.

kamiseq

13.04.2006, 07:46:25

wiem wiem, ale chce sie pobawic z z-indexem, i jak to sie wogole wyswietla:], pozatym w ten sposob nakladam taka duza warstwe i mi sie napewno nie rozjedzie w IE:] a tak muszialbym to ciac

hym a z tego co tu widze to ja uzylem stylu right i top ktory spowodowal problem!

yavaho

13.04.2006, 11:24:02

Z-index sluzy raczej tylko do jednego. Juz to napisałem:

Cytat

Jak ulozysz kilka wastw jedna na drugiej stosujac styl position:absolute to stylem z-index zmienisz tylko kolejnosc ulozenia warstw (jedan na drugiej) w stosunku do kolejnosci w jakiej wystepuja w kodzie html.

Poprzez zastosowanie z-index mozesz osiagnac tez taki efekt, ze warstwa (grafika) ktora jest u gory bedzie wczesniej sciagnieta z serwera od tej warstwy ktora lezy pod nią. Bo pobieranie grafiki z serwera jest w takiej kolejnosci w jakiej wystepuje w kodzie html.

revyag

13.04.2006, 13:34:06

Cytat

Chcesz powiedzieć że przeglądarka najpierw popatrzy na z-index i dopiero potem ściągnie obrazek ?

Idąc dalej tym tokiem rozumowania, przeglądarka nie będzie ściągać obrazków, jeśli dam im styl display:none

Kolejność ściągania obrazków zależy tylko od kolejności umieszczania tagów <img> w kodzie html.

yavaho

13.04.2006, 14:03:50

@revyag przeczytaj dokładnie do konca to co napisałem, a zwlaszcza ostatnie zdanie

revyag

13.04.2006, 14:27:53

To może powiedz co miałeś na myśli pisząć to:

Cytat

Poprzez zastosowanie z-index mozesz osiagnac tez taki efekt, ze warstwa (grafika) ktora jest u gory bedzie wczesniej sciagnieta z serwera od tej warstwy ktora lezy pod nią.

Jakby tego zdania nie było to bym nic nie napisał.

yavaho

13.04.2006, 15:01:17

ech
Wiadomo ze grafika sciaga sie z serwera w takiej kolejnosci w jakiej wystepuje w kodzie html. I jezeli nalozymy na siebie dwie warstwy (bez stylu z-index) , to najpierw sciagnie sie ta dolna warstwa a potem ta górna.
Ale gdy ustalimy dla nich odpowiedni z-index i zmienimy kolejnosc w kodzie html to uzyskamy to co wczesniej napisałem.

[HTML] pobierz, plaintext 
<!--to jest warstwa gorna a pojawi sie na stronie jako pierwsza-->
<img src="warstwa-górna.gif" style="z-index:2;">
<!--to jest warstwa dolna i pojawi sie na stronie jako druga-->
<img src="warstwa-dolna.gif" style="z-index:1;">
[HTML] pobierz, plaintext

Normalnie bez z-index, to w pierwszej kolejnosci bedzie sie pojawiała grafika ktora jest w warstwie na samym dole itd.

kamiseq

13.04.2006, 16:08:05

a nie rozumiem, jak chcesz nalozyc na siebuie dwie warsty bez z-index?

mowisz moze o nachodzeniu na siebie divow jak cos tam pochrzanisz? czy ze np uzyjesz position relative/absolute. mysle ze to sa wogle oddzielne tematy. bo po co by byl w takim razie z-index?

yavaho

13.04.2006, 17:12:02

Cytat(kamiseq @ 2006-04-13 17:08:05)

a nie rozumiem, jak chcesz nalozyc na siebuie dwie warsty bez z-index?

Do nakładania warst jeda na drugą służy position:absolute
z-index sluzy jedynie do zmiany kolejnosci ułozenia tych warsw w stosunku do kolejności jaka występuje w kodzie html. css z-index

Przykład z mojej strony z zastosowaniem z-index galelria
Podczas ogłądania jednej fotografii następne dwie się ściągają z serwera (coś jakby buforowanie następnych fotografi, ktore bedą za chwile oglądane), a dzieki z-index te ściągane fotografie znajdują się pod spodem pod oglądaną fotografią.

kamiseq

13.04.2006, 22:39:09

dla zainteresowanych to posredni efekt
jest taki ->[efekt] tylko pod ie to sie kaszani ma ktos jakis pomysl?

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.