Content not "lining up" on published page

  • 1
  • Question
  • Updated 7 years ago
Hi there, am having major issues getting my site to look right - things don't "line up" as they do behind the scenes and it just winds up looking messy.. an example is this page: http://www.scwahms.com/party-entertai... - it looks like everything is neat and tidy when I open to edit, but the published copy is a mess!

I'm pulling my hair out - I hate how unprofessional it looks and I'm scared I'll be forced to leave Yola if I can't fix it... and that's not a nice prospect at all!

Please help me, I'll love you forever!
Photo of Erin Law

Erin Law

  • 13 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
I checked out your page and it appears that everything is lined up into 4 columns neatly and inside the boundries of the template inner wrapper. I'm using FireFox 4 as a browser with a screen res of 1440x900 on the one screen (image 1 I've posted). The other is FF4 with a screen res of 1024x768 (image 2). Both screens don't have anything out of whack from what I see. I might suggest that you use a horizontal rule line to separate the different areas so that it isn't one continuous block. Just drag an HTML widget to the space between entries and type in HR with a < symbol before the H and a > symbol after the R. Click the Center Alignment icon at the bottom of the HTML widget and save. This will give you a horizontal rule line between things.
Peach :o)~
Image 1
Image 2
Photo of Erin Law

Erin Law

  • 13 Posts
  • 0 Reply Likes
Thanks so much for your help... This one isn't as bad as some of the pages, but my concern is that when editing, the text "Spritely Designs" is on the same line as "Trace's Fun Faces" - where it shows slightly lower here. As you can imagine, on my "busier" pages this throws things out substantially, and is very fiddly to try to fix due to it looking fine from the back end.

Definitely considering the dividing line as an alternative, but a bit miffed the finished product isn't the same as what I have behind the scenes... tearing my hair out and just want it to look pretty, haha!
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
Try using the Margin settings in your Text Widget boxes in the Sitebuilder (you will see the word Margin in the blue band at the top of each Text Widget on the page). If you need, for example, Trace's Fun Faces to be in line with Spritely Designs (which appears lower down on the right), add a few pixels of bottom margin to the Trace's Text Widget. Then save and use the Preview option in Sitebuilder (located at the top of the page just under the big green Publish button) and view the results to see if you've got it positioned correctly. Add more or less pixels to the bottom Margin option until you get the result you want. This is the easy, "no HTML code needed to be added" option.
The only other way to get things to line up is to place a TABLE code on the page and making the page a single column set up. The table code can be made to span the entire width of the page and be as long as you need it to be. It doesn't have to have borders that are visible and you can continue to add rows to it as you add more content.
If you need help on how to create a table code, let me know and I'll be glad to help you out best I can.
Peach :o)~
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Just to further Eat_A_Peach's comments, you could use Column Dividers, they act as tables and can really define the layout of a page. This widget can be found in the Basics tab.

Just add 7 to that particular page and add the current widgets from the page into the column dividers. This will allow you the rows you are wishing to achieve.

Hope this helps,
If you need anymore assistance, just let me know!

Kind Regards,

Andi
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
Oh, I forgot all about the Column Divider widget! Excellent idea Andi!!! Much easier than doing a table code if the user isn't familiar with using HTML (and table codes can get so big and confusing so fast!)
Peach :o)~
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Excellent help on this thread everyone!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
No problem Sanja,

Always here to help...

Kind Regards,

Andi
Photo of Erin Law

Erin Law

  • 13 Posts
  • 0 Reply Likes
I appreciate your efforts to help, but I am already implementing many of the suggestions. I will paste here and example of what I have in front of me.

I have column dividers, I tried margins and I've even inserted text boxes to "fill gaps" where content isn't the same length down the page (to "fill" the box) and it all looks perfect from where I sit......

Until I go to the published site.

Looking through my site, I'm sure you can see the number of listings I have - and how many of them are higgledy piggledy all over the place.

I can't understand how I can "guess" how it will look when published - and having to check this EVERY time I make a change makes it a really really long process to get the finished product looking right (and as a result, the alignment I see in behind the scenes will then be out - because in order to drop the "Spritley Designs" listing down (for example) I actually have to edit the back end so that it is sitting LOWER than the "Trace's Fun Faces" one....

I've just discovered the Preview button (which makes it a tiny bit faster to change/check), and edited it so the published page looks a bit better:


But this is what I now have behind the scenes:


I just want it to look like it does when I'm working on it :(
Photo of Erin Law

Erin Law

  • 13 Posts
  • 0 Reply Likes
Sorry, will post this pic too - with the Widget borders turned on:
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Erin,

Instead of using the 2 column layout, just use a 1 column layout and use as below:

You should use this as it will make your page look as if it has 'rows'.

Hope this helps.

Andi
Photo of Erin Law

Erin Law

  • 13 Posts
  • 0 Reply Likes
The prospect of doing this to my whole site makes my head 'splode :(
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
It would mean re-creating the wheel, just reusing the same old spokes!

All you would have to do is:

1. Add a column divider to the page.
2. Add the first 'row' of already created content into the column dividers.
3. repeat process for page.
4. Save and a voila you are done.

It really wouldn't take too long and would be a 100% certainty to work as required.

If you need anymore assistance on this matter, let me know

Andi
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
Thing is, the actual display on the published site isn't always going to be lined up for everyone because each browser renders code just a bit differently. The only way to get it to display as closely to accurate for each browser is to use true HTML code with a table tag.
As for the difference you're seeing in the sitebuilder vs. the published site, that might be due to the fact that the sitebuilder doesn't make total use of the whole page (it has to have options/navigation menus at the top and sometimes even the widget navigation options on the right), so when you use the Preview window that's a more accurate representation of what you're going to get when the page is published.
Also realize that alignment without table tags in the HTML code can be varied due to the viewer's screen resolution and even the number of screens they view on. I currently have 3 available screens, each with different resolutions. A site designed in a resolution of 1400px + wide may not (most likely will not) have correct alignment on a viewer's screen if they have a resolution of 800x600 if the design is more than 800 pixels wide.
Here's a really quick way to add a table to your site to make sure that alignment always starts at the same point in each row in each column. Make a new page (but don't include it in the navigation menu) and name it TEST. This "test" page should be a one column layout. Drag an HTML widget to the top of the empty space and paste in this code:
<!----
<table border="1">
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
------>
Make sure to hit the CENTER icon at the bottom left of the HTML widget to get the table centered on the page.
Save it and preview and you should see a 2x2 table with words in each cell. Because this is a true table, each row will expand downward to accomodate each listing in each cell and the next row of 2 side by side cells will start on the same line. The table doesn't have to have a border, I just put a 1 in there so you could see the boundries. You just change that number to zero when you're done. You'll have to enter your listings into the cells as HTML code. If you need help with that, I will gladly give you a hand (or since you have FF, you can just open your page up in the browser at the published URL, highlight a listing, and while highlighted right-click and choose View Selection Source and you will see the HTML code for that listing highlighted in a pop up box. Copy the highlighted code from the box and paste it where the text "Row 1 Cell 1" or which ever cell you want it to be in is located. Then again save the HTML code and preview. If all of this works out to your liking, we can change the test page to your index page and just use the old index as a test page so you can add entries and get the HTML.
To add more rows/cells to the table, just continue to copy the pattern in the code above (one line that starts with <!--- <tr> and ends with </tr> ---->
Hope this helps :)
Peach :o)~
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I would just like to mention that the way the column dividers have been programmed by the Yola creators is that they act like tables. So if you add a column divider like I have mentioned then there will be no difference in the end result.

I swear by the column dividers in this kind of situation, they can make a good website great, and they are easy to use.

Andi
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
I just did a test page with a column divider and then viewed the source code and it does in fact render just as a true table code would. Excellent idea as usual, Andi. Guess I'm just old school and forget that there are widgets for somethings that actually are designed to work properly (many years of banging up against improperly done widgets that don't render correctly in different browsers is something that I'll have to get used to not coming across here at Yola ;)
Peach :o)~
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Diane :)

I always use them as they are very easy to use!

P.S. A little tip, if you are adding a table to your Yola site, then copy the table code and add it to the text widget by pressing the HTML button at the end of the text toolbar. This will allow you to edit the table without having to edit the raw code. It is a really useful feature!

Andi
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
Oh, thank you for the tip! I'll have to try that out! I don't use tables too often, but on rare occasions I like them for the border effect around text. It's like having the ribbon from MS Office available! Soooo cool!
Peach :o)~