Кнопки в стиле сайта YouTube » Скрипт.я1.ру
Кнопки в стиле сайта YouTube Последняя вариация дизайна сайта YouTube имеет интересный вид кнопок (большей частью они расположены в нижнем колонтитуле), которые в обычном состоянии имеют еле различимую рамочку, но при наведении курсора мыши на них как бы "всплывают", побуждая посетителя нажать их. Такой дизайн кнопок очень выразителен и отлично работает. 1) Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. 2) Посетитель все равно получает призыв нажать их, когда становится необходимо. 3) Они выражают другой функционал, в отличие от ссылок, расположенных рядом (нажатие на них не приводит к переходу на другую страницу). Такие кнопки открывают выпадающие панели для выбора установок.. Разметка для кнопок вполне обычная: Кнопка #1 А стили нужно установить для всех трех состояний: . button { border : 1px solid #DDD; border - radius : 3px ; text - shadow : 0 1px 1px white ; - webkit - box - shadow : 0 1px 1px #fff;
Free Map Tools
Резиновая верстка по высоте DIV - Блог Кировского строителя Интернет
Многие неопытные веб-мастера сталкиваются с проблемой, когда верстают резиновый макет. Как правило, если макет тянется, то тянется он и по высоте, но тут возникает трудность. Трудность заключается в том, чтобы «прилепить» подвал (footer) внизу макета. С табличной версткой не у кого не возникает проблем, а вот с модной дивной люди ломают голову. Итак, что мы имеем. Макет, состоящий из двух основных частей, область контента и подвал. Задача ясна, начинаем верстать. Первая строка объявляет браузеру, какой спецификации придерживаться при формировании документа. Четвертая в принципе не нужна, она указывает браузеру Internet Explorer 8 отображать содержимое документа как в 7 версии, практика показывает некие отклонения 8 от 7 при более масштабной верстке. Пятая объявляет браузеру выбранную нами кодировку, в данном случае используем UTF-8. Девятая строка подключает файл с нашими стилями. Двенадцатая и четырнадцатая начало и конец нашей области контента. Пятнадцатая область подвала.
Lesson: Object-Oriented Programming Concepts (The Java™ Tutorials > Learning the Java Language)
If you've never used an object-oriented programming language before, you'll need to learn a few basic concepts before you can begin writing any code. This lesson will introduce you to objects, classes, inheritance, interfaces, and packages. Each discussion focuses on how these concepts relate to the real world, while simultaneously providing an introduction to the syntax of the Java programming language. What Is an Object? An object is a software bundle of related state and behavior. What Is a Class? A class is a blueprint or prototype from which objects are created. What Is Inheritance? Inheritance provides a powerful and natural mechanism for organizing and structuring your software. What Is an Interface? An interface is a contract between a class and the outside world. What Is a Package? A package is a namespace for organizing classes and interfaces in a logical manner. Questions and Exercises: Object-Oriented Programming Concepts
Уроки CSS
Выучить таблицы стилей css не так уж сложно, ведь их не так много, как тегов html или функций php. К тому же и учить понадобится не все. Главное - вы должны понять, как связать html и css. Для этого пройдите наши уроки css. ! Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт. Код кнопки: Скачайте одним архивом видеоуроки по верстке сайта! Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Резиновая верстка - Блочный подход - Верстка на div-ах - Прижатие футера к нижней части окна браузера
Уважаемый читатель, устраивайтесь поудобнее и я познакомлю вас с принципами резиновой блочной верстки сайта. Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока <div id=»wrapper»> на процентную. Таким образом, ширина сверстанного сайта будет изменяться в зависимости от размера окна браузера. В видеоуроке я установил ширину блока <div id=»wrapper»> в 100% от ширины окна браузера. Можно задавать и меньшее количество процентов, тогда сайт будет занимать лишь часть окна браузера. Без определенных стилей выравнивания блока сайт съедит в левую часть окна. Первое, что приходит в голову — это указать у элемента body свойство text-align:center. Правильным будет указать равные левый и правый внешние отступы для элемента <div id=»wrapper»> и значение их — auto. CSS-инструкция для блока wrapper будет иметь такой вид: Или в сокращенной форме: В этом случае вы будите четко видеть границы верстаемого блока. Видео с сервиса RuTube:
Резиновая по ширине и высоте верстка (заготовка) « Блог о верстке
В современной практике верстки веб страниц используется два варианта. Резиновая верстка и фиксированная. Вариант резиновой верстки мы с вами и рассмотрим поподробнее. Нашей целью будет создать вот такой макет Начать стоит со стуктуры макета. <div class="wrap"><div class="header"> Шапка </div><div class="sidebar-left"> Левая колонка </div><div class="sidebar-right"> Правая колонка </div><div class="content"> Центральная колонка </div><div class="clear"></div><div class="empty"></div></div><div class="footer"> Футер </div> В файле стилей зададим странице и основному контейнеру высоту в 100% Теперь зададим слою empty высоту 100 пикселей (равна высоте подвала). Все вместе это дает нам прижатый к низу футер, вне зависимости от высоты страницы (если конечно контента не больше) Далее зададим остальные стили. Результат работы можно посмотреть по ссылке: тыц
«Резиновая вёрстка»: используем отрицательные поля - Вёрстка - Webmascon
Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с "шапкой" и "подвалом", причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки. Постановка задачи Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с "шапкой" и "подвалом". Область основного содержимого (контента) будет слева, вторая колонка - справа. Зная, как работают "плавающие" блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Исходный код Давайте-ка взглянем на код двухколоночной страницы с "шапкой" и "подвалом", с которым мы будем работать:
