SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Line break solution for h1 tag

    Buon giorno from 1 degrees C pitch black Wetherby UK :-)

    On this page http://www.ikogroup.co.uk/Products/F...g---Detailing/ I need to add this sentence
    Code:
    **Liquid Roofing Roof Waterproofing & Detailing**
    but with a carriage return (not using </br> tags).

    Illustrated here http://i216.photobucket.com/albums/c...tion-valid.jpg and detailed here is the css solution i conjoured up:

    Code:
    <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?
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:


    Code:
    <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

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Zygoma View Post
    On this page http://www.ikogroup.co.uk/Products/F...g---Detailing/ I need to add this sentence
    Code:
    **Liquid Roofing Roof Waterproofing & Detailing**
    but with a carriage return (not using </br> tags).

    Illustrated here http://i216.photobucket.com/albums/c...tion-valid.jpg and detailed here is the css solution i conjoured up:

    Code:
    <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?"
    The big problem is that it makes no sense with styles turned off, as it just says
    Code:
    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
    HTML Code:
    <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).

    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?
    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.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •