ГЛАВНАЯ     АРХИВ     НАПИСАТЬ АДМИНУ     ПОДПИСАТЬСЯ НА RSS     ВОЙТИ      

Поиск

Категории

Облако тегов

acer ado.net amd asp.net c sharp c# cms css exceptions google html ipad iphone it бизнес javascript jquery linq microsoft mysql net nokia nokia lumia samsung seo silverlight sql surface tsql windows 8 windows blue windows phone windows rt xna безопасность библиотека вопросы на собеседовании интересные проекты интернет интернет магазин исключения книга книги компьютерная безопасность компьютерные игры контролы курсы по программированию логированние исключений мобильные приложения монетизация сайтов наушники новости новости it новости microsoft новости интернет новости технологий ноутбук ноутбуки обработка исключений оптимизация острова периферия планшет планшеты поддержка сайтов поисковое продвижение программы продвижение продвижение сайта продвижение сайтов рабство разработка игр разработка сайтов раскрутка сайта рекламные технологии смартфон смартфоны собеседование создание сайтов средства разработки туризм фриланс хостинг яндекс
  << Предыдущий пост       Следующий пост >>  
От: 4aIIaeB
5. сентября 2011 13:29

Я не дизайнер. Но это не остановит меня от попытки, когда я выполняю дизайнерскую работу. Как-то помог коллеге с работой дизайнера, когда ему потребовалось сделать 3-х колоночный вывод с шапкой и подвалом. Одним из требований была автоматическая подстройка дизайна к контенту. Мы нашли приемы в наборе скачанных статей. Вот что было там:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>3 Column CSS Layout with Header and Footer</title>
<
style type='text/css'>
.header{
position: relative;
float: left;
width: 100%;
background-color: #356aa0
}
.container{
position: relative;
float: left;
width: 100%;
background-color: #cccccc
}
.left{
position: relative;
float: left;
width: 20%;
background-color: #a2b5cd
}
.center{
position: relative;
float: left;
left: 1%;
right:1%;
width: 58%;
background-color: #a2b5cd
}
.right{
position: relative;
float: right;
width: 20%;
background-color: #a2b5cd
}
.footer{
position: relative;
float: left;
width: 100%;
background-color: #356aa0
}
body {
padding: 0px;
margin: 2%;
background-color: #e7e7de
}
</style>
</
head>
<
body>
<
div class="header">
Header Text
</div>
<
div class="container">
<
div class="left">
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left

</div>
<
div class="center">
center
</div>
<
div class="right">
right
</div>
</
div>
<
div class="footer">
Footer Text
</div>
</
body>
</
html>



OUTPUT

image

Пожелания и предложения приветствуются !



Это перевод. Оригинал здесь.

Похожие записи


Курсы photoshop - Это как цель стать дизайнером
Цель данного курса - формирование у слушателей правильного видения профессии дизайнера, эффективное освоение базовых дисциплин, без знания которых невозможно профессионально и результативно заниматься дизайном, формирование навыков, необходимых для успешной работы, обучение приемам работы в графических редакторах Adobe photoshop и Adobe Photoshop. После прохождения...

Рэнд Фишкин - как сделать содержание сайта - вирусным
Нашел интересные видеоуроки, будут интересны всем разработчикам сайтов и SEO-шникам.

Как повысить тИЦ сайта самостоятельно
Тому, кто занимается созданием сайтов, конечно, известен термин тИЦ сайта. Для чего нужен этот показатель, и как повысить тИЦ сайта самостоятельно?   Что такое тИЦ? Тематический индекс цитирования  определяет авторитетность вашего ресурса. Величина тИЦ определяется объемом ссылок с иных сайтов, желательно также авторитетных, с высоким показателем тИ...

Добавить комментарий




biuquote
  • Комментарий
  • Предпросмотр
Loading


  Сохранить комментарий