RossB

Forgot to tick ‘resolved’, so doing so now.

OK, I’ve been searching the CSS sites high and low and am still stuck. I am close to getting a solution, but I’m lacking a basic piece of the puzzle and can’t find it. So, hoping some kind soul here will step in and provide this vital and elusive missing bit.

Please see this page.

The text I want to begin under the boxed intro was wrapping down the right edge of the box, so I inserted the following code before the text:

p.no-wrapp-text
{
overflow: hidden;
}

That code has stopped the wrapping, but it is visible on the published page. I’ve tried using divs in all sorts of wacky and weird experiments, but haven’t struck the correct way, obviously. If someone could come to the rescue at this point, would really appreciate it.

Cheers
Ross

Thanks, esmi. Do I take it that after surrounding the floated images as you recommend, I then use CSS in some way to achieve what I’m after?

May I ask why the Visual Ed should never be used? Does it mess things up permanently or something? If so, I wonder why it’s there as an option?

Cheers!
Ross

Aha – now that’s lateral thinking!

Silly thing is, I’m starting to think I might be best reverting to a simpler design for this page, not because of the effort involved in doing the things I’ve been asking about, but from a design and user-friendly POV. But none of your fabulous advice is wasted, WPYogi. I’m learning an enormous amount that I’ll be able to apply in future, if not right now.

Many thanks yet again!

Cheers!
Ross

Thanks so much, WPyogi – again!

And yeah, I’ve been aware of the W3schools site for some time, but didn’t have enough basic info related to CSS application in WordPress (other than some basic styling) to use much of the info there. You’ve just made a couple of things very clear in this thread that I’ve been missing, and that I’ll be able to adapt from now on. Just terrif.

Cheers!
Ross

Actually, the site I’m trying to replicate using Twenty Twelve is mine, but I created it 8 years ago using FrontPage. That was easy, since FP was WYSIWYG software.

I thank you for your feedback, but to be honest, I don’t understand what you mean by “Study the output HTML and CSS of that site and replicate on yours.”

I do have Firebug installed, but my capabilities are limited to identifying an element in my Twenty Twelve design that I want to modify, and googling for a solution (mostly on here).

How, for instance, would I use CSS to substitute for the old tables I was so familiar with in FP? I don’t know the first place to start, and yet I’ve managed to modify the Twenty Twelve site I’m working on bit by bit to have it getting close to how I want it, and learning a lot in the process. So, I’d like to give this a go, if only I could work out how to start!

Any help just in relation to creating table-like blocks of text using CSS gratefully accepted. If I can make a start on that with some basic knowledge of how it’s done, I should be able to figure out the rest.

Cheers!
Ross

Really appreciate your feedback – thank you. I was aware of that simpler code. However, I have heard that it is best to avoid ‘display:none;’ as much as possible, and opted for the more complicated code as a result. It’s not mine – I came across it on one of the many WPSupport threads I’ve been perusing as an alternative that maintains SEO-friendliness and does away with the need to use ‘display:none’.

Anyway, I deleted the complicated code and reverted to the one you suggest, adding it to similar code already in the stylesheet as follows:

.page .site-title,
.page .site-description,
.page .entry-title {
display: none;
}

/* Assuming this is your home page */
.home .site-title,
.home .site-description {
display: block;
}

All working fine, but of course as per the code, the child pages are not displaying the entry-titles. My question is, can I block specified pages from hiding the entry-title in a similar way that the home page is blocked? I’d rather do this than add a list of pages where the entry-title is blocked, which will apply to most pages on the site.

I’ve tried the following, but neither worked:

page-item-171 .entry-title {
display: block;
}

page-id-171 .entry-title {
display: block;
}

Here’s my site URL: http://ppredesign.perthpunk.com/

Cheers
Ross