From 37866417c81fa628c0b2c1c3256ae69b5aafd37a Mon Sep 17 00:00:00 2001 From: Artem Date: Sat, 3 Nov 2012 13:59:43 +0500 Subject: [PATCH 1/7] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=201.1=20=D0=B8=202.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1_1.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2_1.html | 30 ++++++++++++++ 2 files changed, 146 insertions(+) create mode 100644 1_1.html create mode 100644 2_1.html diff --git a/1_1.html b/1_1.html new file mode 100644 index 0000000..f662e70 --- /dev/null +++ b/1_1.html @@ -0,0 +1,116 @@ + + + +Выравнивание 1.1 + + + + +
Блок 100х100 1 Способ
+
+6 способ + +
+
Блок 100х100 2 Способ
+ ++ + + + + +
+
Блок 100х100 3 Способ
+ 		+
+
+
Блок 100х100 4 Способ
+
+
Блок 100х100 5 Способ
+ + diff --git a/2_1.html b/2_1.html new file mode 100644 index 0000000..1567053 --- /dev/null +++ b/2_1.html @@ -0,0 +1,30 @@ + + + + +Раскладка 2.1 + + + + +
Левая колонка = 300 px
+
Правая колонка = все остальное
+ + From fa168f86ab950c2c887d406c1261bd3c2569928d Mon Sep 17 00:00:00 2001 From: Alex Kolpakov Date: Wed, 7 Nov 2012 21:14:13 +0700 Subject: [PATCH 2/7] =?UTF-8?q?=D0=A6=D0=B5=D0=BD=D1=82=D1=80=D0=B8=D1=80?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=BB=D0=BE=D0=BA?= =?UTF-8?q?=D0=B0=20=D1=80=D0=B5=D0=B7=D0=B8=D0=BD=D0=BE=D0=B2=D0=BE=D0=B3?= =?UTF-8?q?=D0=BE=20=D0=BF=D0=BE=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B5=20?= =?UTF-8?q?=D0=BF=D0=BE=20=D0=B3=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D0=BB=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Было использовано два метода. jQuery используется для удобства просмотра кода в действии, для позиционирования блоков - только CSS. --- dz-3/dz-3(1.2).html | 79 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 dz-3/dz-3(1.2).html diff --git a/dz-3/dz-3(1.2).html b/dz-3/dz-3(1.2).html new file mode 100644 index 0000000..6e0239a --- /dev/null +++ b/dz-3/dz-3(1.2).html @@ -0,0 +1,79 @@ + + + + + dz-1.2 + + + + + + + +
+
Общие стили

+* {margin: 0; padding: 0;}
+
+body, html { text-align: center; }
+
+div {
+	max-width: 800px;
+	height: 80px;
+	padding: 10px;
+	background: #ffffa2;
+	border: 1px solid red;
+	text-align: left;
+}
+
+
Стили для центрируемых блоков

+#box-1 { 
+	display: table;
+	margin: 20px auto;
+}
+
+#box-2 {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+
jQuery используется только для добавления и скрытия текста.

+$(function() {
+	$('a').toggle(function() {
+		$(this).text('HIDE TEXT').next().fadeIn(300);
+	}, function() {
+		$(this).text('ADD TEXT').next().fadeOut(200);
+	});
+});
+
+
+ +
+

ADD TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+

ADD TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + + From 8ff33be2584f6beda79805aaa5550ef0e0bdb1cb Mon Sep 17 00:00:00 2001 From: Alex Kolpakov Date: Wed, 7 Nov 2012 21:15:36 +0700 Subject: [PATCH 3/7] =?UTF-8?q?=D0=A6=D0=B5=D0=BD=D1=82=D1=80=D0=B8=D1=80?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=BB=D0=BE=D0=BA?= =?UTF-8?q?=D0=B0=20=D1=81=20=D1=84=D0=B8=D0=BA=D1=81=D0=B8=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B=D0=BC=D0=B8=20=D1=80=D0=B0=D0=B7?= =?UTF-8?q?=D0=BC=D0=B5=D1=80=D0=B0=D0=BC=D0=B8=20=D0=BF=D0=BE=20=D0=B3?= =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD=D1=82=D0=B0=D0=BB=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Использовано четыре метода. --- dz-3/dz-3(1.1).html | 101 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 dz-3/dz-3(1.1).html diff --git a/dz-3/dz-3(1.1).html b/dz-3/dz-3(1.1).html new file mode 100644 index 0000000..be6fd41 --- /dev/null +++ b/dz-3/dz-3(1.1).html @@ -0,0 +1,101 @@ + + + + + dz-1.1 + + + +
+
+
Общие стили
body { text-align: center; }
+
+#box-1, #box-2, #box-3, #box-4 {
+	width: 88px;
+	height: 88px;
+	padding: 5px;
+	margin-top: 30px;
+	border: 1px solid #000;
+	font: normal 12px Arial;
+	text-align: left;
+}
+
+
+ +
+ + #box-1 { margin: 0 auto; } + +
+ +
+ + #box-2 { + display: inline-block; + } + +
+ +
+ + #box-3 { + position: relative; + left: 50%; + margin-left: -50px; + } + +
+ +
+ + #box-4 { + position: absolute; + left: 50%; + margin-left: -50px; + } + +
+ + + From 80ddaeff18c7a1e3d713063d6d2b108fe3833c8a Mon Sep 17 00:00:00 2001 From: Alex Kolpakov Date: Wed, 7 Nov 2012 21:17:33 +0700 Subject: [PATCH 4/7] =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D0=B5=D1=82=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20=D0=B8=D0=B7=20?= =?UTF-8?q?=D0=B4=D0=B2=D1=83=D1=85=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BE?= =?UTF-8?q?=D0=BA=20=E2=84=961?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Страница из двух колонок, левая шириной 300px, правая занимает всё оставшееся пространство. --- dz-3/dz-3(2.1).html | 52 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 dz-3/dz-3(2.1).html diff --git a/dz-3/dz-3(2.1).html b/dz-3/dz-3(2.1).html new file mode 100644 index 0000000..6aa42e3 --- /dev/null +++ b/dz-3/dz-3(2.1).html @@ -0,0 +1,52 @@ + + + + + dz-3(2.1) + + + +
+
+ +
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...HIDE TEXT do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...HIDE TEXT do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...HIDE TEXT do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ + + From cf6e63bfce5496debc0756392f41bb8b1a6744b8 Mon Sep 17 00:00:00 2001 From: Alex Kolpakov Date: Wed, 7 Nov 2012 21:19:24 +0700 Subject: [PATCH 5/7] =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D0=B5=D1=82=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20=D0=B8=D0=B7=20?= =?UTF-8?q?=D0=B4=D0=B2=D1=83=D1=85=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BE?= =?UTF-8?q?=D0=BA=20=E2=84=962?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Для удобства просмотра кода в действии используется jQuery, для позиционирования - только CSS/ --- dz-3/dz-3(2.2).html | 101 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 dz-3/dz-3(2.2).html diff --git a/dz-3/dz-3(2.2).html b/dz-3/dz-3(2.2).html new file mode 100644 index 0000000..08c8929 --- /dev/null +++ b/dz-3/dz-3(2.2).html @@ -0,0 +1,101 @@ + + + + + dz-3(2.2) + + + + + + +
+
HEADER
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+	
+	article {
+		background: #ececec;
+		min-height: 300px;
+		min-width: 960px;
+		padding: 10px;
+	}
+
+
+
+ +
+
FOOTER
+ + + From 4920c42b990df64a66399a076de0f9c358976fa1 Mon Sep 17 00:00:00 2001 From: Alex Kolpakov Date: Wed, 7 Nov 2012 21:20:32 +0700 Subject: [PATCH 6/7] =?UTF-8?q?=D0=91=D0=BE=D0=BD=D1=83=D1=81=20=E2=84=961?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Центрирование блоков с фиксированными размерами по вертикали. Использовано два способа. --- dz-3/dz-3(bonus-1).html | 78 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 dz-3/dz-3(bonus-1).html diff --git a/dz-3/dz-3(bonus-1).html b/dz-3/dz-3(bonus-1).html new file mode 100644 index 0000000..a816e2e --- /dev/null +++ b/dz-3/dz-3(bonus-1).html @@ -0,0 +1,78 @@ + + + + + dz-3(bonus-1) + + + + +
+
+ +
+
Общие стили

+* {margin: 0; padding: 0;}
+body, html {width: 100%; height: 100%;}
+
+div {
+	float: left;
+	margin-left: 50px;
+	width: 78px;
+	height: 78px;
+	padding: 10px;
+	background: #ffffa2;
+	border: 2px solid red;
+}
+
+
Стили для центрируемых блоков

+
+#box-1 {
+	position: relative;
+	top: 50%;
+	margin-top: -50px;
+}
+
+#box-2 {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 200px;
+}
+
+
+ + + From dcc084b0244f629765393642e587aba5a583b659 Mon Sep 17 00:00:00 2001 From: Alex Kolpakov Date: Wed, 7 Nov 2012 21:22:01 +0700 Subject: [PATCH 7/7] =?UTF-8?q?=D0=91=D0=BE=D0=BD=D1=83=D1=81=20=E2=84=962?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Выравнивание элемента с шириной 100px и высотой по содержимому по центру страницы по вертикали. Использован один способ. --- dz-3/dz-3(bonus-2).html | 84 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 dz-3/dz-3(bonus-2).html diff --git a/dz-3/dz-3(bonus-2).html b/dz-3/dz-3(bonus-2).html new file mode 100644 index 0000000..0889094 --- /dev/null +++ b/dz-3/dz-3(bonus-2).html @@ -0,0 +1,84 @@ + + + + + dz-3(bonus-2) + + + + + + + +
+
+
+ ADD TEXT +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+ +
+#wrapper {
+	display: table;
+	width: 100px;
+	height: 100%;
+	margin: 0 auto;
+}
+
+#table-cell {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+div#inside {
+	width: 78px;
+	padding: 10px;
+	background: #ffffa2;
+	border: 2px solid red;
+}
+
+ + +