Сайт на дивах

[psywalker]

Мужики,оцените мою вёрстку,скажите косяки

Вот сайт:

http://psywalker2008.narod.ru/kino/index.html

Вот CSS:

http://psywalker2008.narod.ru/kino/style.css

2) А ещё меня волнует одна проблема: Как мне установить подвал,точно также ,как на картинке,чтобы он растягивался на всю длину,был внизу,а точнее при этом ещё и залазил на среднее меню,вобщем один в один,как на картинке

http://pic.ipicture.ru/uploads/080926/AWd1G5Qm3a.jpg

3)Ах,да..и ещё я не смог сделать такую штуку:

http://s2.ipicture.ru/uploads/080925/u3ro5V7k6T.jpg

4) и ещё Фон всёже пришлось делать одной картинкой,другого выхода не видел,слишком он уж замороченный оказался...

http://s2.ipicture.ru/uploads/080923/X91laI5Ox0.jpg

Цитата klierikа

я б такое реализовал 2мя объектами скорее всего.

1. решетку размножить по области

2. вспышку в виде PNG позиционировать поверх

Edited September 26, 2008 by psywalker

[Ялекс]

Хреноватенько у вас с рисунками... совсем плохо...

С отступами текста в меню тоже бок. padding, margin ведь тоже нужно использовать, а так текст слипся.

Правильно сказал Клерик... Нужно использовать PNG. Но можно было ЛЕГКО обойтись и без них.

Я бы делал так(по структуре расположения кода):

[ левое меню float:left; ] [ правое меню float:right; ] [ контентная область padding-left = width левого, padding-right = width правного ]

<img src="images/design_log.gif" class="left">
и
<img class="znak"src="images/znak.gif"[b]/[/b]>

Нет понимания стандартов.

class="ssilko" — не стоит использовать албанский, если у вас не достаточно авторитета... Понятное дело, что Лебедевы похуисты, но у них за плечами горы опыта, поэтому уже можно прикалываться как хочеш, в принципе.

Edited September 26, 2008 by Ялекс

[psywalker]

Ялекс

1)

С отступами текста в меню тоже бок. padding, margin ведь тоже нужно использовать, а так текст слипся.

Какого текста,где слился?

2)

Правильно сказал Клерик... Нужно использовать PNG. Но можно было ЛЕГКО обойтись и без них.

а Вы можете поподробнее объяснить,как сделать такой фон?

3)

<img src="images/design_log.gif" class="left">

и

<img class="znak"src="images/znak.gif"/>

Нет понимания стандартов.

Что это значит,что тут не так?

4) Согласен,я вообще похожу не понимаю,что такое стандарты,посоветуйте,что нужно для этого учить и как,чтоб понять?

[Ялекс]

4) Согласен,я вообще похожу не понимаю,что такое стандарты,посоветуйте,что нужно для этого учить и как,чтоб понять?

Самое простое использовать валидатор.

а Вы можете поподробнее объяснить,как сделать такой фон?

http://www.nbsp.ru/articles/2003/02/18/prozrachnyi_png.html

Какого текста,где слился?

Я имел ввиду отступы текста... line-height или padding для LI

[klierik]

Создание разметки:

верстая тот или иной макет разделяйте его на логические составные:

- шапка (footer)

- контейнер данных (container-case)

- подвал (footer)

Это три независимых блока. Они, как правило, есть на любом макете.

Так основываясь на это и создавайте основную структуру макета.

Меню построено грамотно, что не может не радовать

фоновое изображение на блоке "stolbleftverh2" я б сделал не так.

на блок вешается position: relative; а рисунок добавляется в код через тег <img>

в свойствах тега прописывается position: absolute: left: 0; bottom: 0;

рисунок должен быть формата PNG без фоновой решетки.

С "stolbseredina1" скорее всего сделать надо также. имхо.

По фону. Не вижу икакого смысла пускать белую вспышку с левого верхнего угла в центр, так как не более 5-10% ее видно под контентом. Затраты трафика не оправданы.

По CSS. Я б рекомендовал Вам почитать и проникнутся статьей: http://habrahabr.ru/blogs/css/28731/

2) А ещё меня волнует одна проблема: Как мне установить подвал,точно также ,как на картинке,чтобы он растягивался на всю длину,был внизу,а точнее при этом ещё и залазил на среднее меню,вобщем один в один,как на картинке

http://pic.ipicture.ru/uploads/080926/AWd1G5Qm3a.jpg

к примеру так:

думаю из одного CSS понятно как построить HTML.

div.footer {position: relative; height: 30px;}
   div.footer div.glass {postion: absolute: left: 0; right: 0; top: 0; bottom: 0; _width: 100%; heigth: _100%; background-color: #fff; filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: .3;  opacity: 0.3;
   div.footer div.data {  }
   div.footer div.img { position: absolute; right: 100px; bottom: 0; }

3)Ах,да..и ещё я не смог сделать такую штуку:
http://s2.ipicture.ru/uploads/080925/u3ro5V7k6T.jpg

спокойно делается не UL LI.

ul.list li {display: inline;}

Рекомендации:

создавая названия классов, пишите их английскими словами.

к примеру "carcas" - "container" или "layout" или "canvas"

это не обязательно. просто мне так кажется более удобнее.

[psywalker]

Спасибо вам огромное,единственное:

div.footer {position: relative; height: 30px;}

div.footer div.glass {postion: absolute: left: 0; right: 0; top: 0; bottom: 0; _width: 100%; heigth: _100%; background-color: #fff; filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: .3; opacity: 0.3;

div.footer div.data { }

div.footer div.img { position: absolute; right: 100px; bottom: 0; }

а вы не моглибы всётаки объяснить,как должно выглядеть html ?

2)И ещё у меня проблема с этой штукой,очень большие промежутки между букв,как мне сделать меньше,и вообще,может я непральна чёто делаю?

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

http://i035.radikal.ru/0809/48/dbde7c57a43d.jpg

Вот код

div.rec{

width:100%;

border:0px solid #666;

margin:0px;

padding:0px;

word-spacing:0px;

}

div.rec ul li{

border:1px solid #666;

display:inline;

margin:0px;

padding:0px;

word-spacing:0px;}

div.rec ul{

display:inline;

margin:0px;

padding:0px;

word-spacing:0px;}

div.rec ul li a{

width:0px;

font-weight:bold;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:71%;

padding-left:0px;

padding-right:0px;

margin:0px;

display:inline;

text-decoration:none;

border:0px solid #000000;

color:#CC33FF;

}

div.rec ul li a:hover, a:active {

padding-left:0px;

padding-right:0px;

text-decoration:none;

background-color:#FFFFFF;

background-image:url(images/buk.gif);

color:#CC33FF;

}

Edited September 26, 2008 by psywalker