2 replies [Last post]
ProPokerUK
ProPokerUK's picture
Offline
Regular
Reading, UK
Last seen: 34 weeks 14 hours ago
Reading, UK
Timezone: GMT+1
Joined: 2017-11-05
Posts: 11
Points: 18

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

 ProPokerUK  

images/pp-img1.jpg

Button

Under ConstructionIf you need to you can   contact us   by email.    
  Otherwise we shall be online soon !

  copyright   &#169ProPokerUK, 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; 
}

ProPokerUK
ProPokerUK's picture
Offline
Regular
Reading, UK
Last seen: 34 weeks 14 hours ago
Reading, UK
Timezone: GMT+1
Joined: 2017-11-05
Posts: 11
Points: 18

Files attached ...

Code files attached as .txt files .... HTML code in the query only shows the result.

AttachmentSize
testIndex.txt 1.48 KB
testCSS.txt 3.64 KB
ProPokerUK
ProPokerUK's picture
Offline
Regular
Reading, UK
Last seen: 34 weeks 14 hours ago
Reading, UK
Timezone: GMT+1
Joined: 2017-11-05
Posts: 11
Points: 18

Simple .txt file attachments ???

Previous attached files supposedly in a non-existent tmp folder.

https://tmp/testIndex.txt

Actual html code of the page's INDEX file cannot be seen (it gets translated !)

Crazy