Need help? Check out our Support site, then


Making Post Headings Justified

  1. Hey guys! I was hoping to get some help with my blog: http://alternativemagazineonline.co.uk/

    I am basically trying to make the post headings run that little bit longer, or justify so that there aren't gaps at the end. I have noticed if the heading is even one letter too long, it doesn't just put the one word on the next line (which would be fine) Instead, it often drags a few other words down as well, resulting in 2 shorter lines (which I don't think looks that great). I have tried altering this in CSS to no avail. Any suggestions?

    The blog I need help with is alternativemagazineonline.co.uk.

  2. Try this

    h2 {text-align: justify;}
  3. Thanks that worked to justify but sadly it just makes the top line overly space out and the bottom stays the same! Is there any way to make the heading line longer to fit on more words?

  4. For that you'll need to widen your whole layout or make the font titles smaller.

    Recommendations/Observations

    a) Define your font size in "em" or "%" units, not "px".

    b) Write you selectors in order of (markup) structure. The code will be more organized. I recommend this style:

    element selectors
    #id selectors
    .class selectors

    Your issue

    If you don't want to widen your layout then, like I said, make your titles smaller. If you widening the layout is okay with you, then replace what you currently have in your CSS Editor with this:

    body {
    background:#fff;
    color:#444;
    font:62.5% Arial, "Times New Roman", Times, serif;
    text-align:center;
    }
    
    h1 {
    display: none;
    }
    
    #nav {
    width:100%;
    border-top:0 solid #222;
    border-bottom:0 solid #222;
    float:left;
    }
    
    #pic {
    width:770px;
    height:200px;
    border-bottom:0 solid #222;
    }
    
    #footer {
    width:870px;
    padding-top:8px;
    border-top:4px solid #222;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3em;
    float:left;
    clear:both;
    }
    
    #page {
    width: 870px;
    }
    
    #content {
    width: 600px;
    }
    
    #content_box {width: 100%;}
    
    .post {width: 100%;}

    Of course, you'll need to create another header image to fit the new width. The new width should be of 870px.

    Notice I changed the "h1" selector definition to "display: none;". Setting the font size to 0 is not correct if you just want to get rid of the text, nor you need the other properties.

    HTH.

  5. Ah wow thanks for such a comprehensive reply! Sadly, my CSS knowledge is fairly limited but I shall give it a try. It is a shame the heading area cannot be widened independant of the other areas of the site. I don't really want to widen the whole thing (would need a wider header then as you said!)

    I shall therefore try to decrease the header font size slightly, although knowing me it is going to take forever! :-P

  6. No problem.

    My bad, I should've given you the code for the second option as well.

    To make the titles smaller, add this to your CSS:

    h2{
    font-size: 1.8em;
    }

    That should make the text just a tad smaller than their current size. You may need to play with the values, though.

  7. Thanks! It turns out 1.8 was pretty perfect, what do you think of the result?

    Is there any way to force a break in a heading btw, so as to ensure some words are on the bottom line of a 2 line heading? I really appreciate your help, this has been bugging me for months! Took me long enough to CSS edit the theme to my liking all those months ago, but I think I am slowly learning...

  8. Is looking good.

    I still recommend you not using this (it's just not correct)...

    h1{
    font-weight:bold;
    font-size:0;
    line-height:1.8em;
    }

    But this:

    h1 {display: none;}
  9. Just changed to that, thank you! As I said, learning, albeit very slowly...

  10. I may as well ask quickly because you have been so much help: it there a way to automatically make an A-Z/post index? Because I am planning to make a page with articles listed A-Z and was wondering if there was an easier way to do this than url tagging a list I type out myself...

  11. Glad to be of assistance.

    AFAIK, there isn't. You'll have to do it manually...

  12. Hmm, I am guessing it would therefore be a good idea to turn off pingbacks on the new page as I create it, although I am also worried I would then be pingbacking every single article on the site!

Topic Closed

This topic has been closed to new replies.

About this Topic

  • Started 4 years ago by alternativemagazine
  • This topic has 12 posts
  • 2 posters
  • Latest reply from alternativemagazine
  • This topic is not a support question
  • RSS feed for this topic