Displaying pictures - Page 2 - Post...

User 184085 Photo


Ambassador
1,707 posts

@Bird, what was the link you your site again?
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 1948478 Photo


Senior Advisor
1,850 posts

Canary,

Do you mean this page: http://www.seabirdstudio.com/Reviews.html ?

If so, the broken image at top-left is caused by the first line of your HTML code:
<a href=<!DOCTYPE html>

The first portion (<a href=) does not belong there. If there is meant to be an image at top-left, it needs to be placed in the <body> section of the code.

The image further down on the right is 'broken' because the image file does not exist on the server in the directory specified: http://www.seabirdstudio.com/images/ac1110.gif
User 184085 Photo


Ambassador
1,707 posts

I'd have to concur with Per, there are some problems with the code on the page, an example is there are three <head> tags and one </head> there should only be one <head></head> combination on the page. The image link right after the title tags should be moved to after a <body> tag.

I also see tags that are opened, and then not closed later and other that are closed without being opened before, all this will lead to unpredictable results in browsers.

Generally a tag is opened <tag> and some content and then closed </tag>, you can also nest tags <tag>content <tag2>more content</tag2>even more content</tag>

Ultimately nothing you (or I) can do in web design will cause the world to spin off it's axis, so lets take it a little at a time and have some fun with it.

Firstly lets look at the page opening section:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Mon, 24 Sep 2012 02:33:51 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Canary's reviews</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<img src="images/ac1110.gif" width="150" height="127" alt="" border="0">
</body>
</html>


This code will open up and close off the basic page tag as well as display a picture
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

@Bird,

I threw together a basic page to mimic your home page with lots of comments in the code and css for you to peruse.

The page validates fine for both html5 and css3 so should be stable in all browsers.

Ask questions if you need anything clarified

tbaygeek.org/test/.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.