nikki4

Слева есть блок lsb со свойством top:50%, для того, чтобы на страницах с большим объемом текста он распологался в середине. Однако не все страницы большие, есть и маленькие и на маленьких блок уезжает за контент http://codepen.io/anon/pen/YXNKMR Как сделать, чтобы если страница большая, то топ:50%, а если маленькая, то например топ: 100px. Вижу вариант - сделать запрос к БД и присвоить класс странице... но может есть вариант через css каким-нибудь свойством о котором не знаю? что-то типа top:50%-600px (высота блока) ps: задачу решил топ:30%, а для контента мин-хейт. конечно это другой способ, но как альтерантива подойдет. хотя конечно интересно уже так на будущее знать как такое сделать с условным процентом

Кошерно конечно. Особенно мужик, настойчиво заливающий ванную акрилом под Шопена - завораживает ) Да уж, действительно завораживает Кстати это Бетховен "Fur Elise" пс: в целом по сайту бегло: дизайн надо конечно доделывать и побольше ссылочек, тут картинки одни. еще добавить адрес где находятся улица и т.п.. короче много чего... а про дивы, я далеко не эксперт в верстке, сам тут постоянно спрашиваю.. насколько слышал таблицы это прошлый век, сейчас html5 в перспективе, однако он еще не всеми браузерами кjрректно воспринимается. Потому надежнее пока делать дивами и учить html5 А на оптимизацию html5 или дивы поисковику пофиг насколько я знаю. Вот мобильная - да важно.

Здравствуйте. Есть страницы с очень длинным текстом. В результате реклама совсем не видна почти. Плавающие блоки запрещены адсенсом. Потому думаю следует разместить левый блок рекламы (lsb) посередине страницы. Т.е. высота страницы 1000px, значит блок разместить на 500 px и так в зависимости от размера контента. пробовал писать всякие top:50%, margin-top:50% но как-то работает все не корректно... Сайт имеет следующую структуру <div id="wrapper"><div id="header"></div><div id="menu"></div><div id="lsb"></div><div id="content"></div><div id="footer"></div></div>#wrapper { margin: 0 auto; width: 500px; background:blue;}#header { background: yellow; height: 50px; width: 400px; margin-left:100px;}#menu { background: green; height: 30px; margin-left:100px; padding: 0; width: 400px;}#lsb { float: left; position: relative; background:black; width:100px; height:100px;}#content { background: pink; margin-left: auto; width: 400px; height:400px;}#footer { background: gray; float: left; height: 40px; margin-left: 100px; width: 400px;}Онлайн редактирование http://codepen.io/anon/pen/YXNKMR

есть 2 блока. нужно, чтобы items-row по разному в них отображался <div class="blog"> <div class="items-row"></div></div>как это сделать в css? вопрос решил, догадался... забыл просто как это делается .blog .items-row .item

Нашел способ решения. Надо сузить заголовки th, а именно последний. word-break: break-all;+ там была картинка, там просто отстцпы надо было убрать + подумал и можно переименовать было некоторые заголовки, а то и вообще удалить последний столбец

выше же выложил пример, что есть. а потом заготовку на дивах, в котором надо поправить стили, чтоб было как выше. А вообще в итоге надо вот такое:

Делаю адаптивный дизайн. Запутался, что с таблицами делать. Вот например дано: <style type="text/css">.tg td{border-style:solid;}.tg th{border-style:solid;}</style><table class="tg"><tr> <td rowspan="2" >Ячейка 1</td> <td nowrap >Ячейка 2</td> <td>Ячейка 3</td> <td rowspan="2">Ячейка 4</td></tr> <tr> <td colspan="2">Ячейка 5</td> </tr> </table> Погуглил, предлагают делать на основе дивов. заменил на дивы <style type="text/css">.mytable {width:500px; border:1px solid black;}.mytable td{border:1px solid black;}.tr {border:1px solid black; }.td {border:1px solid black;}.tdrs {border:1px solid black;}.tdcs {border:1px solid black;}</style><div class="mytable"> <div class="tr"> <div class="tdrs">Ячейка 1</div> <div class="td">Ячейка 2</div> <div class="td">Ячейка 3</div> <div class="tdrs">Ячейка 4</div></div><div class="tr"> <div class="tdcs">Ячейка 5</div></div> </div>Вопрос - как теперь сделать таблицу в которых ячейки имеют соответсвующий colspan и rowspan. ps: таблица состоит из нескольких таких блоков указанных выше.

а понял, я забыл добавить кое что... вопрос отменяется

Спасибо. Заработало. Но обнаружил, что последующий общий код перекрывает код для мобильного. Поставил для каждого свойства !important где для мобильного, все ок. Но правильно ли я делаю, может это по другому как-то делается?

а вообще не надо, при таком сильном увеличении, как раз этот блок всеравно убираю а если не сильно увеличивать, то нормально все, так что уже вопрос не актуален При увеличении масштаба, левый сайдбар гугла наезжает на контент html <div id="wrapper"><div id="content">контент</div><div id="left">адсенс</div></div>css #left { float: left; height: 600px; width: 20%; border: 1px solid black;}#content { float: right; background: green; border: 1px solid black; margin-left: auto; min-height: 300px; width: 78%;}#wrapper { margin-left: auto; margin-right: auto; max-width: 500px;}Можно ли как-то сделать, чтоб фиксированно на месте стояло? раньше был статичный макет, а теперь вот % и плывет..

Задача: на экранах с шириной до 480px убрать сайдбары, после чего заполнить их место контентом. Что сделал: в общем css файле в самом верху прописал: @media=only screen and (max-device-width:480px) {#sidebar1,#sidebar2 {display:none;}#wrapper {max-width:480px;}#header, #menu, #content, #footer {width:100%;}}/* далее идет основной css для всех */Тестирую в файрфоксе инструментами для разработчика. Ничего не меняется. Вопрос: что сделать, чтобы заработало?

Спасибо. Сейчас попробую с блоками. А по поводу макета, вот: <p><a style="" class="thumbnail" href="" title="" target="_blank"><img style="float: left;" title="" src=".jpg" alt="" align="left" width="300" height="240"></a></p><p>Описание рецепта</p><br><br><br><br><br><br><br><br><br><br><p>Рецепт</p>ну и задача, удалить brbrbrbr, чтобы рецепт был под описанием (картинкой) ps: вариант с блоком сработал, заключил туда картинку+описание и флоат: лефт

Слева фотка блюда, справа текст с описанием рецепта под фоткой надо сам рецепт пошаговый. ранее я делал отступы просто br br br... или <p></p><p></p><p></p> сейчас переделываю под адаптивный вариант.. надо как-то это поправить. <p>картинка</p><p>Введение</p><p> </p><p> </p><p> </p><p> </p><p>Рецепт</p>Что прописать, чтобы было такого вида результат: <p>картинка</p><p>Введение</p><p>Рецепт</pКак это делается? пока что только как вариант присвоить первому/последнему абзацу класс и сделать отступ. Но картинки в высоту разных размеров... А если просто убрать <p> </p> будет <p>картинка</p><p>Введение</p> <p>Рецепт</p<p>поехавшее продолжение рецепта</p

Для гугла и заодно людей с маленькими мобильными надо сделать адаптивную верстку. Почитал, что надо пользоваться media-query, например: @media only screen and (max-device-width:480px), only screen and (-webkit-min-device-pixel-ratio: 2)и так под разные устройства чтоб подгружались свои стили Однако столкнулся с тем, что когда я делал статичный макет - все отступы, линии, шрифты, все прописал в px под экраны от 800px чтобы удобно. Правильно ли я понимаю, что надо теперь все перевести в проценты, чтоб все было относительно? чтобы не копировать целиком css файлы, а потом опять по пиксельно замерять для каждого устройстваЮ а только 1 раз изменить в % , а потом уже менять только ширину основного макета? Или как правильно это делается? я просто знаю только самое основное, и как бы не вышло, что сделал бы криво или не оптимально.

Здравствуйте. С такой вот задачкой столкнулся - как сделать, чтобы сайдбар был по центру контента? Дело в том, что на сайте есть очень длинные тексты. Вот надо чтоб в центре была реклама в сайдбаре например. Структура сайта <div id="wrapper"> <div id="header"></div> <div id="sidebar"></div> <div id="content"></div></div>стиль сайдбара #sidebar { background:blue; width:160px; height:600px; float: left; left: -50px; position: relative; top: 45%;}если писать в файрбаге top:xx%; то нормально блок уезжает куда надо. но когда в css файл сайта это пишу, то ничего не происходит и он как распологался сверху, так и остается.. в чем дело, и как его сделать плывущим, что если текст длинный, то пускай будет в середине?

Здравствуйте! Практикуюсь все в верстке и создании сайта для знакомого В общем вроде бы более менее готово. Отправил на проверку... В результате сказали, что 1) слишком мелко все (разрешение экрана 1980х1080) и трудно читать. Просят картинку в центре побольше Я сделал ширину под 1000px чтоб нормально отображалось с экранов с разрешением 1024*768. У меня дома у самого 1980*1080 23". Но Так как у меня зрение не оч, то стоит увеличение масштаба по умолчанию на любой странице. Потому выглядит все ОК Вот потому не знаю как тут быть... что посоветуете? Можно ли как-то может сделать копию шаблона но под большой монитор и тогда бы автоматом выбирался именно он? 2) в интернет экслорере 8 версии блок центральный почему-то поплыл... что в моей верстке не так, что блок так расположен криво в центре в 8 эксплорере? 3) почему в экслорере меню в рамке?

Вот нормально все в футере ссылки удалил... но именно на этой странице он поднимается выше (а надо чтоб граница была нормально а не висела так.,) логика подсказывает что это как-то связанно с тем, что на этой странице нет картинок в 1 и 3 блоке верхнего футера... но что делать? как исправить кроме как присвоить этой странице дополнительный стиль и подвинуть (но мне кажется это не совсем правильынй метод и я тут что-то криво сделал) Спасибо! буду знать. Правда пока по-быстрому выкрутился создав дублирующий блок с другим классом

Все практикуюсь в верстке макета. Возник вопрос. Почему при наполнении контента подвал не опускается вниз? ну и заодно сразу следующий - как сделать чтобы опустился? а то будут например всякие картинки и т.п.. чтоб page-item растягивался и подвал опускался Вот ссылка

В макете фотошоповском текст следующего вида: Arial Narrow 14px жесткое сглаживание псевдополужирный узкий ариал почему-то не работает. погуглил и более менее похожее нашел можно сделать следующим образом font-family:'Arial Narrow', Arial, sans-serif; font-stretch: condensed; но вот как сделать жесткое сглаживание и псевдополужирность? Или подобное лучше в виде картинок оставить?

В общем оказалось достаточно было просто изменить ширину макета

переименовал опечатку... а что с футером не понял.. вот его перенес за страницу. но он теперь плавает... ну а про размеры это да потом оптимизирую.. просто пока в джипеге дали макет 1280 шириной. вот и наброски начал делать с таким размером

Доброго времени суток. Верстаю макет сайта. Сделал заготовку Задачка в том, что там есть ненужная вертикальная полоса прокрутки. Как её лучше убрать? Спасибо! пс: пробовал при помощи float:left к нижнему 2 и 3 блокам прокрутка пропадает все как надо, но при изменении масштаба страницы блоки начинают плавать куда-то вниз возможно в других браузерах и с другим разрешением экрана по другому выглядит... но тут на ноуте в файрфоксе выглядит так пс: на всякий случай ссылку и картинку удалил.. вопрос решен - надо было размер страницы в ширину вместо 1280 поставить хотябы 900

Здравствуйте! Столкнулся вот с такой задачкой... Как удлинить верхнюю серую границу правого блока? Чтобы из правого блока переходило на шапку кусочек? В голову приходит только создание дополнительных блоков с нижней границей, но может есть какое-то решение попроще - через свойства?

внизу в футере там есть счетчик статистики, при изменении масштаба страницы он "плывет" как сделать, чтоб он был статичным и распологался к примеру справа в футере? пс: разобрался.. надо было вложить блок в футер, а не отдельно

спасибо.. разобрался. просто первый опыт в верстке..