Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Menu rozsuwane. Rozpycha się
TheBlackJJoker
post 14.12.2014, 15:44:12
Post #1





Grupa: Zarejestrowani
Postów: 24
Pomógł: 0
Dołączył: 21.01.2014

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


Tak jak w temacie.

http://iv.pl/images/96913422521478626117.png

http://iv.pl/images/93828872953946247413.png

Treść idzie do dołu..
position: absolute; psuje to rozsuwanie ;/

Ten post edytował TheBlackJJoker 14.12.2014, 15:44:25
Go to the top of the page
+Quote Post
Kshyhoo
post 14.12.2014, 15:50:17
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




Nie załączyłeś gumki i ołówka...


--------------------
Go to the top of the page
+Quote Post
TheBlackJJoker
post 15.12.2014, 14:01:53
Post #3





Grupa: Zarejestrowani
Postów: 24
Pomógł: 0
Dołączył: 21.01.2014

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


CSS:
  1. #userpasek {
  2. width: 100%;
  3. border:1px solid #000;
  4. box-shadow:0 1px 0 #555 inset, 0 1px 7px #111;
  5. border-radius:3px;
  6. padding: 3%;
  7. font-size: 20px;
  8. text-align: center;
  9. font-weight: bold;
  10. }
  11.  
  12. #userpasek img {
  13. float: left;
  14. width: 22px;
  15. height: 22px;
  16. border-radius: 10px 10px 10px 10px;
  17. vertical-align: middle;
  18. padding: 1%;
  19. }
  20.  
  21. #userpasek i {
  22. float:right;
  23. }
  24.  
  25. #userpasek:hover {
  26. cursor:pointer;
  27. background-color: #2C363B;
  28. }
  29.  
  30. #userpasek ul {
  31. display:none;
  32. margin:20px 0 0 0;
  33. padding: -1%;
  34. text-align: left;
  35. background-color: #2C363B;
  36. }
  37. #userpasek ul li a {
  38. display: block;
  39. color: #32A1CC;
  40. padding: 2%;
  41. margin: 2%;
  42. border-top: 1px solid black;
  43. font-size:16px;
  44. }
  45.  
  46. #userpasek ul li a:hover {
  47. transition-duration:1s;
  48. color: #32A1CC;
  49. background-color: #3F4E54;
  50. box-shadow: 0 0 15px black;
  51. }
  52.  
  53. #userpasek:hover ul {
  54. display: block;
  55.  
  56. }

HTML:
  1. <div id='userpasek'>
  2. <img src="<?php echo $awatar; ?>" />
  3. <?php echo $_SESSION["login"]; ?>
  4.  
  5. <i class="fa fa-bars"></i>
  6. <ul>
  7. <li><a href="acp.php">ACP<i class="fa fa-cogs"></i></a></li>
  8. <li><a href="profil.php?profil=<?php echo $_SESSION['login']; ?>">Profil<i class="fa fa-user"></i></a></li>
  9. <li><a href="panel.php">Ustawienia<i class="fa fa-cog"></i></a></li>
  10. <li><a href="wyloguj.php">Wyloguj<i class="fa fa-power-off"></i></a></li>
  11. </ul>
  12. </div>

PS: Może być trochę namieszane, bo od rana coś próbuję to zrobić ;/

Pomoże ktoś? Głupia sprawa, ale nie mogę sobie dać rady z tym.

position: flex, czy absolute nie działa na to ;/ A wręcz psuje to "menu"

Ten post edytował Kshyhoo 14.12.2014, 16:07:08
Powód edycji: [Kshyhoo]: bb-code
Go to the top of the page
+Quote Post
SaMi
post 15.12.2014, 14:36:04
Post #4





Grupa: Zarejestrowani
Postów: 173
Pomógł: 14
Dołączył: 27.03.2004
Skąd: Białystok

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


http://jsfiddle.net/qyx2rtxh/5/


--------------------
Zapraszam na spływy kajakowe rzekami podlasia www.splywy-kajakiem.pl
Go to the top of the page
+Quote Post
TheBlackJJoker
post 15.12.2014, 18:06:13
Post #5





Grupa: Zarejestrowani
Postów: 24
Pomógł: 0
Dołączył: 21.01.2014

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


@sami

Działa smile.gif Dziękuję, ale dlaczego nie ma rozmiarów powiązanych z rodzicem?

Jest to obiekt w divie, ale zachowuje się jak by nie był haha.gif
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: 29.05.2024 - 06:25