SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    text to the right, and aligned to the bottom, of images?

    has anyone got any ideas how i should / could do this? :

    i've done a page that has one picture after another on it, with a bit of text beneath each picture. those pictures and text are all within a css fixed width, centred column. layout-wise, each bit of text would make more sense not beneath each picture, but to the right of. preferably ranged to the bottom of, rather than the top of each picture.

    here's a simple, small example page, with no effort to move the text to the right of the pictures:

    http://www.pinkgoblin.com/~cumminjo/...rightest1.html

    here's the same page with an attempt to do what i'm after:

    http://www.pinkgoblin.com/~cumminjo/...rightest2.html

    the attempt has this in it's css:
    Code:
    img.floatimg {
    float: left;
    padding-right:.5em;   // gets a gap between text and picture
    padding-bottom:3em   // gets a gap between pictures that follow on
    }
    
    p {
    clear:left;
    }
    and the image and text parts are like:
    Code:
    <p><img src="a-picture.png" class="floatimg" width="260" height="130" />
    the text that goes with the picture</p>
    <br />
    this works ok-ish in safari (apart from the text is ranged top of pictures, not bottom of pics), but only partially works in explorer. in explorer the text does not move to the right, but the horizontal padding does take effect, which i had to use to get gaps between the pics otherwise the pictures butted right up against each other, even with a <br /> inbetween, which ends up with illogical gaps in the explorer version.

    is float the best way to achieve this? if so, and i guess explorer (mac os x 5.2) doesn't handle float, how can i make it look more like the original first example, rather than large illogical breaks between the text and pictures, which is how the second example is in explorer and others that may not be able to use float?

    or is there maybe an alternative better way to get the text to the righ (and ranged to the bottom hopefuly) of the images?

    (all the css that i've used is in the html in the linked to examples)

    any help on this would be very much appreciated.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    teapot factory
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personaly, i'd just use tables with two cells and valign attributes to do this. In my opinion it's the most sensible way to do it if you want to keep some kind of compability with most browsers.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    tables? for layout? there must be a reasonable way to do it with css?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Use margin-right and margin-bottom instead of padding-right and padding-bottom.

    By the way, your 2nd example looks fine in Mozilla 1.4, IE6 and Opera 7 on Windows 2000. However, the text flows only to the right and not to the bottom as well.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    teapot factory
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy
    tables? for layout? there must be a reasonable way to do it with css?
    I'm sure there is, but im not certain it will work in all browsers with css. Take css margins and (older than v.6 i think) versions of internet explorer. A lot of cool things to do with it but not quite enough browsers that will display them

  6. #6
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have a wee gander at this link, see if it helps
    http://realworldstyle.com/thumb_float.html

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pissant
    have a wee gander at this link, see if it helps
    http://realworldstyle.com/thumb_float.html
    aye, that is a good example, but after playing round i couldn't get anything useful from it for this. this is starting to jar me tables are starting to look like a *very* good suggestion indeed. still can't believe for sure there's no reasonable way with css, but then i don't know too much about css's. thanks for suggestions and info so far

  8. #8
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    no, i give up. tables it is.

  9. #9
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aeh...what's wrong with using
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    .imagecaptioned {
    	margin: 5px;
    }
    
    .imagecaptioned img {
    	padding: 0;
    	margin: 0;
    }
    
    .imagecaptioned p {
    	display: inline;
    }
    
    </style>
    </head>
    
    <body>
    <div class="imagecaptioned">
    <img src="blah1.jpg" width="100" height="100" alt="blah1" />
    <p>description for blah1</p>
    </div>
    <div class="imagecaptioned">
    <img src="blah2.jpg" width="100" height="100" alt="blah2" />
    <p>description for blah2</p>
    </div>
    </body>
    </html>
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks very much for the reply redux.

    Quote Originally Posted by redux
    aeh...what's wrong with..
    :/ the text, if wraps, goes onto a new line beneath the picture:

    http://www.pinkgoblin.com/~cumminjo/...rightest4.html

    tables do seem to be the most relliable and best way to do this particular one. i know that's a cardinal sin, but the bottom line is that they work, in this case.

  11. #11
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    here's the table version of it:

    http://www.pinkgoblin.com/~cumminjo/...saregreat.html

    works fine. also i've checked it in lynx, and it reads ok. the text simply follows on from the relevent picture's alt text. lynx just ignores the <table>'s and <tr>'s etc. because they're uncomplicated, simple tables, it doesn't make the page unreadable at all i don't think.

  12. #12
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok...last attempt at saving face for CSS

    change the styles from my previous example to:

    Code:
    .imagecaptioned {
    	margin: 5px;
    }
    
    .imagecaptioned img {
    	padding: 0;
    	margin: 0;
    }
    
    .imagecaptioned p {
    	position: relative;
    	left: 105px;
    	top: -40px;
    	margin-bottom: -40px;
    }
    the -40px is a bit arbitrary at this stage. if you use ems, it will be nicely flexible in terms of font sizes i think...

    Edit:

    ah, looking at your table version again, i finally get what you mean...let me work on that one a little bit more
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  13. #13
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    well if you can come up with some css for that, if that's possible, it'd be great thanks

    the table version does seem quite reasonable though, in this case

  14. #14
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy
    well if you can come up with some css for that, if that's possible, it'd be great thanks

    the table version does seem quite reasonable though, in this case
    I've playing a bit with this and I think you're probably right. Isn't it annoying that 'vertical-align' only works on table cells?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  15. #15
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's annoying as well is that, in theory, all you'd need to do is define
    Code:
    .imagecaptioned {
        position: relative;
    }
    and then use
    Code:
    .imagecaptioned p {
        position: absolute;
        bottom: 0;
    }
    according to the spec, this should move the paragraph to the bottom of its parent box, in this case the div with class imagecaption. support for this is, however, a bit spotty. IE5 seems to still think i want the paragraph aligned to the bottom of the actual document for some reason...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  16. #16
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Isn't it annoying that 'vertical-align' only works on table cells?
    yup.

    but also, not from the 'getting it to look right' p-o-v, but from the readability / accessability p-o-v, i don't think tables are a problem here. the thinking behind not using tables for layout, i think, is that if someone's using something that is incapable of making use of tables to view the page, the basic logical order of the page can become garbled as the browser displays all the info, but not in it's intended place / order - so the meaning of the page can be lost or at least become difficult to read. but with super-simple tables such as the ones i'm using there, the logical order does not become garbled, so is not an issue.

  17. #17
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redux man, I feel your pain.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  18. #18
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm agreeing with what you're saying Johnyboy. There's some 'purists' (they actually have a name: 'CSS-flamers') around that are saying 'tables for tabular data' and then you can have a discussion 'till the end of time about 'what counts as tabular data' and what have you.

    Maybe you might be interested in this nice discussion as well:
    http://www.sitepointforums.com/showt...hreadid=107748

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  19. #19
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    There's some 'purists' (they actually have a name: 'CSS-flamers')
    actually, it's not really to do with CSS, but more with (X)HTML and the whole spirit of the standards, the semantic/structural meaning of why one should use the proper tags, etc...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  20. #20
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A CSS flamer, as I understand it, is someone that flames anybody that 'dares' use a table for anything but spreadsheet like data, amongst other things...

    I came across the word at www.meyerweb.com (Monday, 5 May 2003). Eric Meyer is my hero!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


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
  •