Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dlaczego identyfikator nie działa
Forum PHP.pl > Forum > Po stronie przeglądarki
mylovelyengland
2.04.2016, 06:16:59
Chodzi mi o znacznik li.
Jak dam:
[HTML] pobierz, plaintext 
  1. li {
  2. display: inline;
  3. margin: 0px 3px;}
[HTML] pobierz, plaintext



To wszystko działa jak należy ale ja chcę opisać pozycję każdego znacznika li względem poprzedniego ;/

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Pude􀃯ka elementów</title>
  5. <style type="text/css">
  6. body {
  7. font-size: 80%;
  8. font-family: ”Courier New”, Courier, monospace;
  9. letter-spacing: 0.15em;
  10. background-color: #efefef;}
  11. #page {
  12. max-width: 940px;
  13. min-width: 720px;
  14. margin: 10px auto 10px auto;
  15. padding: 20px;
  16. border: 4px double #000;
  17. background-color: #ffffff;}
  18. #logo {
  19. width: 150px;
  20. margin: 30px auto 10px auto;}
  21. ul {
  22. width: 580px;
  23. padding: 10px;
  24. margin: 0px auto 120px auto;
  25. border-top: 2px solid #000;
  26. border-bottom: 1px solid #000;
  27. text-align: center;}
  28. li#one {
  29. display: inline;
  30. margin-left: 5px;}
  31. li#two {
  32. display: inline;
  33. margin-left: 10px;}
  34. li#three {
  35. display: inline;
  36. margin-left: 15px;}
  37. p#one {
  38. text-align: center;
  39. width: 600px;
  40. margin: 0px auto 20px auto;
  41. font-weight: normal;}
  42. li#four {
  43. display: inline;
  44. margin-left: 20px;}
  45. li#five{
  46. display: inline;
  47. margin-left: 20px;}
  48. p#two {
  49. text-align: center;
  50. width: 600px;
  51. margin: 40px auto 20px auto;
  52. font-weight: normal;}
  53. a:hover, a.on {
  54. color: #cc3333;
  55. background-color: #ffffff;}
  56. </style>
  57. </head>
  58. <body>
  59. <div id="page">
  60. <div id="logo">
  61. <img src="images/logo.gif” alt=”Analogowi specjali􀄂ci" />
  62. </div>
  63. <ul id="navigation">
  64. <li id="one"><a href="www.allegro.pl" class="on">Początek</a></li>
  65. <li id="two"><a href="www.wp.pl">Sprzedż</a></li>
  66. <li id="three"><a href="www.google.pl">Naprawy</a></li>
  67. <li id="four"><a href="www.interia.pl">O nas</a></li>
  68. <li id="five"><a href="www.hack.pl">Kontakt</a></li>
  69. </ul>
  70. <p id="one">
  71. <img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet
  72. oraz Wurlitzer EP200" />
  73. </p>
  74. <p id="two">
  75. Specjalizujemy się w sprzedaży oraz naprawach klasycznych instrumentów
  76. klawiszowych, a w szczególności: Fender Rhodes, Wurlitzer EP200 oraz
  77. Hohner Clavinet.
  78. </p>
  79. </div>
  80. </body>
  81. </html>
[HTML] pobierz, plaintext


A wartości margin się dodaje między 2 elementami co nie?
Comandeer
2.04.2016, 08:37:52
No nie do końca (obadaj hasło "margin collapsing"). Poza tym AFAIR dla elementów liniowych ciężko margines ustawić.
mylovelyengland
8.04.2016, 21:59:42
a dlaczego ten kod nie działa tak jak należy tzn nie ma obramowania tabeli kolorów tła i nie ustawia tekstu tam gdzie trzeba i tak jak trzeba?
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Pudełka elementów</title>
  5. <style type=&#8221;text/css&#8221;>
  6. body {
  7. font-family: Arial, Verdana, sans-serif;
  8. color: #111111;}
  9. table {
  10. width: 600px;}
  11. th, td {
  12. padding: 7px 10px 10px 10px;}
  13. th {
  14. text-transform: uppercase;
  15. letter-spacing: 0.1em;
  16. font-size: 90%;
  17. border-bottom: 2px solid #111111;
  18. border-top: 1px solid #999;
  19. text-align: left;}
  20. tr.even {
  21. background-color: #efefef;}
  22. tr:hover {
  23. background-color: #c3e6e5;}
  24. .money {
  25. text-align: right;}
  26. </style>
  27. </head>
  28. <body>
  29. <h1>Aukcja literatury obcej</h1>
  30. <table>
  31. <tr>
  32. <th>Autor</th>
  33. <th>Tytuł</th>
  34. <th class="money">Cena minimalna</th>
  35. <th class="money">Bieżąca oferta</th>
  36. </tr>
  37. <tr>
  38. <td>E.E. Cummings</td>
  39. <td>Tulips & Chimneys</td>
  40. <td class="money">6520,00 zł</td>
  41. <td class="money">7612,95 zł</td>
  42. </tr>
  43. <tr class="even">
  44. <td>Charles d’Orlans</td>
  45. <td>Pomes</td>
  46. <td class="money"></td>
  47. <td class="money">11 754,55 zł</td>
  48. </tr>
  49. <tr>
  50. <td>T.S. Eliot</td>
  51. <td>Poems 1909 - 1925</td>
  52. <td class="money">4075,00 zł</td>
  53. <td class="money">27 706,00 zł</td>
  54. </tr>
  55. <tr class="even">
  56. <td>Sylvia Plath</td>
  57. <td>The Colossus</td>
  58. <td class="money"></td>
  59. <td class="money">3361,00 zł</td>
  60. </tr>
  61. </table>
  62. </body>
  63. </html>
[HTML] pobierz, plaintext
vokiel
9.04.2016, 08:12:55
https://jsfiddle.net/xLnshLbh/1/

Takie coś, czy miałeś na myśli coś innego?
mylovelyengland
9.04.2016, 13:19:05
tak to to. Jeszcze jedno mam pytanie jest kod taki:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Styling Submit Buttons</title>
  5.     <style type="text/css">
  6.       input {
  7.         font-size: 120%;
  8.         color: #5a5854;
  9.         background-color: #f2f2f2;
  10.         border: 1px solid #bdbdbd;
  11.         border-radius: 5px;
  12.         padding: 5px 10px 5px 30px;
  13.         background-repeat: no-repeat;
  14.         background-position: 8px 9px;
  15.         display: block;
  16.         margin-bottom: 10px;}
  17.       input#submit {
  18.         color: #444444;
  19.         text-shadow: 0px 1px 1px #ffffff;
  20.         border-bottom: 2px solid #b2b2b2;
  21.         background-color: #b9e4e3;
  22.         background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
  23.         background: -moz-linear-gradient(top, #beeae9, #a8cfce);
  24.         background: -o-linear-gradient(top, #beeae9, #a8cfce);
  25.         background: -ms-linear-gradient(top, #beeae9, #a8cfce);}
  26.       input#submit:hover {
  27.         color: #333333;
  28.         border: 1px solid #a4a4a4;
  29.         border-top: 2px solid #b2b2b2;
  30.         background-color: #a0dbc4;
  31.         background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
  32.         background: -moz-linear-gradient(top, #a8cfce, #beeae9);
  33.         background: -o-linear-gradient(top, #a8cfce, #beeae9);
  34.         background: -ms-linear-gradient(top, #a8cfce, #beeae9);}
  35.       input:focus, input:hover {
  36.     	background-color: #ffffff;
  37.         border: 1px solid #b1e1e4;}
  38.       input#email { 
  39.         background-image: url("images/email.png");}
  40.       input#twitter {
  41.         background-image: url("images/twitter.png");}
  42.       input#web {
  43.         background-image: url("images/web.png");}
  44. 	</style>
  45.   </head>
  46.  
  47.   <body>
  48.  
  49.     <form>
  50.       <input type="text" id="email" />
  51.       <input type="text" id="twitter" />
  52.       <input type="text" id="web" />
  53. 	  <input type="submit" value="Rejestruj" id="submit" />
  54. 	</form>
  55.  
  56.   </body>
  57. </html>
[HTML] pobierz, plaintext



Wg mnie te 2 elementy powinny się odnosić do przycisku a odnosi się tylko ten element z identyfikatore submit. dlaczego w tym momencie się nie pomieszało?
input:focus, input:hover
input#submit:hover
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-2025 Invision Power Services, Inc.