Here is my code.
The "article" block should be on 4th line (below the picture). Full width (as header/footer).
The "button" should be on 3rd line, at the bottom (next to the bottom-right corner of the picture.
Any advice on positioning/placement would be welcome, as would any other observations with regards to the code.
Code listings below ...
HTML ...
TestSite >>> ProPokerUK ... testIndex.html ... testCSS.css

Under ConstructionIf you need to you can contact us by email.
Otherwise we shall be online soon !
copyright ©ProPokerUK, 2017
...
CSS ...
.
<!-- TestSite >>> Testing ... testIndex.html ... testCSS.css --> <!-- ======================================================== --> * html { font: 2em Georgia, sans-serif; color: #7b7b7b; clear: both; float: justify; } body { margin: 2em, 4em, 0.5em, 4em; padding: 1em, 4em, 1em, 4em; width: 55em; height: auto; background-color: tan; } .imgclass { border: 0.25em solid yellow; margin-left: 1em; padding-left: 0; } .wrapper { display: grid; grid-gap: 2em; grid-template-columns: (75% 25%); grid-template-areas: "header header" "content button" "article article" "footer footer"; background: tan: margin-top: 2em; margin-left: 1em; color: teal; width: 100%; } .box { color: white; border-radius: 0.5em; padding: 0, 2em, 0, 2em; margin: 0, 0, 0, 2em; } .header { grid-area: header; position: relative; margin-left: 1em; padding-left: 1em; border: 1em; border-color; white; height: auto; } .picholder { grid-template-columns: 1 -1; grid-template-rows: 2 3; } .picture { grid-area: picture; position: relative; margin-left: 1em; } .button { grid-area: button; grid-template-columns: 2; grid-template-rows: 3; position: relative; } .article { grid-area: article; grid-template-columns: 1 -1; grid-template-rows: 4; position: relative; } .footer { grid-area: footer; background-color: maroon; text-align: center; padding: 0.5em, 0, 0, 0; height: 2em; } h1 { font-size: 1em; color: blue; margin: 1em; } h2 { font-size: 0.75em; color: white; margin: 1em; } h3 { font-size: 1em; color: white; margin: 1em; } t1 { font: 400 100px/1.3 'Berkshire Swash', sans-serif; color: red; text-shadow: 1px 1px 0px #fdfdfd, 4px 4px 0px rgba(0,0,0,0.15); font-style: italic; font-weight: 600; background: grey; } t2 { font-family: 'Georgia', sans-serif; color: black; text-align: center; font-size: 0.6em; margin: 0.2em; padding: 0.2em; } a { color: #dc8100; text-decoration: none; } a:hover { color: #333; text-decoration: none; }
Files attached ...
Code files attached as .txt files .... HTML code in the query only shows the result.
Attachment | Size |
---|---|
testIndex.txt | 1.48 KB |
testCSS.txt | 3.64 KB |
Simple .txt file attachments ???
Previous attached files supposedly in a non-existent tmp folder.
Actual html code of the page's INDEX file cannot be seen (it gets translated !)