14 replies [Last post]
pawsitiveleads
Offline
newbie
Last seen: 10 years 34 weeks ago
Joined: 2010-02-23
Posts: 5
Points: 6

Hi,

First off, I apologise, because I know I'm supposed to print my code, but I built my site in Dreamweaver, using the wysiwyg designer, so I'm not so sure how to go about getting the code. I also tried to read the doctypes link from the stickies, but I got an error message. Sorry!

I created my site in DW CS4, and have never used CSS before, so it's very very new to me.
I need to get the site I am working on, online, asap, so I'm starting to stress big time.

The address is www.pawsitiveleads.com

The problem is that I made a container which contains a space for the banner, the navbar, and the body for the text.

The nav bar has rollover images for buttons. They display fine.
The banner and the body have background images inserted, but the do not display now that the page is online. They display fine in DW when I preview in browser.

The background for the entire page is a simple gradient. It displays fine on the index.htm, but none of the others.

I made a template in DW and applied the template to all of the pages on the site apart from the index.htm. None of the other pages even have the background gradient, so the problem definitely seems to be the CSS, but I don't have a clue where to start.

From what I've read, it seems likely to be where the css file is relative to images etc. but I'm so far out of my depth.

Please, if anyone can help, I would be unbelievably appreciative.

Many thanks,

Alan

pawsitiveleads
Offline
newbie
Last seen: 10 years 34 weeks ago
Joined: 2010-02-23
Posts: 5
Points: 6

code!

Hi,
OK, so I just opened the page and copied the source code? I hope that is ok. It is as follows;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pawsitive Leads: Welcome!</title>
<style type="text/css">
<!--
-->
</style>
<link href="../pawsitivestyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
a:link {
	color: #000;
	font-weight: bold;
}
a:visited {
	color: #000;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
a {
	font-weight: bold;
}
-->
</style></head>
 
<body onload="MM_preloadImages('images/btnhomeroll.png','images/btnaboutusroll.png','images/btnservicesroll.png','images/btngalleryroll.png','images/btncontactroll.png')">
<div id="container">
  <div id="navbar"><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/btnhomeroll.png',1)"><img src="images/btnhome.png" alt="home" name="home" width="115" height="34" border="0" id="home" /></a><a href="about/about.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','images/btnaboutusroll.png',1)"><img src="images/btnaboutus.png" alt="About Us" name="aboutus" width="115" height="34" border="0" id="aboutus" /></a><a href="services/services.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/btnservicesroll.png',1)"><img src="images/btnservices.png" alt="Services" name="services" width="115" height="34" border="0" id="services" /></a><a href="gallery/gallery.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/btngalleryroll.png',1)"><img src="images/btngallery.png" alt="Gallery" name="gallery" width="115" height="34" border="0" id="gallery" /></a><a href="contact/contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/btncontactroll.png',1)"><img src="images/btncontact.png" alt="Contact" name="contact" width="115" height="34" border="0" id="contact" /></a></div>
  <div id="mainarea">
    <p>&nbsp;</p>
    <h3>Welcome to <strong>Pawsitive Leads</strong>!</h3>
<p>The professional choice for all your dog walking and pet sitting needs.</p>
    <p>Throughout this website you will find more information on the services that we offer, and how they may benefit you and your animals.</p>
    <p>If there is anything not covered on the website that you wish to know, or, if you have any specific requests, please get in touch using any of the methods listed  on the <a href="contact/contact.htm">'Contact'</a> page.</p>
    <p>We look forward to hearing from you soon!  </p>
  </div>
</div>
</body>
</html>/code>
 
Thanks,
 
Alan

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 19 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

You're looking for your CSS

You're looking for your CSS in the directory above site root which isn't accessible. Doesn't matter since it's in the root directory anyway.

Change <link href="../pawsitivestyles.css" rel="stylesheet" type="text/css" /> to <link href="pawsitivestyles.css" rel="stylesheet" type="text/css" />

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 5 years 38 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

One reason

to be cautious with DW is when you give it too much control. Wink In your index file you link to the css on your server, in the others you link locally to your C: drive

link href="file:///C|/Documents and Settings/Laelaps/Desktop/pawsitiveleads/pawsitivestyles.css"/code>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 7 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

so, the only image thats not

so, the only image thats not showing, is main.png? Thats the only other image that css is calling. The css for this image has an ID of #main, but the html is trying to call id="mainarea". If you change the css to match that of the html, it will work.

#mainarea {
	height: 373px;
	width: 575px;
	background-image: url(images/main.png);
}

Now, as far as the other pages go, they are all linking to a css style sheet located on your C: drive. make sure they all link to your live style sheet with the same code you used on your homepage...

<link href="../pawsitivestyles.css" rel="stylesheet" type="text/css" />

pawsitiveleads
Offline
newbie
Last seen: 10 years 34 weeks ago
Joined: 2010-02-23
Posts: 5
Points: 6

Tried changing the code...

Hi,

Thanks for the replies!
Verschwindende, I tried what you suggested, but in DW it removed the background image, and when I uploaded it, it still looks the same. The problem is still there.

Cupidstoejam, I think that is correct. In my head I had a banner, navbar, and body area, but actually I think I just have the main image which is the whole interface graphic, with the nav bar buttons set in on top. I'm sorry, but I don't understand what you were saying about the image name. Is it not ok, to have the image called main.png, but the container for it called mainarea? I don't see why that would have an effect. Again, sorry for asking, I just don't understand it.

I haven't changed the code that is looking for the css style sheet on my HD to the other code yet as I'm just trying to get the index.htm working for now.

Many thanks,
Alan

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 19 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

pawsitiveleads

pawsitiveleads wrote:

Verschwindende, I tried what you suggested, but in DW it removed the background image, and when I uploaded it, it still looks the same. The problem is still there.

That's because on your home computer you have the css file in a directory above the html file but you don't on the server. The gradient is showing and if you change <div id="mainarea"> to <div id="main"> the main.png shows up as well.

Look:

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 7 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

pawsitiveleads wrote: ...but

pawsitiveleads wrote:

...but I don't understand what you were saying about the image name. Is it not ok, to have the image called main.png, but the container for it called mainarea? I don't see why that would have an effect. Again, sorry for asking, I just don't understand it.

check the code. your image name fine, its the css and html thats wrong. The css has the image set as the background for #main. But you dont have id="main" in your html anywhere. But you do have id="mainarea". Should your css be named #mainarea instead of #main?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 19 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

The fixed height background

The fixed height background is going to cause you grief in the very near future.

pawsitiveleads
Offline
newbie
Last seen: 10 years 34 weeks ago
Joined: 2010-02-23
Posts: 5
Points: 6

Oh my word... Ok, so I

Oh my word...

Ok, so I changed the css style sheet so that the main is now named mainarea.

Like verschwindende said, it now shows up the image as a background for the kind of text area. This is updated online also. I don't understand why the banner at the top isn't showing as I thought it was all a part of the main image. I will check this now.

Another thing is that the text is showing in times new roman, but should be arial.

Thanks for your patience everyone. I'm just about ready to go back and do it in tables... Sad

Also, the mainarea is supposed to sit flush with the bottom of the navbar so there is no space. Is this the fixed height issue?

I can't believe how many problems I'm having with this. Gutted that it looked like it worked fine in DW!

Cheers.

pawsitiveleads
Offline
newbie
Last seen: 10 years 34 weeks ago
Joined: 2010-02-23
Posts: 5
Points: 6

So, I had a look at the image

So, I had a look at the image files etc and where it is calling main.png as the background image, it should have been calling the interface image. Now that I have changed and saved that, the layout is a mess, and is still not using the css style sheet to make the text arial etc.

I'm getting the feeling that I need to start all over.

I know I changed from having a header area to contain the banner + navbar area + mainarea for the text, to just having the container with a bg image of the entire interface and then making the navbar have padding to place it where I wanted.

I hope that makes sense, as I feel that is causing some of the problems.

Any ideas would be great. Cheers!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 7 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

first never use DW to see

first never use DW to see what it will look like, always use a real browser. As for your font, looks like Arial to me. Arial is the default browser font. Unless you specify differently, it will default to Arial. For the gap, try zero-ing out your margins. I placed

* {margin: 0; padding: 0;} 

at the top of your css code, and the gap went away. So, zero out the margins on whatever element is causing the gap. I would not reccomend setting this global rule as I just used it for testing.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 19 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

If it hasn't been suggested

If it hasn't been suggested to you before, head over to htmldog.com and do the tutorials. You just may want to begin again after you complete them.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 7 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

i agree. although, this is a

i agree. although, this is a good learning exercise, it isnt ideal for a real website.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 7 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

After a closer look. that

After a closer look. that isnt Arial. Strange indeed! Try setting the body font to arial.