Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css] absolute i rozwijane menu
Vasquez21
post
Post #1





Grupa: Zarejestrowani
Postów: 213
Pomógł: 0
Dołączył: 2.11.2004
Skąd: Jaworzno

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


Witam wszystkich.

Mam stronkę podzieloną na dwie kolumny, w lewej, mniejszej kolumnie znajduje się menu, które ustawione jest w css'ie tak:

  1. #menu {
  2. position:absolute;
  3. left:20px;
  4. top:90px;
  5. }


I teraz chodzi o to, że poniżej menu są inne rzeczy, które ładnie się komponują (również użyty jest tam position:absolute), czy istnieje jakiś sposób, aby w momencie kiedy menu się rozwija, to co znajduje się poniżej przesuwało się w dół? Mimo, iż jest ustawione właśnie przez position:absoulte?

Z góry dzięki za pomoc.
Go to the top of the page
+Quote Post
Shili
post
Post #2





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

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


Oczywiście, w tym przypadku js. Jak rozsuwasz menu musisz dynamicznie zmienić wartość top.
Go to the top of the page
+Quote Post
Crozin
post
Post #3





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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


Pozycja absolutna jest absolutna (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Chyba lepiej i łatwiej będzie zrobić to statycznie (w sesnie: position: static; (tuteż relative))
Go to the top of the page
+Quote Post
Vasquez21
post
Post #4





Grupa: Zarejestrowani
Postów: 213
Pomógł: 0
Dołączył: 2.11.2004
Skąd: Jaworzno

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


Przebudowałem to tak, że zrobiłem z lewego menu kontener, który jest ustawiony jako absolute, a następnie w nim już dałem kolejne elementy.
Działa na IE7, Safari, Operze, FF, ale nie łazi pod IE6 :/

Kodzik jest bardzo prosty wiec wrzucam...

  1. #container /* kontenerek ktory jest ustawiony jako jedyny absoulte */
  2. {
  3. position: absolute;
  4. left:20px;
  5. top:90px;
  6. width: 200px;
  7. }
  8.  
  9. #menu { /* w menu aktualnie nie ma nic */
  10. }
  11.  
  12. #flash { /*tutaj mam wrzucone logo we flashu */
  13. padding-top: 30px;
  14. padding-bottom: 15px;
  15. }
  16.  
  17. #newsletter_logo { /* po prostu logo */
  18. text-align:center;
  19. padding-top: 15px;
  20. }
  21.  
  22. #newsletter { /* i tekst newslettera razem z rameczkia, guzikiem itp */
  23. text-align:center;
  24. }


Problemy są dwa...

Pierwszy, nie wiem dlaczego, ale flash mi wskakuje na sama gore :/ przed menu.
Natomiast drugi, nie wiem dlaczego ale logo newslettera nachodzi troszke na sam newsletter... nie wiem co jest grane ;/
Go to the top of the page
+Quote Post
cbagov
post
Post #5





Grupa: Zarejestrowani
Postów: 181
Pomógł: 18
Dołączył: 19.04.2008

Ostrzeżenie: (10%)
X----


Co do FLASH - on tak ma, musisz mu ustawic parametr WMODE na -transparent-, bo przewaznie generuje sie -window-. Natomiast divy nad flashem musza miec w CSS {z-index: } wieksze od z-index diva z flashem.

Jak juz to masz to jest jeszcze jeden slodki problem, flash wtedy generuje sie z przezroczystym tlem i widac spod, wiec musisz to tak obmyslic, by pod flashem bylo to, co powinno byc jego tlem.

A co do newsletter. Ciezko powiedziec bo nie widac HTML, nie wiadomo czy to caly twoj CSS i ogolnie dosc skromnie w nim ze znacznikami, stad przyczyn moga byc dziesiatki.

Zwrocilbym uwage na padding - lepiej robic tak, by zastepowac to parametrem margin - gdyz rozne przegladarki maja rozne zapatrywanie na padding, ewentualnie umieszczac element z paddingiem w elemencie nadrzednym, ktoremu ten padding nie bedzie przeszkadzal i dopiero ten nadrzedny element jest wlasciwie pozycjonowany.
Jesli to nie pomoze, zwroc uwage umieszczenie w kazdym z DIV - display:block lub inline, position:, clear:... no jest tego troche.

Dla ulatwienia ustaw sobie ogolnie DIV {border:1px solid red} i wtedy wszystkie divy masz na dloni, jak sie postarasz, to po najechaniu myszka beda ci pokazywac jak maja na imie, jak ci sie nie chce, moga pokazywac statycznie. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 15.09.2025 - 18:33