Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Szablon na allegro - tableki, divy?
Forum PHP.pl > Forum > Przedszkole
adam9870
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
dajesz mniewięcej tak:

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


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

  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.  
adam9870
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
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.

  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. }
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.