Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Wyśrodkowanie elementu pozycjonowanego bezwzględnie
Forum PHP.pl > Forum > Przedszkole
windman
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
Shili
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.
windman
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ń...
Shili
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
windman
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
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.