Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]tekst na divie i jego pozycja
Forum PHP.pl > Forum > Przedszkole
Michał90
17.08.2009, 08:15:47
Witam,
Mam oto taki kod html
[HTML] pobierz, plaintext 
  1. <html> 
  2. <head>
  3. <link href="style.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. <div id="id0"></div>
  7. <div id="id1"></div>
  8. <div id="id2"></div>
  9. <div id="id3"></div>
  10. <div id="id4"></div>
  11. <div id="id5"></div>
  12. <div id="id6"></div>
  13. <div id="id7"></div>
  14. <div id="id8"></div>
  15. <div id="id9"></div>
  16. <div id="id10"></div>
  17. <div id="id11"></div>
  18. <div id="id12"></div>
  19. <div id="id13"></div>
  20. <div id="id14"></div>
  21. <div id="id15"></div>
  22. <div id="id16"></div>
  23. <div id="id17"></div>
  24.  
  25. </body>
  26. </html>
[HTML] pobierz, plaintext


i taki oto kod css
[HTML] pobierz, plaintext 
  1. #id0 { 
  2. background-image:url(images/top.gif);
  3. width: 440px;
  4. height: 94px;
  5. margin-left: 22.50%;
  6. position: absolute;
  7. }
  8.  
  9. #id1 { 
  10. background-image:url(images/m.gif);
  11. width: 50px;
  12. height: 54px;
  13. margin-left: 22.50%;
  14. margin-top: 7%;
  15. position: absolute;
  16. }
  17.  
  18. #id2 { 
  19. background-image:url(images/m1.gif);
  20. width: 50%;
  21. height: 54px;
  22. margin-left: 26%;
  23. margin-top: 7%;
  24. position: absolute;
  25. }
  26.  
  27. #id3 { 
  28. background-image:url(images/m2.gif);
  29. width: 42px;
  30. height: 54px;
  31. margin-left: 75%;
  32. margin-top: 7%;
  33. position: absolute;
  34. }
  35.  
  36. #id4 { 
  37. background-image:url(images/k.gif);
  38. width: 205px;
  39. height: 43px;
  40. margin-left: 22.50%;
  41. margin-top: 12%;
  42. position: absolute;
  43. }
  44.  
  45. #id5 { 
  46. background-image:url(images/k1.gif);
  47. width: 205px;
  48. height: 30%;
  49. margin-left: 22.50%;
  50. margin-top: 15%;
  51. position: absolute;
  52. }
  53.  
  54. #id6 { 
  55. background-image:url(images/k3.gif);
  56. width: 205px;
  57. height: 25px;
  58. margin-left: 22.50%;
  59. margin-top: 28%;
  60. position: absolute;
  61. }
  62.  
  63. #id7 { 
  64. background-image:url(images/t1.gif);
  65. width: 21px;
  66. height: 22px;
  67. margin-left: 40%;
  68. margin-top: 12%;
  69. position: absolute;
  70. }
  71.  
  72. #id8 { 
  73. background-image:url(images/t5.gif);
  74. width: 35%;
  75. height: 22px;
  76. margin-left: 41%;
  77. margin-top: 12%;
  78. position: absolute;
  79. }
  80.  
  81. #id9 { 
  82. background-image:url(images/t2.gif);
  83. width: 34px;
  84. height: 25px;
  85. margin-left: 75%;
  86. margin-top: 12%;
  87. position: absolute;
  88. }
  89.  
  90. #id10 { 
  91. background-image:url(images/t8.gif);
  92. width: 34px;
  93. height: 34%;
  94. margin-left: 75%;
  95. margin-top: 13%;
  96. position: absolute;
  97. }
  98.  
  99. #id11 { 
  100. background-image:url(images/t4.gif);
  101. width: 33px;
  102. height: 18px;
  103. margin-left: 75%;
  104. margin-top: 29%;
  105. position: absolute;
  106. }
  107.  
  108. #id12 { 
  109. background-image:url(images/t7.gif);
  110. width: 35%;
  111. height: 18px;
  112. margin-left: 41%;
  113. margin-top: 29%;
  114. position: absolute;
  115. }
  116.  
  117. #id13 { 
  118. background-image:url(images/t3.gif);
  119. width: 21px;
  120. height: 18px;
  121. margin-left: 40%;
  122. margin-top: 29%;
  123. position: absolute;
  124. }
  125.  
  126. #id14 { 
  127. background-image:url(images/t6.gif);
  128. width: 21px;
  129. height: 33%;
  130. margin-left: 40%;
  131. margin-top: 13%;
  132. position: absolute;
  133. }
  134.  
  135. #id15 { 
  136. background-image:url(images/d1.gif);
  137. width: 39px;
  138. height: 54px;
  139. margin-left: 22.50%;
  140. margin-top: 31%;
  141. position: absolute;
  142. }
  143.  
  144. #id16 { 
  145. background-image:url(images/d2.gif);
  146. width: 51%;
  147. height: 54px;
  148. margin-left: 25%;
  149. margin-top: 31%;
  150. position: absolute;
  151. }
  152.  
  153. #id17 { 
  154. background-image:url(images/d3.gif);
  155. width: 42px;
  156. height: 54px;
  157. margin-left: 75%;
  158. margin-top: 31%;
  159. position: absolute;
  160. }
[HTML] pobierz, plaintext


Ja zrobić, żeby mógłbym pisać pomiędzy divem id06 i id08 ?
ID są pokazane na fotce(są to te paski,zaokrąglenia)


Pozdrawiam
Robert007
17.08.2009, 08:19:46
musisz stworzyć tabele tak jakby.

[HTML] pobierz, plaintext 
  1. <div style="float:left">
  2. </div>
  3. <div style="float:left">
  4. tu jest ten tekst twój
  5. </div>
  6. <div style="float:left">
  7. </div>
  8.  
[HTML] pobierz, plaintext


oczywiście podajesz rozmiary div'ów width
Marcuez
17.08.2009, 13:02:52
Zaokrąglone rogi?
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. .curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
  4. #ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
  5. #ctl {top:0; left:0;}
  6. #cbl {bottom:0; left:0;}
  7. #ctr {top:0; right:0;}
  8. #cbr {bottom:0; right:0;}
  9. .curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
  10. #ctl b {left:-8px;}
  11. #ctr b {left:-25px;}
  12. #cbl b {left:-8px; top:-17px;}
  13. #cbr b {left:-25px; top:-17px;}
  14. .curvy p {position:relative; z-index:100; padding:10px 15px; font-size:11px;}
  15.  
  16. </style>
  17. <div class="curvy">
  18. <em id="ctl"><b>&bull;</b></em>
  19. <em id="cbl"><b>&bull;</b></em>
  20. <em id="ctr"><b>&bull;</b></em>
  21. <em id="cbr"><b>&bull;</b></em>
  22. <p>dowolny tekst miedzy zaogrąglonymi rogami! dowolny tekst miedzy zaogrąglonymi rogami! dowolny tekst miedzy zaogrąglonymi rogami!</p></div>
[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.