WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Post titles overlap article text. How do I fix? (7 posts)

  1. dstarver
    Member
    Posted 4 years ago #

    Hi. I have just started a new blog, and I've noticed that unless I use a very short title to each of my articles, the title will overlap on top of the actual text of the article. Is there a way to correct this?

    If you want to take a look at what I mean, my blog title is MMAChalet.com.

    You will see it on the post on the top of the page. As you'll notice, the space between lines in the title seem to be double spaced. This seems excessive. Can I make it single spacing instead? Also, how do I make the text begin AFTER the title, not on top of it?

    I am using the Brownline theme, if this is an important piece of information. Brownline is one of the free themes that can be downloaded from WordPress.org.

    BTW, I am using Firefox, and this problem is visible with Firefox. I have not tried any other browsers to see if the overlap problem is just in Firefox, or if it appears in all browsers.

    I'm sure there is a simple solution to this problem. I just don't know what it is. Thanks in advance for your help.

  2. forunner
    Member
    Posted 4 years ago #

    try to use firebug

    your problem is in the css, probably in the h3 properties
    modify it like you want it to be
    (example, if you put a large width, the title will be on one line, but it will go outside of the div)

  3. dstarver
    Member
    Posted 4 years ago #

    Ummmm, what is "firebug"? What does it do?

    I am not a programmer. Can you give a more step-by-step explanation of the problem and how I can fix it? Thanks.

  4. Darrell Schauss
    Member
    Posted 4 years ago #

    Comment out /*line-height:#px;*/ or remove the line-height from
    ".post-left { and #content h3 { in style.css. Then add some margin-top: 10px; or so to the h3 to get it away from the border. Also removing the height from .post-left will fix the overlap, but then you need increase the length of the left and right borders continue down in this image. http://mmachalet.com/wp-content/themes/brownline/images/entry_title.jpg

    I would make it 150px; tall at to give any slack for how ever big the title may be.

    Firebug is a Firefox add-on that will allow you to see what css is effecting what and to edit CSS live in the browser for testing / troubleshooting. It does much more...
    http://getfirebug.com/

  5. dstarver
    Member
    Posted 3 years ago #

    What do you mean by "Comment out /*line-height:#px;*/ "? Are you telling me to remove that line?

    Also, when you tell me to do something to the "h3", can you be a little more simplistic in your explanation? Assume that I don't know what an "h3" is (I don't).

    Please give an explanation (preferably detailed with exactly what line of code to add and where to add it) that is simple enough for someone with no knowledge of HTML or CSS to follow. Thanks.

  6. forunner
    Member
    Posted 3 years ago #

    your title are between html tags "h3"
    (for the explanation, title are always place into tags <hx> where x is a number ...h1 means "super important title", h6 means "not important title")

    you can change the look of your title (and other tags) in your CSS (you can find it in the style.css into your theme folder).

    you have to edit your css to change how it looks like.
    for example in your website,
    your h3 which are into div (another type of tags) which have the id content (it contains all the article of the page) are designated by :

    #content h3 {
    color:#AAAAAA;
    font-family:Times New Roman,Georgia,Trebuchet MS;
    font-size:24px;
    font-weight:normal;
    line-height:67px;
    margin:0;
    padding:0 0 0 15px;
    text-transform:uppercase;
    }

    I think the properties are easy to understand : font-size means...the size of the font =p

    I haven't time to look what line you should change, but maybe, giving a width (add the line width : xxxx px;) and reduce the font size will help you...
    ps : margin is an extern marge and padding are intern marges, maybe increase the marges to move the article?

    hope you will understand my explanation (hard for me to know if I'm easy to understand or not, -I'm french)

    you can search a tuto for css on google :p

  7. Mark / t31os
    Moderator
    Posted 3 years ago #

    Adjust the height declaration on the the following two styles and see if that's what you're after....

    .content_title and .post_left

    To find the classes look in your theme's style.css for this..

    /************************************************
    *	Content 					     		    *
    ************************************************/

    Following that text is several styles, the ones we're after are the third and forth ones (which will be obvious because the names match those i've mentioned above).

    Simply remove the line that says..

    height: 67px;

    Or alternatively try the auto setting.. eg.

    height: auto;

    See if that has the desired effect... :)

Topic Closed

This topic has been closed to new replies.

About this Topic