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,682 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
  • 406 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,682 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

#4
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 406 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.

OK, but it is hard to track down your problem without being able to see it in action with the images you are using. I have several developer tools which allow me to analyze web site pages, but it has to be online or the complete web site has to be installed on my computer using the same directory structure as you have for the site on your computer.

 

Looking at your CSS and HTML in more detail, aside from the fact you are not writing to html 5, there is no way you will get those images to line up the way you want them. Even though it's not good html 5, you might want to set up using some div containers with their own CSS. Also, not sure if you have a document type, etc., in your html since you posted starting at the "body" tag.

 

I can do a quick example with 5 images placed looking like a playing card, but you will have to correct some of the paths I have to use for the directory I set up on my computer. Let me know if you want to me to do this.


Edited by AstraNut, Yesterday, 11:38 PM.

  • 0

#5
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 406 posts

Here's a screenshot of what I think you are looking for. If it is, I can paste the HTML & CSS for you.

Attached Thumbnails

  • G2G_RetiredStaff_2017-09-25_021108.png

Edited by AstraNut, Today, 01:36 AM.

  • 0

#6
Dragon

Dragon

    All Around Computer Nut

  • Topic Starter
  • Retired Staff
  • 2,682 posts

thats exactly what i"m looking for it to look like. If you want to I am attaching the whole site design as a zip file so you can get a better idea of what I'm looking at.

Attached Files


Edited by Dragon, Today, 10:15 AM.

  • 0

#7
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 406 posts

thats exactly what i"m looking for it to look like. If you want to I am attaching the whole site design as a zip file so you can get a better idea of what I'm looking at.

Glad to hear it's what you want. Will work on it using your images. I have already set up a directory structure on my computer for the files I started, but will try to redo it to your directory if not too much problem. Otherwise, you may have to just use the one you have as a backup reference and make a new directory structure. It doesn't seem like it should be hard as there's not that many files. I may have to rename some image files.

 

Just want you to know that the HTML file, although it has a HTML 5 document type, is not a true coded HTML 5 file. It will validate along with the CSS, but since these are not going to be on the Internet, there isn't a problem.


  • 0

#8
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 406 posts

Checking files more, but here's what it looks like on my monitor. OK?

Attached Thumbnails

  • Dragon(NEW)_2017-09-25_170913.png

Edited by AstraNut, Today, 04:27 PM.

  • 0

#9
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 406 posts

I think it's done. Let me know if it's working ok for you.

Attached Files


  • 0

#10
Dragon

Dragon

    All Around Computer Nut

  • Topic Starter
  • Retired Staff
  • 2,682 posts
Perfect astranut. Thanks for the help I look forward to getting in the swing of things again after a little hiatus. This is just a stapling stone
  • 0

#11
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 406 posts

Perfect astranut. Thanks for the help I look forward to getting in the swing of things again after a little hiatus. This is just a stapling stone

You're very welcome. I take it that it shows ok on your computer?

 

BTW, I used to be on the staff here years ago.


Edited by AstraNut, 25 minutes ago.

  • 0






Similar Topics

1 user(s) are reading this topic

1 members, 0 guests, 0 anonymous users


    AstraNut

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP