Forum PHP.pl > Chmurka jak na facebooku

Pomoc - Szukaj - Użytkownicy - Kalendarz

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

lukasz108min

25.12.2012, 15:48:25

Witam,

Jak wyświetlić diva na środku ekranu jako taki niby komunikat ( coś jak na facebooku np. dodawanie nowych grup )

Zdjęcie przykładowego diva :

http://zapodaj.net/97b9128f901b7.png.html

piotrex41

25.12.2012, 16:44:21

Wydaje mi się, że jak dla DIVa dasz :

[CSS] pobierz, plaintext 
position:absolute;top:50%;left:50%;
[CSS] pobierz, plaintext

To osiągniesz ten efekt.

kamil4u

25.12.2012, 17:29:14

Nie osiągniesz. Ten kod wyznacza lewą-górną krawędź div-a, a Ty musisz wyznaczyć środek. Ale wystarczy teraz przesunąć odpowiednio od pozycji środka o połowę szerokości i wysokości div-a, za pomocą ujemnych marginesów.

Wystarczy google i fraza "centrowanie css", ew. dodać tam słowo "div"

johnny_b

26.12.2012, 02:37:39

Cytat(lukasz108min @ 25.12.2012, 15:48:25 )

Witam,

Jak wyświetlić diva na środku ekranu jako taki niby komunikat ( coś jak na facebooku np. dodawanie nowych grup )

Zdjęcie przykładowego diva :

http://zapodaj.net/97b9128f901b7.png.html

Część lukasz108min!
jeżeli Cię dobrze zrozumiałem to rozwiązanie (ja przynajmniej zawsze z tego korzystam

to:

CSS:

[HTML] pobierz, plaintext 
#komunikat{
position: absolute; <!-- żeby nie przemieszczały się pozostałe pudełka, opcjonalnie position: fiexed jest dobry, przy przesuwaniu będzie widoczny, nawet bardziej praktyczny -->
top: 50%; <!-- żeby był na środku od górnej części strony -->
margin-left: auto;
margin-right: auto;<!-- lub jak wyżej napisali margin-left: 50% -->
display: block;
width: XXX px;
}
[HTML] pobierz, plaintext

HTML:

[HTML] pobierz, plaintext 
<html><head></head><body>
 
<div id="komunikat">
//tresc komunikatu
</div>
 
Pozostała część storny
 
</body></html>
[HTML] pobierz, plaintext

Zauważ, że div#komunikat musi być poza całym stosem divów, czyli jako odrębny blok strony, żeby mógł być zależny od sekcji body. Jeżeli diva, chcesz umiejscowić w środku jakiegoś innego diva, to jak kamil4u napisał css i marginesy ujemne rozwiążą problem (+ js jeżeli w różnych innych divach, mają się pojawić

)

Pozdrawiam

btw @up, kamil4u ma rację

lukasz108min

26.12.2012, 14:34:29

Wielkie dzięki za pomoc kamil4u i johnny_b

Mam jeszcze jedno pytanie, jak zrobić takie chmurki jak na facebooku po najechaniu na usera ( wiem wiem wszystko z facebooka zżynam

)

Chodzi o to że chmurka zawsze jest w tym samym miejscu u góry lub na dole linka i jak zrobić takie cuś ?

kamil4u

26.12.2012, 14:40:15

Sama chmurka zwie się tooltip. Jak je się robi znajdziesz w Google.

Co do podzwaniania się ich na górze lub dole. Jeżeli wysokość chmurki "mieści się" między linkiem, a górą ekranu to pokazujesz chmurkę na górze. Jeśli nie to na dole.
Aby sprawdzić ten warunek musisz poznać obsługę zdarzeń w JS, czyli umieć sprawdzić, gdzie znajduje się element( jego położenie )

lukasz108min

26.12.2012, 14:53:54

To akurat wiem, nie wiem tylko jak zrobić żeby zawsze wyświetlała się nad linkiem w tym samym miejscu ( gdy ja pisałem to pobierało współrzędne punktu z miejsca w którym jest myszka )

kamil4u

26.12.2012, 15:10:05

To już tylko kwestia HTML + CSS. Kod możesz podpatrzeć szukając tooltip-ów wykorzystujących tylko CSS. Np. http://csstooltip.com/ czy http://downloads.sixrevisions.com/css-tooltips/index.html

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.