From 0c0e8090238d789db526b0ed87d352791072d3ec Mon Sep 17 00:00:00 2001 From: Daniel Monville Date: Thu, 19 Sep 2019 13:41:53 -0400 Subject: [PATCH 1/6] Fixxed #display-01 words inside added thin blue lines and spaces --- my-styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/my-styles.css b/my-styles.css index f7d02e4..4ff68f8 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,8 @@ /* Your Stylesheet */ /* All your edits should go here */ - +div { + display: inline; + border: solid blue thin; + margin: 20px; +} From f908beeec5f2f687866f37d5a12f32d1d616fc3f Mon Sep 17 00:00:00 2001 From: Daniel Monville Date: Thu, 19 Sep 2019 13:57:40 -0400 Subject: [PATCH 2/6] Fixxed #display-02 separted lines and surronded words with red lines --- my-styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/my-styles.css b/my-styles.css index 4ff68f8..8a1a423 100644 --- a/my-styles.css +++ b/my-styles.css @@ -6,3 +6,7 @@ div { border: solid blue thin; margin: 20px; } +span { + display: block; + border: solid red thin; +} From 9bfe6885b71b1652c92ceb6cb1a348ade7270a70 Mon Sep 17 00:00:00 2001 From: Daniel Monville Date: Thu, 19 Sep 2019 14:39:00 -0400 Subject: [PATCH 3/6] Fixxed specificity and #display-03 got all on single thing green line and box boarder --- my-styles.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/my-styles.css b/my-styles.css index 8a1a423..dd99c95 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,12 +1,19 @@ /* Your Stylesheet */ /* All your edits should go here */ -div { - display: inline; +#display-01 div { + display: inline-block; border: solid blue thin; margin: 20px; } -span { +#display-02 span { display: block; border: solid red thin; } + +#display-03 div { + display: inline-block; + width: 100px; + height: 100px; + border: solid green thin; +} From 72115e6dead213e3ac3d8250df0781d3a301c5ca Mon Sep 17 00:00:00 2001 From: Daniel Monville Date: Thu, 19 Sep 2019 14:51:02 -0400 Subject: [PATCH 4/6] Fixxed #display-04 made the first context line hidden --- my-styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/my-styles.css b/my-styles.css index dd99c95..4c7c274 100644 --- a/my-styles.css +++ b/my-styles.css @@ -17,3 +17,7 @@ height: 100px; border: solid green thin; } + +#display-04 div:nth-of-type(odd) { + visibility: hidden; +} From b3b618d4d7d77cc7e449791f7696ce84fc0c50da Mon Sep 17 00:00:00 2001 From: Daniel Monville Date: Thu, 19 Sep 2019 20:23:31 -0400 Subject: [PATCH 5/6] Fixxed display 4 and did #float 1-4 --- my-styles.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/my-styles.css b/my-styles.css index 4c7c274..496cfcd 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,6 +1,12 @@ /* Your Stylesheet */ /* All your edits should go here */ +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} #display-01 div { display: inline-block; border: solid blue thin; @@ -18,6 +24,67 @@ border: solid green thin; } -#display-04 div:nth-of-type(odd) { +#display-04 div:nth-of-type(1) { visibility: hidden; } + +#display-05 a { + display: inline-block; + box-sizing: border-box; + background: gray; + width: 50%; + padding: 5%; + margin-left: 25%; +} + + #boxmodel-01 div { + margin-left: 25%; + margin-right: 25%; + border: solid thick green; + padding: 3%; +} + +#boxmodel-02 div { + box-sizing: border-box; + width: 50%; + margin-left: 25%; + margin-right: 25%; + border: solid thick green; + padding: 3%; +} + +#float-01 img { + float: left; + margin-top:5%; + margin-right: 5%; + margin-bottom: 5%; +} + +#float-02 img { + float: right; + margin-top: 5%; + margin-left: 5%; + margin-bottom: 5%; +} + + +#float-03 img { + float: left; + margin: 20px; +} +#float-03 p.clear { + clear: both; +} + +#float-04 img { + float: left; + margin-left: 5px; + margin-top: 5px; + margin-right: 5px; + margin-bottom: 5px; +} + +#float-04 div { +background-color: lightblue; +display: flow-root; +} From fce383161504f2512abe5375708dfdde1aa94e4d Mon Sep 17 00:00:00 2001 From: Daniel Monville Date: Fri, 20 Sep 2019 11:19:55 -0400 Subject: [PATCH 6/6] Finshed #floats and #position except for 5 --- my-styles.css | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) diff --git a/my-styles.css b/my-styles.css index 496cfcd..7b88e63 100644 --- a/my-styles.css +++ b/my-styles.css @@ -88,3 +88,144 @@ html { background-color: lightblue; display: flow-root; } + +#float-05 p:nth-of-type(1) { + float: left; + border-right: solid 1px; + padding: 15px; + width: 50%; +} + +#float-05 p:nth-of-type(2) { + float: right; + padding: 15px; + width: 50%; +} + +#float-06 p { + box-sizing: border-box; +} + +#float-06 div p:first-child { + float: left; + border-right: solid 2px; + padding: 20px; + width: 50%; +} + +#float-06 div p:last-child { + float: right; + padding: 20px; + width: 50%; +} + +#float-06 div::after { + display: block; + clear: both; + content: ""; +} + +#position-01 div { + width: 50px; + height: 50px; + background-color: red; +} + +#position-01 div:nth-child(even) { + position: relative; + left: 50px; +} + +#position-02 div { + border: solid 1px; +} + +#position-02 span:first-child { + position: absolute; + top: 0px; + left: 0px; +} + +#position-02 span:nth-child(2) { + position: absolute; + top: 0px; + right: 0px; +} + +#position-02 span:nth-child(3) { + position: absolute; + bottom: 0px; + right: 0px; +} + +#position-02 span:nth-child(4) { + position: absolute; + bottom: 0px; + left: 0px; +} + +#position-03 div { + position: relative; + border: solid 1px; + height: 100px; +} + +#position-03 span:nth-child(1) { + position: absolute; + top: 0px; + left: 0px; +} + +#position-03 span:nth-child(2) { + position: absolute; + top: 0px; + right: 0px; +} + +#position-03 span:nth-child(3) { + position: absolute; + bottom: 0px; + right: 0px; +} + +#position-03 span:nth-child(4) { + position: absolute; + bottom: 0px; + left: 0px; +} + +section#position-04 { + position: static; +} + +#position-04 div { + position: absolute; + top: 15px; + left: 15px; +} + +#position-06 div { + background-color: lavender; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; +} + +#position-07 a { + position: fixed; + bottom: 0px; + right: 0px; + padding-top: 10px; + padding-right: 20px; + padding-bottom: 5px; + padding-left: 20px; + background-color: lightblue; + color: lightblue; + z-index: 3; +} + +#position-07 a:hover { + background-color: Red; +}