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.