Обсуждение, ответ -"Создание одноколоночного макета...&

[OldFornit]

В этой теме обсуждаем варианты решения, вопросы, и читаем ответ на практическое задание [url=http://dreamweaver.net.ru/forum/viewtopic.php?p=4813#4813]"Создание одноколоночного макета"[/url]

[Samuray]

Я начал верстку, но код на мой взгляд не слишком оптимальный, его можно переделать?

[OldFornit]

Лучше не стоит. Код рассчитан сразу же и на второе задание.
Но попробуйте рассказать, что именно Вас не устраивает.

[Samuray]

Ну самое главное - это расположение слоеев относительно друг друга. На мой взгляд логичней было расположить их друг за другом. � еще зачем надо было создавать список в навигации, если слова надо рсположить в строчку? В принципе это все преодолимо, но сложней и код будет больше.

[OldFornit]

[OldFornit]

Дамы и господа, как идет (если конечно идет) выполнение задания?
Какие вопросы?
Есть ли уже варианты решения?

[OldFornit]

ответ на задание -
<style type="text/css">
/*<![CDATA[*/
body,h1,h2,p,a,ul,li,div{ /*обнуляем все отступы для всех элементов, используемых*/
margin: 0px; /* в данном файле. Причина - у каждого браузера эти значения*/
padding: 0px; /*по умолчанию свои*/
}

body{ /*задаем цвет и бэграунд*/
background-color:#aaf;
color:#000;
}
div{
position:relative; /*для дивов выбираем позиционирование relative*/
border-width:0px; /* обнуляем границы*/
border-style:none; /*выбираем стиль границы - никакой*/
}
div#box{ /*слой - главный контейнер*/
width:760px; /*задаем ему ширину*/
text-align:left; /* */
margin:0 auto; /*вот это хитрая строчка указывает следующий margin - сверху и*/
/*снизу - 0, слева и справа и слева - автомат. То есть*/
/*выравниваем*/
/*бокс по центру*/
}
div#top{ /*заголовок*/
height:50px; /*высота его*/
clear:both; /*на всякий случай запрещаем размещеине плавающих элементов*/
/* справа*/
/* и слева*/
background-color:#0f0; /*задаем цвет*/
text-align:center; /*указываем всем элементам внутри этого дива выравниватся по*/
/*горизонтали по центру*/
}
div#top p,h1{ /*группировка - задание общих свойств*/
background-color:transparent; /*просто указываем прозрачный бэграунд для абзацев внутри*/
/*#top и заголовку первого уровня*/
}
h1{
font-size:12pt; /*задаем размер шрифта*/
}
div#main{ /*блок с основным текстом*/
padding:1em; /*задаем отступ изнутри*/
background-color:#5A5EA6;
}
div#main div{ /* слой, который находится внутри слоя с основной текстовкой*/
background-color: #00FF33;
}

div#menu{ /*слой с меню*/
height:11pt;
font-size:10pt;
background-color:#0f0; /*задаем верхнюю границу */
border-top-width:1px; /* чисто для визуальной красоты*/
border-top-style:solid;
}
div#menu ul{ /* список с навигацией */
list-style-type:none; /* убираем маркер списка*/
list-style-position:inside; /*но задаем его позиционирование - иначе проблемы с отступами */
margin-left:10px; /*отступ слева - просто чтобы был промежуток между с ним с стенкой */
}
div#menu ul li { /*непосредственно элементы списка */
float:left; /*задаем обтекание слева - чтобы элементы выстраивались в ряд */
width:70px; /* по умолчанию элемент занимает все свободное место*/
/* поэтому ограничиваем его ширину*/
}
div#footer{ /*футер - он же подвал */
background-color:#FFFF00;
}
div#footer p{ /* абзац, находящийся внутри подвала*/
background-color:transparent;
}
a.active{ /* псевдокласс активной ссылки*/
background-color:#5A5EA6;
color:#58FF42;
text-decoration:none; /* рубим подчеркивание */
}
/* теперь немного расшифровки. �спользование элементов вроде
div#footer p{}
div#menu ul li{} и подобных - это использование так называемого наслодования.
То есть - div#footer p{} - применение стилевки строго к элементам p, находящимся только внутри слоя с id="footer"
*/
/*]]>*/
</style>
Естествнно, данное задание не претендует на истину в последней инстанции ))

[Malcolm]

[code:1:3115d4fdb9]
<style type="text/css">

body { background-color:lightblue;}

body, div, h1, p, ul, li { margin:0px; padding: 0px;}

#box { width:70%; margin:0 auto 0 auto;}

#top { height:3em; background-color:lightgreen; border-bottom: 1px solid black;}
#top h1 { font-size:12pt; text-align:center;}

#menu { height:1em; background-color:lightgreen;}
#menu ul { list-style-type:none; margin-left:1em;}
#menu ul li { float:left; width:70px; color:white; font-size: small;}

#main { padding:1em; background-color:blue;}
#main div { background-color:white;}
#footer { background-color:yellow; }

.active { background-color:blue; color:white; text-decoration:none;}

</style>
[/code:1:3115d4fdb9]

Почти получилось

[OldFornit]

вот и молодец. Скоро тогда второе задание выложу )

[KOT!K]

Эх... меня не дождались... я тока сегодня зашла.... давайте времени побольше на задание пжжжалуста

[OldFornit]

так ответ я, собственно говоря, дал уже достаточно давно.

[KOT!K]

[OldFornit]

если не усну - через полчаса будет очередное задание. Вот только думаю, куда бы скриншотик выложить...

[admin]

OldFornit, Присылай на е-майл - выложу

[OldFornit]

прошу прощения. Вчера тупо отрубился.