Coding for a separate background image on a page

**lesliekirk** · 02-03-13, 04:59 AM

Re: Coding for a separate background image on a page

Miss Kate, I'm going to try and be gentle - looking at the code that you have (did a view source of the generated page) - you've got a bunch of duplicate coding which is going to cause issues. You've got two head tags, two title tags, you've got <span> tags in the head (they belong in the body).

It doesn't look like you've tried implementing the code you've mentioned. But when you do, make sure you are not copying any <head> tags into the Head Tag field in the admin. Then add the CSS style to your cssui.css file. You can create a dynamic <body> tag for each category if you want and then create a different CSS style for it.

In your CTGY page template change <body class="WEDDING"> to <body class="WEDDING-&mvte:category:code;"> Then in your stylesheet you can create different body styles for each category if you so choose.

But remember, do not copy the <HEAD><TITLE> tags (opening and closing) from the HTML you are creating.

**Miss Kate** · 02-03-13, 09:21 AM

Re: Coding for a separate background image on a page

Leslie, thank you for the critique. I guess I've gotten really confused as to what goes where in the different templates. I've moved the <span> tagged items around in the global header because that is the code that came with the icons from Share This. Does the global header/footer have head tags? I'm still used to the way of doing things with 4.23 and have had a horrible time with 5.5 and understanding how everything fits together with CSS and what are the minimum templates needed for each page. I haven't found the Miva tutorials to be overly helpful because they show the templates used and not the actual code that is put in each template. That's pretty much how I've gotten duplicate tags on pages because I don't know where the breaks in code should be. I've looked at source code for other Miva websites to see what should be done and have been using 3 different HTML and CSS books to try to get this whole thing working as I want it.

By the way, here is the Body tag content I have in the global template:

BODY {

background-image : url(primary_handprints1111.png);
visibility:visible;
}

I wasn't sure if anything else can be put in there. That is the background image I am using throughout the website. So, if I'm reading correctly, I need to take out the <head> tags from the Content pages. They only belong in the Head Tag Content/CSS* template?

Originally posted by lesliekirk View Post

Miss Kate, I'm going to try and be gentle - looking at the code that you have (did a view source of the generated page) - you've got a bunch of duplicate coding which is going to cause issues. You've got two head tags, two title tags, you've got <span> tags in the head (they belong in the body).

It doesn't look like you've tried implementing the code you've mentioned. But when you do, make sure you are not copying any <head> tags into the Head Tag field in the admin. Then add the CSS style to your cssui.css file. You can create a dynamic <body> tag for each category if you want and then create a different CSS style for it.

In your CTGY page template change <body class="WEDDING"> to <body class="WEDDING-&mvte:category:code;"> Then in your stylesheet you can create different body styles for each category if you so choose.

But remember, do not copy the <HEAD><TITLE> tags (opening and closing) from the HTML you are creating.

**Dan - Glendale Designs** · 02-03-13, 11:37 AM

Re: Coding for a separate background image on a page

Unfortunately most of the site uses non-valid HTML. Run your landing pages through the W3 HTML Validator (http://validator.w3.org) and you will see it won't even attempt to validate, which is a HUGE red flag. To add to that, you are using an XHTML doctype, which is going to be more sensitive to coding issues like this, but ultimately the level of invalid HTML will trip things up no matter the doctype in place. I HIGHLY recommend getting an experienced developer in there to clean things up. If the funds are not available for such services, you need to get back to HTML basics and learn to code your site to meet the standards specified by the doctype in use. An XHTML doctype declaration requires valid XHTML, an HTML 4.01 doctype requires valid HTML 4.01 and so on. I see HTML 4.01, mixed with modern XHTML, with malformed tags all around, it is a mess.

This isn't really a Miva Merchant 4/5.5 thing as the same rules apply to both. It comes down to basic web development and coding, which is really outside the scope of support for Miva Merchant's tutorials. A basic understanding and knowledge of HTML/CSS is necessary to develop any website.

Sorry to be so blunt, being gentle is not my strong suit.

**Miss Kate** · 02-03-13, 12:50 PM

Re: Coding for a separate background image on a page

Dan, thank you for the bluntness. Coding is not my strong suit nor has it ever been. I had coded it very well when I had 4.23 as I had been using a very good software program to do it. What DOCTYPE do you recommend? That is a fairly easy change to make. I know my CSS code is valid as I put that through the analyzer when I have made changes. I never thought about doing the same with the HTML code.

Originally posted by Ren Hoek View Post

Unfortunately most of the site uses non-valid HTML. Run your landing pages through the W3 HTML Validator (http://validator.w3.org) and you will see it won't even attempt to validate, which is a HUGE red flag. To add to that, you are using an XHTML doctype, which is going to be more sensitive to coding issues like this, but ultimately the level of invalid HTML will trip things up no matter the doctype in place. I HIGHLY recommend getting an experienced developer in there to clean things up. If the funds are not available for such services, you need to get back to HTML basics and learn to code your site to meet the standards specified by the doctype in use. An XHTML doctype declaration requires valid XHTML, an HTML 4.01 doctype requires valid HTML 4.01 and so on. I see HTML 4.01, mixed with modern XHTML, with malformed tags all around, it is a mess.

This isn't really a Miva Merchant 4/5.5 thing as the same rules apply to both. It comes down to basic web development and coding, which is really outside the scope of support for Miva Merchant's tutorials. A basic understanding and knowledge of HTML/CSS is necessary to develop any website.

Sorry to be so blunt, being gentle is not my strong suit.

**Dan - Glendale Designs** · 02-03-13, 01:10 PM

Re: Coding for a separate background image on a page

Kathleen, while your css may validate, it's usage is not appropriate. I see old HTML 4.0 font tags (depricated in 1999 with HTML 4.01) mixed in with all sorts of div tags and css as an example.

XHTML is hands down the most unforgiving doctype out there. If tags are implemented in upper case, with depricated attributes and/or improperly closed, things will flat out break. HTML 4/4.01 is probably more of what you are used to, but it is so outdated at this point it is sick.

My recommendation would be to run with an HTML5 doctype as it is going to be MUCH more forgiving with what you have in place, however you really need to learn to code using modern standards/css moving forward. A great resource is http://www.w3schools.com/html/default.asp. Here you can learn about tags and attributes that have been depricated over the years and what is supported with modern doctypes.

You also need to look at your resulting site source code, ask yourself if it meets the specification of a basic html document and use the W3 Validator:

Code:

[COLOR=#000000][FONT=courier new]<!DOCTYPE html>[/FONT][/COLOR]
[COLOR=#000000][FONT=courier new]<html>[/FONT][/COLOR]
[COLOR=#000000][FONT=courier new]<body>[/FONT][/COLOR]

[COLOR=#000000][FONT=courier new]<h1>Heading</h1>[/FONT][/COLOR]

[COLOR=#000000][FONT=courier new]<p>Paragraph.</p>[/FONT][/COLOR]

[COLOR=#000000][FONT=courier new]</body>[/FONT][/COLOR]
[COLOR=#000000][FONT=courier new]</html>
[/FONT][/COLOR]

**Miss Kate** · 02-03-13, 01:20 PM

Re: Coding for a separate background image on a page

Dan, thank you very much. When I was looking at my source code just now, I discovered a <HEAD> tag that I have no idea where it is coming from. I have gone through the templates and have not found it yet. I do see a mix of my previous site coding using IBM's Homepage Builder which was very user friendly to use and coding from Microsoft Expression Web 4 which I replaced Homepage builder with when I moved the website to MM55.

Originally posted by Ren Hoek View Post

Kathleen, while your css may validate, it's usage is not appropriate. I see old HTML 4.0 font tags (depricated in 1999 with HTML 4.01) mixed in with all sorts of div tags and css as an example.

XHTML is hands down the most unforgiving doctype out there. If tags are implemented in upper case, with depricated attributes and/or improperly closed, things will flat out break. HTML 4/4.01 is probably more of what you are used to, but it is so outdated at this point it is sick.

My recommendation would be to run with an HTML5 doctype as it is going to be MUCH more forgiving with what you have in place, however you really need to learn to code using modern standards/css moving forward. A great resource is http://www.w3schools.com/html/default.asp. Here you can learn about tags and attributes that have been depricated over the years and what is supported with modern doctypes.

You also need to look at your resulting site source code, ask yourself if it meets the specification of a basic html document and use the W3 Validator:

Code:

[COLOR=#000000][FONT=courier new]<!DOCTYPE html>[/FONT][/COLOR]
[COLOR=#000000][FONT=courier new]<html>[/FONT][/COLOR]
[COLOR=#000000][FONT=courier new]<body>[/FONT][/COLOR]

[COLOR=#000000][FONT=courier new]<h1>Heading</h1>[/FONT][/COLOR]

[COLOR=#000000][FONT=courier new]<p>Paragraph.</p>[/FONT][/COLOR]

[COLOR=#000000][FONT=courier new]</body>[/FONT][/COLOR]
[COLOR=#000000][FONT=courier new]</html>
[/FONT][/COLOR]

**Miss Kate** · 02-03-13, 02:05 PM

Re: Coding for a separate background image on a page

Well, it wasn't the <HEAD> tag that I can't find, it's the following lines of code:

<head> <title>Miss Kate's CreationsWedding & Anniversary Photo Albums & Frames</title> <base href="http://misskatescreations.com/mm5/" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/00000001/cssui.css" media="all" />

I have looked through every global template and am not able to find it. Not sure at this point how to delete something that I can't find.

Originally posted by Miss Kate View Post

Dan, thank you very much. When I was looking at my source code just now, I discovered a <HEAD> tag that I have no idea where it is coming from. I have gone through the templates and have not found it yet. I do see a mix of my previous site coding using IBM's Homepage Builder which was very user friendly to use and coding from Microsoft Expression Web 4 which I replaced Homepage builder with when I moved the website to MM55.

**Miss Kate** · 02-03-13, 04:19 PM

Re: Coding for a separate background image on a page

Well, I finally found it. The lines generated for the <head> tag come from the Miva code on the "Page" template. I changed the !DOCTYPE to HTML5 and have been able to cut 122 errors down to 63. Unfortunately, I have found some of the javascript I have used in the head was written by others and is not up to date. One of the javascripts is the BuySafe script. According to HTML5, the language statement in a script is no longer necessary and will produce an error when validating.

I have certainly learned a lot about this today. This is the first time since I have had mm55 that I have had time to really tear into it to see what is what. I appreciate all the comments from developers since I had no idea why certain things were happening. I still haven't implemented the suggestion Leslie made about creating a body class with Miva code to solve the background image, but that can wait until I get all the other issues resolved. I guess the reference books I have (two of which I just purchased recently) are outdated before they even leave the publisher.

Originally posted by Miss Kate View Post

Well, it wasn't the <HEAD> tag that I can't find, it's the following lines of code:

<head> <title>Miss Kate's CreationsWedding & Anniversary Photo Albums & Frames</title> <base href="http://misskatescreations.com/mm5/" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/00000001/cssui.css" media="all" />

I have looked through every global template and am not able to find it. Not sure at this point how to delete something that I can't find.

**jsdva** · 02-05-13, 10:58 AM

Re: Coding for a separate background image on a page

Hi Miss Kate,

CSS/HTML are fast moving worlds. It's going to be tough for printed content to be fresh up to date by the time it gets to the market to sell.

Just keep yourself abreast of new changes in CSS and HTML, always do browser testing, and validate your code as much as you can (some Miva long links will never validate, but the rest of your store can). Trust me...to stay current, you'll be learning all of the time. And, just like the printed books, your knowledge on the topics will become obsolete or potentially out of date too. You must continually keep up and educate yourself when using CSS and HTML.

Originally posted by Miss Kate View Post

... I guess the reference books I have (two of which I just purchased recently) are outdated before they even leave the publisher.

Jamie

**Miss Kate** · 02-05-13, 12:06 PM

Re: Coding for a separate background image on a page

Jamie, thanks for the input! After learning what I did this weekend, I didn't realize how out of date my coding was on my website. I had no idea some of the things that were deprecated years ago before I built the first version of my website in 2003!

Originally posted by jsdva View Post

Hi Miss Kate,

CSS/HTML are fast moving worlds. It's going to be tough for printed content to be fresh up to date by the time it gets to the market to sell.

Just keep yourself abreast of new changes in CSS and HTML, always do browser testing, and validate your code as much as you can (some Miva long links will never validate, but the rest of your store can). Trust me...to stay current, you'll be learning all of the time. And, just like the printed books, your knowledge on the topics will become obsolete or potentially out of date too. You must continually keep up and educate yourself when using CSS and HTML.

Jamie

**jsdva** · 02-05-13, 12:21 PM

Re: Coding for a separate background image on a page

Anytime at all, Miss Kate. I think you are going to do very, very well! Wanting to learn is half the battle, and you have decidedly shown that you want to learn!

Best of luck to you!!

Jamei

Coding for a separate background image on a page

Coding for a separate background image on a page

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment