CSS Line break solution for h1 tag

HTML & CSS
1

Buon giorno from 1 degrees C pitch black Wetherby UK :slight_smile:

On this page http://www.ikogroup.co.uk/Products/Flat-Roofing/Cold-Applied-Liquid-Systems/Roof-Waterproofing---Detailing/ I need to add this sentence

**Liquid Roofing Roof Waterproofing & Detailing**

but with a carriage return (not using </br> tags).

Illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/h1-iko-css-solution-valid.jpg and detailed here is the css solution i conjoured up:

<h1 style="><span style="display:inline-block;">Liquid Roofing</span><span style="display:block;">Roof Waterproofing & Detailing</span></h1>

So my question is please:

“Is this ok as stable fix or could it trigger glitches etc?”

Grazie tanto,
David

off topic - How do make sure something you enter in these posts stays invisible to search engines. For example if i didnt want the term coconut juice to get indexed what could i do?

2

Question for anyone, please: Why would one NOT want to use a <br> tag in that situation? What is the down-side or violation?

3

Buona sera…

You have to THINK to yourself…
hey if i can put inline styles… why couldn’t i just add an opt in class?

As far as glitches goes… well there is ONE big one. That is no matter what you change your style sheets to in the future, your inline style will apply (inline overrides everything!!). Trust me, this is not something you want.

The BR solution is NOT a bad idea… and may even be combined with what you have here but again, you have to THINK: do the breaks have meaning? ( you have used SPANS, but I call those LAZY SPANS. Lazy in that the separation could be aesthetic or semi-semantic.) The break may seem minor … but it’s not.

Take my own personal site for example:

RAY MESSINA <–this the brand and my identity ( I cant be anyone else w/o legal recourse)
Marketing & Design <– this is what i do ( but I have also been a copywriter, web designer, photog, illustrator (struggling) , interpreter (Italian, Spanish, Portuguese, Russian) , front-end dev, and (almost) bio-chemimst… lets not ebven go into hobbies)
however my LLC reads: RAY MESSINA Marketing & Design

WITH ALL STYLES OFF (and this is how you begin to think)
RAY MESSINA Marketing & Design

is NOT the same as

RAY MESSINA
Marketing & Design.

Since I believe the latter represents MY case best, I do the following:

<h1 class="logo"><big>Co Name</big><br>Company function</h1>

So basically with styles OFF , you STILL get the “semi-semantic” break, there is still a distinction between the BRAND and the service provided and it still an H1 ( or DIV) of the whole line for TRUE semantics. If you dont need the break when styles are off then dont use the BR, as the same can be achieved by the rule: .logo big{display:block; }

I hope you see what I am getting at here :slight_smile:

4

[font=verdana]The big problem is that it makes no sense with styles turned off, as it just says

Liquid RoofingRoof Waterproofing & Detailing

and you haven’t even got a break between the words. As ronpat says, what’s so wrong with using <br>? If you can’t do that then I would be tempted to put in something along the lines of

<span style="display:none;"> - </span>

between the two lines (in addition to what you’ve got), to force a break when styles are disabled (equally, you could put a <br> inside the <span>, which would then only be applied when CSS is disabled).

[ot]

How do make sure something you enter in these posts stays invisible to search engines. For example if i didnt want the term coconut juice to get indexed what could i do?

The simple solution is not to mention coconut juice. We have had a number of cases where developers have asked questions on here and it has come back to bite them when their clients have searched for relevant terms and either (i) the Sitepoint thread asking about how to achieve the goal outranks the site itself or (ii) the Sitepoint thread asking about how to achieve the goal is visible in the SERPs and shows that the developer was, shall we say, being optimistic when he was touting his work to the client. We don’t particularly want either of those scenarios to play out, but nor do we want to spend our time going back and editing long-dead threads to remove key phrases or URLs that connect it with an angry client’s site.

You may prefer to mock up a dummy page that replicates the problem you are having but using different words/themes, so that you never need to use the client’s site’s phrases here in the discussions. If you can host the site on a staging server while it’s under construction so that you don’t need to give out the real URL, even better. If you need to refer to a problem on a live site but don’t want to risk your reputation by publishing the URL here then that is one situation where we might allow a bit.ly type link.[/ot][/font]

5

EXCELLENT EXAMPLES!!! I had to read it at least twice before it began to gel, but once it did, WOW! Makes very keen sense. Thank you, d_p and Stevie!