Trouble working with templates

by **ar1stotle** » Sat Feb 09, 2008 8:58 am

OK, I'm trying to put a whole site together on my own. Yea, I'm using templates because I figure I'd still get some pretty good experience modifying them and stuff. Well, I've kind of hit a brick wall here. Basically, the template I'm using provided the .psd files so that I could go in and modify the different menus and basically everything. I went in and did all that and exported, and noticed that the site didn't seem to be behaving correctly. So, I just loaded the original .psd files and re-exported those, and the site was still acting strange. There's obviously code in the original HTML and CSS that Photoshop isn't putting in there.

This is how the site should act
This is what I get when I re-export the original home page

So, anyone know what I should be doing when working with these template html and PSD files? Will the template simply not work if I have to modify the PSD files? Any suggestions on how I can get the whole site together quickly without too much hassle?

Any suggestions are greatly appreciated.

by **jbullard** » Sat Feb 09, 2008 10:30 am

What you need to do is take what you actually see in View Source and replicate that to your own site. Otherwise you are just displaying images with no relevant links or anything of that nature.

I am not a fan of templates because of this situation here. Unfortunately the template uses tables which are almost outdated. So, I would suggest fiddling around with CSS, specifically div and span which will give you the same effect.

Also, instead of using images as the menu I would use one image for the main tab, one image for the over tab, and one image for the hot tab. Then take your text and insert it dynamically instead of hard code into the images. <-- If that makes sense. :confused

by **ar1stotle** » Sat Feb 09, 2008 6:18 pm

Well, I don't think I'd be able to create something quite that nice looking without using a template, so this is still good practice. So for the tabs, basically, you're saying I should have 3 base tab graphics and then put the text over them in the HTML editor instead of having all 15 images? I think that's what you mean, but at the same time that text is somewhat intricate (well, not really, but there's actually 2 text layers, one for the black and one for the white underlay which gives it a nice effect and I don't know how I'd recreate that). But, speaking of text and layers and stuff... I know how to make PS export things with CSS code instead of tables, which makes it much easier to work with. However, as you can see from those pages there is text that is supposed to have a transparent background so that you can see the actual background of the page. I was able to go in and set the background for the div tag to be an image of the same area with the text removed, but is there a way to use slices and stuff so that it actually layers them properly? So that when I create a text box, I can make it a text box that has the same background without all the hassle?

One other thing: How do I do the mouseover images? The original one has the following code:

Code: Select all: onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image45','','images/m2r.jpg',1)"

But when I try to add those parameters to the div or to the link anchor I tried to wrap the div in, it just surrounds the image with a blue border and firebug tells me the following:

MM_swapImage is not defined
onmouseover(mouseover clientX=0, clientY=0)Index.html (line 1)
[Break on this error] <html>
Index.html (line 1)
MM_swapImgRestore is not defined
onmouseout(mouseout clientX=0, clientY=0)

Thanks a ton!

by **jbullard** » Sat Feb 09, 2008 7:02 pm

You need to add the following javascript to between your head and end head tags.

Code: Select all: <script language="JavaScript" type="text/JavaScript">  </script>

by **ar1stotle** » Sat Feb 09, 2008 7:33 pm

Ohhhh, didn't realize that was a script. Well, that fixed the errors Firebug was giving me. Thanks!

Now, though, it's still not working. Here's the modified version I tried to make: Link.
The following is the code for the Svaroopa tab:

Code: Select all: <div id="m2"><a href="index-1.html"> <img src="images/m2.jpg" width="86" height="30" alt=""></a> </div>

*It keeps clipping out the part about mouseovers... but it's immediately after index-1.html"

In Firefox, this gives it a blue left and top edge, and while clicking it goes to the right place the mouseover image doesn't work even though m2r.jpg is really there:

Here's the CSS for it btw:

Code: Select all: #m2 { position:absolute; left:352px; top:56px; width:86px; height:30px; }

Edit: Just had a thought. Would it be easier to use the original index.html, modify the images for the tabs in PS, and just clear out some of the content section and just try to recreate that? Is that more doable? Well, wait, then I would have to use the same tables... dangit.

Edit 2: Yay! Figured out that Image45 wasn't a valid name... so I set that right and now the mouseover works! But still, what's with the blue border?

by **imnuts** » Sat Feb 09, 2008 9:06 pm

try adding this to your css to get rid of the blue border:

Code: Select all: a img { border: none; }

by **ar1stotle** » Sat Feb 09, 2008 11:01 pm

imnuts wrote:try adding this to your css to get rid of the blue border:

Code: Select all
a img { border: none; }

That did it!

Alright... I want to start working on this some more but I need to get some homework done first

But thanks for all the help so far!

Technology, Support, and News Forum

Trouble working with templates

Trouble working with templates

Who is online