HTML Help

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Change the width and height for each image and this will work

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

img {border: none;}

:focus {outline: none;}

body {
background:#1034A6 url(Images/bgstrip.jpg) repeat-x fixed;
font:.88em/1.5 "Times New Roman", Times, serif;
text-align:center;
}

a {color:#0000ee;}

a:visited {color:#551a8b;}

a:active {color:#ee0000;}

#wrapper {
width:800px;
margin: 0 auto;
text-align:left;
}

#logo {
margin-top:10px;
text-align:center;
}

table#menu {
margin:0 0 10px 0;
width: 100%;
border: 5px groove orange;
}

#menu td {
width:33%;
background:#FFFF00 url(Images/electricity1.jpg) repeat-x center;
text-align:center;
}

#menu a, #menu a:visited {
text-decoration:none;
color: #FFFF00;
font-size:1.4em;
font-weight:bold;
}

#menu a:hover {
color:#FF0000;
text-decoration:underline;
}

h3 {
color:#000;
font-size:1.5em;
text-align:center;
background: #c0c0c0 url(Images/DisturbedEnergytrans50.jpg) repeat-x center;
width:800px;
letter-spacing:-.03em;
}

ul#enclosure {list-style:none;}

ul#enclosure li {
padding:5px;
margin:15px 10px;
color:#fff;
display:-moz-inline-box;/* mozilla only */
display:inline-block;/* browsers that support display:inline-block like safari, opera etc.*/
vertical-align:top;
text-align:left;
}
ul#enclosure li p{/* make the text shrink wrap to whatever width the image is */
width:1px;
display:table;
}

ul#enclosure li img{border:5px solid #c0c0c0;}

</style>


</head>

<body>
<div id="wrapper">
<div id="logo"><img src="Images/bar3.gif";></div>
<table id="menu">
<tbody>
<tr>
<td>
<a href="index.html">Home</a>
</td>
<td =""><a href="About%20JCD.html">
About JCD</a>
</td>
<td =""><a href="contact.html">
Contact
JCD</a>
</td>
</tr>
</tbody>
</table>
<h3>JCD Manufacturing, Inc. is now a UL 508A listed manufacturer of open or closed control panels.</h3>
<ul id="enclosure">
<li>
<p><img src="Images/NEMA 3R Enclosure.jpg" width="150" height="120" alt="Nema 3R enclosure with heating and cooling unit"><br>
Large NEMA 3R enclosure housing PLC and electrical power monitoring equipment. This enclosure is heated and air-conditioned. Push buttons mounted on a swing-out panel provides operator with easy access to vital control features.</p>
</li>

<li>
<p><img src="Images/Nema 12 Enclosure.jpg" width="150" height="120" alt="Small Nema 12 enclosure"><br>
Small NEMA 12 enclosure housing communications equipment. A duplex receptacle was added for convenience and future expansion.</p>
</li>

<li>
<p><img src="Images/run test1.JPG" width="150" height="120" alt="Run Test Machine"><br>
Run Test</p>
</li>

<li>
<p><img src="Images/large 2door enclosure.JPG" width="150" height="120" alt=""><br>
Large 2 door enclosure.</p>
</li>
</ul>

</div>
</body>
</html>

lynnc · Joined: 06 Mar 2009 Posts: 10

Hey Sticks, thanks for the help. I think that I finally have something up and running that will work. Please take a quick look and let me know your opinion. The W3 validator seems to have problems with it but I don't know if I should be too concerned with that. The page is www.jcdmfg.com

sticks464 · Joined: 31 Dec 2006 Posts: 2625

You've done pretty good for the first time. Just a couple of suggestions

1. Put a footer at the bottom of the page.

2. Remove the thumbnail hover border.

3. To make the validator like it better remove the "/" after the alt tag from such tags as
Code: <div id="logo"><img src="Images/jcd logo bar3.png" alt="" /></div> That closing method is reserved for xhtml.

4. Put a meta reference for a character set immediately following the opening <head> tag
Code: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

lynnc · Joined: 06 Mar 2009 Posts: 10

Are the / needed at the end of the lines in some of the flash movie code portion?

edit:
I removed the flash movie / also. Now the validator only has problems with the flash code itself. Is that common or is there some other way I need to do it?

sticks464 · Joined: 31 Dec 2006 Posts: 2625

That's common if the code is javascript. It's an html, xhtml validator not for javascript.

I'd have to go back and look at the code but there are several ways of doing it.