Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

float и position проблема

Обсуждение темы float и position проблема в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте есть бокс углы которого скругленные, а в нем картинка которая должна залазить на правую часть рамки бокс. вот код, но почему-то рамка ...


Закрытая тема
 
Опции темы
Старый 18.09.2009, 14:17   #1
Здравствуйте
есть бокс углы которого скругленные, а в нем картинка которая должна залазить на правую часть рамки бокс. вот код, но почему-то рамка бокса плывет
Код:
<style>
#boxes_red_right{margin: 7px 25px 7px 10px}
#boxes_red_right .bor1, #boxes_red_right .bor2, #boxes_red_right .bor3, #boxes_red_right .bor4{font-size:1px; overflow:hidden; display:block;}
#boxes_red_right .bor1 {height:1px; background:#fd6802; margin:0 5px;}
#boxes_red_right .bor2 {height:1px; background:#ffffff; border-right:2px solid #fd6802; border-left:2px solid #fd6802; margin:0 3px;}
#boxes_red_right .bor3 {height:1px; background:#ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802; margin:0 2px;}
#boxes_red_right .bor4 {height:2px; background:#ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802; margin:0 1px;}
#boxes_red_right .contentb {background: #ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802;}
#boxes_red_right .contentinner {margin-left: 0px; padding-top: 15px; padding-bottom: 15px;}
</style>
<div id="boxes_red_right">
<b class="bor1"></b><b class="bor2"></b><b class="bor3"></b><b class="bor4"></b>
   <div class="contentb">
       <div class="contentinner">
<div style="position:relative; left: 19px; top:15px; float:right;"><a href="#"><img src="{$tpl_path}img/allnewprod.gif" /></a>   </div>

<div class="clear"></div>
    </div>
   </div>
<b class="bor4"></b><b class="bor3"></b><b class="bor2"></b><b class="bor1"></b>
</div>
подскажите как решить проблему
 
Старый 18.09.2009, 14:17
Ссылки
Старый 18.09.2009, 15:16   #2
Код:
<div style="position: absolute; right: 40px; top:15px; float:right;"><a href="#"><img src="{$tpl_path}img/allnewprod.gif" /></a>   </div>
Вы так хотите?
 
Старый 18.09.2009, 17:35   #3
Цитата:
Сообщение от Nimans Посмотреть сообщение
Код:
<div style="position: absolute; right: 40px; top:15px; float:right;"><a href="#"><img src="{$tpl_path}img/allnewprod.gif" /></a>   </div>
Вы так хотите?
а никак относительно бокса нельзя сделать, потому что абсолютное позиционирование ставит картинку к правому краю страницы, а не бокса?
 
Старый 18.09.2009, 17:58   #4
Закинуть все в еще один контейнер.
 
Старый 18.09.2009, 18:46   #5
Цитата:
Сообщение от Nimans Посмотреть сообщение
Закинуть все в еще один контейнер.
что именно закинуть, и будет ли разница если поставить absolute
 
Старый 18.09.2009, 23:12   #6
Если вы хотите, чтоб top и left указывали позицию относительно контейнера, а не всего документа, то есть простой способ: пропишите контейнеру: position:relative

Добавлено через 32 секунды

PS. absolute и float одновременно... Форменная ересь

Последний раз редактировалось Асмодиан; 18.09.2009 в 23:12.. Причина: Добавлено сообщение
 
Старый 19.09.2009, 00:08   #7
Цитата:
Сообщение от Асмодиан Посмотреть сообщение
Если вы хотите, чтоб top и left указывали позицию относительно контейнера, а не всего документа, то есть простой способ: пропишите контейнеру: position:relative

Добавлено через 32 секунды

PS. absolute и float одновременно... Форменная ересь
position:relative и float тоже ересь но ширина блока в процентах и если за хардкодить в пикселях, то не будет соответствия, а так от края всегда было стабильное число пикселов
 
Старый 19.09.2009, 11:59   #8
ну эт просто остатки исходника
 
Старый 19.09.2009, 13:20   #9
life24x7, да, от float надо отказаться.
у контейнера relative, у самого элемента absolute
 
Старый 19.09.2009, 13:42   #10
Цитата:
Сообщение от Асмодиан Посмотреть сообщение
life24x7, да, от float надо отказаться.
у контейнера relative, у самого элемента absolute
вот поставил
Код:
<div style="position: relative;"><a href="#"><img src="allnewprod.gif" style="position: absolute; right:-19px; bottom:0px"/></a>   </div>
http://life24x7.com/a.htm но в ИЕ6 и ФФ все совсем по разному
 
Старый 19.09.2009, 13:42
Закрытая тема




Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с float в IE 6-7 Apologet HTML, CSS, JavaScript 1 21.03.2012 20:34
проблема с position: relative DENweb HTML, CSS, JavaScript 7 10.05.2008 19:32
Position: absolute + overflow: auto (проблема в IE и Opera) veejar HTML, CSS, JavaScript 1 10.09.2007 19:40
Проблема с CSS параметром float в div боксах dav HTML, CSS, JavaScript 1 18.12.2006 14:03
Проблема с position css ivan341 HTML, CSS, JavaScript 5 12.10.2005 16:22


Текущее время: 04:50. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум