Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: div
Forum PHP.pl > Forum > Przedszkole
blizniak
4.12.2006, 21:40:46
witam
mam cos takiego
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Mój pierwszy layout</title>
  6. <meta http-equiv="Content-Type"
  7. content="text/html; charset=iso-8859-2" />
  8.  
  9. <link rel="stylesheet" type="text/css"
  10. media="all" href="s.css" />
  11.  
  12.  
  13. <style type="text/css">
  14. div#one
  15. {
  16. width: 349px;
  17. height: 140px;
  18. background-color: #103BB8;
  19. margin: 10px;
  20. margin-top: 10px;
  21. padding: 5px;
  22. border: 1px solid;
  23. border-color: #003300; 
  24. float: left; 
  25. } 
  26.  
  27.  
  28. div#two
  29. {
  30. width: 349px;
  31. height: 140px;
  32. background-color: #103BB8;
  33. margin: 10px;
  34. margin-top: 10px;
  35. padding: 5px;
  36. border: 1px solid;
  37. border-color: #003300; 
  38. float: left; 
  39. } 
  40.  
  41. div#trzy
  42. {
  43. width: 349px;
  44. height: 140px;
  45. background-color: #103BB8;
  46. margin: 10px;
  47. margin-top: 10px;
  48. padding: 5px;
  49. border: 1px solid;
  50. border-color: #003300; 
  51. float: left; 
  52.  
  53. } 
  54.  
  55. div#cztery
  56. {
  57. width: 349px;
  58. height: 140px;
  59. background-color: #103BB8;
  60. margin: 10px;
  61. margin-top: 10px;
  62. padding: 5px;
  63. border: 1px solid;
  64. border-color: #003300;
  65. float: left; 
  66.  
  67. } 
  68.  
  69.  
  70. </style>
  71.  
  72.  
  73. </head>
  74.  
  75. <body>
  76.  
  77.  
  78. <div>
  79. <div id="one">Teks1t</div>
  80. <div id="two">Tekst2</div> 
  81. </div>
  82. <div>
  83. <div id="trzy">Tekst3</div>
  84. <div id="cztery">Tekst4</div> 
  85. </div>
  86.  
  87.  
  88. </body>
  89. </html>
[HTML] pobierz, plaintext


jak zrobic zeby byl taki efekt
[HTML] pobierz, plaintext 
  1. <TABLE>
  2. <TR>
  3. 	<TD>tekst1</TD>
  4. 	<TD>tekst2</TD>
  5. </TR>
  6. <TR>
  7. 	<TD>tekst3</TD>
  8. 	<TD>tekst4</TD>
  9. </TR>
  10. </TABLE>
[HTML] pobierz, plaintext
Szakal
4.12.2006, 21:57:29 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. td#one{
  4. width: 349px;
  5. height: 140px;
  6. background-color: #103BB8;
  7. margin: 10px;
  8. margin-top: 10px;
  9. padding: 5px;
  10. border: 1px solid;
  11. border-color: #003300;
  12. float: left;
  13. }
  14.  
  15. td#two{
  16. width: 349px;
  17. height: 140px;
  18. background-color: #103BB8;
  19. margin: 10px;
  20. margin-top: 10px;
  21. padding: 5px;
  22. border: 1px solid;
  23. border-color: #003300;
  24. float: left;
  25.  } 
  26.  
  27. td#trzy{
  28. width: 349px;
  29. height: 140px;
  30. background-color: #103BB8;
  31. margin: 10px;
  32. margin-top: 10px;
  33. padding: 5px;
  34. border: 1px solid;
  35. border-color: #003300;
  36. float: left;  
  37. }
  38.  
  39.  
  40. td#cztery{
  41. width: 349px;
  42. height: 140px;
  43. background-color: #103BB8;
  44. margin: 10px;
  45. margin-top: 10px;
  46. padding: 5px;
  47. border: 1px solid;
  48. border-color: #003300;
  49. float: left;
  50. } 
  51. </style>
[HTML] pobierz, plaintext
blizniak
4.12.2006, 22:10:14
ale ja nie chce tego zrobic za pomoca tabelek to byl tylko taki przyklad zeby zobrazowac, ma byc to zrobione za pomoca <div>

ma byc cos takiego

text1 text2
text3 text4
Sedziwoj
5.12.2006, 00:41:55 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Mój pierwszy layout</title>
  6. <meta http-equiv="Content-Type"
  7. content="text/html; charset=iso-8859-2" />
  8.  
  9. <link rel="stylesheet" type="text/css"
  10. media="all" href="s.css" />
  11.  
  12.  
  13. <style type="text/css">
  14. div.czysta {
  15. clear : both;
  16. }
  17. div#one
  18. {
  19. width: 349px;
  20. height: 140px;
  21. background-color: #103BB8;
  22. margin: 10px;
  23. margin-top: 10px;
  24. padding: 5px;
  25. border: 1px solid;
  26. border-color: #003300;
  27. float: left;
  28. }
  29.  
  30.  
  31. div#two
  32. {
  33. width: 349px;
  34. height: 140px;
  35. background-color: #103BB8;
  36. margin: 10px;
  37. margin-top: 10px;
  38. padding: 5px;
  39. border: 1px solid;
  40. border-color: #003300;
  41. float: left;
  42. }
  43.  
  44. div#trzy
  45. {
  46. width: 349px;
  47. height: 140px;
  48. background-color: #103BB8;
  49. margin: 10px;
  50. margin-top: 10px;
  51. padding: 5px;
  52. border: 1px solid;
  53. border-color: #003300;
  54. float: left;
  55.  
  56. }
  57.  
  58. div#cztery
  59. {
  60. width: 349px;
  61. height: 140px;
  62. background-color: #103BB8;
  63. margin: 10px;
  64. margin-top: 10px;
  65. padding: 5px;
  66. border: 1px solid;
  67. border-color: #003300;
  68. float: left;
  69.  
  70. }
  71.  
  72.  
  73. </style>
  74.  
  75.  
  76. </head>
  77.  
  78. <body>
  79.  
  80.  
  81. <div class="czysta">
  82. <div id="one">Teks1t</div>
  83. <div id="two">Tekst2</div>
  84. </div>
  85. <div class="czysta">
  86. <div id="trzy">Tekst3</div>
  87. <div id="cztery">Tekst4</div>
  88. </div>
  89.  
  90.  
  91. </body>
  92. </html>
[HTML] pobierz, plaintext

Słowo wyjaśnienie, clear zapobiega opływaniu elementu z danej strony, tu by wystarczyło tylko left
blizniak
5.12.2006, 13:24:33
byloby prawie dobrze gdyby nie jeden blad
bo jak zmiejsze okno przegladarki to wtedy np div2 jest pod div1 a powinien byc z boku , div4 jest pod div3 tz wszystko jest tak jakby w jednej kolumnie
Sedziwoj
5.12.2006, 13:48:34
Ale kłopot, bo nie mas ustawione width w div.czysta dodaj szerokość bo tak jest dopasowywana do okna, i nie ma problemu.
blizniak
5.12.2006, 16:08:43
a moglbys zobaczyc jeszcze jak ustawic te text1, text2,.... z prawej strony bo teraz mam je na dole
[HTML] pobierz, plaintext 
  1. <html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3.    "http://www.w3.org/TR/html4/strict.dtd">
  4. <html>
  5. <head>
  6. <title> WiFi Security </title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  8. <meta http-equiv="Content-Language" content="pl">
  9. <meta name="robots" content="all">
  10. <meta name="description" content="Strona o Bezpieczeństwie sieci WiFi">
  11. <meta name="keywords" content="WiFi, Wi-Fi, bezpieczeństwo, WAP, WEP">
  12. <link rel="stylesheet" href="style.css" type="text/css">
  13.  
  14.  
  15.  
  16. <style type="text/css">
  17.  
  18.  
  19. #baner
  20. {
  21.  
  22. height: 4%;
  23. width: 100%;
  24. text-align: center;
  25. background-color: #004040;
  26. }
  27. div#menu
  28. {
  29. height: 134px;
  30. width: 280px;
  31. text-align: left;
  32. background-color:#103BB8;
  33. margin-top: 1px;
  34. color: white;
  35. font-size:14;
  36.  
  37. } 
  38. a:link
  39. {
  40. color: #000;
  41. }
  42. a:visited
  43. {
  44. color: #000;
  45. }
  46. a:hover
  47. {
  48. color: #69F;
  49. }
  50. a:active
  51. {
  52. color: #000;
  53. }
  54.  
  55.  
  56. div#szukaj
  57. {
  58. height: 134px;
  59. width: 280px;
  60.  
  61. margin-top: 1px;
  62.  
  63. background-color:#103BB8;
  64.  
  65.  
  66. } 
  67.  
  68.  
  69.  
  70. div.czysta {
  71. width: 1100px;
  72. clear : both;
  73. }
  74. div#one
  75. {
  76. width: 349px;
  77. height: 140px;
  78. background-color: #103BB8;
  79. margin: 1px;
  80. margin-top: 1px;
  81. padding: 1px;
  82. border: 1px solid;
  83. border-color: #003300;
  84. float: left;
  85. }
  86.  
  87.  
  88. div#two
  89. {
  90. width: 349px;
  91. height: 140px;
  92. background-color: #103BB8;
  93. margin: 1px;
  94. margin-top: 1px;
  95. padding: 1px;
  96. border: 1px solid;
  97. border-color: #003300;
  98. float: left;
  99. }
  100.  
  101. div#trzy
  102. {
  103. width: 349px;
  104. height: 140px;
  105. background-color: #103BB8;
  106. margin: 0px;
  107. margin-top: 0px;
  108. padding: 1px;
  109. border: 1px solid;
  110. border-color: #003300;
  111. float: left;
  112.  
  113. }
  114.  
  115. div#cztery
  116. {
  117. width: 349px;
  118. height: 140px;
  119. background-color: #103BB8;
  120. margin: 1px;
  121. margin-top: 0px;
  122. padding: 1px;
  123. border: 1px solid;
  124. border-color: #003300;
  125. float: left;
  126. }
  127.  
  128.  
  129. div#piec
  130. {
  131. width: 349px;
  132. height: 140px;
  133. background-color: #103BB8;
  134. margin: 0px;
  135. margin-top: 0px;
  136. padding: 1px;
  137. border: 1px solid;
  138. border-color: #003300;
  139. float: left;
  140.  
  141. }
  142.  
  143. div#szesc
  144. {
  145. width: 349px;
  146. height: 140px;
  147. background-color: #103BB8;
  148. margin: 1px;
  149. margin-top: 0px;
  150. padding: 1px;
  151. border: 1px solid;
  152. border-color: #003300;
  153. float: left;
  154.  
  155. }
  156.  
  157.  
  158.  
  159.  
  160.  
  161.  
  162. </style>
  163.  
  164.  
  165. </head>
  166. <body>
  167.  
  168.  
  169.  
  170.  
  171.  
  172.   <div id="baner">
  173.    <img src="baner1.bmp" alt="WiFi Security.com.pl">
  174.   </div>
  175.  
  176.  
  177.   <div id="menu">
  178.    <br>
  179.    <ul>
  180.     <LI><a href="#" title="Strona 1">Nowości</a></LI>
  181.     <LI><a href="#" title="Strona 2">Bezpieczeństwo WiFi</a></LI>
  182.     <LI><a href="#" title="Strona 3">Przydatne programy</a></LI>
  183.     <LI><a href="#" title="Strona 4">Książki</a></LI>
  184.     <LI><a href="#" title="Strona 5">Linki</a></LI>
  185.    </ul>
  186.    </div>
  187.  
  188.  
  189. <div id="szukaj">
  190.    <form name="form1" method="post" action="">
  191.  
  192.      <br><br><CENTER><input name="textfield" type="text">
  193.                 <input type="submit" name="Submit" value="Szukaj"> </CENTER>   
  194.  
  195.    </form>
  196.   </div>
  197.  
  198.  
  199.  
  200. <div class="czysta">
  201. <div id="one">Teks1t</div>
  202. <div id="two">Tekst2</div>
  203. </div>
  204. <div class="czysta">
  205. <div id="trzy">Tekst3</div>
  206. <div id="cztery">Tekst4</div>
  207. </div>
  208. <div class="czysta">
  209. <div id="piec">Tekst5</div>
  210. <div id="szesc">Tekst6</div>
  211. </div> 
  212.  
  213.  
  214.  
  215.  
  216. </body>
  217. </html>
[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.