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

[HTML] pobierz, plaintext 
  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>
  16. </TABLE>
[HTML] pobierz, plaintext


Może mi ktoś pomoże?
Dwayne
27.01.2006, 22:35:18
po prostu wstawiasz 
[HTML] pobierz, plaintext 
  1. <div class="x">coś tam</div>
[HTML] pobierz, plaintext

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

css
[XML] pobierz, plaintext 
  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. }
[XML] pobierz, plaintext


html
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext


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
27.01.2006, 22:54:46
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:

[HTML] pobierz, plaintext 
  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. <head>
  6. <style type="text/css">
  7.  
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. border: 0;
  12. }
  13.  
  14. body {
  15. background-color: blue;
  16. margin: 0;
  17. padding: 0;
  18. text-align: center;
  19. }
  20.  
  21. #glowny {
  22. margin: 0 auto;
  23. padding: 0;
  24. width: 700px;
  25. text-align: center;
  26. }
  27.  
  28. #top {
  29. width: 700px;
  30. height: 100px;
  31. background-color: red;
  32. }
  33.  
  34. #pasek {
  35. width: 700px;
  36. height: 20px;
  37. background-color: yellow;
  38. }
  39.  
  40. #lewe {
  41. width: 150px;
  42. background-color: green;
  43. float: left;
  44. }
  45.  
  46. #srodek {
  47. width: 400px;
  48. background-color: grey;
  49. float: left;
  50. }
  51.  
  52. #prawe {
  53. width: 150px;
  54. background-color: green;
  55. float: right;
  56. }
  57.  
  58. #stopka {
  59. width: 700px;
  60. height: 20px;
  61. background-color: pink;
  62. clear: both;
  63. }
  64.  
  65. </style>
  66.  
  67. <body>
  68. <div id="glowny">
  69. <div id="top">top</div>
  70. <div id="pasek">Pasek</div>
  71. <div id="lewe">Menu lewe</div>
  72. <div id="srodek">Srodek</div>
  73. <div id="prawe">Menu prawe</div>
  74. <div id="stopka">Stopka</div>
  75. </div>
  76. </body>
  77. </html>
[HTML] pobierz, plaintext

Pisane z palca ale powinno działac...Im wiecej tresci to automatycznie bedzie Ci sie wydluzac strona..
BDCC
11.04.2006, 19:32:59
Dziękuje.

Mam jeszcze pytanie... Dodając obramowanie prawe menu rozjeżdza się pod spód.. Jak temu zapobiec?
ens0re
11.04.2006, 19:45:11
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
12.04.2006, 08:20:37
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.