Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Chmurka jak na facebooku
lukasz108min
post 25.12.2012, 15:48:25
Post #1





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 9.10.2010

Ostrzeżenie: (0%)
-----

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

Ten post edytował lukasz108min 26.12.2012, 14:35:05


--------------------
Yes.
Go to the top of the page
+Quote Post
piotrex41
post 25.12.2012, 16:44:21
Post #2





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Wydaje mi się, że jak dla DIVa dasz :
[CSS] pobierz, plaintext 
  1. position:absolute;top:50%;left:50%;
[CSS] pobierz, plaintext

To osiągniesz ten efekt.


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
kamil4u
post 25.12.2012, 17:29:14
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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"

Ten post edytował kamil4u 25.12.2012, 17:30:29
Go to the top of the page
+Quote Post
johnny_b
post 26.12.2012, 02:37:39
Post #4





Grupa: Zarejestrowani
Postów: 30
Pomógł: 5
Dołączył: 3.12.2012

Ostrzeżenie: (0%)
-----

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 smile.gif to:

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


HTML:
[HTML] pobierz, plaintext 
  1. <html><head></head><body>
  2.  
  3. <div id="komunikat">
  4. //tresc komunikatu
  5. </div>
  6.  
  7. Pozostała część storny
  8.  
  9. </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ć wink.gif)

Pozdrawiam


btw @up, kamil4u ma rację wink.gif

Ten post edytował johnny_b 26.12.2012, 02:38:26
Go to the top of the page
+Quote Post
lukasz108min
post 26.12.2012, 14:34:29
Post #5





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 9.10.2010

Ostrzeżenie: (0%)
-----

Wielkie dzięki za pomoc kamil4u i johnny_b smile.gif

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

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


--------------------
Yes.
Go to the top of the page
+Quote Post
kamil4u
post 26.12.2012, 14:40:15
Post #6





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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 )


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
lukasz108min
post 26.12.2012, 14:53:54
Post #7





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 9.10.2010

Ostrzeżenie: (0%)
-----

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 )


--------------------
Yes.
Go to the top of the page
+Quote Post
kamil4u
post 26.12.2012, 15:10:05
Post #8





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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

Ten post edytował kamil4u 26.12.2012, 15:10:50


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.06.2025 - 14:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn