Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

need help with html 5 and css3 design


  • Please log in to reply

#1
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,680 posts

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.


  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 400 posts

Try validating your full HTML 5 file at w3c.org. The CSS seems to be ok except for the "footer" CSS. Causes an error. Could you provide an URL to working site?


  • 0

#3
Dragon

Dragon

    All Around Computer Nut

  • Topic Starter
  • Retired Staff
  • 2,680 posts

just says that it's lacking headings in article tag. which is fine by me as this won't be live on web. I don't have a working site as it's on a private in home server that no one will ever see outside my house.


  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP