ok, so I have made a custom start page for my browser to load on my computer, but I'm running into a problem with layout. it's a simple layout 5 pictures and a header image. I got the header image the way I want but can't get the pictures to lay the way I want. I want to strictly use html 5 and css3 clean standards but my images aren't working right. I want pic in 4 corners and one in the center like you would see on a playing card. Attached find a screenshot of what it looks like. This will not be visible on the WWW.
Here is my css file
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 {
here is my html file
<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>
need more info let me know. thanks.
Sign In
Create Account
