HTML Forum

**nugz** · 08:43 AM

First off I am using Frontpage 2003

I am using a template with CSS. I replaced the header image with another of the exact same size. I replaced the name to the exact same name, however I get the red X when I preview. It shows in the design window, but not in the index.html or preview. I am pretty sure the HTML is correct but, do I need to change something in the CSS part? Here is the code in Frontpage I used.

<img id="frontphoto" src="Images/front.jpg" width="760" height="175" />

Thanks for any help. If this isn't the problem and its something else maybe a mod can move this to the proper forum. I honestly don't know what the problem is so I'm not sure where to post.

**LadynRed** · 08-29-2007, 04:34 PM

Quote:

First off I am using Frontpage 2003

My condolences....

What is the EXACT location of the image in relation to where the page itself is ? Most likely it's a path issue.

**Manawyddan** · 08-29-2007, 05:07 PM

LadynRed beat me to it.

If the "images" folder is not in the same directory as the html file, then your src is not right. Also, if the name of the jpg is not "front.jpg" then you have a problem there.

**nugz** · 08-29-2007, 09:57 PM

When I first changed the image, with photoshop. I saved as the same file type in the same location. I was asked if I wanted to replace the image with the new one and I clicked yes. I then went to preview and it didn't show. When I first downloaded the template file, it had the image in the same folder as the html file. To try another way to get it to show up I created an images folder and edited my html to match. And yes I am sure the path is right. Just to make sure I had Frontpage insert the image for me and it came up with the same path...and it still didn't work. Thanks for the replies...I don't want to pester you guys here, this site is hella busy.

**LadynRed** · 08-29-2007, 10:12 PM

Ok, next question - is the folder named "Images" or is it really "images" - case matters here.

If you'll show us the code, perhaps we can help more.

**nugz** · 07:47 AM

I assume that is the code you wanted...If not then let me know and I will post whatever you need.

I'm sure the path is correct I have triple checked the case in all text. Do you think there is something in the CSS file I need to change, I have no experience with CSS at all. I am new but decent with html which is why this is so mind boggling. I have tried to upload a .zip but no matter how small I make it it says I have exceeded the limit by 33.8 KB.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="_your name goes here_  / Original design: Andreas Viklund - http://andreasviklund.com/" />
<link rel="stylesheet" type="text/css" href="andreas01.css" media="screen" title="andreas01 (screen)" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<title>andreas01</title>
</head>

<body><div id="wrap">

<div id="header" style="width: 760px; height: 45px">
<p><strong>"I can see you fly. You are an angel with wings, high above the ground!"</strong><br />(traditional haiku poem)</p>
</div>

<img id="frontphoto" src="Images/front.jpg" width="760" height="175" alt="" />

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Welcome!</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Cas Videos</a></li>
</ul>

<div class="announce" style="width: 149px; height: 221px">
<h3>Latest news:</h3>
<p><strong>August 28 2007:</strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
</div>

</div>

<div id="extras">
<h3>More info:</h3>
<p>This is the third column, which can be used in many different ways. For example, it can be used for comments, site news, external links, ads or for more navigation links. It is all up to you!</p>

<h3>Links:</h3>
<p>- <a href="http://andreasviklund.com/">My website</a><br />
- <a href="http://oswd.org/">OSWD.org</a><br />
- <a href="http://validator.w3.org/check/referer">Valid XHTML</a><br />
- <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></p>

<p class="small">Version: 1.0<br />(July 25, 2005)</p>
</div>

<div id="content">
<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Why should he have won?</h2>
<p>&nbsp; This is a day and age of violence, wild fires, and mediocre music. 
Every now and then we get a refreshing glimpse of days past and a glimmer of 
hope for what the future may hold. I normally don't watch AGT (Americas Got 
Talent), but, this season I chose to actually listen to my wife for once and 
watch it. What I saw was far more than a glimmer of hope, but rather proof that 
someone with incredible talent was trying to make it big and would soon be among 
the ranks of music's greatest...I mean how could America, the people who voted 
Bush into office for a second term while his approval rating was well below 50%, 
not vote this prodigy with the amazing voice the winner?</p>

<p>&nbsp;&nbsp; The only explanations that I could come up with besides the 
usual UFO's and Osama Bin Laden, was in fact a computer glitch. I mean come on, 
if we are doubting electronic voting in our presidential election then how can 
we trust that the voting actually worked on AGT? That or the problem with 
prescription pills today is worse than we thought. Either way something very 
wrong has happened in America. Have we forgot what the American dream is?</p>

<h3 style="text-align: center">Who is he?</h3><p><b>&nbsp;&nbsp; Cas Haley</b> 
was born December 27, 1980 in Paris, Texas. He is a singer/guitarist in the band 
Woodbelly. He lives in Arlington, Texas with his wife and his son, Eben.</p>

<p>If you like this layout and would like to use it in any way, you are free to do so. This is an open source web design, and all I ask for is that you leave the "Design by Andreas Viklund" link in the footer of the site. If you would like to remove that line, or if you would like professional help with anything related to this layout (such as custom design, branding, scripting or programming), please contact me through OSWD.org or through my website for more information.</p>

<p>Good luck with your new website!</p>
</div>

<div id="footer">
Copyright &copy; 2005 cas should have won&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Design by <a href="http://andreasviklund.com">Andreas Viklund</a>.
</div>

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

**joder** · 08-30-2007, 11:38 PM

Can you post a directory listing of the directory where your template file is located and the part of the css for frontphoto?

**nugz** · 07:48 AM

The template is saved in this order Desktop>andreas01
The images are saved in this order Desktop>andreas01>Images

Yes the case is the same in the html of the site. Here is the CSS file included with the template. And in case your wondering the first part of this talks about support....I contacted them 3 weeks ago and have not heard back yet.

Code:

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

 #frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {    
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}    

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}    
    
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

**joder** · 08-31-2007, 02:25 PM

Have your tried viewing the file directly in a browser? Could just be a Front Page problem. I copied your html, created an Images directory with a front.jpg and loaded it both in IE and Firefox just fine.

**LadynRed** · 08-31-2007, 02:48 PM

I have a copy of Andreas' 01 template and the name of the images folder is not "Images", it's "img" - at least that's the way Andreas' set it up in the zip file.

**nugz** · 08-31-2007, 08:11 PM

Quote:

Originally Posted by LadynRed

I have a copy of Andreas' 01 template and the name of the images folder is not "Images", it's "img" - at least that's the way Andreas' set it up in the zip file.

When I downloaded the .zip, it didn't have an images folder. All images where in the main folder and the html was set to that. I had to make that folder and change the html.

I wonder if it is a problem with the image itself...I have had a few problems with Photoshop before. Just in case I'm gonna redo the image and try that. I'll let you guys know what happens. Just so ya know, I really appreciate all you guys helping me. Thank You so much.

**LadynRed** · 09-01-2007, 04:45 PM

Well, you have to have you Zip file extraction set to use folder names. Andreas has all his templates unzip into folders.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!