За последние 24 часа нас посетили 22583 программиста и 1090 роботов. Сейчас ищут 643 программиста ...

Что не так с css?

Тема в разделе "HTML и CSS", создана пользователем Владислав Глебов, 25 авг 2019.

Метки:
  1. Владислав Глебов

    Владислав Глебов Новичок

    С нами с:
    29 июл 2019
    Сообщения:
    5
    Симпатии:
    0
    У меня проблема, которую пытался решить уже тремя способами. я имею ввиду и использование relative и display в разных вариациях. Проблема заключается в том, что при наведении на блок товара, дополняемая (открывающаяся) часть должна накладываться сверху на тот блок товара, что находится ниже, но вместо этого нижний товар начинает непредсказуемо смещаться. Привожу весь код целиком, чтобы вы могли разобраться, но извиняюсь, что без комментариев (теперь понимаю их важность). Кстати вот сам сайт: http://itvlad1x.beget.tech/index.php .
    Код (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5.     <title>ADMIR - Главная</title>
    6.     <meta charset='utf-8'/>
    7.     <link rel='stylesheet' href='/css/reset.css'/>
    8.     <style>
    9.         body{
    10.             background: #F0F0F0;
    11.         }
    12.         #body{
    13.             width: 1235px;
    14.             margin: 0px auto;
    15.             margin-top: 150px;
    16.         }
    17.         #bodycontent-content{
    18.             width: 1015px;
    19.             height: auto;
    20.             float: left;
    21.             background: #FAF9F6;
    22.             box-shadow: 0 0 20px 1px #AAA;
    23.             border-radius: 10px;
    24.             margin-bottom: 30px;
    25.             padding: 20px 0;
    26.         }
    27.         #bodycontent-content-sort{
    28.             width: 960px;
    29.             height: 30px;
    30.             margin: 0px auto;
    31.             border-radius: 10px 10px 0 0;
    32.             background: #FA4016;
    33.             margin-bottom: 0;
    34.             border: 1px solid #555;
    35.         }
    36.         #bodycontent-content-ollgood{
    37.             width: 960px;
    38.             height: auto;
    39.             margin: 10px auto;
    40.             margin-top: 20px;
    41.         }
    42.         #bodycontent-content-ollgood-good{
    43.             width: 300px;
    44.             margin: 10px 0px;
    45.             margin-right: 10px;
    46.             height: 230px;
    47.             border: 1px solid #666;;
    48.             background: #FAFAFA;
    49.             cursor: pointer;
    50.             float: left;
    51.         }
    52.         #bodycontent-content-ollgood-good > #spoiler{
    53.             position: absolute;
    54.         }
    55.         #bodycontent-content-ollgood-good:hover{
    56.             box-shadow: 0px 0px 5px #BBB;
    57.             background: #FCFCFC;
    58.             height: auto;
    59.         }
    60.         #bodycontent-content-ollgood-good > img{
    61.             width: 300px;
    62.             margin: 0px auto;
    63.             height: 190px;
    64.             display: block;
    65.             background: white;
    66.             border-bottom: 1px dashed #999;
    67.             margin-bottom: 10px;
    68.         }
    69.         #bodycontent-content-ollgood-good-price{
    70.             font: 23px sans-serif;
    71.             margin: 0 7px;
    72.             color: #222;
    73.             height: 30px;
    74.             width: 80px;
    75.             font-size: 1.3rem;
    76.             display: inline;
    77.         }
    78.         #bodycontent-content-ollgood-good-fav{
    79.             display: inline;
    80.             float: right;
    81.             margin-top: 3px;
    82.         }
    83.         #bodycontent-content-ollgood-good-fav > img{
    84.             width: 14px;
    85.             height: 14px;
    86.             margin-right: 5px;
    87.         }
    88.         #bodycontent-content-ollgood-good-fav > span{
    89.             font: bold 15px sans-serif;
    90.             margin-right: 10px;
    91.             font-weight: 100;
    92.         }
    93.         #bodycontent-content-ollgood-good-title{
    94.             display: none;
    95.         }
    96.         #bodycontent-content-ollgood-good:hover > #bodycontent-content-ollgood-good-title{
    97.             width: 280px;
    98.             display: block;
    99.             height: auto;
    100.             margin: 5px 7px;
    101.             font: 14px sans-serif;
    102.             color:#555;
    103.             border-bottom: 1px dashed #999;
    104.             padding-bottom: 10px;
    105.         }
    106.         #bodycontent-content-ollgood-good-buttons{
    107.             display: none;
    108.             margin: 0 auto;
    109.             height: 30px;
    110.             margin-top: 10px;
    111.             width: 280px;
    112.         }
    113.         #bodycontent-content-ollgood-good:hover > #bodycontent-content-ollgood-good-buttons{
    114.             display: block;
    115.         }
    116.         #bodycontent-content-ollgood-good-buttons-like{
    117.             background: #D60000;
    118.             color: white;
    119.             padding: 5px 10px;
    120.             font: 12px sans-serif;
    121.         }
    122.         #bodycontent-content-ollgood-good-buttons-like:hover{
    123.             background: #FF5555;
    124.         }
    125.         #bodycontent-content-ollgood-good-buttons-cart{
    126.             background: #7900B5;
    127.             color: white;
    128.             padding: 5px 10px;
    129.             font: 12px sans-serif;
    130.             margin-left: 10px;
    131.         }
    132.         #bodycontent-content-ollgood-good-buttons-cart:hover{
    133.             background: #D483FD;
    134.         }
    135.         #bodycontent-content-ollgood-good-buttons-about{
    136.             background: #DFB300;
    137.             color: white;
    138.             padding: 5px 10px;
    139.             font: 12px sans-serif;
    140.             margin-left: 10px;
    141.         }
    142.         #bodycontent-content-ollgood-good-buttons-about:hover{
    143.             background: #F1EA00;
    144.         }
    145.         #bodycontent-asside{
    146.             width: 190px;
    147.             height: 200px;
    148.             padding-right: 20px;
    149.             float: right;
    150.             background: #FAF9F6;
    151.             box-shadow: 0 0 20px 1px #AAA;
    152.             border-radius: 10px;
    153.             margin-bottom: 30px;
    154.         }
    155.     </style>
    156. </head>
    157. <body>
    158.     <?php
    159.         include'./include/blockheader.php';
    160.     ?>
    161.     <div id='body'>
    162.         <div id='bodycontent'>
    163.             <div id='bodycontent-content'>
    164.                 <div id='bodycontent-content-sort'>
    165.                 </div>
    166.                 <div id='bodycontent-content-ollgood'>
    167.                 <?php
    168.                     $goods = mysqli_query($link , 'SELECT * FROM `goods`;');
    169.                     if (mysqli_num_rows($goods) > 0)
    170.                     {
    171.                         $ollgoods = mysqli_fetch_array($goods);
    172.                         do{
    173.                             echo "
    174.                     <div id='bodycontent-content-ollgood-good'>  
    175.                         <img src='/images/sourse/noimagegood.png' alt=''/>
    176.                         <p id='bodycontent-content-ollgood-good-price'>".$ollgoods['good_price']." ₽</p>
    177.                         <p id='bodycontent-content-ollgood-good-fav'>
    178.                             <img src='/images/sourse/favorgood.png' />
    179.                             <span>13</span>
    180.                         </p>
    181.                         <p id='spoiler'><p id='bodycontent-content-ollgood-good-title' >".$ollgoods['good_title']."</p>
    182.                         <div id='bodycontent-content-ollgood-good-buttons'>
    183.                             <a id='bodycontent-content-ollgood-good-buttons-like'>Понравилось</a>
    184.                             <a id='bodycontent-content-ollgood-good-buttons-cart'>В корзину</a>
    185.                             <a id='bodycontent-content-ollgood-good-buttons-about'>Подробнее</a>
    186.                         </div>
    187.                         </p>
    188.                     </div>";
    189.                         }
    190.                         while($ollgoods = mysqli_fetch_array($goods));
    191.                     }
    192.                 ?>
    193.                 </div>
    194.             </div>
    195.             <div id='bodycontent-asside'>
    196.             </div>
    197.         </div>
    198.     </div>
    199. </body>
    200. </html>
     
    #1 Владислав Глебов, 25 авг 2019
  2. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.792
    Симпатии:
    650
    Нужно перенести тему в соотв. раздел.

    Хотя по программированию у вас там тоже далеко не все так однозначно ;) Но вопрос не в этом.
     
    #2 miketomlin, 26 авг 2019
  3. Владислав Глебов

    Владислав Глебов Новичок

    С нами с:
    29 июл 2019
    Сообщения:
    5
    Симпатии:
    0
    если вы по поводу отображения данных товара, то там ещё не доделано, а вот что за ошибка с перемещением блоков я и не понял
     
    #3 Владислав Глебов, 30 авг 2019
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)