Forum Moderators: not2easy

Message Too Old, No Replies

Complete beginner to CSS.problems with images

         

oneillc

10:54 am on Aug 1, 2008 (gmt 0)

10+ Year Member



Hi all,
I am a complete beginner to CSS and I picked up a free CSS template to get me started. I have been able to sort out all the content etc but when I put the site live some of the images are not displayed.

I'm not sure if there is a problem linking to the images via folders of in the code itself. I'm using "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" - it's line Japanese to me!
For example where the code states "<div id="header">" it points to part of the image that is not showing up but I can't seem to find where it is. On the other hand I read somewhere that it might be a problem linking to the images, but I can't see where it links to the images.

I appreciate everyone patience with me as I am a COMPLETE beginner and I am starting from scratch.

If there is any other info I need to add please let me know and I will post.

Thanks in advance for any help.
Colm

jbinbpt

11:09 am on Aug 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi oneillc,
Welcome to WebmasterWorld. Enjoy.

The most common problem with images not displaying is the path is wrong, or there is a mismatch with the letter case of the file name.

Post the code that have the image links. Make sure to remove any information that identifies your site.

jb

oneillc

11:32 am on Aug 1, 2008 (gmt 0)

10+ Year Member



Thanks JB - I had considered it but I just don't have a clue how to find it. Site needs a lot of work but I'll get there - hopefully
Here it is below - not sure if I'm posting too much code but here it is anyway:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Design by Free CSS Templates
[freecsstemplates.org...]
Released for free under a Creative Commons Attribution 2.5 License

Title : Colorimetry
Version : 1.0
Released : 20080414
Description: A two-column, fixed-width and lightweight template ideal for 1024x768 resolutions. Suitable for blogs and small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: 12px}
.style2 {
font-size: 20px
}
.style3 {color: #FFFFFF}
.style4 {color: #FFFFFF; font-size: 20px; }
-->
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="index.html"><sup></sup></a></h1>
<h2></h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="index.html" class="style1"> home</a></li>
<li><a href="about.html">About </a></li>
<li><a href="Galleries.html">Galleries</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Links.html">Links </a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"></h1>

</div>

<div class="title">
<p align="justify" class="style4"></p>
<p align="justify" class="style4"></p>
<p align="justify" class="style2 style3"></p>
</div>
<div class="meta"></div>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="s" name="s" value="" />
<input type="submit" id="x" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Navigation pages</h2>
<ul><li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="Galleries.html">Galleries</a></li><li><a href="Contact.html">Contact</a></li><li><a href="Links.html">Links</a></li><li><a href="#">Blank</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p id="legal">(c) <p>Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end footer -->
</body>
</html>

jbinbpt

11:43 am on Aug 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are no references to any images. It should look something like this

<p><img src="images/B50.JPG" alt="logo" height="150" width="536"></p>

oneillc

1:20 pm on Aug 1, 2008 (gmt 0)

10+ Year Member



Yea I thought it should but it looks perfect when I preview it in firefox so it must be getting the image from somewhere. Where it says <div id="header"> (the "header" bit is in blue text in dreamweaver) in the split view - if I click on it it highlights the header image.
I'm a bit baffled really.
Any suggestions?

oneillc

1:35 pm on Aug 1, 2008 (gmt 0)

10+ Year Member



Ah ok it says that "margin is defined in rule "#header" in default.css
Is this any help?

jbinbpt

2:24 pm on Aug 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I looked at one of their templates. The images in it are background images. Did you upload the images folder and the css file?

That maybe the issue.

oneillc

4:23 pm on Aug 1, 2008 (gmt 0)

10+ Year Member



Problem solved - I had links relative to document checked as opposed to site root. Changed it to site root and the problem is solved.

Thanks for the suggestions!