mnstrsound
-
Posts
20 -
Joined
-
Last visited
mnstrsound's Achievements
Explorer (1/14)
-3
Reputation
-
Масштабирумая картинка в колонке таблицы для IE8,9
mnstrsound replied to mnstrsound's question in HTML Coding
Ничего лишнего нет, только <!DOCTYPE html> -
Масштабирумая картинка в колонке таблицы для IE8,9
mnstrsound replied to mnstrsound's question in HTML Coding
Да стоит Доктайп нет атрибутов -
Есть колонка процентной ширины, туда уложил картинку с max-width: 100%, Opera, Chrome отображают корректно, но вот IE не масштабирует картинку, делая ее реальных размеров. Как с этим бороться? table .item { width: 20%; padding-bottom: 10px; } table .item img { max-width: 100%; vertical-align: top; }
-
Принцип тот же, спасибо)
-
А для углов используешь метод звездочки с позиционированием фона?
-
Надо решать вопросы кроссбраузерности, мое решение вплоть до 7 ie подходит. То бишь вполне часто такое можно встретить? Мне бы хотелось конечно более короткого кода и полной резины.
-
box-shadow разве можно оформить с border-ом? Мое решение вроде не сильно плохое - по вертикали полностью резиновое, по горизонтали немного тянется. А план действий с псевдоклассами?
-
Стоит такая проблема: То бишь блок с красиво оформленной прозрачной рамкой. Вот решение: 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; } Картинки: Искал решение в интернете - плохо искал. Сам написал. Посоветуйте решения покороче и попроще если существуют.
-
Еще сюда же. Есть такой блок Мой вариант 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; }
-
Можно при помощи таблицы: Элемент <ul> сделать display:table; с width:100%; и обязательно table-layout:fixed;. Пунктам <li> задать display:table-cell; и выровнять содержимое по центру. Контент внутри <li> можно поместить в блок (с display:block;) для удобства. Родителю <ul> задать ширину и выравнивание. Получим таблицу, растянутую по всей ширине, с автоматическим делением на равные по ширине колонки. Не катит. Рабочий код можете написать? Заранее благодарен
-
Теперь еще один вопрос) Есть такой блок: И мой результат: Как выровнять блоки, чтобы они заняли все пространство между стрелками(автоматически, марджином не охота)? 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; }
-
Спасибо большое! Теперь бы еще посмотреть оптимальный код, который будет обладать еще и резиновостью )
-
Помогло, а чтобы в зависимости от содержимого менялась ширина блока и высота, то надо делать через inline-block?
-
Вот 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, то результат становаится таким: Почему сбивается форматирование внутри блока?
-
Выше него текст, как видно на изображении, если вдруг строчек будет больше одной, то, если задать отступ в пикселах сверху ссылки, то ссылка тоже съедет вниз. Я хочу использовать один класс div для всех трех блоков.
