You need to do some research on "nesting" in html. Certain items can go inside others while others will thoroughly confuse the system. Let's take the code
Code:
<p><strong><h1><color=#ff9900><I>Easy to drink fun wines made with <br>the finest grapes, choice fruit, herbs, and spices.</I><br>
If you are looking for high quality, fun, and exciting wines<br> to have for dinner or to bring to a party,<br> you've come to the right place<br><br></strong></h1></p>
You have basically said, "put this whole shopping basket in the plastic bag and I'll carry it home."
You've started a paragraph tag (the plastic bag) and immediately wanted to make it bigger (<strong>). Then, make it hold the shopping basket (h1) and, oh, let's make it italicized while we're at it. Headings (especially the largest) don't go inside paragraphs. Likewise, paragraphs don't go inside headings. And, h1 is the largest heading there is.
Your color tag should be
Code:
<h1 style="color:#ff9900">This is your heading</h1>
Separating the two as you did is, again, against nesting and the browser would be confused even more than "why is a heading in a paragraph."
Also, there's a big difference between an <i> tag and an <em> tag. They can sometimes be interchangeable but, when you are talking a heading or a special word in a paragraph, <em> is more correct. If you were doing a quote, the title of a book or something similar, the <i> tag would be more correct as you are pointing out a title versus emphasizing a point.
There's a lot of other considerations (assumptions) I'm going to make to try to steer you in the right direction. First, an item I picked up in the forum that has saved my backside when trying to retrace steps. Create a file in includes/templates/YOUR_TEMPLATE/css called stylesheet_zcustom.css. This performs two great tasks. It loads last so easily overrides earlier calls. And, it keeps track of what you have done to change your site.
It's assume time. From nesting I see, it looks as if you were working in the Define Pages Editor. It will nest and do whatever you tell it regardless of HTML rules. And, it appears that you are trying to provide emphasis to a paragraph rather than really make a <h1> heading. This can create more nesting problems as most Zen Cart pages already have a built-in <h1>.
So, let's turn your item into special paragraphs and wrap them in a div that we can manipulate whenever we want. First, we'll use this code
Code:
<div id="specParagraphs">
<p class="specPara1">Easy to drink fun wines made with the finest grapes, choice fruit, herbs, and spices.</p>
<p class="specPara2">If you are looking for high quality, fun, and exciting wines to have for dinner or to bring to a party, you've come to the right place</p>
</div>
I've used an id for the div as it is probably unique but, I've used class versus id as the p styles may be used several times on their particular page (e.g. the main page). One of these was to be emphasized/italicized and the other not. Both were to be color #ff9900 AND bold. We can assign the color and boldness with the div and the italic with the p tag.
In the stylesheet_zcustom.css, we would enter the following
Code:
/* BOF Code for Special Paragraphs */
#specParagraphs {color:#ff9900;font-weight:bold;}
.specPara1 {font-style:italic;}
.specPara2 {}
/* EOF Code for Special Paragraphs */
The blank ( {} ) for specPara2 is a place holder if we want to do something special (different width?) At a later date.
Now, using the stylesheet, you can change all sorts of things. For instance, you'll note I left out all the <br> calls in the second paragraph. They would reek havoc in a mobile/tablet environment. If you only want the text of the specPara2 to take up half the page, set it to width:50%, use float to put it on the left or right, and/or use margin:auto to put it in the middle.
The biggest benefit in doing this is that you can view your setup in a browser as you try out different situations. For instance, if you want the specPara1 to be larger, go to inspect in your browser, add font-size:1.1em; to the .specPara1 call in the stylesheet_zcustom.css. Then, highlight the 1.1em, hold down the alt key, and press the up or down arrow to adjust the size to where you want it.
It is a constant learning process but, necessary. Your html mistakes so confuse the browser that it just gets to a point of, "Whatever - just throw it out there."
You can also use https://www.w3schools.com/html/tryit...=tryhtml_intro to get the HTML in the right order. Then, decide if the item is used only once (id="infoHerre") or multiple times throughout the site (class="infoHere").
Using the above, your code would look like
Attachment 19188
Bookmarks