red4pony
-
Posts
260 -
Joined
-
Last visited
-
Days Won
3
Content Type
Profiles
Forums
Calendar
Store
Everything posted by red4pony
-
Посмотрите на habrahabr.ru про кастомный скроллбар(на javascript)
-
Как вариант абсолютное позиционирование. А про inline-block есть хорошая книга на css-live.ru -Инлайновый контекст форматирования - Максим Усачёв, Илья стрельцын.
-
В другом стиле это в другом файле css? Почему нельзя это правило изменить?
-
Если позволите(прошу прощения за форматирование кода): HTML: <body> <header> <ul class="nav"> <li><a href="#"></a><!--нет закрывающего li чтобы не было word-spacing--> <li><a href="#"></a> <li><a href="#"></a> <li><a href="#"></a></li> </ul> <div class="logo"> <h1>trb.by</h1> <div class="phones"> <span class="phones-number"></span> <span class="phones-number"></span> </div> </div> <ul class="menu"> <li><a href="#"></a> <li><a href="#"></a> <li><a href="#"></a> <li><a href="#"></a></li> </ul> </header> <article> <h2 class="title"></h2> <div class="welcome"></div> <div class="wrap-news"> <h3></h3> <div class="news"> <div class="poster"><img src="" alt=""></div> <p></p> </div> </div> </article> <footer></footer> </body> CSS: /*Header*/ .nav{ text-align: right; } .nav-item{ display: inline-block;/*навигация станет горизонтальной*/ } .nav-item>a{ background: <gradient>; display: block; } .logo{ background: url(corner+car.jpg) #fff; } .logo>h1{ background: url(trb_by.png) no-repeat; display: inline-block; text-indent: 99999em; } .phones{ display: inline-block; } .menu>li{ display: inline-block;/*меню станет горизонтальным*/ } /*———Article—--*/ .poster{ display: inline-block; } .wrap>p{ display: inline-block; } 1)Используйте градиет(для навигации например) 2) не задавайте размеры жестко: ширина блоков в процентах, вертикальные margin/padding в em, горизонтальные margin/padding в процентах(будте осторожны когда будете высчитывать процентное соотношение), высоту не задавайте явно - регулируйте содержимым и padding'ом (кроме полосы с логотипом, тут необходимо указать), размер шрифта в em. 3) float не для того нужен. Используйте display:inlin-block (хорошая книга - Инлайновый контекст форматирования - Максим Усачёв, Илья стрельцын ) 4) Используйте как можно меньше изображений (заменяйте на border-radius, gradient)
-
Нельзя сделать так: .wrapper{ background: url(bird.png) left 20% no-repeat #000; /*спозиционировать птичку где вам нужно*/ } ?
-
Посмотрите это: http://jsfiddle.net/yzE3q/1/. Для смены высоты topmenu достаточно увеличить padding-top.
-
Возможно поздно. Попрубуйте такую конструкцию: html - файл: <div class="conatainer"> <div class="sidebar"> </div> <div class="main_content"> </div> <div class="map"> </div> </div> CSS: sidebar, main_content, map { display:inline-block; width:30%; /*остальные разделите на margin/padding*/ } Схема -
-
Вложить тег <img> в <a>, а ссылку (<a>) пренаправить на страницу где ваше изображение (<img>) выровняете по центру. В CSS файле пропишите следующее: img{display:block; width:"ширина вашего изображения"; height:"высота вашего изображения"; margin: 0 auto;}
-
Проблема с вертикальным отступом текстового блока
red4pony replied to red4pony's question in HTML Coding
Как вариант: выделять в Photoshop'e текст(я так понял он его выделяет именно по всей высоте кегля) и ставить направляющую над/под верхней/нижней частью выделения. Полезная книга по этой теме "Инлайновый контекст форматирования" - Максим Усачёв и Илья Стрельцын. -
Проблема с вертикальным отступом текстового блока
red4pony replied to red4pony's question in HTML Coding
Ясно. Спасибо. -
Проблема с вертикальным отступом текстового блока
red4pony replied to red4pony's question in HTML Coding
Спасибо. Посмотрел этот вариант. Не всегда наверно удобно размеры в пикселях. Просто хочется разобраться, должна же быть какая-то закономерность в этом размере. Тогда сопутствующие вопрос, насколько важна верстка пиксель в пиксель? -
Здравствуйте. Я начал изучать HTML/CSS с верстки по PSD-макетам. И столкнулся со следующей проблемой: допустим у меня есть текст, который расположен ниже предыдущего объекта на некотором расстоянии, я не пойму как мне измерить этот отступ. Кегль равет 12pt (как удалось мне узнать он включает заплечики и высоту самой буквы), я измеряю расстояние (делаю это в Photoshop - 72dpi) в пикселях, от нижней части объекта до верхней части заглавной буквы не учитывая заплечико(потому что я не знаю чему оно равно). Вопрос в следующем, если какая то пропорция для размера шрифта и размера заплечика или как поступать с этим отступом?
-
Вы были правы.Внимательность меня подвела. Файл css был расположен в отдельной подпапке. Но я пробовал путь до изображения указывать от диска D:\ результата не было. Пошел качать джентельменский набор. Спасибо
-
Здравствуйте. CSS правило: background: url(images/header_bg.png) repeat-x left top; Прописано во внешнем css-файле - не работает. Переношу в <head> - работает. Для проверки делал следующее: Добавлял во внешний файл в свойство background цвет фона - работает: background: #666; К самому элементу обращался через [id=header] и [class=header] - ни один вариант не работает Загружал файл header_bg.png на радикал и вставлял в значения url() - работает Проблема в правильности написания пути до изображения видимо. Перенес изображение выше, назвал проще, заключил в кавычки одинарные/двойные и без них т.е. url("h.png").Также копировал название файла. - не работает Менял физическую ширину изображения с 1px до 19px. - не работает Пробовал в формате jpg. - не работает Пробовал другое изображение.-не работает Пробовал через: background-image: url(images/header_bg.png); background-repeat: repeat-x; - не работает Браузеры: Chrome 26.0.1410.43 m Firefox 19.0.2, IE 8.0.7601.17514 64-bit Edition Подскажите пожалуйста в чем ошибка?
