need a little help with html 5 and css3 coding

Dragon · September 21, 2017

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

Rosalind Nolau · October 14, 2022

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.

Sign In

need a little help with html 5 and css3 coding

Recommended Posts

Dragon

Link to post

Share on other sites

Rosalind Nolau

Link to post

Share on other sites

Join the conversation

Browse

Activity