Need some coding help

In My Humble Opinion
1

I’m in the middle of rebuilding a new website for my store. One part has been giving me a lot of trouble over the past few days. I have a menu for my customers, right now, I’ve simply uploaded a Jpg (of a photoshop file) of it. Honestly, it looks terrible. It’s a bit blurry and the sizing it all wonky. Between that and the fact (fact?) that I think having the menu typed will help with SEO results, that’s what I’m working on.

Now for the hard part, I want this menu to be two columns. My first attempt was to create a two column template in OO Writer and C&P it over…that just didn’t work. It was promising, it created two columns, it just didn’t pan out, for various reasons.

I’ve been working with the message board for the site I’ve been using (site? probably not the right word, the place I got the code from).

A few people on that message board suggested I use CSS columns. I’ve implemented them, but the problem I’m having is that I can’t force my text to go from one column to the next at point of my choosing. Everything I’ve tried, so far, doesn’t seem to make any difference, it just splits it evenly.

The code someone suggested is this:



<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 400px; -moz-column-width: 400px; column-width: 400px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em; -webkit-column-rule: 1px dotted #ddd; -moz-column-rule: 1px dotted #ddd; column-rule: 1px dotted #ddd;">
    <p>Rest of the topic html goes here...</p>
</div>

This just goes at the top of the specific page I’m working with. Like I said, it nicely creates two columns (but I haven’t played with the parameters yet), but I can’t find a way to pick where I want my text to split. I’ve played around a little with adding break-before and break-after codes into what I posted above, and then adding in things that I thought would cause a column break, but no dice so far.
Letting the website just automatically split it at the middle to make two even columns is a bit of an editing nightmare. Even trying to do some of this in HTML instead of the built in WYSIWYG editor makes it a bit harder than it seems like it needs to be.

Any ideas?

Two things:
1)I’m using a nopcommerce site
2)Even if you’re not familiar with nopcommerce, it’s a responsive site, so part of what I’m fighting (and this was the problem with the tables I used the first time) is that how something looks on one screen (like a computer), isn’t necessarily how it will look on another (like a phone).

2

I am having a really hard time figuring out what you are trying to do. Also, it’s really hard to do CSS-intensive stuff in a vacuum, since all of the other CSS on the site will influence what you are doing.

I am, however, a professional web designer of 20 years who manages a nopCommerce site. So if you would be willing to show me your dev site I can try to help. Send me a PM if interested.

3

To make it a bit more simple:
I want to make one of the pages on my site have two columns. I’ve accomplished that with the code I posed above.

However, I can’t find a way to force the text I enter to split where I want it to split. It just creates two equal columns.

Just a moment ago, I may or may not have stumbled onto the issue.
In an attempt to retain my formatting, I can’t just type straight across like I’m typing a document. It’s a menu, descriptions on this line, prices on the line below it etc. I realized that each line (each time I hit ‘enter’) is wrapped in a set of div tags. I think that’s the problem.
What I’ve been doing is using various break-before/after commands in the code above and the putting something that should cause it to break where I want to break (<p> or <h> tags). But I’m thinking, or rather realizing, that since each line is it’s own element, as far as the code is concerned, there’s nothing special about that one that I added, so it still gets split down the middle.

Anyways, there’s where I stand now. If it still doesn’t make sense, I can PM you in the morning with the unpublished temp page that I’m using to play with this (but it’s part of my live site).

As I said on the other board a few times, it just doesn’t seem like this should be so complicated. Either I’m missing something or totally going about it in the wrong way.

BTW, are you on the nopcommerce forums?

4

Still not sure what you’re doing, sorry. I’d need to see it.

I’m on the nop forums technically but not sure if I have ever posted.

5

I’ve used the workaround by stackoverflow user Joe, from here, in the past. Basically, you’ll want each column enclosed in its own div. You can play around with the various column-break-before type directives until you find what works for you - remembering to test on multiple browsers, of course, because who cares that it’s 2016…

6

I’ll pm you a link to the temp page I set up to play with this.

I’ve seen some mention of that workaround (using boxes), I just didn’t get into how to create a box. HTML (and everything about web programming) is just something I learn as I go.

7

This page tests various ways of using column breaks.

If you’re not familiar with CSS, I think you can get by with copying & pasting the code to inside your style element, just before the end quote.

8

Zipper…Finally getting back around to this project. Thanks for the help it was…well, helpful. You can take a look at that page again if you want, but I just followed your lead.
A few more questions now:
1)If you look at the page as it is now, that’s the front of our (paper) brochure (other than some spacing tweaks I need to make and probably some typos I missed), I need to move on to the back next. But it dawned on me that if I do that, when the site collapses to one column, it’ll go from Column 1 page 1, to Column 1 page 2, then back up to Column 2 page 1 and straight down to the bottom of column 2 page 2.
Is there a way to force a page break? So that as a person scrolls down on their small screen device, they’ll see the two columns from the front page (that I have online right now) and then the two columns from the back page?

Is this going to mean recoding it as 4 columns that’ll turn into two on most screens and one on small screens?

2)Is there a way to get things to line up? As you saw a few of the things you typed had sizes and prices, multiple lines of that. Back in the day, I could type something like that in Word and use tab to get everything exactly lined up. In Photoshop, I can kind of do it a different way. Is there a way to do it here? Using spaces just makes it sloppy since each line ends up being misaligned by about a half a character. For them moment I’m just going in the opposite direction and not lining up each line with the ones above and below them, but I figured I’d ask.