sideboxes appearing at bottom or on the wrong side

[pazdar]

I am in the process of upgrading from V154 to V157. I'm using the Responsive Classic template (thank you for creating that). My sideboxes are showing up on the bottom of the home page and not all of them. I am using a test site off of my main site to test everything before making the move. I've tried adjusting the various sidebox widths (in every conceivable combination) in the configuration box on the Admin page, that didn't work. I also adjusted the widths of home page information as compared to my current home page so that it was narrower. How do I get them to appear correctly?

[VDecalS]

I've had this happen when my elements were not stacked or closed in proper order. You might try checking them with an element tag checker.

[pazdar]

What is an "element tag checker"? I pulled up the column box chart from my current and used that to rearrange the sideboxes. The ones I want to see are now visible but they are still on the bottom of the home page.

[VDecalS]

There are many free services to check your HTML code. Just googled "element tag checker" and got these..
https://www.freeformatter.com/html-validator.html
https://www.aliciaramirez.com/closing-tags-checker/

[dbltoe]

I am in the process of upgrading from V154 to V157. I'm using the Responsive Classic template (thank you for creating that). My sideboxes are showing up on the bottom of the home page and not all of them. I am using a test site off of my main site to test everything before making the move. I've tried adjusting the various sidebox widths (in every conceivable combination) in the configuration box on the Admin page, that didn't work. I also adjusted the widths of home page information as compared to my current home page so that it was narrower. How do I get them to appear correctly?

Since not all combinations were possible, responsive_classic sets up the columns based on

1. the left and right columns being the same width
2. the left and right column widths being set to match the numbers in the responsive.css stylesheet.

Here's the code from that file. Note that the widths are done in increments of 10 through a width of col980. I highlighted the default below in red

/* No reason to edit the below pixel calculations */[class*="col"]{float:left;margin-left:5px;}
.col10{width:10px;}.col20{width:25px;}.col30{width:40px;}.col40{width:55px;}.col50{width:70px;}.col60{width:85px;}.col70{width:100px;}.col80{width:115px;}.col90{width:130px;}.col100{width:145px;}.col110{width:160px;}.col120{width:175px;}.col130{width:190px;}.col140{width:205px;}.col150{width:220px;}.col160{width:235px;}.col170{width:250px;}.col180{width:265px;}.col190{width:280px;}.col200{width:295px;}.col210{width:310px;}.col220{width:325px;}.col230{width:340px;}.col240{width:355px;}.col250{width:370px;}.col260{width:385px;}.col270{width:400px;}.col280{width:415px;}.col290{width:430px;}.col300{width:445px;}.col310{width:460px;}.col320{width:475px;}.col330{width:490px;}.col340{width:505px;}.col350{width:520px;}.col360{width:535px;}.col370{width:550px;}.col380{width:565px;}.col390{width:580px;}.col400{width:595px;}.col410{width:610px;}.col420{width:625px;}.col430{width:640px;}.col440{width:655px;}.col450{width:670px;}.col460{width:685px;}.col470{width:700px;}.col480{width:715px;}.col490{width:730px;}.col500{width:745px;}.col510{width:760px;}.col520{width:775px;}.col530{width:790px;}.col540{width:805px;}.col550{width:820px;}.col560{width:835px;}.col570{width:850px;}.col580{width:865px;}.col590{width:880px;}.col600{width:895px;}.col610{width:910px;}.col620{width:925px;}.col630{width:940px;}.col640{width:955px;}.col650{width:970px;}.col660{width:985px;}.col670{width:1000px;}.col680{width:1015px;}.col690{width:1030px;}.col700{width:1045px;}.col710{width:1060px;}.col720{width:1075px;}.col730{width:1090px;}.col740{width:1105px;}.col750{width:1120px;}.col760{width:1135px;}.col770{width:1150px;}.col780{width:1165px;}.col790{width:1180px;}.col800{width:1195px;}.col810{width:1210px;}.col820{width:1225px;}.col830{width:1240px;}.col840{width:1255px;}.col850{width:1270px;}.col860{width:1285px;}.col870{width:1300px;}.col880{width:1315px;}.col890{width:1330px;}.col900{width:1345px;}.col910{width:1360px;}.col920{width:1375px;}.col930{width:1390px;}.col940{width:1405px;}.col950{width:1420px;}.col960{width:1435px;}.col970{width:1450px;}.col980{width:1465px;}

Using any width not in this chart will jump things all over the page.

[pazdar]

I greatly appreciate everyone's help. It was neither of your suggestions. It appears to be caused by the differences between html4 and html5. I got one part of it to look right and am still working on the remainder. I'm posting this before finishing as I'm sure I'm not the only one who has run into this issue. Thank you again

[dbltoe]

It appears to be caused by the differences between html4 and html5.

I'm not from Missouri but, we have cousins there.

You will be the first to ever have this problem from html code. Especially with responsive_classic.

But, since we have no link to look at, there's not much we can do.

<rant>The posting tips should ask about gas in the car. Maybe we could get at least some info.</rant>

What is line 31 of your responsive_css? Can you at least share that with the two lines on either side just in case? Use the # above to enclose the code.

What are the column width settings for the first two in Configuration > Layout Settings?

[pazdar]

Good Morning;

To clarify things, this only occurred on the "main page". The other pages worked perfectly.

Main column settings are at 150 (default)

I did not touch line 31 in responsive.css

To give an example of some of the code changes that I had to make between V154 and V157 for the main page here is one example:

V154 version:

<center><b><I><font size=+2><font face=lucida calligraphy><font color=#000000><br><br>Easy to drink fun wines made with <br>the finest grapes, choice fruit, herbs, and spices. <br>
<br></I></font><font face="times new roman">
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>


V157 version:

<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>

It still needs some tweaking but it works.

[pazdar]

Speaking of tweaking, how do I change the code so that both lines are not italicized? As you can see I have a "</I>" after the first line but it is ignored by the computer.

[dbltoe]

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

<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

<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

<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

/* 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