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

Link to post
Share on other sites
  • 5 years later...

Website Design is a very important part of the business world. It is used to reach out to people and sell products or services. Some of the best websites are designed by experts. Explore thisĀ useful source site for hiring best designers. They can make your website look amazing and attractive for customers. I have seen many websites which are designed well by professionals and they have really good features.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...