Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Wyśrodkowanie elementu pozycjonowanego bezwzględnie, Coś w rodzaju lightbox`a
windman
post 3.06.2008, 19:18:03
Post #1





Grupa: Zarejestrowani
Postów: 184
Pomógł: 13
Dołączył: 7.01.2008

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


Witam,

Chcę wyświetlać zdjęcie z galerii na tle przyciemnionej strony, czyli coś w stylu lightbox`a.
Nie chcę korzystać z rozwiązań gotowych, tylko spróbować napisać coś własnego.

O to co wymyśliłem:

  1. <div id="box" style="height:100%;width:100%;position:absolute;left:0;top:0;margin:auto;">
  2.  
  3. <div id="content" style="width:300px;height:300px;background-color:#ffffff;position:absolute;left:50%;top:50%;margin-left:auto;margin-right:auto">
  4. Tutaj właściwy tekst albo zdjęcie
  5. </div>
  6.  
  7. <div id="background" style="width:100%;height:100%;background-color:#000000;filter: Alpha(Opacity=80, Style=0);-moz-opacity:0.8;opacity:0.8;">
  8. <!--TO JEST WARSTWA PRZYCIEMNIAJĄCA STRONĘ-->
  9. </div>
  10.  
  11. </div>


DIV box rozciąga się na całą stronę.
DIV content zawiera zdjęcie
DIV background znajduje się pod DIV`em content i przyciemnia stronę

Problem mam z wyśrodkowaniem DIV`a content. Chcę go mieć centralnie na środku strony (niezależnie od rozdzielczości) i w obecnej postaci pozycjonowany (left: 50%; right:50%) jest jego lewy, górny wierzchołek, a nie całość.

Ktoś ma jakiś pomysł, a może inaczej skonstruować ten szablon?

Pozdrawiam
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 4)
Shili
post 3.06.2008, 19:30:50
Post #2





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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


Nadaj ujemne marginesy (górny i lewy) na połowę wysokości i szerokości centrowanego diva, jeśli koniecznie chcesz robić to na pozycjonowaniu absolutnym.
Go to the top of the page
+Quote Post
windman
post 3.06.2008, 21:58:35
Post #3





Grupa: Zarejestrowani
Postów: 184
Pomógł: 13
Dołączył: 7.01.2008

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


Twój sposób działa w poziomie, natomiast w pionie pozycjonowany div do połowy wchodzi pod górną krawędź okna.

Cytat(Shili @ 3.06.2008, 20:30:50 ) *
jeśli koniecznie chcesz robić to na pozycjonowaniu absolutnym.


No właśnie koniecznie nie, to było pierwsze o czym pomyślałem, ciekaw jestem Waszych rozwiązań...

Ten post edytował windman 3.06.2008, 22:02:39
Go to the top of the page
+Quote Post
Shili
post 3.06.2008, 22:13:26
Post #4





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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


To znaczy, że coś jest nie tak z marginesami. Na każdej przeglądarce tak działa?

jeśli chodzi ogólnie o centrowanie polecam fajny link wszystko co chcesz wiedzieć o centrowaniu w css a dokładniej przykład z końca artykułu ze "sztuczkami" dla opornego IE winksmiley.jpg
Go to the top of the page
+Quote Post
windman
post 3.06.2008, 22:26:28
Post #5





Grupa: Zarejestrowani
Postów: 184
Pomógł: 13
Dołączył: 7.01.2008

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


Cytat(Shili @ 3.06.2008, 23:13:26 ) *
To znaczy, że coś jest nie tak z marginesami.


Już jest ok, nie było top:50% przy position.
Dzięki za pomoc i za linki, na pewno przydadzą się.

Pozdrawiam
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 05:08