Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
1 / 1 / 1
Регистрация: 19.05.2013
Сообщений: 92
1

Абсолютное позиционирование

06.04.2015, 21:38. Показов 747. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем привет!

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="catalog">
  <div>
     <a class="fancybox1 photo" rel="1" href="./gallery/1-1.jpg" data-fancybox-group="gallery">
         <img src="./gallery/1-1.jpg" width="215" height="215">
         <img src="./img/image-bg.png" width="215" height="215px" class="photo_show">
     </a>
</div>
<div class="name">Зачарованное сердце</div>
<div class="cost">0<span>руб.</span></div>
<div class="cost-old">0 руб.</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.catalog {
            /*display:inline-block;*/
            position:relative;
            border:2px solid #e94758;
            margin:10px 10px;
            width:215px;
            height:330px;
        }
        
            
            .catalog .name {
                font:normal 12pt Century Gothic;
                text-align:center;
                padding:10px 0 10px 0; /*верхний правый нижний левый*/
            }
            
            .photo_show {
                display:none;
                left:0;
                top:0;
                position:absolute;
            }
            
            .catalog .cost {
                border:2px solid blue;
                position:relative;
                top:0;
                left:-12px;
                font:normal 20pt Century Gothic;
                font-weight:400;
                text-align:left;
                padding:12px 0 6px 12px;
                background:url(img/button_price.png) no-repeat;
                width:160px;
                height:55px;
                                z-index:10;
            }
                    
            .catalog .cost span {
                font:normal 14pt Century Gothic;
                font-weight:400;
                vertical-align:text-bottom;
            }
            
            .catalog .cost-old {
                border:2px solid green;
                position:adsolute;
                bottom:15px;
                right:15px;
                text-align:right;
                font:normal 14pt Century Gothic;
                z-index:20;
            }
Все кто видят картинку и на ней зеленый прямоугольник прошу помочь, зеленый прямоугольник это то что я хочу сделать решение которое я вижу я описал в классе .cost-old, я хочу с позиционировать элемент див с классом .cost-old по нижней и правой границы (дива с классом catalog) с отступами но чего то не получается и наложить z-index поверх класса .cost
но что не получается если есть какое то другое решение напишете.
Миниатюры
Абсолютное позиционирование  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.04.2015, 21:38
Ответы с готовыми решениями:

Абсолютное позиционирование
Подскажите в чем может быть проблема. Вот форма &lt;div id=&quot;wm_form&quot;&gt; &lt;img...

Абсолютное позиционирование
Подскажите почему так происходит есть блок , задаю ему position relative внутри блок: ...

абсолютное позиционирование
Почему див (красный квадрат id=&quot;color&quot;) внутри другого дива (id=&quot;header&quot;) (обрамленный черной...

Абсолютное позиционирование
&lt;p align=&quot;left&quot; style=&quot;color:Black&quot;&gt;Создайте страничку с левым полем, в котором бы распалагался...

4
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
06.04.2015, 22:07 2
karpos, на position:relative Вас вариант устроит? Я только дивы сделаю остальное допилите...
0
1 / 1 / 1
Регистрация: 19.05.2013
Сообщений: 92
06.04.2015, 22:40  [ТС] 3
давайте попробуем
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
07.04.2015, 00:34 4
Вот Вам небольшой пример кроссбраузерного трансформируемого макета... index.rar Можно изменить размер блоков, адаптировать, задать резиновые размеры, сократить число селекторов, их свойств, короче оптимизировать под свои нужды... Надеюсь суть я уловил...

Не по теме:

Сори, я бы ещё вчера выложил, но были дела...:)

0
1 / 1 / 1
Регистрация: 19.05.2013
Сообщений: 92
07.04.2015, 07:23  [ТС] 5
Ваш вариант для меня не подойдет так как у вас большая ширина и можно легко вместить два элемента у меня же это не позволяет сделать ширина и зеленый блок должен быть сверху блока с синим бордером.
0
07.04.2015, 07:23
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.04.2015, 07:23
Помогаю со студенческими работами здесь

Абсолютное позиционирование
Доброе утро, CSS начал использовать совсем недавно. База знаний - вроде неплохая, но не могу...

Абсолютное позиционирование
Устанавливаю значение position как absolute, но при изменении масштаба страницы форма поиска...

Абсолютное позиционирование и отступы
Возможно ли сделать, чтобы не происходило наложение (скриншот). Использую абсолютное...

Абсолютное позиционирование блоков
В html коде у меня есть 2 кнопки,они должны на равном расстоянии друг от друга и от краев Имеется...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru