Отцентрировать картинку

Тема в разделе "Веб-дизайн", создана пользователем horpah, 17 июл 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    Господа CSS гуру. Прошу помочь отцентрировать картинку.
    В общем дано:
    блок 600*600 пикселей . В него выводится картинка (фото) которая на стороне сервера ресайзится, чтобы не любая сторона не превышала эти 600 пикс.
    Иногда к этой картинке прилагается статусная картинка (бан, новая...) которая должна располагаться поверх фото в ее левом верхнем углу.

    Вопрос. Можно ли как-то средствами CSS(может быть задействован JS/jQuery, хотя не желательно) разместить ее по центру этого блока, чтобы статусная картинка была жестко привязана к левому верхнему углу фото.

    Рассматривался вариант наложить ее на стороне сервера, но из-за нагрузки желательно отдать эту опреацию клиенту.
     
  2. alfaexpert

    alfaexpert

    Регистр.:
    23 июл 2008
    Сообщения:
    183
    Симпатии:
    27
    Используй z-index Одна картинка будет на фоне, вторая будет сверху накладываться.
    Кодом помочь не могу, но думаю идея тебе поможет
     
  3. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    z-index - это понятно. Тут вопрос, чтобы x-y координаты статусной картинки соответсвовали.
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    помести в блок еще какой-либо обрамляющий элемент (например список). Т.е. у тебя получится примерно такая конструкиця:
    HTML:
    <div class="pic">
    <ul>
    <li>
    <img src="pic.gif" alt="text" />
    <div class="status">
    status text
    </div>
    </li>
    </div>
    в стили
    HTML:
    .pic {
    width:600px;
    height:600px;
    text-align:center;
    }
    .pic ul {
    list-style:none;
    }
    .pic li {
    display:inline;
    position:relative;
    }
    .status {
    position:absolute;
    top:0;
    left:0;
    text-align:left;
    }
    PS за работоспособность не ручаюсь, делал в воображении
     
  5. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    В общем если кому интересно то вот что получилось(привожу сразу из PHP:(
    HTML:
    
    <table class="galimage">
    <tbody><tr>
    <td align="center">
    <span class="photocontainer">
     <img border="0" id="pic" src="{$src}">
     <span class="imgstatus">{$statuspic}</span>
    </span>
    </td>
    </tr>
    </tbody></table>
    
    
    и CSS к нему:
    HTML:
    
    .galimage{
    height: 600px; 
    border: none; 
    width: 600px;  
    margin: 0px;
    }
    .galimage tr{
    	vertical-align:middle;
    }
    .photocontainer{
      position: relative; 
     display: inline-block;
    }
    .imgstatus{ 
    display:block; 
    width:20px; 
    height:20px;  
    position:absolute; 
    top:0; 
    left:0;
    z-index: 100;
    }
    
    Тему можно закрывать.
     
Статус темы:
Закрыта.