WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] format text on page (14 posts)

  1. befree22
    Member
    Posted 1 year ago #

    I'm having trouble aligning the text on http://www.denisejacksonmusic.com/lyrics. It's a music site and there are 2 columns for music lyrics. I'm using <div> tags. The first 2 songs are correctly aligned. However, the lyrics for other songs listed below are not aligning in the table but instead are shifting to the left for each respective song. Could someone help me fix this. Here's the pastebin code: http://pastebin.com/XKNykK1C

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The misalignment is because you have some of those divs floated right and some floated left -- but not in a logical way. So check on that. You'd really be much better off keeping the CSS in the external stylesheet, not in the HTML code.

  3. befree22
    Member
    Posted 1 year ago #

    And how do I create the css for this? In other words, what code do I use in the page and what code do I add to the css to fix this problem?

    I tried adding this http://www.codemiles.com/html-examples/creating-table-using-div-tag-t8639.html in the page but the lyrics appeared as paragraphs instead of lines of text.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    WordPress themes generally have some built-in CSS, so you would generally just use those classes already in your theme to set the alignment. For example, this CSS code is in the theme:

    .alignright {
       float: right;
    }

    So then in your div, you would put <div class="alignright"> which would float that div to the right. In your page, you would likely also have another custom class for the width so those divs fit side by side.

    But trying to explain extensive basic CSS and HTML is really beyond these forums. I can only suggest that you do some reading about how CSS and HTML work - there are many good tutorials, including videos out there that will be helpful. This is also a good site:

    http://www.w3schools.com/css/

    Furthermore, it appears that you are using a commercial theme -- which is not supported here, so you might also try asking the vendor for help.

  5. befree22
    Member
    Posted 1 year ago #

    I am fixing the page because it'll be a 2012 child theme (I love native WordPress) so I'll be ditching the current theme in a few days.

    OK, would it be fine then if I add this code to the page...

    <div class="alignleft">INSERT LYRICS HERE</div>
    <div class="alignright">INSERT LYRICS HERE</div>
    so I'll have 2 columns for lyrics.

    and in the css, add this:

    .alignright {
       float: right;
       width: 48%;
    }
  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Not quite because you really do not want to change the existing `.alignright' -- because it is used elsewhere in your site. That will completely mess up other elements. You would likely need to create a custom CSS -- for example:

    .halfwidth {
       width: 48%;
    }

    then add that class to the divs

    <div class="alignright halfwidth">
  7. befree22
    Member
    Posted 1 year ago #

    So the divs would be...

    <div class="alignleft halfwidth">
    <div class="alignright halfwidth">

    ...correct?

    FYI: The alignright w/ 48% css code works -- all except 1 of the song lyrics are in 2 columns (see webpage). Maybe the div you just shared will fix the 1 song lyrics.

  8. Beatboxx
    Member
    Posted 1 year ago #

    Yup, this should do what you want.

  9. befree22
    Member
    Posted 1 year ago #

    After switching to .halfwidth css, all song lyrics aligned in 2 columns except for 1 "Wanna Be Free". View webpage.

    So I switched the <div class="alignleft halfwidth"> and <div class="alignright halfwidth"> div tags in some lyrics and Voila! It works perfectly.

    Thanks so much for your dedication to WordPress WPyogi.

  10. befree22
    Member
    Posted 1 year ago #

    It works!

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Thanks WPyogi.

  12. befree22
    Member
    Posted 1 year ago #

    Umm...

    FYI: The help WPyogi offered above was for a commercial theme but the current theme is permanently switched to a 2012 child theme on this site.

    I'm having the same issue with the 2 column layout on this 2012 child theme, namely, the lyrics aren't appearing in 2 columns. I adjusted the font size but the lyrics still aren't appearing in 2 columns (view page).

    Since I'm using a 2012 child theme, do I have to continue using halfwidth div? What css will work with the child theme to align the lyrics into 2 columns?

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Did you add the halfwidth class to your CSS anywhere? Does not look like it.

  14. befree22
    Member
    Posted 1 year ago #

    OK, I just added the halfwidth class to the css and all of the lyrics are in 2 columns. :)

    Now, the current font is 10px and I changed it to 16px, so it's quite readable now. Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic