Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wyśrodkowanie div'a, którego position: fixed...
Pozycjonowanie i Optymalizacja > Projektowanie stron > HTML i CSS
Roobster
Witam,
mój pierwszy post na tym forum, zapewniam, że szukałem odpowiedzi na to pytanie, ale jeśli do czegoś co jest nie dotarłem proszę o wyrozumiałość wink.gif

Mój problem polega na tym że próbuję wyśrodkować na stronie diva zawierającego grafikę, jednocześnie umieszczając go poniżej kilka pixeli okna przeglądarki.

element body:
[codebox]body
{
background-color: black;
min-width: 740px;
margin: auto;
margin-top: 10%;
min-height: 600px;
width: 80%;
}
[/codebox]

i div zawierający grafikę:
[codebox]#sala
{
position: fixed;
bottom: -15px;
text-align: center;
margin: 0 auto;
}
[/codebox]
efekt tego jest taki, że mam element poniżej okna przeglądarki niezależnie od jej wysokości (tak jak chciałem), jednak nie mogę zmusić go, do przejścia do środka body, ma go po jego lewej stronie czyli na 10%.
Moje pytanie to: czy to w ogóle jest możliwe, aby połączyć te dwie rzeczy, jeśli tak to proszę o podpowiedź. Staram, się szukać sam odpowiedzi na wszystkie problemy, ale czas zaczął mnie gonić nieubłaganie i muszę się weprzeć na kimś bardziej doświadczonym wink.gif

P.S. właśnie zauważyłem, że IE6 ma tego div'a wyśrodkowanego ale z kolei jego pozycja jest bezpośrednio pod powyższym div'em czyli ma w nosie dolną krawędź okna przeglądarki...
Tak, IE6 nie obsługuje position: fixed a różne sposoby emulacji nie dają zamierzonego przeze mnie efektu.


EDIT: myślę o tym i myślę, że przy position: fixed mogę jedynie dokładnie określić położenie elementu - to by było logiczne nawet patrząc na zastosowanie... w takim razie chyba pozostaje mi czekać na potwierdzenie, że to niemożliwe. Może jest jakiś inny/właściwy sposób na to, żeby uzyskać ten cel? obiekt poniżej okna przeglądarki i wyśrodkowany?
motorider
Pozwolę sobie odkopać temat gdyż mam ten sam problem. Jak wyśrodkować diva, który ma position: fixed? Potrzebny jest mi jakiś odpowiednik margin: 0 auto

Udało mi się częściowo rozwiązać problem stosując dla IE left: expression(((document.documentElement.clientWidth-960)/2) + 'px'); Niestety ten sposób nie działa w FF, w którym trzeba zastosować left: expression(((window.innerWidth-960)/2) + 'px');
Nie wiem dlaczego, ale expression(((window.innerWidth-960)/2) + 'px') nie przypisuje żadnej wartości dla left.
Poniższy skrypt działa poprawnie.
KOD
<script type="text/javascript">
    document.write("window.innerWidth - " + ((window.innerWidth-960)/2) + "px" + "<br />");
</script>

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-2012 Invision Power Services, Inc.