Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html/css] Div ....
Forum PHP.pl > Forum > Przedszkole
luzak124
29.03.2008, 13:50:27
Witam . dzis postanowilem przepisacz strone z tabel do div ..... i mam taki problem rozrysowalem to na obrazku
http://img255.imageshack.us/img255/5489/beztytuuof4.gif
[HTML] pobierz, plaintext 
  1. <div id="Table_01">
  2. 	<div id="index-01">
  3. 		<img src="img/index_01.gif" width="234" height="70" alt="">
  4. 	</div>
  5. 	<div id="index-02">
  6. 		<img src="img/index_02.gif" width="477" height="70" alt="">
  7. 	</div>
  8. 	<div id="index-03">
  9. 		<img src="img/index_03.gif" width="89" height="70" alt="">
  10. 	</div>
  11. 	<div id="index-04">
  12. 		<img src="img/index_04.gif" width="43" height="24" alt="">
  13. 	</div>
  14. 	<div id="index-05">
  15. 		<img src="img/index_05.gif" width="54" height="24" alt="">
  16. 	</div>
  17. 	<div id="index-06">
  18. 		<img src="img/index_06.gif" width="42" height="24" alt="">
  19. 	</div>
  20. 	<div id="index-07">
  21. 		<img src="img/index_07.gif" width="32" height="24" alt="">
  22. 	</div>
  23. 	<div id="index-08">
  24. 		<img src="img/index_08.gif" width="63" height="24" alt="">
  25. 	</div>
  26. 	<div id="index-09">
  27. 		<img src="img/index_09.gif" width="477" height="24" alt="">
  28. 	</div>
  29. 	<div id="index-10">
  30. 		<img src="img/index_10.gif" width="89" height="24" alt="">
  31. 	</div>
  32. 	<div id="index-11">
  33. 		<img src="img/index_11.gif" width="800" height="5" alt="">
  34. 	</div>
  35. 	<div id="index-12">
  36. 		<img src="img/index_12.gif" width="6" height="308" alt="">
  37. 	</div>
  38. 	<div id="index-13">
  39. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ullamcorper. In vitae metus eu ligula dapibus bibendum. Duis non neque et sem mollis malesuada. Ut mattis accumsan turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam velit nisi, sollicitudin in, posuere at, malesuada bibendum, enim. Cras et ante at neque vestibulum interdum. In imperdiet lacus id quam. Curabitur ut nulla. Proin odio magna, egestas sed, cursus sed, lacinia a, est. Duis porttitor leo quis est. Aenean placerat. Praesent diam nisl, tristique ac, vulputate vel, vehicula a, nisi. Proin et justo bibendum felis hendrerit fermentum.
  40.  
  41. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ante. Fusce aliquam dolor vel augue. Etiam ac risus eu tortor sodales faucibus. Suspendisse auctor luctus dolor. Nulla libero nunc, faucibus ac, dictum at, blandit in, est. Phasellus consectetuer magna at arcu. In nec purus. Integer nonummy, lorem eu ultrices vestibulum, leo orci tempor lorem, sit amet ullamcorper massa nunc sit amet nunc. In hac habitasse platea dictumst. Proin varius elementum ligula. Cras in dui eu purus consequat rhoncus. Sed pellentesque. Vivamus hendrerit massa sit amet erat. Etiam elit dolor, convallis vitae, venenatis venenatis, tincidunt vel, nisi. Nulla non nunc. Fusce ut tortor. Vivamus enim nulla, adipiscing nec, sodales vel, consectetuer sed, est. Nunc rutrum.
  42.  
  43. Mauris ullamcorper pulvinar augue. Morbi placerat, orci sed pretium vehicula, odio eros faucibus tellus, at sagittis ligula turpis id justo. Maecenas vestibulum posuere felis. Curabitur nibh tellus, interdum vitae, vulputate et, vestibulum nec, est. Pellentesque ipsum lorem, dignissim sed, tempor sed, adipiscing ut, nisi. Quisque semper. Suspendisse ante neque, congue sed, scelerisque id, vehicula eget, enim. Quisque tempor massa eget risus. Mauris id pede vel dui viverra dapibus. Aliquam sem. Cras et mi. Aenean posuere egestas enim. Quisque pulvinar, orci sit amet facilisis pulvinar, arcu enim varius nunc, sed cursus sem neque eget felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  44.  
  45. Suspendisse vel enim. Vivamus vestibulum, magna at porta gravida, turpis elit vestibulum nisi, sed gravida ipsum tellus non purus. Aenean vel pede et massa lacinia malesuada. Vestibulum quam pede, pellentesque vitae, hendrerit quis, facilisis vehicula, arcu. Donec adipiscing. Sed pede sapien, hendrerit at, viverra vel, rhoncus eget, odio. Praesent auctor nibh ut dui. Proin nonummy nunc id neque. Aliquam facilisis tellus tempus urna. Nullam augue magna, bibendum non, lacinia adipiscing, vulputate eget, augue. Ut eu arcu at sapien faucibus rutrum. Duis at odio. Sed accumsan. Curabitur est.
  46.  
  47. Nam lacus. Maecenas eleifend vulputate arcu. Aliquam elit nunc, feugiat sit amet, suscipit eu, scelerisque a, orci. Etiam accumsan porta augue. Morbi justo mauris, porttitor ornare, accumsan vitae, fermentum at, nisl. Pellentesque semper, orci eget congue malesuada, pede ante venenatis quam, vitae tristique magna metus quis odio. Ut imperdiet pellentesque lorem. Donec gravida, neque at ornare laoreet, tellus pede fringilla orci, porttitor mollis dolor lectus sit amet ipsum. Praesent sit amet justo imperdiet sapien elementum vestibulum. In hac habitasse platea dictumst. Nulla facilisi. Pellentesque aliquet placerat eros. Praesent quam tortor, aliquet nec, pellentesque vitae, ullamcorper id, nisi. Maecenas nisl nisi, placerat vel, congue nec, congue a, mauris. Aliquam volutpat venenatis urna. Nunc sit amet ligula vitae tellus elementum condimentum.
  48.  
  49. Etiam sodales eros quis sem. Mauris turpis. Nullam eu magna quis nisi fringilla sodales. Integer eget velit. Nulla sem. Morbi enim. Nunc mattis dignissim libero. Suspendisse ut ante vel nulla tristique aliquet. Ut condimentum nisi ut turpis. Ut a risus non felis ultricies sollicitudin. Curabitur a sapien.
  50. 	</div>
  51. 	<div id="index-14">
  52. 		<img src="img/index_14.gif" width="6" height="308" alt="">
  53. 	</div>
  54. 	<div id="index-15">
  55. 		<img src="img/index_15.gif" width="788" height="6" alt="">
  56. 	</div>
  57. 	<div id="index-16">
  58. 		<img src="img/index_16.gif" width="490" height="49" alt="">
  59. 	</div>
  60. 	<div id="index-17">
  61. 		<img src="img/index_17.gif" width="310" height="49" alt="">
  62. 	</div>
  63. 	<div id="index-18">
  64. 		<img src="img/index_18.gif" width="800" height="3" alt="">
  65. 	</div>
  66. </div>
[HTML] pobierz, plaintext

css:
[HTML] pobierz, plaintext 
  1. body {background: url(img/tlo.gif); 
  2. background-repeat:repeat-x;}
  3. #Table_01 {
  4. 	position:absolute;
  5. 	left:0px;
  6. 	top:0px;
  7. 	width:800px;
  8. 	height:459px;
  9. }
  10.  
  11. #index-01 {
  12. 	position:absolute;
  13. 	left:0px;
  14. 	top:0px;
  15. 	width:234px;
  16. 	height:70px;
  17. }
  18.  
  19. #index-02 {
  20. 	position:absolute;
  21. 	left:234px;
  22. 	top:0px;
  23. 	width:477px;
  24. 	height:70px;
  25. }
  26.  
  27. #index-03 {
  28. 	position:absolute;
  29. 	left:711px;
  30. 	top:0px;
  31. 	width:89px;
  32. 	height:70px;
  33. }
  34.  
  35. #index-04 {
  36. 	position:absolute;
  37. 	left:0px;
  38. 	top:70px;
  39. 	width:43px;
  40. 	height:24px;
  41. }
  42.  
  43. #index-05 {
  44. 	position:absolute;
  45. 	left:43px;
  46. 	top:70px;
  47. 	width:54px;
  48. 	height:24px;
  49. }
  50.  
  51. #index-06 {
  52. 	position:absolute;
  53. 	left:97px;
  54. 	top:70px;
  55. 	width:42px;
  56. 	height:24px;
  57. }
  58.  
  59. #index-07 {
  60. 	position:absolute;
  61. 	left:139px;
  62. 	top:70px;
  63. 	width:32px;
  64. 	height:24px;
  65. }
  66.  
  67. #index-08 {
  68. 	position:absolute;
  69. 	left:171px;
  70. 	top:70px;
  71. 	width:63px;
  72. 	height:24px;
  73. }
  74.  
  75. #index-09 {
  76. 	position:absolute;
  77. 	left:234px;
  78. 	top:70px;
  79. 	width:477px;
  80. 	height:24px;
  81. }
  82.  
  83. #index-10 {
  84. 	position:absolute;
  85. 	left:711px;
  86. 	top:70px;
  87. 	width:89px;
  88. 	height:24px;
  89. }
  90.  
  91. #index-11 {
  92. 	position:absolute;
  93. 	left:0px;
  94. 	top:94px;
  95. 	width:800px;
  96. 	height:5px;
  97. }
  98.  
  99. #index-12 {
  100. 	position:absolute;
  101. 	left:0px;
  102. 	top:99px;
  103. 	width:6px;
  104. 	height:308px;
  105. }
  106.  
  107. #index-13 {
  108. 	background:url(img/index_13.gif);
  109. 	background-repeat: repeat-y;
  110. 	position:absolute;
  111. 	left:6px;
  112. 	top:99px;
  113. 	width:788px;
  114. 	height:302px;
  115.         max-width:788;
  116. }
  117.  
  118. #index-14 {
  119. 	position:absolute;
  120. 	left:794px;
  121. 	top:99px;
  122. 	width:6px;
  123. 	height:308px;
  124. }
  125.  
  126. #index-15 {
  127. 	position:absolute;
  128. 	left:6px;
  129. 	top:401px;
  130. 	width:788px;
  131. 	height:6px;
  132. }
  133.  
  134. #index-16 {
  135. 	position:absolute;
  136. 	left:0px;
  137. 	top:407px;
  138. 	width:490px;
  139. 	height:49px;
  140. }
  141.  
  142. #index-17 {
  143. 	position:absolute;
  144. 	left:490px;
  145. 	top:407px;
  146. 	width:310px;
  147. 	height:49px;
  148. }
  149.  
  150. #index-18 {
  151. 	position:absolute;
  152. 	left:0px;
  153. 	top:456px;
  154. 	width:800px;
  155. 	height:3px;
  156. }
[HTML] pobierz, plaintext

jak zrobić by divy dolne ta niebieska tabelka nie nachodzila na tekst?
ShadowD
29.03.2008, 13:55:06
PO co ci tyle div??
luzak124
29.03.2008, 13:55:46
po tak trzeba nie bede tlumaczyl smile.gif .... po prostu chce to naprawic by divy dolne nie wchodzily na tekst. jestem noobem w tych div a czytalem ze tabele sa stare i do .... a wiec pomocy


// zedytowalem css i html teraz dolna "belka" "footer" sklada sie z 2 div 
[HTML] pobierz, plaintext 
  1. #index-16 {
  2. 	position:absolute;
  3. 	left:0px;
  4. 	top:407px;
  5. 	width:490px;
  6. 	height:49px;
  7. }
  8.  
  9. #index-17 {
  10. 	position:absolute;
  11. 	left:490px;
  12. 	top:407px;
  13. 	width:310px;
  14. 	height:49px;
  15. }
[HTML] pobierz, plaintext

tylko nadal nachodzi na tekst... POMOCY
ShadowD
29.03.2008, 14:49:36
Ale tak sie tego nie robi nie możesz tyle div'ów walić tak pałowo...

Czekaj sprobuje pokombinować...

Sry ale nie wiem nawet jak to działa jak mi powiesz co chcesz uzyskać to ci napisze ale nie uda mi się tego uratować…
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.