Залинчуйте верстку

scrobot

я не унылое говно ^_^
Регистрация
29.07.2011
Сообщения
243
Добрый день! Залинчуйте верстку, хочется двигаться в правильном направлении "чистого кода", хотелось бы услышать ваше мнение о том насколько этот код чистый. http://morikom.xe0.ru/
З.Ы. валидатор будет выдавать пару ошибок но это из за маленькой рекламки хостера внизу
З.Ы.Ы Так как хостер бесплатный, сайт может не отрываться, если вам не трудно зайдите потом еще раз...
 

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
Так-то красиво, вот мне только не нравятся плохо выреазанные Hightlight и панелька немного с косячком. Вот только косячки:

Табы с маленькими Изображениями, делают панель не красивой, также текст стоит сдлать поменьше.
Подсветка трактора и остальных строительных машин вырезано криво в фш.

Надеюсь это никто не воспримет как "Злобная критика доктора Волтера >:0", я просто говорю что косяково: Google Chrome 20.
 

scrobot

я не унылое говно ^_^
Регистрация
29.07.2011
Сообщения
243
спасибо, по дизайну не ко мне... с панелькой соглашусь, я с этой картинкой маялся маялся, а каждому пункту меню честно говоря не хотелось создавать, вообще это через JQ можно сделать, но я эт не умею...
 

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
спасибо, по дизайну не ко мне... с панелькой соглашусь, я с этой картинкой маялся маялся, а каждому пункту меню честно говоря не хотелось создавать, вообще это через JQ можно сделать, но я эт не умею...
Абстрактного мышление не хватает?
http://css-tricks.com/how-to-resizeable-background-image/
Google очень хорошая вещь, без нее веб нафик не нужен если тебе нужна информация.
 

A-F

Well-Known Member
Регистрация
25.07.2011
Сообщения
390
Ждите тигру :D
 

scrobot

я не унылое говно ^_^
Регистрация
29.07.2011
Сообщения
243
мышления хватает, ибо гугл это библиотека а не только поисковая машина, только не всегда времени хватает вводить 40 разных запросов, и доходить до n-ой страницы, и тем более в принципе задача передо мной не стояла дорабатывать элементы дизайна и делать все на css когда последующий разработчик сам поправит эти элементы так как ему нужно.. так зачем тратить время, с вашим подходом если бы вас поставили совсем в сжатые сроки вы бы не успели..
З.Ы. со всем уважением, не надо мне говорить про гугл, ибо я не нуб, и искать инфу умею, но не всегда, повторюсь хватает на это времени...

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

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
Может мне вообще тогда с сайта уйти и не взвращятся? Я подумываю: "может перейти на php.su форум?".
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
1. DOCTYPE - не правильно прописан:
или
Код:
<!DOCTYPE html>
<html>
или
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
2. шапка:
Код:
<div class="[url=""]header[/url]">
	<div class="[url=""]logo[/url]">
		<a href="[url="view-source:http://morikom.xe0.ru/index.html"]index.html[/url]"><img src="[url="view-source:http://morikom.xe0.ru/images/2_03.png"]images/2_03.png[/url]" alt="[url=""]логотип[/url]"></a>
		<p><span>ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ</span></p>
		<p><span><span>Аренда строительных машин и механизмов</span></span></p>
	</div>
</div>
параграфы меняем на заголовки, от спенов избавляемся

3. навигация
пункты меню убежали:
menu.png

сами страницы не соответствуют контенту, который находится при переходе

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

5. форма
дополнительная форма для textarea лишняя. достаточно одной - позиционируем импуты влево, а текстарею вправо...

6. подвал:
footer.png
попробуйте уменьшить размер шрифта








Может мне вообще тогда с сайта уйти и не взвращятся? Я подумываю: "может перейти на php.su форум?".
думаю, просто стоит пересмотреть манеру разговора...
Абстрактного мышление не хватает?
с таким подходом Вы и на php.su форуме долго не задержитесь.... :laugh:
 

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
1. DOCTYPE - не правильно прописан:
или
Код:
<!DOCTYPE html>
<html>
или
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
2. шапка:
Код:
<div class="[url=""]header[/url]">
	<div class="[url=""]logo[/url]">
		<a href="[url="view-source:http://morikom.xe0.ru/index.html"]index.html[/url]"><img src="[url="view-source:http://morikom.xe0.ru/images/2_03.png"]images/2_03.png[/url]" alt="[url=""]логотип[/url]"></a>
		<p><span>ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ</span></p>
		<p><span><span>Аренда строительных машин и механизмов</span></span></p>
	</div>
</div>
параграфы меняем на заголовки, от спенов избавляемся

3. навигация
пункты меню убежали:
Посмотреть вложение 2075

сами страницы не соответствуют контенту, который находится при переходе

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

5. форма
дополнительная форма для textarea лишняя. достаточно одной - позиционируем импуты влево, а текстарею вправо...

6. подвал:
Посмотреть вложение 2076
попробуйте уменьшить размер шрифта








Может мне вообще тогда с сайта уйти и не взвращятся? Я подумываю: "может перейти на php.su форум?".
думаю, просто стоит пересмотреть манеру разговора...
Абстрактного мышление не хватает?
с таким подходом Вы и на php.su форуме долго не задержитесь.... :laugh:
Хотите сказать, я - Грубиан?
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
Хотите сказать, я - Грубиан?
не знаю Вашу фамилию :laugh: , может и Грубиан...
если Вы имели ввиду грубиян, то этого Вам тут никто не позволит...принимайте людей такими, какие они есть, а не такими, какими Вы их хотите видеть, просили верстку оценить, а не мышление...

зы. хотите обсудить себя любимого - откройте тему...тут это не уместно
 

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
Хотите сказать, я - Грубиан?
не знаю Вашу фамилию :laugh: , может и Грубиан...
если Вы имели ввиду грубиян, то этого Вам тут никто не позволит...принимайте людей такими, какие они есть, а не такими, какими Вы их хотите видеть, просили верстку оценить, а не мышление...

зы. хотите обсудить себя любимого - откройте тему...тут это не уместно
Хахаха... простите букву перепутал.
Я что-то не очень понял: позволить что?

К тому ж, зачем использовать Разные картинки? Я не понимаю вас Scroobot, что такого сложного в JS?
Ведь легче написать на JS чем мучатся с CSS.
 

scrobot

я не унылое говно ^_^
Регистрация
29.07.2011
Сообщения
243
Я не понимаю вас Scroobot, что такого сложного в JS?
Ведь легче написать на JS чем мучатся с CSS.
Дело в том что я его еще не изучил, представте что если бы вам надо было сделать сайт на китайском языке а я бы вам сказал:
Я не понимаю вас Volter9, что такого сложного в Китайском?
Ведь легче его выучить мучатся с переводчиком.
Какова ваша реакция была?

Огромное спасибо motek за подробную критику)) Вроде бы все исправил... еще раз спасибо
З.Ы. Верстка тестовая, страницы не все подходят названиям ссылок
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Код:
font: 14px "Arial";
Плохое определение имени шрифта. А если у пользователя нет Ариала? В крайнем случае, хотя бы семейство нужно указать (sans-serif).

Код:
<h6>ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ</h6>
Не набирайте текст заглавными буквами. Для этого существует стиль text-transform: uppercase;

Код:
alt="картинка"
Не нужно так делать. Оформительским картинкам оставьте alt пустым.

Код:
<a href="#"><img onmouseover="this.src='/images/3_03_1.png'" onmouseout="this.src='images/3_03.png'" src="images/3_03.png" alt="Техника1"></a>
Неверное решение:
1. Скрипты здесь неуместны (что делать тем, у кого отключен/отсутствует JS?)
2. Картинка должна быть фоновой, двухъярусной (две картинки в одной - спрайт). Смена картинок производится CSS по hover путем сдвига позиции фоновой картинки.
Кстати, почему второе меню не оформлено списком?

Почему форма разделена на две части? И это работает?
Кстати, сама форма сконструирована неверно. Подписи для полей нужно делать отдельно. Я например, сразу и не понял, куда же нужно вводить информацию?

Ну, и ,в догонку, пару слов про дизайн. Такой крупный текст - это ужас!
 
  • Like
Реакции: A-F

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
... Вроде бы все исправил... еще раз спасибо
а форма?
Код:
<div class="Connection">
<Div class="Connectionblock">
	<form class="leftform" action="form.php">
		<h3>Вы можете отправить нам сообщение</h3>
		<input class="ConnectionForm"><br>
		<input class="ConnectionForm"><br>
		<input class="ConnectionForm"><br>
		<input class="ConnectionForm">
	</form>
	<form class="rightform" action="form.php">
		<textarea rows="3" cols="300" class="ConnectionForm2" tabindex="6">Сообщение:</textarea>
		<input class="Submitbutton" value="ОТПРАВИТЬ" name="submitButton" type="submit">
	</form>
	<img src="images/1_30.png[" alt="Код">
</div>
</div>
избавляемся от дивов, перенеся стили первого на форму
выносим заголовок из формы
используем элемент <fieldset>

Код:
<h3>Вы можете отправить нам сообщение</h3>
<form class="Connection" method="post" action="#" enctype="application/x-www-form-urlencoded">
<fieldset>
	 <input class="ConnectionForm" type="text">
	 <input class="ConnectionForm" type="text">
	 <input class="ConnectionForm" type="text">
	 <input class="ConnectionForm" type="text">
</fieldset>
<fieldset>
	 <textarea rows="3" cols="300" class="ConnectionForm2" tabindex="6">Сообщение:</textarea>
	 <input class="Submitbutton" value="ОТПРАВИТЬ" name="submitButton" type="submit">
</fieldset>
</form>
<img src="images/1_30.png" alt="Код">
css:
Код:
form
{
position: relative;
стили дива .Connection
}
fieldset
{
border: none;
height: 250px;
width: 365px;
float: left;
overflow: hidden;
}
 

Den_Mak

Царь и Бог!
Регистрация
22.12.2011
Сообщения
350
Не набирайте текст заглавными буквами. Для этого существует стиль text-transform: uppercase;
Может я и не прав, но не проще ли написать большими буквами вместо того, что бы делать CSS файл больше размера (из за text-transform), хоть и на 1 кб.
1. Скрипты здесь неуместны (что делать тем, у кого отключен/отсутствует JS?) 2. Картинка должна быть фоновой, двухъярусной (две картинки в одной - спрайт). Смена картинок производится CSS по hover путем сдвига позиции фоновой картинки. Кстати, почему второе меню не оформлено списком?
Вы повелитель вёрстки!!!

Надпись "Аренда строительных машин и материалов" едет.
 
Верх Низ