From 8f0a5a66ab818863f0eeedef5b3b39f8dbfe360c Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 14:09:05 -0400 Subject: [PATCH 1/8] completed 1-5 --- my-styles.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/my-styles.css b/my-styles.css index f7d02e4..5c471b6 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,29 @@ /* Your Stylesheet */ /* All your edits should go here */ +#display-01 div { + display: inline; + border: 1px solid blue; + margin: 10px; +} +#display-02 { + padding: 0px; +} + +#display-02 span { + display: block; + border: 1px solid red; + border-width: 100%; +} + +#display-03 div { + display: inline-block; + border: 1px solid green; + width: 50px; + height: 50px; +} + +#display-04 div:first-child { + color: white; +} From 4b74c8a14e5a9c441b10c981ec5c7a73e8f9ae2c Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 14:26:43 -0400 Subject: [PATCH 2/8] complete 5 --- my-styles.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/my-styles.css b/my-styles.css index 5c471b6..1714493 100644 --- a/my-styles.css +++ b/my-styles.css @@ -27,3 +27,16 @@ #display-04 div:first-child { color: white; } + +#display-05 { +} +#display-05 a { + display: inline-block; + position: absolute; + padding-top: 10px; + background-color: pink; + border: 1px solid pink; + width: 50%; + left: 25%; + top: 25%; +} From 577b52fb98b35d034ce35ce31cada2e2890d0e33 Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 15:09:26 -0400 Subject: [PATCH 3/8] boxmodel 1 & 2 --- my-styles.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/my-styles.css b/my-styles.css index 1714493..1227021 100644 --- a/my-styles.css +++ b/my-styles.css @@ -28,8 +28,6 @@ color: white; } -#display-05 { -} #display-05 a { display: inline-block; position: absolute; @@ -40,3 +38,21 @@ left: 25%; top: 25%; } + +#boxmodel-01 div { + margin: 0 auto; + border: 7px solid black; + padding: 20px; + width: 50%; + } + + +#boxmodel-02 { + padding: 40px; +} +#boxmodel-02 div { + margin: 0 auto; + border: 7px solid black; + padding: 20px; + width: 50%; +} From dd7c0ef6e4dfa7818734b0a5f1055e9df186c231 Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 15:19:23 -0400 Subject: [PATCH 4/8] float 1 & 2 --- my-styles.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/my-styles.css b/my-styles.css index 1227021..0e0b6a8 100644 --- a/my-styles.css +++ b/my-styles.css @@ -56,3 +56,19 @@ padding: 20px; width: 50%; } + +#float-01 img { + float: left; + margin-right: 10px; + margin-bottom: 5px; + margin-top: 20px; +} +#float-02 { + text-align: justify; +} +#float-02 img { + float: right; + margin-left: 10px; + margin-bottom: 5px; + margin-top: 20px; +} From f2cdc041e9e2501538a5578346d230eab567190d Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 15:40:33 -0400 Subject: [PATCH 5/8] float 4 & 5 --- my-styles.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/my-styles.css b/my-styles.css index 0e0b6a8..a3999cd 100644 --- a/my-styles.css +++ b/my-styles.css @@ -63,12 +63,38 @@ margin-bottom: 5px; margin-top: 20px; } + #float-02 { text-align: justify; } + #float-02 img { float: right; margin-left: 10px; margin-bottom: 5px; margin-top: 20px; } + +#float-03 img { + float: left; + margin: 20px; +} + +.clear { + clear: left; +} + +#float-04 img { + float: left; + margin: 20px; +} + +#float-04 div { + background-color: aliceblue; +} + +#float-04 div:after { + content: ""; + display: table; + clear: both; +} From ec7bf45a490de9094af2949aeffdd9678738ea20 Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 15:56:13 -0400 Subject: [PATCH 6/8] float 4 & 5 --- my-styles.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/my-styles.css b/my-styles.css index a3999cd..d9df0ec 100644 --- a/my-styles.css +++ b/my-styles.css @@ -98,3 +98,19 @@ display: table; clear: both; } +#float-05 { + text-align: justify; +} + +#float-05 p:first-child { + box-sizing: content-box; + width: 45%; + float: left; + padding: 13px; + border-right: 1px solid black; +} + #float-05 p { + width: 45%; + float: right; + + } From 5affec9ea208b2a52a516a035e4b633364024f33 Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 16:20:47 -0400 Subject: [PATCH 7/8] as far as i got with float 6 --- my-styles.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/my-styles.css b/my-styles.css index d9df0ec..089eb4e 100644 --- a/my-styles.css +++ b/my-styles.css @@ -114,3 +114,21 @@ float: right; } + +#float-06 p:first-child { + box-sizing: content-box; + width: 40%; + float: left; + padding-right: 15px; + border-right: 1px solid black; + } +#float-06 p :nth-child(2) { + width: 40%; + padding-left: 10px; +} + +#float-06 div p:after { + content: ""; + display: table; + width: 100%; + clear: both; From b12267513c21da0c9ebce4c0e44526ed736bff45 Mon Sep 17 00:00:00 2001 From: Katherine Mundale Date: Thu, 19 Sep 2019 23:40:39 -0400 Subject: [PATCH 8/8] flaot & positioning lab --- my-styles.css | 37 ++++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/my-styles.css b/my-styles.css index 089eb4e..94f8792 100644 --- a/my-styles.css +++ b/my-styles.css @@ -117,14 +117,13 @@ #float-06 p:first-child { box-sizing: content-box; - width: 40%; + width: 45%; float: left; padding-right: 15px; border-right: 1px solid black; } #float-06 p :nth-child(2) { - width: 40%; - padding-left: 10px; + margin-left: } #float-06 div p:after { @@ -132,3 +131,35 @@ display: table; width: 100%; clear: both; +} +#position-01 div { + border: 1px solid red; + width: 40px; + height: 40px; + background-color: red; +} +#position-01 div:nth-child(even){ + position: relative; + margin-left: 42px; +} +#position-02 div { + border: 1px solid blue; +} +#position-02 span { + position: absolute; + top: 10px; +} + + + + + + + + + + + + + +