Problem 2 of 3: Just cannot get text alignment right!

This topic contains 8 replies, has 2 voices, and was last updated by  Sebastian 7 years, 5 months ago.

Author Posts

vargula

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hi
here is the second prob: in the picture [1] you see a snapshot of an image and some text on my current homepage as it is. I tried a table without success to place the image so it appears as I really want it (I had to do this in a Word document mock-up = image [2].
I could not see any function in Microthemer that allows me to place images and text like [2] so that the text is adjacent to the small image.
Would be really grateful for any tips before this sends me mad!
Ed

[1] https://dl.dropbox.com/u/1129320/downloads/actual-alignment.jpg
[2] https://dl.dropbox.com/u/1129320/downloads/alignment-as-preferred.jpg


Sebastian

Hi Ed,

Yes you can do this. You just need to apply a “Float” value of “left” to the images on the home page (float is in the behaviour group of styling options). Or, in WordPress, when you click on the Edit image icon you should see an option to set the alignment to “Left”. That will essentially do the same thing (make the images float left) but it will do so by giving the images a class that the Twenty Eleven stylesheet already applies “float:left” to.


vargula

Thanks, will try this over next few days.


Sebastian

OK


vargula

Well almost there – it worked well on home page i.e. http://miconsent.org/ except it put a strange wrap under standards used – i checked the html and all lines were the same – so don’t know why that single line looks differently just with the changes applied.

The other problem seemed to be consequential -on the contacts page. I couldn’t get back to a straight four photos with centred text underneath – tried for an hour!

any tips v grateful… but the floating image did the trick!

BR

Ed


vargula

BTW the contacts page one where the above tweak changed is http://miconsent.org/?page_id=58


Sebastian

Hi Ed,

1. To sort the problem with the horizontal rule you need apply a “clear” style to it. You will need to manually create a selector for this. Open up the “Main Body” section and click the “Add New Selector” button. Enter “hr” into the textarea and “Horizontal Rule” in the label field.Then click the “Add” button. Click the “Edit Styles” link on the selector you just created to open up the style options. Finally, open up the behaviour options and set “Clear” to “left” (that will clear the left float and allow your horizontal rule to display properly).

2. Yes the problem on your contact page is caused by all images now floating left, not just the ones on the home page. To only target images on the home page you could follow my previous advice about page-specific CSS targeting, or you could remove the float left style in Microthemer and use the image alignment option within WordPress.

Hope that helps!


vargula

Thanks for all the above. The best workaround I found by accident was to look at my page-level html and enter class=”alignleft” immediately following every img – and it worked. Is that a good way out or should have I persisted with float?


Sebastian

Hi Ed,

Adding an “alignleft” class to images you want aligned left is fine. The end result is the same. If you look at style.css on line 157 you will see that the Twenty Eleven theme is applying a “float:left” to elements with the class “.alignleft”. So float is actually still being used. You’re just not using it directly in Microthemer.

Cheers,

Sebastian

You must login or register to reply to this topic.