Positioning an Image with CSS

Discussion in 'CSS' started by Lukas, Mar 2, 2007.

  1. #1
    Currently it is like this

    <p><img class="image_news" src="images/surfer.jpg" width="100" height="100" />Some text here about three sentences that sits on right of image</p>

    CSS code:
    .image_news {float: left;
    margin: 0 9px 3px 0;}


    I want to use a random image script with it so I get 4 images randomly displayed but it must be positioned as it in CSS. The script says to insert code into webpage like this:

    <p><img class="image_news" <img src=image.php>" /> Some text here about three sentences that sits on right of image</p>

    we all know it will not work like this, so how would one get the right results ?

    I was thinking of putting it in the paragraph class area....but this will not work as image still moves to the right.

    thanks
     
    Lukas, Mar 2, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you should be able to do in the p class, but than alters the p's css property to something like

    p img {
    float:left;
    margin: 0 9px 3px 0;
    }

    that way only images used in the p get effected by those properties. im not 100% if this will work - but it might
     
    unitedrokz, Mar 2, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Unless there's something you haven't told us, there's no reason this won't work for you:
    
    p {
        overflow: hidden;
        }
        
    img { 
        float: left;
        }
    =========
     
      <p><img src="bullseye.jpg" width="175" alt="John Doe" />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
        tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, 
        pellentesque ut, dolor. Proin est. Etiam.
      </p>
    Code (markup):
    Notice the image source. Your PHP script or template must produce proper html. You don't source a script as you have it, unless the header produces the proper content type, eg., image/jpg.

    cheers,

    gary
     
    kk5st, Mar 2, 2007 IP
  4. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #4
    thanks United & Gary,

    I guess I did leave something out that may make a difference.

    1.) the text beside the image on the right is an rss feed.

    2.) the random image displayer code is from here. http://john.ellingsworth.org/?p=18

    I tried using Unitedrokz method and that didn't pan out. no image display at all.
    i am trying to display 4 random images in 1 image area per the link above but keep the class.

    it actually did not work even without the css class. can't believe this has been so difficult for me.
     
    Lukas, Mar 3, 2007 IP