Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML] Responsywny Element
DonPolaczek
post 19.06.2015, 18:19:00
Post #1





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 19.01.2015

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


Witam serdecznie mam problem przy stworzeniu responsywnego elementu a mianowicie dodałem sobie do strony własny newsletter taki box który w htmlu wygląda tak:
  1. <section class="newsletter">
  2. <p class="Slogan">Otrzymuj informację o <strong>najnowszych artykułach</strong> <br>
  3. i <strong>technikach marihuany</strong> prosto na Twój e-mail.</p>
  4. <form method="post" action="https://app.freshmail.com//pl/actions/subscribe/">
  5. <input type="hidden" name="subscribers_list_hash" value="ulceinuovc" />
  6. <input type="text" id="freshmail_imie" name="freshmail_custom_field[imie]" class="freshmail-imie" placeholder="Twoje imię" autofocus>
  7. <input type="text" id="freshmail_email" name="freshmail_email" class="freshmail-email" placeholder="Twój adres e-mail" autofocus>
  8. <input type="submit" class="freshmail_button" value="Zapisz mnie" />
  9. </form>
  10. </section>

Plik CSS:
  1. /* Newsletter
  2. ----------------------------------------------- */
  3.  
  4. .newsletter {
  5. margin: 20px auto;
  6. padding: 20px;
  7. width: 920px;
  8. height: 30px;
  9. background: #eeeeee;
  10. border-style: solid;
  11. border-width: 2px;
  12. border-top-color: #dddddd;
  13. border-bottom-color: #dddddd;
  14. border-right-style:hidden;
  15. border-left-style:hidden;
  16. }
  17. .newsletter-slogan {
  18. padding-left: 120px;
  19. }
  20.  
  21. .Slogan {
  22. margin-left: 15px;
  23. margin-top: -8px;
  24. margin-bottom: -10px;
  25. color: #333;
  26. font-size: 15px;
  27. font-family: Tahoma, Geneva, sans-serif;
  28. }
  29.  
  30. .freshmail-imie {
  31. width: 140px;
  32. height: 24px;
  33. position: absolute;
  34. margin-top: -31px;
  35. margin-left: 390px;
  36. border: 1px solid #b6b6b6;
  37. background: url("images/Imie_Icon.png") left top no-repeat #fafafa;
  38. background-size: 23px 24px;
  39. background-position: 7px 6pt;
  40. }
  41.  
  42. .freshmail-email {
  43. width: 140px;
  44. height: 24px;
  45. position: absolute;
  46. margin-top: -31px;
  47. margin-left: 595px;
  48. border: 1px solid #b6b6b6;
  49. background: url("images/Email_Icon.png") left top no-repeat #fafafa;
  50. background-size: 20px 17px;
  51. background-position: 7px 9pt;
  52. }
  53. @-webkit-keyframes hvr-pulse {
  54. 25% {
  55. -webkit-transform: scale(1.1);
  56. transform: scale(1.1);
  57. }
  58.  
  59. 75% {
  60. -webkit-transform: scale(0.9);
  61. transform: scale(0.9);
  62. }
  63. }
  64.  
  65. @keyframes hvr-pulse {
  66. 25% {
  67. -webkit-transform: scale(1.1);
  68. transform: scale(1.1);
  69. }
  70.  
  71. 75% {
  72. -webkit-transform: scale(0.9);
  73. transform: scale(0.9);
  74. }
  75. }
  76.  
  77. .freshmail_button {
  78. display: inline-block;
  79. vertical-align: middle;
  80. -webkit-transform: translateZ(0);
  81. transform: translateZ(0);
  82. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  83. -webkit-backface-visibility: hidden;
  84. backface-visibility: hidden;
  85. -moz-osx-font-smoothing: grayscale;
  86. background: #b4d236;
  87. padding: 5px 21px;
  88. color: #fff;
  89. display: inline-block;
  90. font: inherit;
  91. height: 35px;
  92. margin-top: -45px;
  93. margin-left: 800px;
  94. }
  95. .freshmail_button:hover, .freshmail_button:focus, .freshmail_button:active {
  96. -webkit-animation-name: hvr-pulse;
  97. animation-name: hvr-pulse;
  98. -webkit-animation-duration: 1s;
  99. animation-duration: 1s;
  100. -webkit-animation-timing-function: linear;
  101. animation-timing-function: linear;
  102. -webkit-animation-iteration-count: infinite;
  103. animation-iteration-count: infinite;
  104. background: #19232d;
  105. }
  106.  
  107.  
  108. input[type="text"] {
  109. font-family: sans-serif;
  110. font-size: 15px;
  111. color: #515151;
  112. padding-left: 33px;
  113. }


I teraz mam problem ponieważ nie wiem jak stworzyć responsywność tego elementu czytałem o media queries ale nie bardzo mi to wychodzi a mianowicie wcale. z góry dziękuje za porady. Pozdrawiam.
Go to the top of the page
+Quote Post
rad11
post 19.06.2015, 18:30:14
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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


Ogolnie rzecz polega na tym abys jak najwiecej staral sie podawac szerokosci w % + na samym koncu uzycie media queries
  1. //rozklad dla PC i notebookow
  2. @media (min-width: 1024px) {
  3. }
  4. //notebooki
  5. @media (max-width: 1023px) {
  6. }
  7. //tablety
  8. @media (max-width: 734px) {
  9. }
  10. //smartfony
  11. @media (max-width: 599px) {
  12. }
  13.  

Najlepiej jak bys korzystal z gotowych rozwiazac typu Bootstrap.
Podaj swoj przyklad gdzies na jsfiddlu bo tak to ciezko poprawnie pomoc

Ten post edytował rad11 19.06.2015, 18:31:41
Go to the top of the page
+Quote Post
DonPolaczek
post 20.06.2015, 12:28:56
Post #3





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 19.01.2015

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


Ogólnie używam Wordpress ale ten box newsletter napisałem sam w htmlu i wszystkie elementy są responsywne prócz mojego newslettera. dobrze już wrzucam wszystko na portal jsfiddlu.
Tutaj Link: http://jsfiddle.net/sr5rhu7g/
Wygląda to lepiej na wordpress ponieważ pozycja elementów pasuję jak i button.
Go to the top of the page
+Quote Post
Mega_88
post 20.06.2015, 12:46:05
Post #4





Grupa: Zarejestrowani
Postów: 360
Pomógł: 34
Dołączył: 20.08.2011

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


  1. @media screen and (min-width: 901px) and (max-width: 3000px) {
  2. // Tutaj wrzuć css odpowiedzialny za Twój newsletter, będzie to odpowiedzialne za wygląd tego boksu przy rozdzielczości (szerokości okna) od 901px do 3000px
  3. }
  4.  
  5. @media screen and (min-width: 0px) and (max-width: 900px) {
  6. // Tutaj wrzuć css odpowiedzialny za Twój newsletter, będzie to odpowiedzialne za wygląd tego boksu przy rozdzielczości (szerokości okna) od 0px do 900px
  7. }


Zakresy ((min-width: 0px) and (max-width: 900px)) już sobie dopasuj samemu jakich potrzebujesz, wyżej masz ładnie podane.

Ten post edytował Mega_88 20.06.2015, 12:47:03
Go to the top of the page
+Quote Post
DonPolaczek
post 25.06.2015, 10:42:35
Post #5





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 19.01.2015

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


Dziękuję rozumiem czy wartości takie jak:
  1. width: 920px;
  2. height: 30px;

Zmieniać według własnych upodobań czy raczej powinny tutaj być %. Pozdrawiam.

Ten post edytował DonPolaczek 25.06.2015, 10:42:58
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: 28.03.2024 - 09:09