Jump to content

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

psywalker

By psywalker,
in Discussion of works

 Share

Recommended Posts

psywalker Explorer

psywalker

Posted
Posted (edited)

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

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

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

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

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

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

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

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

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

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

Edited by psywalker
Link to comment
Share on other sites
  • Replies 102
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
Semreg Explorer

Semreg

Posted
Posted (edited)

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

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

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

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

Edited by Semreg
Link to comment
Share on other sites
psywalker Explorer

psywalker

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

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

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

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

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

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

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

Link to comment
Share on other sites
Semreg Explorer

Semreg

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

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

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

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

Link to comment
Share on other sites
psywalker Explorer

psywalker

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

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

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

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

Link to comment
Share on other sites
Dimitry Wolotko Explorer

Dimitry Wolotko

Posted
Posted

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

/*
—————————————————————————————————-
[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

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

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

Link to comment
Share on other sites
rus Explorer

rus

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

/*
—————————————————————————————————-
[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
Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
  • Author
Posted (edited)

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

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 by psywalker
Link to comment
Share on other sites
rus Explorer

rus

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

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

Вёрстка и стили полностью мои 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?

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
  • Author
Posted (edited)

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 by psywalker
Link to comment
Share on other sites
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
gordi Explorer

gordi

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

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

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

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
  • Author
Posted
Каюсь не внимателен :)

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

Кстати я наслышан о тебе, знаю, что ты профи по Позишану - фикседу, не мог бы ты помочь решить задачу с левым меню, только что-бы всё это дело одинаково отображалось во всех браузерах, Включая обязательно ИЕ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>

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

Link to comment
Share on other sites
gordi Explorer

gordi

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

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

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

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

Edited by gordi
Link to comment
Share on other sites
rus Explorer

rus

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

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

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept