Sponsored By

Dragon

need a little help with html 5 and css3 coding

Recommended Posts

ok time for some guru's to help an old fart out. I'm trying to code a personal page in html 5 and css3. It's just a little personal web gallery for my personal server so it won't see the WWW. I'm running into a little problem tho. I have my images showing with no problems, my problem lies in positioning them. I want a clean css3 layout using html 5 for this design. my screen has all the images in a row, 5 total, but I want them to be laid out in the classic 5 look. four corners and one in the center.

here is my css

body {
	background-color: #297FC1;
}
IMG.displayed {
	display: block;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 50px;
}

IMG.right {
	border: 3px solid #000000;
	width: 300px;
	height: 500px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 25px;
	float: right;
	position: relative;
}
IMG.center {
	border: 3px solid #000000;
	display: block;
   margin: auto;
   position: relative;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
	width: 500px;
	height: 300px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 25px;
	float: none;
}
IMG.left{
	border: 3px solid #000000;
	width: 300px;
	height: 500px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 25px;
	float: left;
	position: relative;
}
footer {
	font-size: 4px;
	font-style: normal;
	padding-bottom: 10px;
	position: fixed;
}

here is my html

<!DOCTYPE html>
<html>
<head>
<title>Start Page</title>
<link rel="stylesheet" href="free.css">
</head>
<body>
<IMG class="displayed" src="/pics/header.png" alt="The Freeman's">
<article>
<IMG class="left" src="/pics/vows.jpg" alt="taking the vows of matrimony">
<IMG class="right" src="/pics/rings.jpg" alt="placing rings on fingers">

<IMG class="center" src="/pics/ednkids.jpg" alt="Ed with the Kids">

<IMG class="left" src="/pics/husband&wife.jpg" alt="Kissing the bride">
<IMG class="right" src="/pics/bride&groomafter.jpg" alt="Mr. and Mrs. Freeman">
</article>

</body>
</html>

any and all help needed. TIA

Dragon

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now