SitePoint Sponsor

User Tag List

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

    align text with images

    Liberty79, seems you and I are in the same boat with that alignment problem. Been struggling with it for years. Finally, I've put what I know so far and what I am still trying to debug at sticksite.com/align/. Am hoping for replies from a couple of experts and if I learn more, I'll update that page.

    (I had put this in Liberty's thread but was advised to start a new thread.)

    Good luck to both of us!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Perhaps you can get started by looking here

    What you want is often requested..perhaps someone has example code tucked away somewhere so I won't have to create it lol (if I can, of course)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm just going offline but here are a couple of links that should answer one or two of your questions.

    http://www.pmob.co.uk/temp/caption3.htm
    http://www.pmob.co.uk/temp/image-overflow3.htm

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I just posted this in anotheer thread but relates to your question also.

    http://www.pmob.co.uk/temp/celltest2.htm

    With the above links I think this answers all your questions. Just view source for the techniques.

    They are a little complicated and basically involve display:table for good browsers and and the double-relative-shift (I just made that name up) for IE7 and under.

    I have some older demos here but I haven't updated them for modern browsers but the techniques are roughly the same:

    http://www.pmob.co.uk/temp/vertical-align-again.htm
    http://www.pmob.co.uk/temp/vertical-align5.htm

  5. #5
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your efforts to enlighten this old man. All those examples are different, and different from what I had that was working fine. Every time I add some of their code, it messes up what I had. Seems everybody has his/her own way of doing all this. None of the examples, though, answer the questions I still have at sticksite.com/align/

    Best I forget about it until HTML catches up to everyone's needs.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    None of the examples, though, answer the questions I still have at sticksite.com/align/
    Yes they do - they answer nearly all your questions

    Ask the questions one at a time here and I will tell you how to do it.

    Your examples show some mis-understanding as floating an image with a caption underneath is a simple process as shown in my first link above. Making it all a link is very basic css and would just mean setting the anchor to display:block and containing all within the anchor.

    However, vertical-aligning block elements is a little (very) complicated and contrary to what you state above the only way to do it is as shown in my examples.

    For good browsers you either use display:table and display table-cell properties or you use display:inline-block depending on the situation.

    There is no other way and if there are examples about then they are wrong.

    For IE6 and IE7 the only solution is to use the top:100% and top:-100% method as shown in my examples. There simply is no other way to do it for ie6/7.

    Once you understand the two methods above you can align the images as shown in my examples which you can see are working.

    I've looked at the links on your site and apart from my examples the others are not relevant because they don't have the correct methods.

    The first link is explaining the vertical-align property which does not apply to block level elements. It only applies to inline elments (on the same line) or table-cells. It is of no use at all for vertically aligning block level elements with each other.

    I suggest you ask me a question here (one at a time) and I will try and show you the proper way to do it.
    Last edited by Paul O'B; Jul 19, 2009 at 10:41.


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
  •