Вёрстка № 2 для портфолио

[psywalker]

Есть идея в будущем сделать себе сайт-портфолио, и хотелось-бы что-бы работы в нём были идеально отточены и вылизаны до предела. Дело в том, что последняя моя работа, вылаженная на нашем любимом форуме показала, какой я "супер" верстальщик и сколько я делаю ошибок в работе. Конечно же одной работой полагаю это не ограничивается, но зато для себя я вычел много уроков из той вёрстки благодаря вам. Сейчас хотелось бы продолжить традицию и выложить очередную свою вёрстку (4 страницы) на ваш суд.

Пожалуйста просьба ко всем не проходить мимо, заглянуть в код, а кому не лень высказать всё, что он думает обо мне и моей вёрстке. Дизайн не интересует, а интересует только код HTML/CSS, и вообще сама работа.

Идея с левым меню: Моя

Воплощение идеи: Great Rash - За что ему огромное спасибо, исполнил, как всегда на высоте!

Всяческая помощь при вёрстке: mishka2 - Спасибо тебе Мишка, в некоторых местах ты неплохо помог

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

Левое меню рабочее, так же как и логотип, все 4 страницы. На странице "Contacts" для наглядного примера идеи я заполнил контент текстом.

Ребят, в общем зацените работу и расскажите все косяки, которые вы заметите в коде, да и с виду

Заранее всем спасибо!

http://psywalker.ru/Portfolio/FreshWebLab/home-page.html

Edited September 30, 2009 by psywalker

[Игорь Ермаков]

За партфолио надо весить.

А вёрстка отличная, дизайн так и вовсе гениален. А вот за партфолио, всё же расстрелять из автомата.

[psywalker]

За партфолио надо весить.

А вёрстка отличная, дизайн так и вовсе гениален. А вот за партфолио, всё же расстрелять из автомата.

Блин, торопился я, во дурак, такая очепятка дурацкая, а как исправить, чё то не могу?

[Dimitry Wolotko]

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

[psywalker]

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

Дим, спасибо за то, что исправил "Портфолио"))

А скажи пожалуйста, что именно неинформативно в меню и какое решение можешь предложить?

[Semreg]

Мне кажется ховер эффект был бы для меню не лишним.

А например при открытии страницы "портфолио" что бы этот пункт в меню подсвечивался вертикальным подчеркиванием.

Но это касается не верстки а юзабилити.

З.Ы. Мелочь конечно, но в браузере "K-Meleon" очень сильно штормит верстку. Видимо какие то не класические приемы при верстке использовались. Может быть, что в мало популярных браузерах внешний вид будет хромать.

Edited September 30, 2009 by Semreg

[psywalker]

Мне кажется ховер эффект был бы для меню не лишним.

А например при открытии страницы "портфолио" что бы этот пункт в меню подсвечивался вертикальным подчеркиванием.

Но это касается не верстки а юзабилити.

З.Ы. Мелочь конечно, но в браузере "K-Meleon" очень сильно штормит верстку. Видимо какие то не класические приемы при верстке использовались. Может быть, что в мало популярных браузерах внешний вид будет хромать.

1) Ховер эффект не прокатил по ряду причин, но я щас кое что придумал, что-бы было понятнее, на какой странице вы находитесь, зацените

2) Браузер "K-Meleon" - это что такое, я первый раз о нём слышу?

http://psywalker.ru/Portfolio/FreshWebLab/home-page.html

[Semreg]

но я щас кое что придумал, что-бы было понятнее

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

Браузер "K-Meleon" - это что такое, я первый раз о нём слышу?

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

[psywalker]

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

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

1) Отлично, сделал выдвиги поменьше по ширине, думаю так лучше

2) К счастью не имел с ним дело

[WalkMan]

http://i448.photobucket.com/albums/qq203/walk4man/1.gif

втт такая шляпа в сафари и хроме

[psywalker]

http://i448.photobucket.com/albums/qq203/walk4man/1.gif

втт такая шляпа в сафари и хроме

Аа, да это я эксперементировал ночью))) Вот перезалил

http://psywalker.ru/Portfolio/FreshWebLab/home-page.html

[Dimitry Wolotko]

Есть у меня сомнения, что ты стал бы так писать в стилях:

/*
—————————————————————————————————-
[Table of Contents]

1. Reset and default page configuration

2. Blocks
			2.1 Menu Top				| .top_menu 
			2.2 Navigation				| .nav
			2.3 Block				| .block
			2.4 Information				| .info
			2.5 News				| .news
			2.6 Subscribe				| .subscribe
			2.7 Servise List			| .services_list
			2.8 Contact				| .contact
			2.9 Portfolio Big 			| .portfolio_big


3. Page Constructor
			3.1 Header 									| #hdr
			3.2 Content 								| #cnt
			3.3 Footer 									| #ftr
4. Pages

—————————————————————————————————-
*/

Шаблон не твой что ли?

[rus]

Есть у меня сомнения, что ты стал бы так писать в стилях:

/*
—————————————————————————————————-
[Table of Contents]

1. Reset and default page configuration

2. Blocks
			2.1 Menu Top				| .top_menu 
			2.2 Navigation				| .nav
			2.3 Block				| .block
			2.4 Information				| .info
			2.5 News				| .news
			2.6 Subscribe				| .subscribe
			2.7 Servise List			| .services_list
			2.8 Contact				| .contact
			2.9 Portfolio Big 			| .portfolio_big


3. Page Constructor
			3.1 Header 									| #hdr
			3.2 Content 								| #cnt
			3.3 Footer 									| #ftr
4. Pages

—————————————————————————————————-
*/

Шаблон не твой что ли?

По ходу это просто от файла со стилями глобального сброса:

1. Reset and default page configuration

[Dimitry Wolotko]

Нет. Это структура стилей, и первый блок - это ресет. Потом идут остальные несколько блоков. Приглядись.

[psywalker]

Дим, я не понял вопроса?

Дизайн и макет конечно же не мои, мне дал человек для портфолио

Вёрстка и стили полностью мои 100%, поэтому не понял вопроса?

[BassEast]

so.. here's nothing to say, but i like it.

http://psywalker.ru/Portfolio/FreshWebLab/img/img1.jpg — картинкам бы тоже стили прописать бы.. бы... бордюр в смысле с пэддингом

[psywalker]

Дим, я кажется понял, о чём ты, просто вот эти стили остались от старого шаблона ЦСС, уже почистил!

3. Page Constructor
			3.1 Header									 | #hdr
			3.2 Content								 | #cnt
			3.3 Footer									 | #ftr
4. Pages

Забыл убрать))

А вот эти всё пральна, все присутствуют на странице блоки:

2. Blocks
			2.1 Menu Top				| .top_menu 
			2.2 Navigation				| .nav
			2.3 Block				| .block
			2.4 Information				| .info
			2.5 News				| .news
			2.6 Subscribe				| .subscribe
			2.7 Servise List			| .services_list
			2.8 Contact				| .contact
			2.9 Portfolio Big 			| .portfolio_big

BassEast

Спасибо дружище, мне тоже нравится если честно, а картинки переделаем

Edited October 1, 2009 by psywalker

[rus]

Дим, я не понял вопроса?

Дизайн и макет конечно же не мои, мне дал человек для портфолио

Вёрстка и стили полностью мои 100%, поэтому не понял вопроса?

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

so.. here's nothing to say, but i like it.

http://psywalker.ru/Portfolio/FreshWebLab/img/img1.jpg

heh, I wonder, what does this picture have to do this design?

[psywalker]

Dimitry Wolotko, rus, мужики, вы чего, под лжеца меня подгоняете, думаете, что выставил чужую работу под своим именем? Да я как себя помню, последний год соблюдаю и стремлюсь к красоте организованности HTML/CSS, особенно эти комментарии и разделение на разделы - это всё мой стиль!

Вот поглядите мои форумовские вёрстки например, сравните сами:

1. http://psywalker.ru/SAITS/Raira/css/styles.css

2. http://psywalker.ru/SAITS/Izoprint2/main-page.html

3. http://psywalker.ru/SAITS/First-Orange/main-page.html

4. http://psywalker.ru/SAITS/Acgroup/acgroup/main-page.html

Я же не робот, и иногда могу что-то пропустить, вот и щас забыл удалить в шаблоне название лишних блоков или хотя-бы переименовать их. У меня есть один шаблон CSS который отделён разделами просто пунктирами и в нём есть Общий сброс, которым я пользуюсь постоянно, а остальное всегда я верстаю с нуля, весь сайт от А до Я и HTML/CSS пишу сам. Вот как бы так примерно изначально:

/*
—————————————————————————————————-
[Table of Contents]

1. Reset and default page configuration

2. Blocks
			2.1 			| 
			2.2 				| 
			2.3 				|
			2.4 				| 
			2.5 				|
			2.6 				|
			2.7 				|
			2.8 				|	


3. Page Constructor
			3.1 Header 									| #hdr
			3.2 Content 								| #cnt
			3.3 Footer 									| #ftr
4. Pages

—————————————————————————————————-
*/



/*
################################################################################
####################
[1. Reset and default page configuration]
################################################################################
####################
*/

   html,body, 
   div,dl,dt,dd,ul,ol,li,form,table,tr,td,
   h1,h2,h3,h4,h5,h6,pre,p,span,b,i,a,
   input,textarea { margin: 0; padding: 0; outline: none;}

body {

	font: .625em Arial, Helvetica, sans-serif; /* default page font size is 10px (1em) */

  background: #797979 url(../img/body.jpg) repeat-x;
  min-width: 100em;
}
   h1,h2,h3,h4,h5,h6,
   input,textarea,select { font-size: 1em;}	

   ul { list-style-type: none; }
   img { border: none; }
   table { border-collapse: collapse; border-spacing: 0; text-align: center; width: 100%; }

	/* remember to define focus styles! */
   :focus {outline: 0; }

   a {text-decoration: none; color: #fff;}
   a:hover { text-decoration: underline;}

   h3 { font-size: 2em; color: #fff; font-weight: normal;}


/*

Вот это я почти всегда использую одинаково, поэтому это уже шаблон, но НЕ больше!!! Остальное всё я пишу сам!

Как правило во всех моих работах мне встречались блоки

			3.1 Header 									| #hdr
			3.2 Content 								| #cnt
			3.3 Footer 									| #ftr

А вот в этой их не было, так как сами видите, вёрстка необычная, как и сама задача, поэтому я по привычке оставил их, а надо было удалить

Edited October 2, 2009 by psywalker

[gordi]

Почему-то никто не обратил внимания на отсуствие вертикальной и горизонтальной прокрутки при уменьшении размеров окна браузера

Или это сейчас уже не важно?

[psywalker]

Почему-то никто не обратил внимания на отсуствие вертикальной и горизонтальной прокрутки при уменьшении размеров окна браузера

Или это сейчас уже не важно?

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

[gordi]

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

Каюсь не внимателен

Надо переделывать, а иначе как

[psywalker]

Каюсь не внимателен

Надо переделывать, а иначе как

Кстати я наслышан о тебе, знаю, что ты профи по Позишану - фикседу, не мог бы ты помочь решить задачу с левым меню, только что-бы всё это дело одинаково отображалось во всех браузерах, Включая обязательно ИЕ6. У меня сделано с помощью эмуляции, но как сам видишь, это приводит к проблемам со скролами, помоги плиз мастер

Вот задача, которая точно так же должна работать везде, даже в ИЕ6:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Left Menu</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
			ul { width: 100px; position: fixed; left: 0; top: 0; height: 100%;}
				ul li { height: 25%; background: red;}

	</style>
</head>

<body>
	<ul>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>

   </body>
</html>

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

[gordi]

Кстати я наслышан о тебе, знаю, что ты профи по Позишану - фикседу, не мог бы ты помочь решить задачу с левым меню, только что-бы всё это дело одинаково отображалось во всех браузерах, Включая обязательно ИЕ6. У меня сделано с помощью эмуляции, но как сам видишь, это приводит к проблемам со скролами, помоги плиз мастер

Вот задача, которая точно так же должна работать везде, даже в ИЕ6:

Ну берешь к примеру вот такое http://fixed.name/i/s/fixcenter.html

и крутишь до кондиции

Edited October 2, 2009 by gordi

[rus]

Dimitry Wolotko, rus, мужики, вы чего, под лжеца меня подгоняете, думаете, что выставил чужую работу под своим именем?

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