help with html for photos and text

[monica44]

Hi,

I am a newbie at coding, and need some help.

The site I am attempting to build through WordPress is http://www.youreastvalerealtor.com

I am working on the “parks” page, that lists each park in the city plus its address, a photo of it, and then a short paragraph with the amenities at said park.

I was successful with the first two parks I added, where it formatted how I wanted it to. I didn’t do anything special with the code, just used the “align left” command that is inserted through WordPress when you choose the alignment you want on the photo interface (left, center, or right).

Then all of a sudden when I did my third park (Dairyland Park), the text shifted over to the right.

I then decided to build a “Parks 2” page to see if I was making a mistake with the first page I tried to build. I was successful with ten of the thirteen parks, but then the problem happened again where the text shifted to the right when trying to include the eleventh park.

The weird thing is, when I toggle on WordPress between the “visual” and “text” options on the page, the layout looks fine on both. But then when going to “View Site” to see how it looks, that is when I discovered the problem.

The page to reference is http://youreastvalerealtor.com/eastvale-parks/

Can anyone help me to figure out how to make the entire page looks as it does before the “Dairyland Park” information was entered, where it looks like this:

Park 1 Name
Park Address
Park Photo (descriptive paragraph next to photo)

Park 2 Name
Park Address
Park Photo (descriptive paragraph next to photo)

where it will follow this pattern all the way down the page with each new park I add?

I asked this question in a forum for HTML help, and got the following answer: “Running it through the W3c HTML spelling check (https://validator.w3.org)

Gets this error

“Warning: A table row was 3 columns wide and exceeded the column count established by the first row (2).
From line 424, column 2357; to line 424, column 2361
– –></td></tr></tabl”

So somewhere above that line number that is a table row that is not closed correctly or some open and close tags incorrectly nested.

View the source code in your browser, copy and paste it into a text editor that does ‘tag matching’, such as Geany or notepad++ and look for the ones that do not match.
You then have to translate that into the position in the relevant post. and correct the fault. the ‘theme’ has the basic HTML structure for the pages and has ‘placeholders’ that are filled in by PHP scripts.

The quickest ‘fix’ would be to completely delete the post that has caused the problem, and rewrite it from scratch.”

This answer left me SO confused!

 Can anyone help me?

THANK YOU SO MUCH in advance!

[scrambler]

You need to add a clearing property to your h4 tag so that it forces it to stack below the previous content. Use the text view to add an inline style property with the clearing CSS rule (in yellow below)

<h4 style=”clear:both;”>Your Title </h4>

Note: If this is a new site, you should be creating it with the latest Weaver Theme which is Weaver Xtreme. Weaver II is end of life and no longer developed.

There is a convertion procedure to convert from Weaver II to Xtreme detailed in the thread below

http://forum.weavertheme.com/discussion/11303/converting-a-weaver-ii-pro-or-aspen-site-to-weaver-xtreme

[scrambler]

As for the error reported on the validator, you have indeed some HTML error in your mortgage calculator widget, but it is just a warning for an inconsistency, and nothing to be concerned with that would cause any harm.

[monica44]

Thank you times one million Scrambler!

I tried the fix…and though it does seem to work, I now don’t know how to get space between parks/pictures of the parks.

In other words, if you look at the Parks page (http://www.youreastvalerealtor.com/eastvale-parks), the spacing is off between “Half Moon Park” and the picture above it (of Eastvale Community Park). However, the other pictures of the parks have not presented this spacing issue. I have copied and pasted the “&nbsp” command exactly as it appears in the spaces between the other parks listed, but Half Moon Park still will not give me a space between its title and the picture of Eastvale Community Park above it.

I hope this makes sense!

Do you know how to do the spacing so that each park looks the way the first five parks listed do, with a space between the picture of the previous park above it and the title of the new park?

THANK YOU! 

[scrambler]

You should not be using nbsp for spacing, this is unreliable, especially with WordPress adding things when you go between text and visual mode.

Right now you do not have the same number of line returns or nbsp in each section, and WordPress adds more paragraph tags in some than in others, causing the space difference.

If you are going to do HTML work, my advices are the following.

• Stay in Text mode
• Check the options “allow raw HTML and scripts” in the page options. That will stop WordPress auto formatting.

To increase / set the space between your images and the title behind it, the best is to use a bottom margin on the images using CSS

• First remove all the extra line returns and nbsp in your html in text mode
• Then you can set the images bottom margin globally for that page by adding the rule below in Advanced Options > Head Section > Custom CSS Rule box, using the value you want

.page-id-691 #content img.alignleft {margin-bottom:40px !important;}

[monica44]

I didn’t actually add the “&nbsp” command as it is WordPress that did it for me…so I just copied it thinking that that was the way to go.

How do I get to the page options part of the site? I tried going into the “themes” tab and then to “customize” at the bottom, and when I clicked on “customize” I got the following message: “Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 16 bytes) in /home/content/m/o/n/monicafenster/html/youreastvalerealtor/wp-includes/plugin.php on line 927.”

I thus could not get to customize the page and check the option “allow raw HTML and scripts”.

I am so sorry to be such a beginner at this and annoying you to end most likely 🙂

Do I need to worry about the “fatal error” message, and if so, how do I take care of it? I used to have a gallery plugin plus tons of photos uploaded to the site, but I got rid of the plugin and a majority of the pictures, thinking that would solve the issue…but it didn’t unfortunately.

Thank you!

Also…I mistakenly said I was using Weaver II but now I see it is actually Weaver Xtreme that I built the site on…

[scrambler]

Sorry i missed the fact you were on Xtreme…

The “Allow raw HTML and script” option is in the Page editing page, the same page where you are when adding content in the Contet editor of your page.

You do need to make sure you have installed the Weaver Xtreme Theme Support Plugin.

Below the content editor where you are putting your images and text, there is a section called Weaver Xtreme options for this page. In the per page options section you will find the checkbox for it.

About your Customizer error, you may not have enough PHP memory, you may want to ask your host provider to set your PHP memory to 128.

[monica44]

Okay, I found the checkbox for “allow raw HTML and scripts” but I am still unsure about the “fatal error” message and what to do about it (if anything).

I took out all the “&nbsp” that WordPress put in and then updated the page. When I did that and then went to “Preview” it showed me that the names of the parks are there but the addresses are not. So I then went with the <p> and </p> tags around a park address, and it put the entire address on one line instead of two like a typical address format should be.

Checking off the “allow raw HTML and scripts” box also took away the visual editor on the page, so now I can’t see what I am building or toggle between the visual and text parts of the page.

Am I doing something wrong here?

I also don’t know where on an image to implement the “.page-id-691 #content img.alignleft {margin-bottom:40px !important;}” command.

I apologize!

[monica44]

I do have the Xtreme Support plugin already installed. I will also call my host company and ask them to increase my memory to 128 (it is GoDaddy if that makes a difference).

Is there a way to NOT check off the “allow raw HTML and scripts” checkbox so I can still have both the text and visual editors present on my WordPress pages? Also…I understand what you said about not using “&nbsp” but it will automatically be added again if I don’t have the “allow raw HTML and scripts” checkbox checked off…

I wish it was not so complicated to build what is seemingly an easy design!

[monica44]

Just spoke to my hosting company, and they said my memory is already at the highest it could be. They also think it is a plugin issue that is causing the memory problem. I think it is the plugin “bbPress” (the forum plugin and its associated plugins that go with it) that is causing the issue with the memory, so I am going to take all of them out (and forego having a forum at all on the site). Thank you for that advice!

I still don’t know how to get around the other issues I posted about though…

And I thank you so much over and over for all the help and advice you have provided thus far.

But how do I get around my need to have the visual and text parts of the page and the &nbsp issue?

THANK YOU!

[scrambler]

If you check the Allow Raw HTML and script, Then you would have to create your paragraphs manually with <p>text</p>

If you are not comfortable enough with HTML, do not check the “Allow Raw HTML and script”.

You still need to switch the editor to text to make sure there are no nbsp, and no extra line returns between the text and the Title below it (only one line return)

You don’t need to forgo the plugin if it cause the customizer error. Until the plugin developer fixes the issue, you can just deactivate the plugin when you need to use the customizer, and reactivate it after that.

For the CSS rule, I told you where it goes, it is in Advanced Options > Head Section > Custom CSS Rule box

[monica44]

Where do I find “Advanced Options > Head Section > Custom CSS Rule box”?

I have looked everywhere on the site, even going into the “Customize” tab after clicking on “Appearance” and I still cannot find how to get there.

I apologize!

Can you tell me how to access it?

Thank you!

[scrambler]

OOPS, that was when I thought you had Weaver II….

in Xtreme, custom CSS goes into Main options > Fonts & CUstom > Custom CSS Rule box

[monica44]

Here is all the content in the CSS Rules box:

/* Custom Rules for Pioneer Subtheme */

.page-link {display: block;padding: 2px 8px;line-height: 1.5;}
.page-link > * {background-color:#29598C;color: #FFF;display: inline-block;padding: 2px 8px;border-radius: 3px;}
.page-link a {color: #fff; padding: 2px 8px;text-decoration: underline;}
.page-link a:hover{ color: #ccc;}
#container .nav-previous a,#container .nav-next a,.more-msg,.form-submit input{background-color:#29598C;color: #FFF;padding: 2px 8px;border-radius: 3px;line-height:2;}
.form-submit input{line-height:1;}
#infobar_paginate .page-numbers{background-color:#29598C;color: #FFF;padding: 2px 4px;border-radius: 3px;text-decoration:underline;}
#infobar_paginate .current{text-decoration:none;}
#breadcrumbs{background-color:#f8c55b;color: #f8c55b;padding: 2px 4px;border-radius: 3px;}
#breadcrumbs a{color:#fff;text-decoration:underline;}
#author-info{background-color:#FFDC8A;border-radius:3px;}

Do I add the “.page-id-691 #content img.alignleft {margin-bottom:40px !important;}” at the very bottom?

THANK YOU!

[scrambler]

You can add it at the top or the bottom, or anywhere in between 🙂

But for good measure, add a comment before, so you will remember what that was for

/*-increase margin below images in page 691*/
.page-id-691 #content img.alignleft {margin-bottom:40px !important;}

[monica44]

Okay.

Last question (I hope!) 🙂

Will that rule apply to all pages from now on, or just the “parks” page I am working on?

[Author]

Posts