0

Тема наверняка избитая, но остаются непонятки. Пытаюсь сверстать окошко div-ами. Получился вот такой код:

<html>
<head>
<script type="text/javascript" src="script.js"></script>
<style>
    div#popup_container
    {
        width: 240px;
        height: 150px;
        left: 359px;
        top: 206px;
        background-color:#e2d5e9    
    }

    div#popup_left
    {
        width:9px;
        height:150px;
        float:left;
        left:3px
    }

    div#popup
    {
        float:left; 
    }

    div#popup_right
    {
        width:12px;
        height:150px;
        float:right;
    }

    img#img_big
    {
        width:200px;
        margin-left:10px;
        margin-top:10px;
        height:130px;   
    }

    .arrow
    {
        cursor:pointer;
        top:50px;
    }
</style>
</head>
<body>
<div id="popup_container">
    <div id="popup_left"><img src="imgs/arrow_left.png" class="arrow"></div>
    <div id="popup"><img src="" id="img_big"></div>
    <div id="popup_right"><img src="imgs/arrow_right.png" class="arrow"></div>
</div>
</body>
</html>

Вопрос такой: почему для объекта класса arrow нельзя никак задать отступ, кроме как margin? Какие-нибудь padding-top и top принимают значение auto, даже если их задать явно. popup-left тоже нельзя сдвинуть.

4 ответа 4

2

Все блочные элементы имеют отступы margin и padding. Например, тут желтый фон - это margin, а красный - это padding. Однако, в режиме разметки strict img могут быть рендерится как inline элементы, по этому часто для всех img явно задают свойство display: block;

Для того, что бы позиционировать элементы относительно текущего местоположения при помощи свойств top, bottom, etc, необходимо выставить свойство position: relative; К примеру, что бы отцентрировать по вертикали элементы с классом arrow, можно задать стиль:

.arrow {
    position: relative;
    top: 50%;
    /* height: 50px; */  /* высота позиционируемого элемента */
    margin-top: -25px;   /* эта величина равна половине высоты элемента  */
}

http://cssdesk.com/2KR6S

1

Я не очень понял вопроса, но можно задать свойство у popup_left и popup_right

position: relative,

а у arrow, сталбыть,

position: absolute

Ну и top работать будет.

1

.arrow добавьте position:relative;
А добавлять padding изображению - странная идея.

0

Самое простое, это переделать весь popup_conteiner. В торопях набросал пример, можете оттолкнуться от него - https://jsfiddle.net/ausooyy2/1/


Чтоб сайт не ругался:

<div id="popup_container">
  <div id="wrap">
    <div id="popup_arrow" class="left"></div>
    <div id="popup">
      <img src="" id="img_big">
    </div>
    <div id="popup_arrow" class="right"></div>
  </div>
</div> 

CSS:

div#popup_container {width: 240px; height: 150px; left: 359px; top: 206px; background-color: #e2d5e9;}
div#wrap {display: table; width: 100%; height: 100%;}
div#popup_arrow, div#popup {display: table-cell; vertical-align: middle;}
div#popup_arrow {width: 9px; cursor: pointer;}
div#popup {width: 200px;}
div#popup_arrow {background-repeat: no-repeat; bacground-position: center; background-size: 8px;}
div#popup_arrow.left {background-image: url("imgs/arrow_left.png");}
div#popup_arrow.right {background-image: url("imgs/arrow_right.png");}
#img_big {display: block; width: 100%; height: 100%;}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.