Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] ułozenie diva obok siebie
Forum PHP.pl > Forum > Przedszkole
Sebastian003
19.07.2008, 17:47:28
Witam !

mam problem z ułożeniem diva

widok projektu: http://webpc.vdl.pl

chodzi mi zeby te divy były obok siebie, bo na stronie widac ze jeden na gorze drugi na dole.

oto kod 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5. <title>test</title>
  6. <style>
  7. body {
  8. margin : 0;
  9. font-family : Verdana, Arial;
  10. font-size : 1px;
  11. background: url('images/pg.png') repeat-x;
  12. background-color: #00496F;
  13. }
  14. a:link, a:visited {
  15. text-decoration : none;
  16. color : #191919;
  17. }
  18. a:active, a:hover {
  19. text-decoration : none;
  20. color : #49A201;
  21. }
  22. #top {
  23. 	height:176px;
  24.     width:924px;
  25. 	background:url(images/top.png);
  26. }
  27. #lew {
  28. 	height:35px;
  29.     width:10px;
  30. 	background:url(images/lew.png);
  31. 	float : left;
  32. }
  33. #pra {
  34. 	height:35px;
  35.     width:10px;
  36. 	background:url(images/pra.png);
  37. 	float : left;
  38. }
  39. #wa {
  40. 	height:33px;
  41.     width:185px;
  42. 	background:url(images/wa.png);
  43. }
  44. #wb {
  45.     width:185px;
  46. 	background:url(images/wb.png);
  47. }
  48. #wc {
  49.     height:10px;
  50.     width:185px;
  51. 	background:url(images/wc.png);
  52. }
  53. #cen {
  54. 	height:35px;
  55.     width:904px;
  56. 	background:url(images/cen.png);
  57. 	float : left;
  58. 		line-height:310%;
  59. 	text-indent:15px;
  60. }
  61. #px {
  62. 	height:10px;
  63.     width:924px;
  64. 	background:url(images/px.png);
  65. }
  66. #reklama {
  67. 	height:90px;
  68.     width:728px;
  69. 	background:url(images/reklama.png);
  70. 	float : right;
  71. }
  72. #srodek {
  73. margin : 0 auto;
  74. width : 924px;
  75. }
  76. #id {
  77.     float: left;
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <div id="srodek">
  83. <div id="top"></div>
  84. <div style="clear: both;" />
  85. <div id="lew"></div>
  86. <div id="cen"></div>
  87. <div id="pra"></div>
  88. <div style="clear: both;" />
  89. <div id="px"></div>
  90. <div id="wa"></div>
  91. <div id="wb">
  92. <center>
  93. <br /><br /><br /><br />
  94. <img border="0" src="images/szukajg.png" width="142" height="17">
  95. <br /><br /><br /><br /><br /><br /><br />
  96. <img border="0" src="images/szukaj.png" width="60" height="23">
  97. </center>
  98. <br />
  99. </div>
  100. <div id="wc"></div>
  101. <div id="float">
  102. <div id="reklama"></div>
  103. </div>
  104. </body>
  105. </html>
[HTML] pobierz, plaintext
Maciekbjw
19.07.2008, 17:51:48
Witaj, nie będę podawał Ci gotowego rozwiązania, ale powiem Ci jak możesz to zrobić:

[HTML] pobierz, plaintext 
  1. <div style='float: left; width:100px;'>pierwszy element blokowy</div>
  2. <div style='float: left; width: 100px;'>drugi element blokowy</div>
[HTML] pobierz, plaintext


No i chyba za dużo razy masz tam czyszczenie floatowania winksmiley.jpg czyli clear: both;
Oba będą teraz obok siebie. Kombinuj, pogoogluj, jak będą problemy to pisz
Sebastian003
19.07.2008, 17:57:53
No tak ! tylko nie wiem czy widzisz ze "pierwszy element blokowy" jak napisałeś jest pocięty na 3 elementy
Kod
<div id="px"></div>
<div id="wa"></div>
<div id="wb"></div>

i jak dodam atrybut float to wszytko się rozwala. Drugi zbudowany jest z jednej części i raczej z nim by nie było problemu..
Gość
19.07.2008, 21:35:01
moze DOCTYPE jest zle ?
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.