Оцените верстку макета

v01d0s · February 9, 2012

Верстал первое задание с Моя ссылка

сама Верстка

Прошу покритиковать, чо де не так..

Edited February 10, 2012 by v01d0s

ShumNo · February 9, 2012

межстрочные отступы не так

v01d0s · February 10, 2012

Можно поконкретнее, где и что с ними не так?

Edited February 10, 2012 by v01d0s

html232 · February 10, 2012

Если действительно 2-я верстка в жизни, то отлично. Желаю успехов!

v01d0s · February 10, 2012

Большое спасибо

SteeLZzZ · February 10, 2012

Почему english ? :blush:

Edited February 10, 2012 by SteeLZzZ

v01d0s · February 10, 2012

Почему english ?

В макете такой язык был

Yazon_Nile · February 15, 2012

1 Листик в логотипе - тоже его часть - он тоже должен быть кликабельным

2 На странице должен быть только один заголовок первого уровня. В данном случае это явно "Suspendisse felis..."

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

4 div с классом citata не нужен. Все его свойства можно перекинуть на блокквоту.

5 непонятные вещи с огромным маржином на див с классом text. Просто флотни его влево, а divlist - вправо. Естесственно, на оба дива нужна ширина.

6 Старайся вместо верхнего маржина использовать верхний паддинг на родителе.

7 Структура текста должна быть примерно такая: http://imagepost.ru/?v=nazvi-1_1.jpg И стили на h2 и p прописывать от дива.

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

<div class="list">
		<div class="frame">
			<div class="text">
			  text text text text
			</div>
		</div>
	</div>

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

На второй тоже самое, но нижняя часть и соотв. нижний паддинг.

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

9 Фишку с дивом vstavka и отрицательным маржином на футер не понял . Убрал и то, и то - стало аналогично.

10 Высоту задают только в очень редких случаях. Только если разработчик уверен на все 100, что пользователь не захочет чего-то добавить, чтодо дописать и тд. Если такой блок или оставят без изменения, или уберут вообще - только тогда.

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

Пиши)

Edited February 15, 2012 by Yazon_Nile

v01d0s · February 16, 2012

1 Листик в логотипе - тоже его часть - он тоже должен быть кликабельным
2 На странице должен быть только один заголовок первого уровня. В данном случае это явно "Suspendisse felis..."
3 div с классом хелп. Если и вешать класс на этот див, то лучше support - более логичное название. Ну а разрулька с огромным лаин-хеитом это лишнее. В этот див вложи спан и на сам див задай верхний паддинг.
4 div с классом citata не нужен. Все его свойства можно перекинуть на блокквоту.
5 непонятные вещи с огромным маржином на див с классом text. Просто флотни его влево, а divlist - вправо. Естесственно, на оба дива нужна ширина.
6 Старайся вместо верхнего маржина использовать верхний паддинг на родителе.
7 Структура текста должна быть примерно такая: http://imagepost.ru/?v=nazvi-1_1.jpg И стили на h2 и p прописывать от дива.
8 див с классом лист - обычно такие вещи реализуются с помощью трех дивов, вложенных друг в друга и с бекграундами на эти дивы.
<div class="list">
		<div class="frame">
			<div class="text">
			  text text text text
			</div>
		</div>
	</div>
На первый див задается бекграудом верхняя часть твоего блока + ставишь верхний паддинг, чтобы содержимое отступало от верха как раз на высоту изображения.
На второй тоже самое, но нижняя часть и соотв. нижний паддинг.
ну а третий див просто заливаешь цветом, в данном случае.
9 Фишку с дивом vstavka и отрицательным маржином на футер не понял . Убрал и то, и то - стало аналогично.
10 Высоту задают только в очень редких случаях. Только если разработчик уверен на все 100, что пользователь не захочет чего-то добавить, чтодо дописать и тд. Если такой блок или оставят без изменения, или уберут вообще - только тогда.
Ну вот. Это на беглый взгляд - не смотрел дизайн, просто по структуре.
Пиши)

спасибо за полезные советы

v01d0s · February 16, 2012

5 непонятные вещи с огромным маржином на див с классом text. Просто флотни его влево, а divlist - вправо. Естесственно, на оба дива нужна ширина.

назрел вопрос. Если флотнуть text влево , а divlist - вправо - то они выпадают из строя документа и content становиться высотой в 0. Может text всетаки не надо float?

Yazon_Nile · February 17, 2012

Или на врап, или на контент - overflow:hidden. Если нельзя - цветок может обрезаться, то используй афтер

v01d0s · February 18, 2012

Или на врап, или на контент - overflow:hidden. Если нельзя - цветок может обрезаться, то используй афтер

а как его тут использовать не подскажешь?

пробывал вставить

.text:after {clear:both; content: "."; visibility: hidden; display: block; height:0; }

ничего.

Но зато когда добавил в документ после .text пустой див с clear - все норм стало. так можно?

Edited February 18, 2012 by v01d0s

v01d0s · February 18, 2012

Зароботало!

.content:after {
  content: " ";
  clear:both; 
  display: block;

}

Блин я нихрена не могу понять как работает это обтекание :huh:

Yazon_Nile · February 20, 2012

Ну.. Проще самому понять. Объяснить, чтобы стало понятно - сложнее. Попробую

У нас есть div с классом - main.

В нем содержится div с классом float-right и параграф.

html


<div id="main">
	<div class="float-right">
		float-text
	</div>
	<p>
		Some text, that we write here, or here, and many-many times again. Some text, that we write here, or here, and many-many times again. Some text, that we write here, or here, and many-many times again. Some text, that we write here, or here, and many-many times again
	</p>
</div>

Выглядит это просто. Идет надпись float-text, а ниже Some text и тд.

Далее зададим стили для div с классом float-right, чтобы было более наглядно. + чуток стилей на родителя и на параграф.


#main{
	background:#eeb0b7;
}
.float-right{
	background:#f00;
	height:300px;
	width:300px;
}
p{
	margin:0;
}

В итоге - то же самое. float-right (далее ФР) вверху, параграф внизу. Единственное - добавили стилей ФР.

Далее флотнем наконец ФР


.float-right{
	background:#040;
	float:right; <<<
	height:300px;
	width:300px;
}

Что увидим в итоге. ФР сместился вправо. Параграф поднялся (!!!) вверх, но при этом обтекает наш флотнутый див. Сам же main сомкнулся и теперь занимает место равное размерам параграфа - это можно проследить по бекграунду, что мы задали на main.

(кто слышал такую вещт как хезЛейаут - это оно и есть - размеры main теперь полностью зависят от размеров параграфа - хезлейаута нету. Кто не слышал - не вникайте даже) Будет ещё время :lol: )

Наша задача сделать так, чтобы main учитывал и флотнутый в нем ФР! Как это сделать. Есть два способа.

1. Задать на меин overflow:hidden. Описание этого свойства часто вводит тех, кто пытается разобраться в заблуждение. Написано - при переполнении, контент, что выходит за границы - обрезается. Но! Причем здесь флоты и тд? Ответ прост

Переполнение возможно только, если заданы четкие размеры. Высота, ширина. А у нас блок размеры которого зависят от содержимого! Соотв. записывая overflow:hidden в стилях на наш блок, мы как бы застявляем его растягиваться по ВСЕМУ содержимому, что в нем. Или проще - задаем ему hasLayout (по-моему так пишется )


#main{
	background:#eeb0b7;
	overflow:hidden; <<<
}

В итоге увидим, что бекграунд растянулся на всю высоту флотнутого блока.

2. Если оверфлоу хидден поставить по каким-либо причинам нельзя (о причинах лучше потом ) - используется after!


#main{
	background:#eeb0b7;
	width:100%; <<< (!!!)
}
#main:after{
	clear:both;
	content:'';
	display:block;
}

Тут подробнее. Сразу скажу - width:100% - для ИЕ. Остальные и без этого работают. Далее про сам афтер.

ты сам уже попробовал. Если создать пустой блок после нашего - все будет работать. Почему? Всё просто. Этот пустой блок как бы занимает ВСЁ место нашего блока. Включая флотнутый элемент. А потому - все что после этого пустого блока - не "налезают" на флотнутый ФР.

Используя афтер мы делаем тоже самое!


#main:after{ /* - делаем что-то, что будет идти после меина */
	clear:both; /* 3. Он не касает ни к чему с обеих сторон */
	content:''; /* 1. Создаем то, что указано в кавычках, то есть ничего  Пустое место */
	display:block; /* 2. Это "ничто" - блочный элемент! */
}

Всё. Задача выполнена)

Вообще, тема флотов - очень сложна для тех, кто начинает учиться примудростям CSS. Но, считаю, что лучше начать с этого. Ведь это основы расположения элементов на странице..

paracelso · February 20, 2012

1 Листик в логотипе - тоже его часть - он тоже должен быть кликабельным
2 На странице должен быть только один заголовок первого уровня. В данном случае это явно "Suspendisse felis..."
3 div с классом хелп. Если и вешать класс на этот див, то лучше support - более логичное название. Ну а разрулька с огромным лаин-хеитом это лишнее. В этот див вложи спан и на сам див задай верхний паддинг.
4 div с классом citata не нужен. Все его свойства можно перекинуть на блокквоту.
5 непонятные вещи с огромным маржином на див с классом text. Просто флотни его влево, а divlist - вправо. Естесственно, на оба дива нужна ширина.
6 Старайся вместо верхнего маржина использовать верхний паддинг на родителе.
7 Структура текста должна быть примерно такая: http://imagepost.ru/?v=nazvi-1_1.jpg И стили на h2 и p прописывать от дива.
8 див с классом лист - обычно такие вещи реализуются с помощью трех дивов, вложенных друг в друга и с бекграундами на эти дивы.
<div class="list">
		<div class="frame">
			<div class="text">
			  text text text text
			</div>
		</div>
	</div>
На первый див задается бекграудом верхняя часть твоего блока + ставишь верхний паддинг, чтобы содержимое отступало от верха как раз на высоту изображения.
На второй тоже самое, но нижняя часть и соотв. нижний паддинг.
ну а третий див просто заливаешь цветом, в данном случае.
9 Фишку с дивом vstavka и отрицательным маржином на футер не понял . Убрал и то, и то - стало аналогично.
10 Высоту задают только в очень редких случаях. Только если разработчик уверен на все 100, что пользователь не захочет чего-то добавить, чтодо дописать и тд. Если такой блок или оставят без изменения, или уберут вообще - только тогда.
Ну вот. Это на беглый взгляд - не смотрел дизайн, просто по структуре.
Пиши)

Вы молодец

v01d0s · February 21, 2012

Большое спасибо.

Все ясно и понятно.

ShootingStar · February 21, 2012

Сделал этот же макет только фиксированный: link.

Автор использует для позиционирования логотипа position:absolute, что лучше использовать для позиционирования position:absolute или же float:left и потом margin?

Yazon_Nile · February 22, 2012

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

ablay2009 · February 22, 2012

В разных ситуациях по разному.

Кстати насчет межстрочных отступов кто-то правильно заметил, задайте line-heght:1.5

Sign In

Оцените верстку макета

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

Join the conversation

Обсуждения

Important Information