Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dz3 #10

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

dz3 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95564e9
task1
ejuo Nov 7, 2012
fc67137
Task2 + bonus
ejuo Nov 8, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions dz3_1.1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>dz3_1.1</title>
<style>
body {
font: .8125em/1.5 Arial, sans-serif;
}
#block1, #block2, #block3 {
width: 100px;
height: 100px;
background-color: blue;
border: solid 1px black;
}
#block1 {
display: block;
margin-left: auto;
margin-right: auto;
}
#block2 {
position: relative;
margin: 0 auto;
}
#block3 {
position: absolute;
left: 50%;
margin-left: -51px;
}
</style>
</head>
<body>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
</body>
</html>
66 changes: 66 additions & 0 deletions dz3_1.2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>dz3_1.2</title>
<style>
body {
font: .8125em/1.5 Arial, sans-serif;
}
.container2 {
float: left;
position: relative;
left: 50%;
}

.container3 {
position: relative;
top: 110px;
left: -43px;
}

#container4 {
top: 120px;
float:right;
position:relative;
right:50%;
}

#block1, #block2, #block3, #block4 {
height: 100px;
background-color: blue;
border: solid 1px black;
}
#block1 {
display: table;
margin: 10px auto;
}
#block2 {
float: left;
position: relative;
left: -50%;
}
#block3 {
display:table;
margin:0 auto;
}
#block4 {
float:left;
position:relative;
left: 50%;
}
</style>
</head>
<body>
<div id="block1">Lorem Ipsum!1</div>
<div class="container2">
<div id="block2">Lorem Ipsum!12</div>
</div>
<div class="container3">
<div id="block3">Lorem Ipsum!123</div>
</div>
<div id="container4">
<div id="block4">Lorem Ipsum!1234</div>
</div>
</body>
</html>
31 changes: 31 additions & 0 deletions dz3_2.1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>dz3_2.1</title>
<style>
body {
font: .8125em/1.5 Arial, sans-serif;
}
.left {
float:left;
width:300px;
background-color:#cdf6ff;
}
.right {
margin-left:300px;
background-color:#59dcd3;
}
</style>
</head>
<body>
<div class="left">
<h1>Left.</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elit nulla, fermentum et laoreet sit amet, porta id nibh. Aliquam est purus, mattis at pretium quis, sodales id erat. Donec auctor vulputate ipsum gravida malesuada. Morbi tellus sapien, convallis sed elementum in, lacinia in tortor. Ut magna nulla, scelerisque ac rhoncus non, malesuada vel urna. Sed eu massa sed odio iaculis luctus. Donec neque nibh, placerat quis dictum ornare, placerat vitae augue. Nunc quis tempus eros. Maecenas in metus arcu, at interdum metus. Vestibulum non porttitor nunc. Etiam fermentum commodo nulla, sit amet sollicitudin lacus pretium bibendum. In nisl elit, dictum nec dignissim vel, venenatis in mi. Cras lacus est, adipiscing eget egestas at, cursus eget diam. Mauris varius libero vel leo iaculis semper. Quisque porttitor lacinia ante a ultricies. Donec tortor velit, tincidunt id viverra at, egestas non odio.
</div>
<div class="right">
<h1>Right.</h1>
Duis vestibulum mi in quam vestibulum lobortis. Integer lorem diam, cursus id vulputate id, volutpat et mi. Phasellus nulla lacus, fringilla vitae suscipit vel, facilisis at mauris. Suspendisse potenti. Morbi erat erat, tempus ut rutrum nec, condimentum quis nibh. Nullam venenatis ipsum non odio varius volutpat. Vestibulum urna augue, pellentesque ac ultricies et, molestie in enim. Nam nunc odio, blandit sed tincidunt vel, sollicitudin vel neque. Duis ac risus enim, at tempus magna. Quisque varius, odio egestas congue euismod, neque eros aliquet nisi, vitae tincidunt urna sapien eget lacus. Mauris adipiscing imperdiet tortor id ornare. Duis ac ligula nibh. Cras vel felis ante. Donec eros velit, laoreet egestas gravida vitae, aliquet et eros.
</div>
</body>
</html>
41 changes: 41 additions & 0 deletions dz3_2.2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>dz3_2.2</title>
<style>
body {
font: .8125em/1.5 Arial, sans-serif;
}
.container {
margin: 0 auto;
min-width: 150px;
max-width: 1280px;
}
.left {
float:left;
min-width:150px;
max-width:300px;
background-color:#cdf6ff;
}

.right {
margin-left: 300px;
background-color:#59dcd3;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h1>Left.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div class="right">
<h2>Right.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions dz3_b.1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>dz3_b.1</title>
<style>
body {
font: .8125em/1.5 Arial, sans-serif;
}
#container{
position: absolute;
top: 50%;
margin-top: -50px;
left: 0;
width: 100%;
}
#block {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="block">
</div>
</div>
</body>
</html>
42 changes: 42 additions & 0 deletions dz3_b.2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>dz3_b.1</title>
<style>
body {
font: .8125em/1.5 Arial, sans-serif;
}
.container_outer {
display: table;
width: 100%;
height: 100%;
position: absolute;
}

.container_inner {
vertical-align: middle;
display: table-cell;
}

.block {
width: 100px;
background-color: #fff;
margin: 0 auto;
text-align: left;
padding: 10px;
background-color:#59dcd3;
}
</style>
</head>
<body>
<div class="container_outer">
<div class="container_inner">
<div class="block">
<h1>Center.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
</div>
</div>
</div>
</body>
</html>