3 replies [Last post]
ProPokerUK
ProPokerUK's picture
Offline
newbie
Reading, UK
Last seen: 4 weeks 3 days ago
Reading, UK
Joined: 2017-11-05
Posts: 10
Points: 16

Hi

Newbie here.

Starting a website/Blog, Might use WordPress when this has been completed.

First page of ProPokerUK - a "holding page" - hoping to use button to change picture.

Problems ...

  1. HEADING - text should be left-aligned, but there is a gap at left side (padding/margin ?)
  2. PICTURE - want the image at edges of frame -
  3. frame is full width, should be columns 1-4.
  4. BUTTUN - should occupy space right/bottom of the PICTURE.
ProPokerUK
ProPokerUK's picture
Offline
newbie
Reading, UK
Last seen: 4 weeks 3 days ago
Reading, UK
Joined: 2017-11-05
Posts: 10
Points: 16

Files

HTML ...

 
<!DOCTYPE html>
<html lang="en">
 
<head>
	<title>TestSite ... Grid ... ProPokerUK  </title>			
	<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="Styles/reset.css" >		
	<link rel="stylesheet" type="text/css" href="Styles/ts-Grid.css" >
	<meta charset="utf-8" />	
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
 
<body >
 
	<div class="wrapper">
 
		<div class="grid">
			<header id="heading">ProPokerUK</header>
 
			<div id="picture"><img src="images/ts-p-img-01.jpg" width="auto" /></div>
			<div id="buttun">Buttun</div>
 
			<div id="story"><h1>Story</h1> 
				<p> Once upon a time ... </p>
			</div>
			<footer id="footta"> &nbsp;   copyright &nbsp; &#169ProPokerUK, 2017 &nbsp;   </footer>
		</div>
 
	</div>

.
.
.
CSS ...
html,
body {
  max-width: 980px;
  margin: auto;
  font-family: "Space Mono", sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  background-color: #323232;
}
 
* {box-sizing: border-box;}
 
.grid {
	display: grid;
	grid-template-columns: [content-start] 1fr [content-end];	
	grid-template-rows: auto [content-start] auto [content-end];
	grid-gap: 1em;
} 
.grid > div {
  display: inline-block;
}
 
@media (min-width: 540px) {
	.grid {
		grid-template-columns: [content-start] 1fr [content-end];	
		grid-template-rows: auto [content-start] auto [content-end];
		grid-gap: 1em;	
	}
	.grid > div {
		display: inline-block;
	}
}
 
#heading {
	grid-column: 1 / -1;
	grid-row: 1;
	border: 3px solid red;
	border-radius: 1em;
	background-color: grey;  
	font-family: "Berkshire Swash";
	font-style: italic;	
	font-size: 9em;
	text-align: left;
	color: crimson; 
	padding: 0.5em;	
}
 
#picture {
	grid-column; 1 / 4;
	grid-row: 2 / 3;
	border: 0.5em solid yellow;
	border-radius: 0.5em;
	background-color: #323232; 	
	color: royalblue;
	padding: none;	
}	
 
#buttun { 	
	grid-column; 5;
	grid-row: 3;
	border: 3px solid skyblue;
	border-radius: 7px;
	background-color: green;
	color: yellow;	
	padding: 0.5em;	
}
 
#story {
	grid-column; 1 / 4;
	grid-row: 4 / 5;
	border: 3px solid coral;
	border-radius: 7px;
	background-color: crimson; 
	font-size: 1em;
	color: coral;
	padding: 0.5em;	
}
 
#footta {
	grid-column; 1 / -1;
	grid-row: 5;
	border: 3px solid red;
	border-radius: 7px;
	background-color: brown; 
	font-size: 0.50em; 
	color: black;
	text-align: center;
	padding: 0.5em;	
}
 
h1 {
	font-size: 1em;
	font-weight: 800;
}
 

.... Hoping you will have CSS-Reset files.
.... Also hoping you can substitute an image of your own.
.... Cannot see any way of uploading files.
Laughing out loud

ProPokerUK
ProPokerUK's picture
Offline
newbie
Reading, UK
Last seen: 4 weeks 3 days ago
Reading, UK
Joined: 2017-11-05
Posts: 10
Points: 16

Just noticed the "File Attachments" link !

Herewith the files I have ...

PICTURE ... ts-p-img-01.jpg

RESET css ... reset.txt (change to "reset.css")
........

AttachmentSize
ts-p-img-01.jpg 50.51 KB
reset.txt 1.11 KB
qball777
qball777's picture
Offline
newbie
Last seen: 3 weeks 1 day ago
Joined: 2017-11-25
Posts: 5
Points: 6

Not completely sure I

Not completely sure I understand what you are asking for here.

HEADING - text should be left-aligned, but there is a gap at left side (padding/margin ?)
If you remove this line padding: 0.5em; from #story you text will have no padding

PICTURE - want the image at edges of frame -
frame is full width, should be columns 1-4.

Left or Right??

BUTTUN - should occupy space right/bottom of the PICTURE. Not sure what you are trying to achieve here?