Форум PHP программистов > Две независимые картинки в одном div элементе

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Две независимые картинки в одном div элементе

gidrosoldat

18.02.2012 - 22:10

Доброе время суток!
Есть вот такой простенький случай:

<div class="upload_image_container">
            <img src="<?php echo '/media/images/upload/'.$image->filename; ?>" class="upload_image">
            <img src="/media/images/icons/delete.png" class="upload_delete">
</div>

css код такой:

.upload_image_container {
    width: 150px;
    height: 100px;
    border: 1px solid #ccc;
    text-align: center;
    margin-top: 10px;
}
.upload_image {
    max-height: 100px;
    max-width: 150px;
}
.upload_delete {
    float:right;
    top: 1px;
    right: 1px;
    cursor: pointer;
}

По идее это должно выглядеть так - в рамочке 150 на 100 пиксей должно вписываться изображение с любым соотношением сторон. Это вроде как работает. Но в правый верхний угол я хочу добавить маленькую иконку (для интерфейса), которая должна быть на расстоянии 10 пиксей от верхней и правой стороны рамки.

Проблема в том что теперь два этих изображения друг на друга влияют. Из-за иконки основное изображение находится не по центру, а немного сдвинуто вбок.
Как мне изменить css код, чтобы эти две картинки "не обращали друг на друга внимания"? Как сделать чтобы иконка просто была "выше" основной картинки?

Спустя 1 минута, 27 секунд (18.02.2012 - 21:11) Игорь_Vasinsky написал(а):

position:relative

и лучшеб нарисовал

Спустя 1 минута, 35 секунд (18.02.2012 - 21:13) nugle написал(а):

gidrosoldat
position:absolute; top:10px; right:10px;

Спустя 12 минут (18.02.2012 - 21:25) Игорь_Vasinsky написал(а):

Цитата

в рамочке 150 на 100 пиксей

nugle

Цитата

position:absolute; top:10px; right:10px;

где будет первая картинка и где встанет твоя?

Спустя 8 минут, 7 секунд (18.02.2012 - 21:33) nugle написал(а):

Игорь_Vasinsky
я не тестил, я по принципу, как делается это обычно

Спустя 20 минут, 44 секунды (18.02.2012 - 21:53) Игорь_Vasinsky написал(а):

если они находяться в одном блоке - то используют не абсолютное, а относительное - позиционирование так же top left right & buttom

Спустя 3 часа, 17 минут, 57 секунд (19.02.2012 - 01:11) bodja написал(а):

.upload_image {
    position:absolute;
    max-height: 100px;
    max-width: 150px;
}
.upload_delete {
    position:absolute;
   left:80px;//тут подтянеш куда нужно
    top: 1px;
    cursor: pointer;
}

Спустя 13 часов, 56 минут, 48 секунд (19.02.2012 - 15:08) gidrosoldat написал(а):

ок, добавил в класс upload_delete строку position: absolute; Иконки удаления убежали не на край контейнера, а вообще к краю виджета(шаблона). Смотрите что получилось (стрелочками показаны места где эти иконки должны быть):

Шаблон виджета:

<div class="widget_name_right"><?php echo __('Upload file'); ?></div>
<div class="widget_content_right">
    <? if ($errors): ?>
    <? foreach($errors as $error): ?>
        <div class="notice error"><?=$error?></div>
        <? endforeach ?>
    <? endif ?>
    <form action="" method="post" enctype='multipart/form-data'>
        <select name="type" class="upload">
            <option value="image_text"><?php echo __('For text'); ?></option>
            <option value="image_preview"><?php echo __('For preview'); ?></option>
        </select>
        <input name="image" type="file" class="upload">
        <input name="ok_image" type="submit" class="upload" value="<?php echo __('Upload'); ?>">
    </form>
    <?php if (count($images) > 0) : ?>
    <?php foreach($images as $image) : ?>

        <div class="upload_image_container">
            <img src="<?php echo $upload_path.$image->filename; ?>" class="upload_image">
            <img src="/media/images/icons/delete.png" class="upload_delete">
        </div>

        <?php endforeach ?>
    <?php endif ?>
</div>

.upload_image_container {
    width: 150px;
    height: 100px;
    border: 1px solid #ccc;
    text-align: center;
    margin-top: 10px;
}

.upload_delete {
    position: absolute;
    float: right;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.upload_image {
    max-height: 100px;
    max-width: 150px;

}

.widget_name_left, .widget_name_right {
    background: #f5f5f5;
    color: #666666;
    padding: 9px 15px 9px 15px;
    font-size: 13px;
    line-height: 13px;
    border: 1px solid #e5e5e5;
}

.widget_name_left {
    width: 198px;
}

.widget_name_right {
    width: 318px;
}

.widget_content_left, .widget_content_right {
    border-collapse: collapse;
    border: 1px solid #e5e5e5;
    border-top: 0px;
    padding: 15px;
    margin-bottom: 15px;
    line-height: 18px
}

.widget_content_left {
    width: 198px;
}

.widget_content_right {
    width: 318px;
}

П.С. Вопрос не по теме: не много ли я логики переношу в файл отображения? Не запутает ли вестальщиков обилие php кода?

Спустя 6 часов, 53 минуты, 33 секунды (19.02.2012 - 22:02) bodja написал(а):

position:absolute; дает позиционирование по отношению к родительскому элементу.
здесь не нужно оперировать float и margin.
Если хотите показать код - покажите хтмл,мне пхп не нужен ,мне он ни о чем не говорит.

Спустя 12 часов, 39 минут, 49 секунд (20.02.2012 - 10:42) gidrosoldat написал(а):

А я вам что показал? HTML код с PHP вставками. Мне всегда казалось, что любому верстальщику под силу выучить две PHP команды "echo" и "foreach" :)

Ок, вот чистый HTML код:

<div class="widget_name_right">Upload file</div>
<div class="widget_content_right">
    <form action="" method="post" enctype='multipart/form-data'>
        <select name="type" class="upload">
            <option value="image_text">For text</option>
            <option value="image_preview">For preview</option>
        </select>
        <input name="image" type="file" class="upload">
        <input name="ok_image" type="submit" class="upload" value="Upload">
    </form>
        <div class="upload_image_container">
            <img src="/media/images/1.jpg" class="upload_image">
            <img src="/media/images/icons/delete.png" class="upload_delete">
        </div>
        <div class="upload_image_container">
            <img src="/media/images/2.jpg" class="upload_image">
            <img src="/media/images/icons/delete.png" class="upload_delete">
        </div>
</div>

Спустя 3 часа, 10 минут, 22 секунды (20.02.2012 - 13:52) bodja написал(а):

Спасибо за оценку моих знаний ,но я достаточно знаю PHP ,что бы понять ,точнее ,что бы не понять ,что возвращают __('Upload file'),__('For text'), __('Upload') и т.д.

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX</title>
<script type="text/javascript" src="./script.js"></script>
<style>
.upload_image_container {
width: 150px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
margin-top: 10px;
}

.upload_delete {
position: absolute;
top: 1px;
left: 130px;
cursor: pointer;
}

.upload_image {
max-height: 100px;
max-width: 150px;

}

.widget_name_left, .widget_name_right {
background: #f5f5f5;
color: #666666;
padding: 9px 15px 9px 15px;
font-size: 13px;
line-height: 13px;
border: 1px solid #e5e5e5;
}

.widget_name_left {
width: 198px;
}

.widget_name_right {
width: 318px;
}

.widget_content_left, .widget_content_right {
border-collapse: collapse;
border: 1px solid #e5e5e5;
border-top: 0px;
padding: 15px;
margin-bottom: 15px;
line-height: 18px
}

.widget_content_left {
width: 198px;
}

.widget_content_right {
width: 318px;
}
</style>
</head>
<body>
<div class="widget_name_right">Upload file</div>
<div class="widget_content_right">
<form action="" method="post" enctype='multipart/form-data'>
<select name="type" class="upload">
<option value="image_text">For text</option>
<option value="image_preview">For preview</option>
</select>
<input name="image" type="file" class="upload">
<input name="ok_image" type="submit" class="upload" value="Upload">
</form>
<div class="upload_image_container" style="position:relative;">
<img src="/media/images/1.jpg" class="upload_image">
<img src="/media/images/icons/delete.png" class="upload_delete">
</div>
<div class="upload_image_container" style="position:relative;">
<img src="/media/images/2.jpg" class="upload_image">
<img src="/media/images/icons/delete.png" class="upload_delete">
</div>
</div>
</body>
</html>

Спустя 5 минут, 58 секунд (20.02.2012 - 13:58) Игорь_Vasinsky написал(а):

absolut - абсолютное позиционирование - не зависимое от элементов DOM
relative - относительное позиционирование (относительно родителя) - а точнее позиционирование от того места где он находиться.

Спустя 21 минута, 14 секунд (20.02.2012 - 14:19) bodja написал(а):

Игорь_Vasinsky
Это вы мне?
Уберите style="position:relative;" из инлайна div-а и поставте в класс .upload_image_container и посмотрите

,потом продолжим начет того,по отношению к чему это все позиционируется.

Спустя 10 минут, 33 секунды (20.02.2012 - 14:30) Игорь_Vasinsky написал(а):

это возражение к это строке

Цитата

position:absolute; дает позиционирование по отношению к родительскому элементу.

Спустя 6 минут, 33 секунды (20.02.2012 - 14:36) bodja написал(а):

Игорь_Vasinsky
Ух тяжело с вами спорить

Попробуйте этот код.

Цитата

Спустя 2 минуты, 57 секунд (20.02.2012 - 14:39) Игорь_Vasinsky написал(а):

ну зачем мне этот код. я уточну - я не про данную ситуацию

достаточно открыть мануал по CSS и признать поражение

а я за шампанским и собирать друзей, праздновать весилиться.

Спустя 4 минуты, 12 секунд (20.02.2012 - 14:43) bodja написал(а):

Ладно,Проехали

Спустя 47 секунд (20.02.2012 - 14:44) gidrosoldat написал(а):

bodja,
__('Upload file'),__('For text'), __('Upload') - пользовательская функция, выдающая строковый результат (конкретнее, переводящая выражение на нужный язык). Не думал, что вам может быть важна функция выводящая результат внутри тэга. Полагаю на верстку она никак повлиять не может.

Спустя 1 минута, 25 секунд (20.02.2012 - 14:46) Игорь_Vasinsky написал(а):

согласен

Спустя 19 часов, 34 минуты, 36 секунд (21.02.2012 - 10:20) gidrosoldat написал(а):

bodja, спасибо. Все работает, плюсую!

Спустя 8 часов, 36 секунд (21.02.2012 - 18:21) bodja написал(а):

Всегда пожалуста.
Я вредный ,но не сильно.

Быстрый ответ:

Здесь расположена полная версия этой страницы.