![](https://htmlforum.dev/uploads/set_resources_18/84c1e40ea0e759e3f1505eb1788ddf3c_pattern.png)
nikki4
-
Posts
151 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by nikki4
-
-
Вот такой получился сайт.
Кошерно конечно.
Особенно мужик, настойчиво заливающий ванную акрилом под Шопена - завораживает )
Да уж, действительно завораживает
Кстати это Бетховен "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;
но вот как сделать жесткое сглаживание и псевдополужирность?
Или подобное лучше в виде картинок оставить?
-
В общем оказалось достаточно было просто изменить ширину макета
-
#footer совсем плохо оформляется. Просто ужасно. Не нужно его из потока выводить, пусть просто следует за основной страницей.
ну и... "pososka" - позабавило, да
.
переименовал опечатку...
а что с футером не понял..
вот его перенес за страницу. но он теперь плавает...
ну а про размеры это да потом оптимизирую..
просто пока в джипеге дали макет 1280 шириной. вот и наброски начал делать с таким размером
-
Доброго времени суток.
Верстаю макет сайта. Сделал заготовку
Задачка в том, что там есть ненужная вертикальная полоса прокрутки. Как её лучше убрать?
Спасибо!
пс: пробовал при помощи float:left к нижнему 2 и 3 блокам
прокрутка пропадает все как надо, но при изменении масштаба страницы блоки начинают плавать куда-то вниз
возможно в других браузерах и с другим разрешением экрана по другому выглядит...
но тут на ноуте в файрфоксе выглядит так
пс: на всякий случай ссылку и картинку удалил..
вопрос решен - надо было размер страницы в ширину вместо 1280 поставить хотябы 900
-
-
внизу в футере там есть счетчик статистики,
при изменении масштаба страницы он "плывет"
как сделать, чтоб он был статичным и распологался к примеру справа в футере?
пс: разобрался.. надо было вложить блок в футер, а не отдельно
-
спасибо.. разобрался.
просто первый опыт в верстке..
Как сделать условное применение top в зависимости от высоты?
in HTML Coding
Posted · Edited by nikki4
Слева есть блок lsb со свойством top:50%, для того, чтобы на страницах с большим объемом текста он распологался в середине.
Однако не все страницы большие, есть и маленькие и на маленьких блок уезжает за контент
http://codepen.io/anon/pen/YXNKMR
Как сделать, чтобы если страница большая, то топ:50%, а если маленькая, то например топ: 100px.
Вижу вариант - сделать запрос к БД и присвоить класс странице...
но может есть вариант через css каким-нибудь свойством о котором не знаю?
что-то типа top:50%-600px (высота блока)
ps: задачу решил топ:30%, а для контента мин-хейт.
конечно это другой способ, но как альтерантива подойдет.
хотя конечно интересно уже так на будущее знать как такое сделать с условным процентом