Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › How to justify h1?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 15, 2012 at 12:11 pm #40303
    BibCra
    Participant

    Hi.

    I’m having problems justifying h1 text in a 940px div for a site I’m working on.

    The Best Studio
    Awesome Artists
    Black Bird Tattoo

    I applied text-align justify but it had no effect. I want all three lines completely justified. Would appreciate any advice here.

    Thanks.

    :)

    October 15, 2012 at 12:26 pm #111914
    Paulie_D
    Member

    So you actually have three separate lines of text inside an H1?

    What are you expecting ‘justify’ to do…it can’t stretch text after all?

    October 15, 2012 at 12:29 pm #111915
    BibCra
    Participant

    I’m trying to layout the text like http://simpleasmilk.co.uk/. I have tried playing around with the markup & CSS but still can’t get it to do what I want. Do you have any suggestions?

    October 15, 2012 at 12:32 pm #111917
    Paulie_D
    Member

    If you look at their markup they put each letter in a span…very heavy codewise.

    My advice would be to put three separate headings inside an ‘hgroup’. Give each of the headings a class and style them all independently.

    October 15, 2012 at 12:36 pm #111918
    chrisburton
    Participant

    They’re using lettering.js which puts each character into a span. This is your best option.

    October 15, 2012 at 5:50 pm #111938
    joshuanhibbert
    Member

    This should do what you are after: http://www.zachleat.com/bigtext/demo/

    It’s very similar to lettering.js, but won’t require you to manually adjust each glyph.

    October 16, 2012 at 5:02 pm #112010
    BibCra
    Participant

    Thanks for the responses … Much appreciated. Is there no way to do this using CSS alone and avoiding JS?

    October 16, 2012 at 6:02 pm #112015
    joshuanhibbert
    Member

    I’m not sure if you looked at the link I posted, but the output code is just CSS.

    October 16, 2012 at 6:04 pm #112016
    BibCra
    Participant

    Hi Josh, I can’t get it to work, I don’t even see what the problem could be? I have set the width to 620px in Big Text, copied the source, pasted and nothing … :(

    October 16, 2012 at 6:11 pm #112018
    BibCra
    Participant

    Thanks J,

    Without playing around with letter spacing etc … And just focusing on 1 line of text. Is there a method which will ‘span/stretch/justify’ a headline to a specific width. So I want 1 headline to span 620px for instance?

    October 16, 2012 at 7:58 pm #112023
    joshuanhibbert
    Member

    If that’s the case, you are best using a jQuery plugin like http://fittextjs.com/ and applying it to each line.

    October 17, 2012 at 12:47 am #112032
    TheDoc
    Member

    @joshuanhibbert that BigText Wizard thing is pretty cool. If you don’t have dynamic text, it’s perfect!

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.