Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Ś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

Posty w temacie


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: 23.02.2020 - 06:17