Rambler's Top100
, : |

! : http://dreamweaver.net.ru/new-forum/

| FAQ | | |

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

 
  ,         .     ,        .     Форум Macromedia Dreamweaver -> Верстка
 
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

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

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

Новичок


: 29

: 17.12.2005
: 22
: Новокузнецк

: 14, 2006 4:48 pm     :

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

Модератор


: 36

: 12.05.2005
: 846

: 15, 2006 7:47 am     :

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

Новичок


: 29

: 17.12.2005
: 22
: Новокузнецк

: 15, 2006 8:05 am     :

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

Модератор


: 36

: 12.05.2005
: 846

: 15, 2006 9:52 am     :

Samuray ():
Ну самое главное - это расположение слоеев относительно друг друга. На мой взгляд логичней было расположить их друг за другом.

Вот это не принимаю. Может, Вы так и сможете заставить это смотреться нормально, допустим, в Осле. но в правильных браузерах будет попа. Будет наоборот - слишком много стилевки.
Samuray ():
И еще зачем надо было создавать список в навигации, если слова надо рсположить в строчку? В принципе это все преодолимо, но сложней и код будет больше.

См. Выше - рассчет на второе задание. Которое готово, но не выложено. При таком коде можно коренным образом менять дизайн не изменяя исходного кода - только подключая другую таблицу стилей.
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 28, 2006 11:56 pm     :

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

Модератор


: 36

: 12.05.2005
: 846

: 01, 2006 7:02 pm     :

ответ на задание -
<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
Новичок

Новичок


: 40

: 04.07.2006
: 44

: 16, 2006 1:08 pm     :

[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]

Почти получилось Smile
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 16, 2006 5:54 pm     :

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

Знакомый


: 32

: 07.06.2006
: 88

: 17, 2006 9:52 pm     :

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

Модератор


: 36

: 12.05.2005
: 846

: 17, 2006 10:02 pm     :

так ответ я, собственно говоря, дал уже достаточно давно.
KOT!K
Знакомый

Знакомый


: 32

: 07.06.2006
: 88

: 17, 2006 10:04 pm     :

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

Ой) знчит я туда не заглядывала Embarassed
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 17, 2006 10:17 pm     :

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

Администратор


: 40

: 10.08.2004
: 1717
: Ukraine

: 17, 2006 10:34 pm     :

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

Модератор


: 36

: 12.05.2005
: 846

: 18, 2006 7:39 am     :

прошу прощения. Вчера тупо отрубился.
:   
  ,         .     ,        .     Форум Macromedia Dreamweaver -> Верстка : GMT + 2
1 1

 


Powered by phpBB © 2001, 2005 phpBB Group
phpBB


/ : 137434 / 0

Rambler's Top100 @Mail.ru