Forums

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

Home Forums CSS WordPress Content styling issue

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #35173
    tobeeornot
    Member

    I’m trying to get my WP dynamic code on a new template to match the styles created in a static html page, where the content is wrapped around the image placeholder and continues evenly down the page. As the template screenshot shows, the content is not styling.

    I think the problem is the css but it could also be the way my html code is organised.

    This is the relevant html code:

    http://pastebin.com/uxwKUBj4

    This is the WP code as it stands:

    http://pastebin.com/z7AVXqUH

    This is the relevant CSS:


    #main-content p{font:1.4em Georgia,"Times New Roman",Times,serif; margin-top:10px; padding-right:20px; line-height:1.8;}

    #main-content img{display:block; float:right; padding:1em 0 1em 1em;}

    Any ideas?

    #90674
    TheDoc
    Member

    That WordPress template looks a little off. Why not something like this:









    brand



    'Pages: ', 'next_or_number' => 'number'));>

    Then with your new image class of ‘right’ you can float it to the right and add your background color, padding, border, etc. Eventually you can replace that with a ‘featured image’ using WordPress itself. Shameless self plug: I wrote a little article about how to use post thumbnails here.

    Also, you shouldn’t be using an empty p tag to get that bar across. Why not just use a thick bottom border on the h2?

    #90681
    tobeeornot
    Member

    Good idea with the bar. It’s bad practice using open p’s, I’m guessing.

    I’m getting a syntax error with this line:


    'Pages: ', 'next_or_number' => 'number'));>

    Nice article and got your blog marked too.

    #90683
    TheDoc
    Member

    Oops, I forgot to get rid of the closing p after the_content. The syntax error on the wp_link_pages is because it’s missing the closing ?>. Though, you could probably get rid of it completely if you don’t want it there.

    #90686
    tobeeornot
    Member

    Hmmm…The content is still not wrapping around the image.

    Nice bears!

    #90687
    TheDoc
    Member

    Can you post what the html looks like that WordPress is spitting out?

    #90688
    tobeeornot
    Member

    I guess that you are only after the ‘main-content’




    Generate Leads









    brand



    Pellentesque habitant morbi tristique senectus et netus et malesuada
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultric
    eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
    semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat
    wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
    fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
    facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
    neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
    volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    luctus, metus

    Pellentesque habitant morbi tristique senectus et netus et malesuada
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultric
    eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
    semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat
    wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
    fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
    facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
    neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
    volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    luctus, metus

    Pellentesque habitant morbi tristique senectus et netus et malesuada
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultric
    eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
    semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat
    wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
    fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
    facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
    neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
    volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    luctus, metus

    
    

    #90690
    TheDoc
    Member

    Why is your text wrapped in pre tags? It shouldn’t be.

    Have you added the class of ‘right’ to your CSS and added all of the appropriate styles?

    #90692
    tobeeornot
    Member

    The pre tags are coming from the source code Chrome is generating so not sure if that is the issue.

    When you say all the appropriate styles, do you simply mean adding “.right” to the following styles:


    #main-content p {font:1.4em Georgia,"Times New Roman",Times,serif; margin-top:10px; padding-right:20px; line-height:1.8;}

    #main-content img{display:block; float:right; padding:1em 0 1em 1em;}
    #90698
    TheDoc
    Member

    Sort of… you’d need to do something like this:

    #main content img.right {
    display:block;
    float:right;
    padding:1em 0 1em 1em;
    background: ; /* enter your color here since you had one in your other code */
    }

    The pre tags are probably being generated by WordPress due to how you’ve copy/pasted the text in there. Select the text and see what shows up in the dropdown, it probably is set to ‘preformatted’. Make sure it’s set to paragraph.

    #90699
    tobeeornot
    Member

    Yes, the paragraph was set to preformatted so setting it to paragrapg sorted out that problem.

    The image, however, has moved above the text rather than beside it. Sorry about this.

    #90700
    TheDoc
    Member

    In the code above that I posted there is a missing dash between main and content.

    #90701
    tobeeornot
    Member

    Aha..yep that was it. Many thanks Doc.

    BTW – how long have you had your WP blog? I have read a few articles and think they are written in a clear, accessible style geared toward learning. Look forward to reading more.

    #90704
    TheDoc
    Member

    Not very long. Just got it started before completing a redesign of the site which will hopefully be done very soon. Trying to give back to the community a little more and I thought that would be a good place to start. I’m so very often searching for stuff and struggling to find the appropriate answer, so I thought it would make sense to write it down if somebody else is looking! I’m still learning, too! We’re always learning, just in different stages!

    #90705
    tobeeornot
    Member

    Refreshing attitude from a Man United fan ;)

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