Jump to content

mnstrsound

Newbie
  • Posts

    20
  • Joined

  • Last visited

Everything posted by mnstrsound

  1. Есть колонка процентной ширины, туда уложил картинку с max-width: 100%, Opera, Chrome отображают корректно, но вот IE не масштабирует картинку, делая ее реальных размеров. Как с этим бороться? table .item { width: 20%; padding-bottom: 10px; } table .item img { max-width: 100%; vertical-align: top; }
  2. Принцип тот же, спасибо)
  3. А для углов используешь метод звездочки с позиционированием фона?
  4. Надо решать вопросы кроссбраузерности, мое решение вплоть до 7 ie подходит. То бишь вполне часто такое можно встретить? Мне бы хотелось конечно более короткого кода и полной резины.
  5. box-shadow разве можно оформить с border-ом? Мое решение вроде не сильно плохое - по вертикали полностью резиновое, по горизонтали немного тянется. А план действий с псевдоклассами?
  6. Стоит такая проблема: То бишь блок с красиво оформленной прозрачной рамкой. Вот решение: HTML: <!doctype html> <html> <head> <title>Deluxe</title> <link rel="stylesheet" type="text/css" href="css/style2.css" /> </head> <body> <div class="border"> <span class="top tl"></span> <span class="top tr"></span> <span class="bottom bl"></span> <span class="bottom br"></span> <div class="out"> <div class="in"> <div class="content"> adsdasdasdasdasdasdasdasdasdasda<br> adsdasdasdasdasdasdasdasdasdasda<br> adsdasdasdasdasdasdasdasdasdasda<br> adsdasdasdasdasdasdasdasdasdasda<br> adsdasdasdasdasdasdasdasdasdasda<br> </div> </div> </div> </div> </body> </html> CSS: html{ background:url(../img/html_bg.gif) repeat-x; } .border{ position:relative; margin: 100px 100px; max-width:500px; min-width:300px; /*width:500px; border:1px solid #ddd;*/ overflow:hidden; } .top{ display: block; position:absolute; height:46px; top:0; background:url(../img/border-bg.png) no-repeat top left; } .tl{ width:100%; right:45px; } .tr{ right:0; width:45px; } .bottom{ display: block; position:absolute; height:46px; bottom:0; background:url(../img/border-bg.png) no-repeat bottom left; } .bl{ width:100%; right:45px; } .br{ right:0; width:45px; } .out{ background:url(../img/leftborder-bg.png) repeat-y; margin: 46px 0; } .in{ background:url(../img/rightborder-bg.png) repeat-y right; width:100%; } .content{ margin:0 23px; background:#010101; color:#fff; } Картинки: Искал решение в интернете - плохо искал. Сам написал. Посоветуйте решения покороче и попроще если существуют.
  7. Еще сюда же. Есть такой блок Мой вариант br ислючительно для наглядности моей проблемки) Нижние блоки надо уместить туда, где стоит br HTML { <div class="article"> <div class="article-top"> <h1>Стройматериалы</h1> <a href=""><img src="img/all-articles.png" alt="Все записи"/></a> </div> <div class="article-bottom"> <br /> <div class="leftSide"> <img src="img/article-img.jpg" alt="Особняк" /> <p class="article-link"> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a> </p> <p class="article-options"> <a href="">09.08.2010 14:59</a> <a href="">11 комментариев</a> <a href="">157 просмотров</a> </p> <p> Последние годы замечается рост урологических и онкологических заболеваний. Причины разнообразны. Среди них вода, которую мы ежедневно пьём. Лично я употребляю минеральную воду “Ресан” и рекомендую её своим пациентам против образования камней в почках и желчевыводящих путях </p> </div> <div class="rightSide"> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br /> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br /> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br /> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br /> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br /> <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br /> </div> </div> </div> CSS #content .article { width: 740px; float: left; } #content .article .article-top { width: 740px; border: 2px solid #d4d4d4; border-top-left-radius: 10px; border-top-right-radius: 10px; height: 47px; background-color:#eaeaea; } #content .article .article-top h1 { float: left; font-size: 18px; margin-left: 18px; font-weight: 500; color: #4e4e4e; } #content .article .article-top img { float: right; margin-top: 7px; margin-right: 7px; width: 109px; height: 31px; } #content .article .article-bottom { width: 740px; border: 2px solid #d4d4d4; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top: 0; background-color:#fff; } #content .article .article-bottom .leftSide { width: 380px; padding: 5px; border: 0; float: left; } #content .article .article-bottom .leftSide img { margin: 10px 0 0 10px; } #content .article .article-bottom .leftSide .article-link a { font-size: 14px; color: #508f09; text-decoration: underline; } #content .article .article-bottom .leftSide .article-link a:hover { text-decoration: none; } #content .article .article-bottom .leftSide .article-options a { font-size: 11px; color: #999999; } #content .article .article-bottom .leftSide .article-options a:hover { text-decoration: underline; } #content .article .article-bottom .rightSide { width: 340px; padding: 5px; border: 0; float: right; } #content .article .article-bottom .rightSide a { font-size: 14px; color: #508f09; text-decoration: underline; } #content .article .article-bottom .rightSide a:hover { /*font-size: 14px; color: #508f09;*/ text-decoration: none; }
  8. Можно при помощи таблицы: Элемент <ul> сделать display:table; с width:100%; и обязательно table-layout:fixed;. Пунктам <li> задать display:table-cell; и выровнять содержимое по центру. Контент внутри <li> можно поместить в блок (с display:block;) для удобства. Родителю <ul> задать ширину и выравнивание. Получим таблицу, растянутую по всей ширине, с автоматическим делением на равные по ширине колонки. Не катит. Рабочий код можете написать? Заранее благодарен
  9. Теперь еще один вопрос) Есть такой блок: И мой результат: Как выровнять блоки, чтобы они заняли все пространство между стрелками(автоматически, марджином не охота)? HTML: <a href=""><img id="arrow-right" src="img/arrow-right.png" alt="Следующее изображение" /></a> <a href=""><img id="arrow-left" src="img/arrow-left.png" alt="Следующее изображение" /></a> <ul> <li> <img src="img/project.jpg" alt="Наши проекты" /> <p><a href="">СТРОЕНИЕ</a></p> <p><span class="city">Город: Москва</span></p> <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p> </li> <li> <img src="img/project.jpg" alt="Наши проекты" /> <p><a href="">СТРОЕНИЕ</a></p> <p><span class="city">Город: Москва</span></p> <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p> </li> <li> <img src="img/project.jpg" alt="Наши проекты" /> <p><a href="">СТРОЕНИЕ</a></p> <p><span class="city">Город: Москва</span></p> <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p> </li> <li> <img src="img/project.jpg" alt="Наши проекты" /> <p><a href="">СТРОЕНИЕ</a></p> <p><span class="city">Город: Москва</span></p> <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p> </li> </ul> CSS: #arrow-right{ float:right; padding-top:40px; } #arrow-left{ float:left; padding-top:40px; } .our-projects ul{ width: 940px; display:block; } .our-projects li{ width: auto; height: auto; border: 0; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; } .our-projects li img{ float: none; } .our-projects li a{ display: block; font-weight: 800; padding-top: 5px; font-size: 11px; color: #09c; } .city { font-style:italic; } .price { font-weight:700; color: #1f1f1f; } .our-projects p{ line-height: 0.1; }
  10. Спасибо большое! Теперь бы еще посмотреть оптимальный код, который будет обладать еще и резиновостью )
  11. Помогло, а чтобы в зависимости от содержимого менялась ширина блока и высота, то надо делать через inline-block?
  12. Вот HTML кусок кода <div class="uslugi"> <div class="uslugi-item"> <div> <img class="item" src="img/proektirovanie.jpg" alt="Проектирование" /> </div> <div class="uslugi-item-desc"> <h1>ПРОЕКТИРОВАНИЕ</h1> Комплексная разработка </div> <div class="uslugi-item-uri"> <a href = "">ПОДРОБНЕЕ</a> </div> </div> <div class="uslugi-item"> <div> <img class="item" src="img/proizvodstvo.jpg" alt="Производство" /> </div> <div class="uslugi-item-desc"> <h1>ПРОИЗВОДСТВО</h1> Строительные работы </div> <div class="uslugi-item-uri"> <a href = "">ПОДРОБНЕЕ</a> </div> </div> </div> Вот КСС .uslugi{ margin-top: 20px; } .uslugi-item{ margin-right: 30px; } .item{ padding-right: 20px; float: left; } .uslugi-item-desc{ font-family: Tahoma, Geneva, sans-serif; font-size:10pt; color:#666 } .uslugi-item-desc h1{ font-family: Myriad-Pro-Cond; font-size: 12pt; font-weight: 300; } .uslugi-item-uri{ margin-top: 10px; } .uslugi-item-uri a{ font-family: Tahoma, Geneva, sans-serif; font-size:10pt; color: #0099cc; } Вот результат: Если добавить свойство float: left к классу uslugi-item, то результат становаится таким: Почему сбивается форматирование внутри блока?
  13. Выше него текст, как видно на изображении, если вдруг строчек будет больше одной, то, если задать отступ в пикселах сверху ссылки, то ссылка тоже съедет вниз. Я хочу использовать один класс div для всех трех блоков.
  14. читал я. знаю, что такое паддинг и марджин. Мне нужно узнать, каким образом привязать НИЗ ссылки к НИЗу изображения. Вот и все) я тут залез и display: block для изображения. Вы хоть с высоты своего опыта скажите, в верном направлении я двигаюсь? Мне интересен чистый, лаконичный код, без лишней воды.
  15. Я уже говорил вначале, что только начал. padding - bottom и margin-bottom были методом тыка. Могли бы дать дельный совет, примерный алгоритм действий, а не повышать ЧСВ.
  16. Слышали, добавлял к span атрибуты bottom: 0; padding-bottom: 0, margin-bottom: 0; - не помогло
  17. Можно поподробнее чуть. Вот мой код .top-uslugi{ font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; color: #a9a9a9; height: 64px; } .top-uslugi img{ float:left; border: 0px; width: 101px; height: 64px; } .top-uslugi h1{ font-family: Myriad-Pro-Cond; font-size: 12pt; font-weight: 300; } .top-uslugi span{ color: #0099cc; position:relative; display:block; } и HTML <div class="top-uslugi"> <img src="img/proektirovanie.jpg" alt="Проектирование" /> <h1>ПРОЕКТИРОВАНИЕ</h1> Комплексная разработка <span><a href = "">ПОДРОБНЕЕ</a></span> </div> и результат (для одного элемента) . Такой код мне не нравиться и надо прижать ссылку подробнее к низу изображения.
  18. Здравствуйте, начал учиться верстать. Скачал макет, там есть такой блок. Как лучше всего реализовать?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy