• Locked
3 replies [Last post]
Sun, 2017-11-05 05:08
ProPokerUK
ProPokerUK's picture
Offline
Regular
Reading, UK
Last seen: 4 years 40 weeks ago
Reading, UK
Timezone: GMT+1
Joined: 2017-11-05
Posts: 11
Points: 18

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.

Top
Tags:
Sun, 2017-11-05 05:36
#1
ProPokerUK
ProPokerUK's picture
Offline
Regular
Reading, UK
Last seen: 4 years 40 weeks ago
Reading, UK
Timezone: GMT+1
Joined: 2017-11-05
Posts: 11
Points: 18

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

Top
Sun, 2017-11-05 05:03
#2
ProPokerUK
ProPokerUK's picture
Offline
Regular
Reading, UK
Last seen: 4 years 40 weeks ago
Reading, UK
Timezone: GMT+1
Joined: 2017-11-05
Posts: 11
Points: 18

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
Top
Sat, 2017-11-25 21:08
#3
qball777
qball777's picture
Offline
newbie
Last seen: 5 years 9 weeks 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?

Top
  • Locked