SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Help Me: Aligning Images

    Can anyone help me please.

    I have a number of divs in my code, no tables.

    I want to align my images, some aligned vertically to the top, some to the middle and some to the bottom.

    How do I go about this - at the moment I have been trying this;

    #title {top:0; left:0; width:100%; height:30; }
    .imgtop { vertical-align:top; }
    .imgbot { vertical-align:bottom; }

    <div id="title">
    <img class="imgtop" src="....." />
    </div>
    <div id="title">
    <img class="imgbot" src="....." />
    </div>

    but they all align to the top of the div holder.

    any help would be great.

  2. #2
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried absolute positioning?
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can only have one ID of a particular name on a page. Whydon'ca change the IDs to clases.

    That's just what jumped out to me, at first. :-)

    ~~Ian

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some things about your CSS (but not a solution, oops)

    1) Ian's right, you must use each ID only once.

    2) Using the 'top' and 'left' properties without the 'position' property has no effect. May I ask what did you want to achive by assigning them a 0 value?

    3) The 'vertical-align' property doesn't work here, because it aligns inline boxes inside an inline element, applying it to the container inline element. If you are not familiar with these terms, I can try to make it simpler through an example.

    And the way to do it? If you know the size of the images, you can use absolute positioning. Or add them as backgrounds to the DIVs. And there are possibly other solutions.

    Hope some of this helps!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •