Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Środkowanie diva
rafalek1001
post 16.11.2018, 03:37:29
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 9.02.2013

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


Witam. Mam problem z wyśrodkowaniem diva. Mam panel nawigacyjny w którym znajdują się menu oraz div logowania (jak na obrazku poniżej):



Na czerwono menu, na żółto panel logowania.

Teraz chciałbym żeby menu zawsze było wyśrodkowane, niezależnie ilości dodanych tam opcji oraz żeby obok menu znajdował się panel logowania, w ten sposób:



Niestety, kiedy ustawiam width menu na 100% kontenera i wyśrodkowuję text-align: center; to wtedy panel logowania przeskakuje na dół, jak na screenie:



Próbowałem już wszystkiego i mam świadomość że jeżeli div się nie mieści to przeskoczy niżej, ale ustawiałem także szerokość menu na auto, tak aby zajmowała tyle ile rzeczywiście mierzy, div logowania na trochę mniejszy procentowo i także to nie zdaje egzaminu. Albo przeskakuje do następnej linii albo menu się nie środkuje i tak na zmianę...

Mógłby ktoś dać jakieś wskazówki odnośnie tego jak to ustawić tak jak na drugim screenie?

Mój kod na tę chwilę jest taki:

PHP:

  1. <div id="panel">
  2.  
  3. <ul id="menu">
  4. <li><a href="index.php">Strona główna</a></li>
  5. <li><a href="typy.php">Typy</a></li>
  6. <li><a href="archiwum.php">Archiwum</a></li>
  7. <li><a href="eksperci.php">Eksperci</a></li>
  8. <li><a href="onas.php">O nas</a></li>
  9. <li><a href="kontakt.php">Kontakt</a></li>
  10. </ul>
  11.  
  12. <?php
  13.  
  14. if(!isset($_SESSION['zalogowany']))
  15. {
  16.  
  17. ?>
  18.  
  19. <div id="panellogowania">
  20.  
  21. <form action="zaloguj.php" method="post">
  22.  
  23. <h4>Login:</h4> <br /> <input type="text" name="login" /> <br />
  24. <h4>Hasło:</h4> <br /> <input type="password" name="haslo" /> <br /><br />
  25. <input type="submit" value="Zaloguj się" />
  26.  
  27. </form>
  28.  
  29. <?php
  30.  
  31. if(isset($_SESSION['blad']))
  32. echo $_SESSION['blad'];
  33. unset($_SESSION['blad']);
  34.  
  35. ?>
  36.  
  37. </div>
  38.  
  39. <?php
  40.  
  41. } else {
  42.  
  43. ?>
  44.  
  45. <div class="panellogowania">
  46.  
  47. <h3><a href="logout.php">Wyloguj się!</a></h3>
  48.  
  49. </div>
  50.  
  51. <?php
  52.  
  53. }
  54.  
  55. ?>
  56.  
  57. </div>


CSS:

  1. #panel
  2. {
  3. background-color: #20B2AA;
  4. width: 100%;
  5. height: 150px;
  6. }
  7.  
  8. #panel h4
  9. {
  10. font-size: 12px;
  11. margin: 0;
  12. color: #000000;
  13. }
  14.  
  15. #panel br
  16. {
  17. display: block;
  18. margin: 0;
  19. }
  20.  
  21. #menu
  22. {
  23. list-style-type: none;
  24. margin: 10px;
  25. padding-left: 0px;
  26. font-size: 18px;
  27. line-height: 740%;
  28. float: left;
  29. width: auto;
  30. height: 100%;
  31. text-align: center;
  32. }
  33.  
  34. #menu > li
  35. {
  36. display: inline-block;
  37. padding-left: 20px;
  38. padding-right: 20px;
  39. border-right: 1px dashed #0a2b42;
  40. }
  41.  
  42. #menu > li:first-child
  43. {
  44. border-left: 1px dashed #0a2b42;
  45. }
  46.  
  47. #menu a
  48. {
  49. color: #fff;
  50. text-decoration: none;
  51. }
  52.  
  53. #menu a:hover
  54. {
  55. color: #0a2b42;
  56. }
  57.  
  58. #panellogowania
  59. {
  60. height: 100%;
  61. width: 20%;
  62. text-align: center;
  63. }
  64.  
  65. #panellogowania form
  66. {
  67. margin-top: 5px;
  68. }
  69.  
  70. #panellogowania input[type=submit]
  71. {
  72. padding: 2px 6px;
  73. background: #ccc;
  74. border: 0 none;
  75. cursor: pointer;
  76. -webkit-border-radius: 5px;
  77. border-radius: 5px;
  78. margin-top: 11px;
  79. }


Nie daje to niestety nic:



Ten post edytował rafalek1001 16.11.2018, 03:43:22
Go to the top of the page
+Quote Post
Tomplus
post 16.11.2018, 07:22:23
Post #2





Grupa: Zarejestrowani
Postów: 1 561
Pomógł: 185
Dołączył: 20.03.2005
Skąd: Będzin

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


panel logowania musisz zrobić tak aby pływał.

użyć: float: right;

Tylko wiesz, czym więcej wpisów w menu tym menu będzie nachodzić pod panel logowania. Albo jak zmniejszysz ekran. (wystarczy zrobić okno na 4:3)
Go to the top of the page
+Quote Post
rafalek1001
post 16.11.2018, 11:01:50
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 9.02.2013

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


Z float:right; też nie działa. Panel logowania zawsze przeskakuje do drugiej linii.

Ten post edytował rafalek1001 16.11.2018, 11:02:21
Go to the top of the page
+Quote Post
viking
post 16.11.2018, 11:19:30
Post #4





Grupa: Zarejestrowani
Postów: 5 421
Pomógł: 924
Dołączył: 30.08.2006

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


Zdejmij mu width bo najwyraźniej nie mieści się przez 20%. I poczytaj o flex.


--------------------
Go to the top of the page
+Quote Post
trueblue
post 16.11.2018, 14:12:11
Post #5





Grupa: Zarejestrowani
Postów: 5 594
Pomógł: 1523
Dołączył: 11.03.2014

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


Jeśli chcesz aby było tak jak na zdjęciu nr 2, to #panellogowania powinien mieć pozycję absolutną, a #panel pozycję relatywną.


--------------------
Go to the top of the page
+Quote Post
rafalek1001
post 16.11.2018, 21:55:49
Post #6





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 9.02.2013

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


Udało się! Rzeczywiście użyłem pozycjonowania relatywnego oraz absolutnego i uzyskałem zamierzony efekt. Co zabawniejsze jeszcze przed założeniem tematu zrobiłem dokładnie to samo, ale strona mi się lekko rozszerzała w prawo (przez to że miałem dodany margin w menu, a przeoczyłem to) i porzuciłem ten pomysł. Ale wszystko już śmiga guitar.gif . Dziękuję wszystkim za pomoc biggrin.gif Te flex boxy też sobie już dzisiaj ogarniałem i bardzo fajna sprawa z tym wink.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: 8.12.2019 - 04:37