JoseRodriguez
-
Posts
13 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by JoseRodriguez
-
сомневаюсь, что float решил бы данную проблему... если мне не изменяет память....расположив 2 блока с разной высотой на одной линии, то под блоком с меньшей высотой образуется отступ равен (высота большего блока - высота меньшего блока) в следствии чего последующие блоки расположенные под выше упомянутым блоком не будут плотно прилегать к нему.... вариант с таблицей интересный, собственно как и isotope.metafizzy.co будет, что погрызть вечерком спс за помощь)
-
здравствуйте недавно столкнулся с интересной проблемой и должен сказать без понятия как решить ее, без использования абсолютно позиционированных элементов или ужасной кучи блоков... имеем подобный макет: все разноцветные блоки - фотографии (к примеру) собственно интересно есть ли какие хитрости, которые могут помочь расположить фотографии как показано в макете?
-
Огромнейшее спасибо за советы, нашел решение своей проблемы Может кому пригодиться: CSS body, div {margin:0px;padding:0px;} body {background:#f5f5f5;height:100%;width:100%;} div.body {width:100%;} div.bg {position:absolute;width:inherit;z-index:5;top:0px;bottom:0px; background:url(/img/shadow_02.png) center bottom no-repeat;} div.bg div {position:absolute;top:0px;bottom:10px; #z-index:6;} div.bg div div {background:url(/img/city_01.png) left bottom no-repeat; right:0px; left:0px; bottom:0px;} div.bg div.left {background:url(/img/shadow_00.png) right bottom repeat-y;width:auto; left:0px; right:50%; margin:0px 500px 0px 0px;} div.bg div.center {background:#e4f3fa url(/img/city_00.png) center bottom no-repeat;width:1000px; left:50%; margin:0px 0px 0px -500px;} div.bg div.right {background:url(/img/shadow_01.png) left bottom repeat-y;width:auto; left:50%; right:0px; margin:0px 0px 0px 500px;} div.content {position:relative;width:1000px;z-index:10;margin:0 auto;} HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Полтавское агенство недвижимости - GreenHouse</title> <link rel="stylesheet" type="text/css" href="/css/main.css" /> </head> <body> <div class="body"> <div class="bg"> <div class="left"> </div> <div class="center"> </div> <div class="right"><div> </div></div> </div> <div class="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> </div> </body> </html>
-
http://kvartiry.pl.ua/new2.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Тест</title> <style type="text/css"> body, div {margin:0px;padding:0px;} body {background:#f5f5f5;height:100%;width:100%;} div.body {position:relative;width:100%;background:red;} div.bg {background:green;position:absolute;width:inherit;z-index:5;display:table;top:0px;bottom:0px;} div.content {position:relative;width:1000px;z-index:10;background:blue;margin:0 auto;} </style> </head> <body> <div class="body"> <div class="bg"> </div> <div class="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> </div> </body> </html> нашел в чем проблема... выходит если блоку задать display:table; и одновременно top:0px; bottom:0px; то в этом случае огненыйлис и ИЕ игнорируют отступ снизу...
-
хм, странно... возможно я настолько не везучий но при указании одновременно top и bottom адекватно ведет себя только опера, остальные браузеры напрочь отказываются реагировать на bottom
-
а разве при использовании селектора top не игнорируеться селектор bottom? если не ошибаюсь у вас же на сайте читал об этом Оо
-
использовать таблицу думаю стоит только из-за того, что ИЕ6/7 не реагирует на display или ошибаюсь?)
-
преложенный вами вариант интересен и должен признаться по нему изначально я и пошел, правда я обошелся без желтого блока и контент сайта разместил сразу в синем блоке... но меня интересовала возможность разделить графическую составляющую от наполнения, потому решил попробовать верстать так сказать "слоями")
-
меня интересует как растянуть блок с фоном (div.bg) по высоте родительского блока (div.body), который в свою очередь растягивается блоком с контентом(div.content)... иными словами как растянуть абсолютно позиционированный блок по высоте родителя
-
по-сути на сайте отображается все как нужно, если не брать во внимание тот момент, что блок с фоном (div.bg) не растягивается по высоте родителя или же блока с контенктом (div.center) схематически отобразить версту можно следующим образом:
-
относительно display: table в div.body проглядел( что касается блока с фоном, мне пришлось "реализовать" таблицу... поскольку при использовании просто блока не выходит выровнять центральный блок (div.bg div.center) по центру и добиться чтоб его обтекали два бока - left и right, которые в свою очередь должны равномерно расширятся на ширину экрана за минусом ширины центрального блока =/ п.с. возможно я чего не знаю, буду рад выслушать ваше мнение)
-
момент с высотой мне известен, но из-за отсутствия практики в использовании селектора position видимо ввел себя в заблуждение (а именно при использование top, left, bottom, right когда у родителя заданно position:relative)... исходя из этого возникает вопрос, как растянуть абсолютно позиционированный блок по высоте родителя, второй вариант задать блоку с фоном position:relative, а блоку с контентом absolute... в таком случае как заставить блоку с контентом растягивать родителя, использованием bottom?
-
здравствуйте не так давно начал верстать и столкнулся со следующей проблемой. имеется сайт - kvartiry.pl.ua есть блок с фоном (div.bg), а так же блок с контентом (div.content)… идея такова, что блок с фоном должен растягиваться на 100% по высоте родительского блока div.body который в свою очередь растягивается блоком с контентом (в зависимости от наполнения) собственно проблема заключается в следующем… добившись желаемого результата в опере и IE9 заметил, что firefox преподнес сюрприз… блок с фоном вместо того, что б растянуться по высоте родительского блока растягивается на 100% экрана… проблема, как я могу судить, заключается в свойстве селектора height в стиле div.bg… поскольку вместо того, что б растянуться по высоте родительского блока выше упомянутый блок растягивается по высоте экрана признаться честно уже и не знаю как решить эту проблему без отклонений от задуманной верстки (( заранее благодарен за ответ)