Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Szablon na allegro - tableki, divy?
Forum PHP.pl > Forum > Przedszkole
adam9870
12.11.2012, 20:21:20
Kiedyś trochę bawiłem się HTMLem. Chcę zrobić szablon na Allegro.
Przykładowo powinno to wyglądać jakoś tak: http://vpx.pl/i/2012/11/12/IHZBg.png
Po prawej stronie i logo niekoniecznie musi być widoczne obramowanie ramek.
Nie wiem jak się za to zabrać, może divy, ale nigdy nie robiłem nic na divach? Jakiś poradnik, po przeczytaniu którego i potestowaniu będę potrafił zrobić to co chcę?
tomi1985
12.11.2012, 20:26:37
dajesz mniewięcej tak:

[HTML] pobierz, plaintext 
  1. <div id="rama">
  2.  
  3. <div id="logo">
  4. //tekst na logo lub jakies img
  5. </div>
  6.  
  7. <div id="belt_left">
  8.  
  9. <div id="przesylka">
  10. <h4>Przesylki</h4>
  11. </div>
  12.  
  13. //itd co jest w lewym belcie
  14.  
  15. </div>
  16.  
  17. <div id="belt_right">
  18.  
  19. <div id="opis">
  20. //opis firmy
  21. </div>
  22.  
  23. //itd.. to co masz po prawej stronie
  24.  
  25. </div>
  26.  
  27. <div class="clear"></div>
  28. </div>
  29.  
  30. a w css
  31.  
  32. #rama {
  33. width:1000px;
  34. padding:15px;
  35. }
  36.  
  37. #belt_left {
  38. float:left;
  39. width:300px;
  40. }
  41.  
  42. #belt_right {
  43. float:right;
  44. width:950px;
  45. }
  46.  
  47. .clear {
  48. clear:both;
  49. width:100%;
  50. height:0;
  51. }
  52.  
[HTML] pobierz, plaintext
adam9870
12.11.2012, 20:47:29
OK.
Poskładałem to:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <title>costam</title>
  5.  
  6. <style type="text/css">
  7.  
  8. #rama {
  9. width:1000px;
  10. padding:15px;
  11. }
  12.  
  13. #belt_left {
  14. float:left;
  15. width:300px;
  16. }
  17.  
  18. #belt_right {
  19. float:right;
  20. width:950px;
  21. }
  22.  
  23. .clear {
  24. clear:both;
  25. width:100%;
  26. height:0;
  27. }
  28. </style>
  29.  
  30. </head>
  31.  
  32. <body>
  33. <div id="rama">
  34.  
  35. <div id="logo">
  36. <img src="http://ocdn.eu/static/template-
  38. engine/YjE7MDA_/3d6a29d202f65d06792da0a50a24e5b5/onet-logo.png"></img>
  39. </div>
  40.  
  41. <div id="belt_left">
  42.  
  43. <div id="przesylka">
  44. <h4>Przesylki</h4>
  45. <p>kurier 1 - 30 zł</p>
  46. <p>kurier 2 - 30 zł</p>
  47. </div>
  48.  
  49. <div id="platnosc">
  50. <h4>Platnosc</h4>
  51. <p>przedplata na konto</p>
  52. <p>platnosc przy odbiorze
  53. </p>
  54. </div>
  55.  
  56. <div id="przelew">
  57. <h4>Dane do przelewu</h4>
  58. <p>Nr konta: XXXXXXX XXXX XXX XXXX XXXXX XXXXX XXXXX</p>
  59. <p>W tytule przelewu prosimy podac nr aukcji i nick z allegro
  60. </p>
  61. </div>
  62.  
  63. <div id="Kontakt">
  64. <h4>kontakt</h4>
  65. <p>telefon: XXX XXX XXX</p>
  66. <p>e-mail: xxx@xxx.com
  67. </p>
  68. </div>
  69.  
  70. <div id="Odbiorosobisty">
  71. <h4>Odbior osobisty</h4>
  72. <p>Istnieje możliwość odbioru osobistego....</p>
  73. </div>
  74.  
  75.  
  76.  
  77.  
  78. //itd co jest w lewym belcie
  79.  
  80. </div>
  81.  
  82. <div id="belt_right">
  83.  
  84. <div id="opis">
  85. //opis firmy
  86. </div>
  87.  
  88.  
  89. </div>
  90.  
  91. <div class="clear"></div>
  92. </div>
  93.  
  94.  </body>
  95. </html>
[HTML] pobierz, plaintext


http://vpx.pl/i/2012/11/12/EnkDB.png
tomi1985
12.11.2012, 20:57:21
oczywiscie mozesz jeszce obrobić kod typu...

[HTML] pobierz, plaintext 
  1. #rama {
  2. text-align:justify;
  3. }
  4.  
  5. #logo, #left_belt, #right_belt {
  6. box-shadow: 0px 0px 10px rgb(170, 170, 170);
  7. border-radius:5px;
  8. }
  9.  
  10. itd... co komu lezy tongue.gif
  11.  
[HTML] pobierz, plaintext
adam9870
12.11.2012, 21:32:43
Wyszło fajne obramowanie wokól logo.
Dałoby radę zrobić coś takiego wobec np.:
Przesyłki
Kurier UPS 30 zl
Kurier DHL 30 zl
questionmark.gif
a potem wobec innych elementow z lewej strony, np. odbior osobisty, platnosc itp.?
Chcę sam to zrobić, ale co za to odpowiada?

i jak ustawić kodowoanie, bo <meta charset="utf-8"> powoduje krzaczki w polskich znakach.
tomi1985
12.11.2012, 21:41:38
pewnie że da rade smile.gif

z własnego doświadczenia wiem, że najlepiej najpierw zrobić sobie szablon na kartce papieru... wszystko wypisać... narysować poczym przenieść to na ekran monitora smile.gif

a co do tego
Kod
Kurier UPS 30 zl


to np.

[HTML] pobierz, plaintext 
  1. <div id="koszt">
  2. <p>Kurier UPS &rsaquo; 30 zl</div>
  3. </div>
  4.  
  5. css
  6.  
  7. #koszt p {
  8. font-weight:500;
  9. font-size:15px;
  10. color:orange;
  11. }
[HTML] pobierz, plaintext
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.