Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Обтекание по дуге

Страниц (1): [1]
 

1. serebrus2 - 26 Января, 2017 - 21:16:59 - перейти к сообщению
Хотелось бы сделать не квадратное обтекание.

Блоки у меня разместить как нужно получилось, но вот текст их обтекает так, будто я их и не смещала((

CODE (htmlphp):
скопировать код в буфер обмена
  1. <?php
  2.         include "header.php"
  3. ?>
  4.  
  5. <div class="coner">
  6.         <p class="yakor"><a name="top">.</a></p>
  7.         <div class="block03"></div>
  8.         <div class="block04"></div>
  9.         <div class="block05"></div>
  10.         <div class="block06"></div>
  11.         <div class="block07"></div>
  12.         <div class="block08"></div>
  13.         <div class="block09"></div>
  14.         <div class="block10"></div>
  15.         <div class="block11"></div>
  16.         <div class="block12"></div>
  17.         <div class="block13"></div>
  18.         <div class="block14"></div>
  19.         <div class="block15"></div>
  20.         <div class="block16"></div>
  21.         <div class="block17"></div>
  22.         <div class="block18"></div>
  23.         <div class="block19"></div>
  24.         <div class="block20"></div>
  25.         <div class="block21"></div>
  26.  
  27.  
  28.         <p>Много текста.</p>
  29.  
  30. </div>
  31.  
  32. <?php
  33.         include "footer.php"
  34. ?>
  35.  




CODE (htmlphp):
скопировать код в буфер обмена
  1. .coner {
  2.     width: 1920px;
  3.     margin: auto;
  4.     font-size: 30px;
  5.     background: url(img/day-legend.png) no-repeat, url(img/z-big.png) no-repeat 80%, url(img/all-fon.jpg);
  6.     position: fixed center;
  7. }
  8.  
  9.  
  10. .block03, .block04, .block05, .block06, .block07, .block08, .block09, .block10, .block11, .block12, .block13, .block14, .block15, .block16, .block17, .block18, .block19, .block20, .block21 {
  11.     height: 50px;
  12.     background: red;
  13.     float: right;
  14.     opacity: 0.3;
  15.     border: 1px solid black;
  16. }
  17.  
  18.  
  19. .block03 {
  20.     width: 1463px;
  21.     top: 50px;
  22. }
  23.  
  24. .block04 {
  25.     width: 1330px;
  26.     top: 100px;
  27. }
  28.  
  29. .block05 {
  30.     width: 1200px;
  31.     top: 150px;
  32. }
  33.  
  34. .block06 {
  35.     width: 1080px;
  36.     top: 200px;
  37. }
  38.  
  39. .block07 {
  40.     width: 980px;
  41.     top: 250px;
  42. }
  43.  
  44. .block08 {
  45.     width: 860px;
  46.     top: 50px;
  47.     right: -980px;
  48.     position: relative;
  49. }
  50.  
  51. .block09 {
  52.     width: 770px;
  53.     top: 50px;  
  54.     position: relative;
  55. }
  56.  
  57. .block10 {
  58.     width: 690px;
  59.     top: 100px;  
  60.     right: -770px;
  61.     position: relative;
  62. }
  63.  
  64. .block11 {
  65.     width: 610px;
  66.     top: 100px;  
  67.     position: relative;
  68. }
  69.  
  70. .block12 {
  71.     width: 530px;
  72.     top: 150px;  
  73.     right: -610px;
  74.     position: relative;
  75. }
  76.  
  77. .block13 {
  78.     width: 460px;
  79.     top: 200px;  
  80.     right: -1140px;
  81.     position: relative;
  82. }
  83.  
  84. .block14 {
  85.     width: 390px;
  86.     top: 200px;  
  87.     right: 0px;
  88.     position: relative;
  89. }
  90.  
  91. .block15 {
  92.     width: 330px;
  93.     top: 250px;  
  94.     right: -390px;
  95.     position: relative;
  96. }
  97.  
  98. .block16 {
  99.     width: 270px;
  100.     top: 300px;  
  101.     right: -720px;
  102.     position: relative;
  103. }
  104.  
  105. .block17 {
  106.     width: 220px;
  107.     top: 350px;  
  108.     right: -990px;
  109.     position: relative;
  110. }
  111.  
  112. .block18 {
  113.     width: 170px;
  114.     top: 400px;  
  115.     right: -1210px;
  116.     position: relative;
  117. }
  118.  
  119. .block19 {
  120.     width: 120px;
  121.     top: 450px;  
  122.     right: -1380px;
  123.     position: relative;
  124. }
  125.  
  126. .block20 {
  127.     width: 80px;
  128.     top: 500px;  
  129.     right: -1500px;
  130.     position: relative;
  131. }
  132.  
  133. .block21 {
  134.     width: 50px;
  135.     top: 550px;  
  136.     right: -1580px;
  137.     position: relative;
  138. }


http://my-files[dot]ru/tgixu9 - обводка сделана для того, чтобы были видны границы dov-ов. Впоследствии они, естественно, станут прозрачными.

http://my-files[dot]ru/h89fyu - вот так разместила div-ы, но обтекание осталось, как если бы я ничего не меняла, по сравнению с предыдущим скрином Хм

 

Powered by ExBB FM 1.0 RC1