Вёрстка макета FirstOrange

Cabalist · July 14, 2009

Решил вот сверстать макет FirstOrange,мне он показался довольно интересным для вёрстки,особенно навигация которую я сделал через список. Хотелось бы услышать ваши комментарии по вёрстке.

Ссылка - http://testserver.ho.ua/bank/

P.S. Не забудте переключить кодировку на utf-8 если появятся крякозябры :blink:

Veseloff · July 14, 2009

P.S. Не забудте переключить кодировку на utf-8 если появятся крякозябры

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

psywalker · July 14, 2009

Действительно, что это за ужас с кракозябрами, поменяй сам и приведи вид в порядок - прежде чем выставлять работу на обсуждение! :blink:

аrt · July 14, 2009

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

Verder · July 14, 2009

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

Это не сайт, это макет, который я выкладывал для тренировки - http://forum.htmlbook.ru/index.php?showtopic=14398

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

P.S.

Лого очень сильно пережато.

Игорь Ермаков · July 14, 2009

width="200"

В природе не существует.

		<div class="bottom_lines">

			<div class="left_line"></div>

			<div class="right_line">


				<div class="borders">

					<div class="left_border"></div>

					<div class="right_border"></div>

					<div class="centr_border"></div>

				</div>

			</div>

		</div>

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

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

Cabalist · July 14, 2009

width="200"
В природе не существует.

Да что вы говорите,а почему же тогда документ валидацию проходит?

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

Кто вам сказал что они пустые?Посмотрите внимательнее,это блоки для линий,что бы линии в левом и правом блоке ровно располагались. Знаете как по другому сделать,так приведите пример,буду очень благодарен.

Слишком много пустых блоков

Приведите пример.

и к чему вам такой доктайп?

А что в нём такого плохого то?

P.S. На счёт кодировки вообще не понимаю,вроде стоит utf-8,но браузер всё равно крякозябры отображает,пробовал и charset=windows-1251,та же история,уже на хостинг грешить начал.

P.S.S. Лого теперь вроде нормально пережал.

Edited July 14, 2009 by Cabalist

Searcher · July 14, 2009

Вы почитайте в интернете про кодировки. Сейчас проблем с этим нет... В какой кодировке у вас файлы, какую кодировку сервер выдает, и в соответствии с этим пишите в заголовках кодировку.

Verder · July 14, 2009

К вопросу о кодировке. Ничего странного не находите?

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

Cabalist · July 14, 2009

К вопросу о кодировке. Ничего странного не находите?
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

Нет не нахожу,ведь даже на этом форуме так написанно.

rus · July 14, 2009

Скорее всего у вас изначально сам файл был создан в одной кодировке, например в windows-1251, в этой кодировке вы его и сохранили, а потом, к примеру, вы просто прописали вместо исходной кодировки utf-8. Проблема лечится в простом блокноте, просто копируете туда исходный код и при сохранении выбираете нужную кодировку, но при этом нужно что бы и в мета тегах была та же кодировка. По моему как то так если не ошибаюсь...

psywalker · July 14, 2009

Да, Рустамыч прав, у меня такое было, когда я на Народ.ру заливал работу, потом просто менял кодировку и заново всё писал)))

Cabalist · July 14, 2009

Действительно проблема решилась пересохранением в блокноте как говорил rus,за что ему огромное спасибо! Теперь можно смотреть вёрстку.

psywalker · July 14, 2009

Вообще с виду ничего и кросс имеется, правда в ИЕ6 при сужении экрана исчезают элементы, но чувствую, что это Зумом лечится, далее:

1) Очень много ненужных элементов

Вот это паразило вообще

</div>

Ради полосы оно того не стоит))) Можно было это сделать Одним Дивом(это решение мне самому подсказал один хороший человек на форуме)

2) Картинки плохого качества очень

3) Использования мусора типа этого <div class="clear"/>

4) <input type="text" class="input" /> должен быть помещён в <form>

5)  должно быть в head

больше копаться не буду, скажу, что порадовало:

1) Меню сделал Списком(ты понял, что я имею ввиду)

2) Всё валидно и неплохой кросс

А в целом если бы не Весомые косяки, то вёрстка была бы хорошей! Попробуй учесть все замечания и сверстать без ошибок, покрайней мере просто постарайся, я тебе советую

Edited July 14, 2009 by psywalker

Cabalist · July 15, 2009

Вообще с виду ничего и кросс имеется, правда в ИЕ6 при сужении экрана исчезают элементы, но чувствую, что это Зумом лечится

psywalker,у тебя наверное эмулятор какой нибудь ИЕ6?Потому что у меня настоящий и в нём всё нормально)

1) Очень много ненужных элементов
Вот это паразило вообще
<div class="borders">
<div class="left_border"/>
<div class="right_border"/>
<div class="centr_border"/>
</div>
Ради полосы оно того не стоит))) Можно было это сделать Одним Дивом(это решение мне самому подсказал один хороший человек на форуме)

А не поделишься опытом как это сделать?))

2) Картинки плохого качества очень

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

3) Использования мусора типа этого <div class="clear"/>

Почему мусор,что в нём плохого то?

4) <input type="text" class="input" /> должен быть помещён в <form>
5)  должно быть в head

ок,это я учту)Спасибо за ответ.

jackus · July 15, 2009

3) Использования мусора типа этого <div class="clear"/>

А покажи пожайлуста, как по другому, правильно применить свойство clear:both;

psywalker · July 15, 2009

1)

1) Очень много ненужных элементов
Вот это паразило вообще
<div class="borders">
<div class="left_border"/>
<div class="right_border"/>
<div class="centr_border"/>
</div>
Ради полосы оно того не стоит))) Можно было это сделать Одним Дивом(это решение мне самому подсказал один хороший человек на форуме)
А не поделишься опытом как это сделать?))

Поделюсь с удовольствием!

По бокам Бордеры нужной длины, а по середине картинка- фон, линия, которая нужна

2)

3) Использования мусора типа этого <div class="clear"/>
Почему мусор,что в нём плохого то?
А покажи пожайлуста, как по другому, правильно применить свойство clear:both;

Потому что это хлам, который засоряет код и без которого можно обойтись, если правильно верстать, вот один пример: Есть свойство overflow:hidden; - оно должно вешаться на блок, в котором есть Блоки с Флоат, и всё! - как пример, потом Подвалу например можно поставить clear: both; - если вы помните, что такое вообще есть.

Cabalist · July 18, 2009

Update: Немного оптимизировал макет. Что сделано:

1. Убраны лишние блоки,особенно блоки для линий,благодаря способу который мне посоветовал psywalker (за что ему отдельное спасибо), удалось уложиться в два дива

2. Убраны блоки с классом "clear"(можно и без обойтись )

3. Картинки теперь хорошего качества.

4. Стили для ИЕ6 находятся в <head>,а не как раньше перед ним.

5. <input type="text" class="input" /> теперь заключен в <form> и в <fieldset> для валидности.

6. Код страницы немножко сжат,при небольшой потере читаемости (это не страшно я считаю ).

Хотелось бы услышать комментарии по теперешней вёрстке.

gadjet · July 20, 2009

width="200"
В природе не существует.
		<div class="bottom_lines">

			<div class="left_line"></div>

			<div class="right_line">


				<div class="borders">

					<div class="left_border"></div>

					<div class="right_border"></div>

					<div class="centr_border"></div>

				</div>

			</div>

		</div>
О господи, кто же так делает, то а? Нет ну бывают уникальные случаи когда нужно поставить несколько пустых дивов подряд, но здесь можно и обойтись.
Слишком много пустых блоков, укажите нормальную кодировку, и к чему вам такой доктайп?

где то читал что <div> не может содержать в себе другие <div>. Так все таки нельзя или нежелательно?

Cabalist · July 20, 2009

где то читал что <div> не может содержать в себе другие <div>. Так все таки нельзя или нежелательно?

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

Sign In

Вёрстка макета FirstOrange

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information