Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak to w divie?
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
BDCC
Nie wiem jak to napiasć w divie:

  1. <TABLE ALIGN="CENTER" VALIGN="TOP" WIDTH="100%" HEIGHT="100%" BORDER="1">
  2. <TR>
  3. <TD HEIGHT="10%" COLSPAN="3">Tutaj będzie logo</TD>
  4. </TR>
  5. <TR>
  6. <TD HEIGHT="1%" COLSPAN="3">Górny Pasek menu</TD>
  7. </TR>
  8. <TR>
  9. <TD WIDTH="20%">Lewe menu</TD>
  10. <TD>Środkowe menu</TD>
  11. <TD WIDTH="20%">Prawe menu</TD>
  12. </TR>
  13. <TR>
  14. <TD HEIGHT="1%" COLSPAN="3">Dolny Pasek</TD>
  15. </TR>


Może mi ktoś pomoże?
Dwayne
po prostu wstawiasz
  1. <div class="x">coś tam</div>

oczywiscie musisz ustawić całą pozycje DIV itd. w arkuszu CSS chyba że chcesz tylko sformatować:
  1. <div align="center">coś tam</div>
BDCC
Wiesz ja o divach jestem zielony tongue.gif Mógłby mi ktoś podać kodzik w divie ^^"?
strife
Pisane z palca ... ( no i jeszcze nie spałem noc więc wiesz tongue.gif )

css
  1. #page{
  2. margin: auto;
  3. width: 500px;
  4. }
  5. #header{
  6. height: 30px;
  7. border: 1px solid black;
  8. color: red;
  9. }
  10. #topmenu{
  11. height: 10px;
  12. border: 1px solid black;
  13. color: red;
  14. }
  15. #left{
  16. float: left;
  17. width: 200px;
  18. border: 1px solid black;
  19. }
  20. #right{
  21. float: left;
  22. width: 200px;
  23. border: 1px solid black;
  24. }
  25. #footer{
  26. clear: both;
  27. height: 20px;
  28. border: 1px solid black;
  29. }


html
  1. <div id="page">
  2. <div id="header">Header</div>
  3. <div id="topmenu">Menu pod logo</div>
  4. <div id="left">Lewo</div>
  5. <div id="right">Prawo</div>
  6. <div id="footer"></div>
  7. </div>


Jak mówię nie wiem czy działa bo nie sprawdałem, ale mały zarys już masz tongue.gif

Pozdrawiam i dobranoc tongue.gif
ens0re
Kod
<div align="center">coś tam</div>

Nie ma w xhtmlu juz 'align' tylko 'text-align' i mozesz dla danego diva to to zdefiniować w stylach...np:
Kod
<div id="cos">COS</div>
i style:
#cos {
text-align: center;
}

A teraz:

  1. <?xml version="1.0" encoding="ISO-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <style type="text/css">
  6.  
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. border: 0;
  11. }
  12.  
  13. body {
  14. background-color: blue;
  15. margin: 0;
  16. padding: 0;
  17. text-align: center;
  18. }
  19.  
  20. #glowny {
  21. margin: 0 auto;
  22. padding: 0;
  23. width: 700px;
  24. text-align: center;
  25. }
  26.  
  27. #top {
  28. width: 700px;
  29. height: 100px;
  30. background-color: red;
  31. }
  32.  
  33. #pasek {
  34. width: 700px;
  35. height: 20px;
  36. background-color: yellow;
  37. }
  38.  
  39. #lewe {
  40. width: 150px;
  41. background-color: green;
  42. float: left;
  43. }
  44.  
  45. #srodek {
  46. width: 400px;
  47. background-color: grey;
  48. float: left;
  49. }
  50.  
  51. #prawe {
  52. width: 150px;
  53. background-color: green;
  54. float: right;
  55. }
  56.  
  57. #stopka {
  58. width: 700px;
  59. height: 20px;
  60. background-color: pink;
  61. clear: both;
  62. }
  63.  
  64.  
  65. <div id="glowny">
  66. <div id="top">top</div>
  67. <div id="pasek">Pasek</div>
  68. <div id="lewe">Menu lewe</div>
  69. <div id="srodek">Srodek</div>
  70. <div id="prawe">Menu prawe</div>
  71. <div id="stopka">Stopka</div>
  72. </div>
  73. </body>
  74. </html>

Pisane z palca ale powinno działac...Im wiecej tresci to automatycznie bedzie Ci sie wydluzac strona..
BDCC
Dziękuje.

Mam jeszcze pytanie... Dodając obramowanie prawe menu rozjeżdza się pod spód.. Jak temu zapobiec?
ens0re
No bo jak dodajesz obramowanie(np 1px) to menu zwieksza Ci sie o ten 1px czy ile tam dałes. Musisz poprostu zmniejszyc menu o tyle pikseli ile dodałes obramowania tj, jezeli menu miales 200px i dodałes obramowanie po 1px, to teraz musisz nadac szerokosc dla menu 198px a nie 200px(198 + 2 = 200)...
revyag
Odnośnie obramowania, wybierz sobie z googli rozwiązanie które będzie Ci pasowało smile.gif
box model hack
smile.gif
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.