Fork me on GitHub

Topic Image Alignment  Bottom

  • I am an administrator at two websites ... http://www.billsinsider.com/ ... http://www.sabresinsider.com/

    We just updated PN on the Bills Insider to .762 from a very old version, I think it was .726. I have been working with the theme to get it right, and I have made some progress. There are two things left that I need to fix, and I cannot figure them out for the life of me. This is the first time I am working with the "insides" of PN, I inherited all this from an admin who left over a year ago.

    My first problem is the alignment of the topic images. I have tried something that works, kind of. What is did was put this in my CSS file ...

    img {border: 0px; float: left; }

    But that does not work properly because it floats everything on the whole page to the left, even the images I want centered. The only thing I want floated left, with the text starting at the top to the right of the image ... is the topic image. You can see that the text starts at the bottom of the image right now. Here is the code I have for searchtopic in my theme.php file ...

    ."

    "
    ."$preformat[searchtopic]\n"
    ."$info[hometext]\n"
    ."

    "
    ."

    $preformat[notes]\n"
    ."

    ";

    I need all the help I can get with this one. The second thing I cannot figure out is why there is an indent on the blocks in the left hand column of the page. Per some one's advice I inserted the following code into my CSS file ...

    LI {margin: 0px; }

    But it still did not fix my problem.

    Thank you for your time! :)
  • img {border: 0px; float: left; } will make ALL the images on your site float left which is not good!

    You need to encase the article output within a div and define a class for this div, like this:

    ."
    "
    ."

    "
    ."$preformat[searchtopic]\n"
    ."$info[hometext]\n"
    ."

    "
    ."

    $preformat[notes]\n"
    ."

    "
    ."
    "
    ."
    ";

    now we add this to your stylesheet:

    .article_ouput img {border: 0px; float: left; }
    .article_ouput a img{border: 0px; float: left; }
    .article_clear {clear:both; }

    We also add a clearing div as well to stop the topic image overlapping the bottom of the news container.

    This should work, but I haven't tested...

    -Lobos

    --
    -Lobos
    Professional PHP Framework Services: Concept, Development and Deployment
  • Okay! It works :)

    Almost. Is there any way to apply this *only* to the topic image. Right now it is assigning the float left to the topic image, and also to any other image added with the article summary. And I cannot override it when adding the summary.

    Also ... the summaries are bold in IE, but not in Netscape or Mozilla. They should not be bold.

    Thanks again.
  • Oh yeah, and any idea on the indent thing?
  • Okay, I got the adding image to article part to work. I just modified the CSS code you gave me to ...

    .article_ouput img {border: 0px; }
    .article_ouput a img{border: 0px; float: left; }
    .article_clear {clear:both; }
  • 0 users

This list is based on users active over the last 60 minutes.