плюс еще маленькие картинки не подогнал по размеру, но про это можете не говорить я знаю

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

quickxyan
Сайт ужс, (без обид).
Чтоб растягивался контент на 100% надо параметр width:1024px сделать width:100%

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

quickxyan
http://my.jetscreenshot.com/demo/20110519-iw8d-164kb
http://my.jetscreenshot.com/demo/20110519-3gtx-172kb

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

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

я так понимаю не диз оценивать,а верстку (потому как диз-ужас. у меня кстати слово Бижутерия обрезает).
и так как я вижу все это.
залей бекграунд черным, наверное даже у боди поставить бекграунд черным.
вверху, где типа обои-их зарепитить по оси Х, чтобы были на ширину окна.
По центру обычно делается блок шириной 1000 пикселей (под хидером. 1000 делается, чтобы сайт выглядел без скроллера под разрешение 1024х768 и выше )
<div style="position:relative; width:100%">
<div style="margin:0 auto; width:1000px>
</div>
</div>
В него пихай свой контент со ссылками итд

спасибо. вот просплюсь хорошенько, перечитаю тему и буду думать.

согласен, что диз говно, так как рисовать нифига не умею)
просто решил совместить приятное с полезным и подтянутся в верстке и сделать сайт для девушки своей)
думаю по советам пойму свои ошибки

quickxyan
Я показал как криво в моём основном браузере (ИЕ7).
Если говорить о дизайне, введи в гугле templites, и возьми первый удобный тебе

На таблице будет однозначно проще и понятней.
Это твой сайт или как ?

inpost
спасибо. буду искать думать и спрашивать)

sebastjan
ну у меня девушка делает эти всякие штуки-дрюки, есть група вконтакте и уже даже продается её бижутерия в 3 точках киева, но я решил, что група это фигня и что я могу подзадрочиться и сделать сайтец для неё)

так хидер должен репититься или нет ?
у меня он с черными боками отображается. монитор-24 дюйма

quickxyan
Мне кажется, что таким дизайном ты только испортишь её имидж, а она тебе врядли это сможет сказать... не захочет обижать.

знакомо. у моего знакомого девушка тоже делает. вот примеры (кроме первого кота)
http://gallery.photo.sebastopol.ua/21/1/0

Да весь то графичиский-шаблон - шапка,фон да и стильные кнопочки.
Фотошоп конечно - это хорошо, но я с него слез, перешол на Иллюстратор, уже в какой раз замечал в фотошопе намалюешь, вроде всё класс, а тут заказчик начинает к примеру -- этот элемент сделать побольше а этот поменьше, вот тут и поехали танцы с бубном ,всё перерисовывать, така как фотошоп при маштабировании качество уходит.
Начал с Иллюстратором заниматься и эта проблемма сразу ушла, правда в иллюстраторе в отличии от фотошопа надо более продуманно подходить, таковы правила вектора так как рисуешь так сказать обьектами.

в фотошопе надо сразу с запасом рисовать )

sebastjan
ну я все же пока буду в фотошопе куковать)
шаблон сайта нашел - он в табличной верстке.

теперь надо красивую шапку сделать и футер.

quickxyan
Я некоторое время свободен, давай завтра скину тебе свой вариант шапки а ты рассудишь.
Или даже так, можно здесь выставить на обсуждение, от этого только польза

sebastjan
Скинь мне в личку

sebastjan
буду очень признателен и рад

можно и на обсуждение выставить это если сам хочешь(я только за).

Сразу вспомнил свой первый сайт

Snus
тоже было так все ужасно? )

sebastjan
если не успеешь засунуть в html, то это могу сделать я) у меня уже есть некоторые скачаные шаблоны и можно туда втулить шапку, которую ты нарисуешь


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

Ну вот намолевал пробный вариант

Бижутерия развешанная ещё ен прорисованная.
Картинки не оптемезированные.
Пока что выставляю на осуждение графическую оболочку.
Исходил из следущего.
1. Должно быть весело.(так как бижутерия прикольная)

sebastjan
В целом - неплохо. Цвет бирюзового в нижней части кажется слишком ярким, там, мне кажется, более блеклый цвет был бы лучше, хотя невозможно судить без общей картины.
Не понравилось:
- все глаза одинаково косые, смотрят куда-то в угол, если бы они были бы разными, мне кажется, было бы лучше, или больше разнообразия.
- http://my.jetscreenshot.com/demo/20110523-0ojy-1kb - плохо отыграна эта часть, а если смотреть на другие части картинки, то ты можешь делать лучше, именно вот эта по бокам слишком сплюснута.

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

sebastjan
утром написал пост, а вот пришел, а его нету(наверное недосмотрел или инет глюкнул)

мне очень понравилось. ярко, красиво и жизнерадосно.

идеи с заголовком толком тоже нет. "Бижутерия" и больше пусто) буду думать ну и буду очень рад если кто-то подкинет идейку)

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

Заголовки на обсуждение.

1.Прикольная бижутелия.
2.Купи хорошее настроение
3.Продаётся хорошее настрое
4.Улыбка в подарок
5.Весёлые Крякозябы

Из народного

1.Любимой Казёбе (То есть Козе Ё...ной)

1, 4, 5.

вот возник вопрос. стоит ли делать регу и авторизацию? вроде сайт будет как визитка, но и с другой стороны как магазин.

подскажите, а то что-то сам не знаю как поступить!

quickxyan
Если полноценный интернет-магазин, то да, но только при оформлении заказа, а не раньше.
Если как визитка с элементами заказа, подойдет даже обычная форма оформления заказа без всяких регистраций.
Есть такое правило, что чем меньше паришь мозги покупателю, тем больше он доволен, а всякие регистрации порой так задалбывают... особенно когда плачу мало, а тратить времени надо уйму.

inpost
понял, значит таки пока не буду лепить регу, а вот форму заказа сделаю.

спасибо.
вот еще sebastjan очень поможет с дизайном и дай бог запущу проект.

сижу вот и потихоньку делаю форму заказа. возник вопрос: а как можно выделить в основной форме блоки?

например будет 2 основных блока:
1. имя и контакты заказчика
2. сам заказ(поля для ввода, чекбоксы....)

как можно разделить этих два блока, чтобы было видно, что они есть единое целое и все же разделены!?

думал fieldset, но наверное некрасиво будет. а если поместить всю форму в fieldset и там разделить <hr> ?

подскажите как будет и красивее и проще.

inpost как всегда прав, регистрация это всегда останавливает клиента.
Просто сразу в разделе с превьюшками о описанием детально товара делай форму заказа
ну и там небольшую сноску как оплатить и куда.
А для себя я бы всё же сделал базу в котрую вносились бы заказы и последущая их обработка, типа письмо на мыло(заказ принят,заказ отправлен,рассылка)
Всё перестаю болтать ,пошол малевать.

А зачем выводить поле формы с наименованием заказа?
Ну я понимаю так,
Клиент кликает на превьюшку товара
Клиент переходит на страницу с детальным видом и описанием после
на которой ниже описания и превьюшки форма для оформления заказа.
Имя,майл,в чекбокс как оплатить - вею мани иил перевод.
3. заполнил , нажимает купить или в карзину.
Форму можно оформить стилями.

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

ну и еще сделать отдельную форму для заказа индивидуальной бижутерии.
типа - хочу такую и такую штучку. возможно добавить картинку - приблизительный набросок. как-то так.

нормально будет или глупо?

Вот немного подкоректировал вместе с заголовком.
ШАПКА с Заголовком
----------------------------------------------------------------

Да ты неусложняй, запусти пока без корзины а то так будешь делать до следущего года.
Упрости пока до минимума а потом сможешь всегда нарастить функционал.
1.галерея с превьюшками и ценой с кнопкой купить.
2.Переход с превьюшки на детальную страницу с инфой а там ниже описания или картинки
формачка для заказа с выбором метода оплаты.
Не бойся в инфо о себе писать где ты физически находишься а то многие смотрят типа только емайл или аська и всё понятно а так больше внушает доверие.

И ещё один нюанс по поводу превьюшек, не загружай не обработанные фото, на светлых дизайнах очень плохо смотриться когда выставлена фотка с фотика на сташном фоне.
Самопалом пахнет.
Обьясню потом как в два клика в фотошопе обрезать точно фон.
--------------
вот как то так.
Примерно так получилось

sebastjan
прикольно так) скинешь верстку с фотками? (skident@mail.ru)

ок, сначала запущу с минимумом функционала и попробую сделать так как ты говорил.

огромное спасибо!

Ок, может сегодня успею к вечеру освободиться и сверстаю.
Про какие фотки ты говоришь?
У меня нет фоток.
По логике визуала.
То что в центе голубые блоки это я так для заполнения засунул.
Прилично было бы на их месте разместить превюшки бижутеии без фона в таблице на три ячейки, думаю больше ячеек не стоит в полосе использовать ,это тебе уже на твоё усмотрение.
Под превьюшками - название и цена.
Под рядом с этими превьюшками можно какой ещё заголовок и текс.
Про то как вырезать в фотошопе.
Берёшь инструмент перо, окуратненько так кликаешь и обводишь дорожкой то что хочешь выделить, подправляешь если что с инструментом белая стрелка.
Когда убедился что всё клас и обьект хорошо обведён, активируешь дорожки с чёрной стрелкой, тое сть кликаешь по обводке. Потом кликаешь правой мышкой и выпадающем меню Make Selection, появиться пунктирная обводка.
Сверху в окне есть Selection - кликни туда и сделай иверт выделения, и жми делет.
Всё красиво вырезал.

Конечон могу в PSD.
Пошлю тебе сейчас на мыло.
Уже.

Сейчас получишь. 3.2 мег файл

отлично, а я уже до вечера попробую сверстать и сбда выложу верстку. чтобы поматерились на меня)

еще раз ОГРОМНОЕ СПАСИБО.

Ну давай, успехов тебе.
Может на фотошоп подсядешь

sebastjan
та уже было пару основательных попыток, но как-то не выходит у меня, я постоянно все сваливаю на то, что абсолютно вкуса и чуства рисования у меня нет, хотя если чесно, то хз)

На iOS все поплыло!

sebastjan

наверное это было сказано про мою верстку по ссылке

sebastjan
взял твою верстку из пробного варианта и пробую вставить картинки из твоего макета.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
BODY{
	background-image: url(img/6.png);
	background-repeat: no-repeat;
    background-position: center;
	margin: 0px;
	padding: 0px;
}
#kopf1{
	background-image: url(img/5.png);
	height: 474px;
	width: 100%;
    background-repeat: no-repeat;
	background-position: center;
}

</style>
</head>

<body>

<div id="kopf1"></div><!-- fon_bg_kopf -->

</body>
</html>

получается такое

то есть у меня вопрос состоит в том, что шапка съезжает. как сделать, чтобы шапка стояла сверху. margin-top:-100px - двигает всю страницу вверх

Ну так установи позиционирование блока div top:0px;.
Давай проще я тебе скину шаблон позже в личку.
Если у дреамвивер там есть визульная среда, где можешь поиграть с свойствами позиционирования слоя.

пробовал, но что-то не получилось. попробую наверное дримвивере.

position:absolute;
left:0px;
top:0px;
width: 100%;
height: 150px;

Задай правильню высоту как у картинки вместо моих 150px
И цветомбагронд картинку.
У тела документа боди помтавь отступы в ноль.

BODY{
	margin: 0px;
	padding: 0px;
}

	position:absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 150px;
	background-image: url(02.jpg);
	background-position: center;
	background-repeat: no-repeat;

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

quickxyan
Что значит не сверху?

<body>
  <div align="center">
    <img> - вот она по центру :)

http://skident.elitno.net/bizh/diz.php

такое получаеться. текст в основном теле, то не помещаеться, то еще какая-то фигня.
шапка при первом входе на сайт не растягиваеться так как надо, если ставлю вместо 100% 1125px -вообще пропадает.

ну и вообще все как-то кучи не держиться.

вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
BODY{

    background-image: url(img/6.png);
	background-repeat: no-repeat;
    background-position: center top;
	margin: 0px;
	padding: 0px;
    width: 100%;
    height: 100%;
    
}
#header{
    position:absolute;
	background-image: url(img/header.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 238px;
	width: 100%;
    top: 0px;
}
#logo{
	position:absolute;
	background-image: url(img/logo.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 238px;
	width: 100%;
    top: 120px;
}
#logo1{
	position:absolute;
	background-image: url(img/logo1.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 24px;
	width: 100%;
    top: 300px;
}
#menu_top{
	position:absolute;
	background-image: url(img/menu_top.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 35px;
	width: 100%;
    top: 270px;
    left: -440px;
    
}
#menu_body{
	position:absolute;
	background-image: url(img/menu_body.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 263px;
	width: 100%;
    top: 280px;
    left: -440px;
}

#cont{
	position:absolute;
	background-image: url(img/cont.png);
    background-repeat: no-repeat;
	background-position: center;
    height: 560px;
	width: 100%;
    top: 350px;
    left: 100px;
    z-index: 3;    
    word-wrap: break-word; 
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
}
#footer{
	position:absolute;
	background-image: url(img/7.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 160px;
	width: 100%;
    top: 805px;
    left: 0px;
    z-index: 2;
}
#footer1{
	position:absolute;
	background-image: url(img/8.png);
    background-repeat: no-repeat;
	background-position: center;
	height: 78px;
	width: 100%;
    top: 920px;
    left: 0px;
    z-index: 1;
}
</style>
</head>
<body>
<center>
<div id="header">
    <div id="logo"> </div>
    <div id="logo1"> </div>
</div>

<div>
    <div id="menu_top"> </div>
    <div id="menu_body"> </div>
</div>

<div id="cont">
    SOME TEXT SOME TEXT SOME TEXT SOME TEXT  SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT
      SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT
       SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT
</div>

<div id="footer"></div>
<div id="footer1"></div>
</center>
</body>
</html>

Ёма...Ё.
Завтра будем разбираться

Ты зачем используешь в качестве ВГ-фона лист фона а не полоску которая зальёт весь фон.
Шапка , в смысле верхняя картинка не должна растягиваться а должна фиксиронно по центру находиться. Немного рагребусь с работой и выложу свой пример. И ещё сделай в фотошопе приличней подвал ,подкоректируй я всего лишь набросок сделал.

уже скачал книгу по верстке буду читать и подучиваться чучуть!

Накидал вариант вёрстки, сравни со своей и посмотри на сколько картинки меньше оптимизированна.
ТЕСТ-ВАРИАНТ
В общем с фонами для меню должен сам разобраться, логика простая, в фотошопе вырезаешь нужный элемент с инструментом Crop Tools и оптимезируешь.
У тебя картинка для шапки 257 Кб -- у меня 57кб.
Бг для фона у меня 549 байт а у тебя 7.30 Кб.

sebastjan
ой ой, спасибо.

то есть ты инструментом Crop Tools оптимизировал все картинки?

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

Да нет , с инструментом Crop Tools определяешь что вырезать.
То есть то что ты этим инструментом выделишь и нажмёшь Энтер , то и останется от всей картинки.Потом идёшь чтоб сохранить для вэб а там выбираешь гиф или жпг или пнг и там уже оптимизируешь.
После этого в истории возвращаешься на шаг назад и востонавливаешь всю картинку.
Инструмент Crop Tools обрезает всё вне выделенной им области !

ну я вроде обо всем этом слышал и даже делал, а вот сохранить для веб никогда не практиковал

sebastjan
да вот и пробую всего потихоньку, но в то, что более интересно поглубже