61 users online (1 members and 60 guests)  


  Results 1 to 4 of 4

Related

  1. Caption under images    Forum: CSS Forum
    Replies: 4
  2. Replies: 0
  3. Replies: 3
  4. Replies: 0
  5. Replies: 14
  1. #1
    mollymowler's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2007
    Posts
    3

    Newbie needs help on image caption

    Going crazy!
    Can you guys help a newbie who's going mad trying to understand what I think is some simple CSS code?
    Basically, all I'm trying to do is put an image in a single table cell, indent it by 20px from the left (margin or padding? I think margin) and have a caption left-aligned underneath it. I have tried every combination of <div> and <style> I've come across on the web, but none of them work. They either cause the caption to indent more than the image, move alongside the right-hand side of the image, or disappear completely.
    The one that nearly works, is:
    <td width="87"><div style="padding-left:12px"><img src="/Images/bloggs.jpg" width="87" height="98" alt="Fred Bloggs" /><div class="captions">Fred Bloggs</div></td>
    But this does two things. First, Dreamweaver gives an 'invalid markup' on the div style tag, and secondly the caption appears more indented in IE and FF than the image, although in Dreamweaver the caption is up against the left, but the image is indented.
    What am I doing wrong? By the way, I took this idea from www.cs.tut.fi/~jkorpela/www/captions.html I note that in his CSS styles, he uses things like div.image as a style. In Dreamweaver, it states that you cannot have anything before the period in a style name, and I can't see what else (class, ID, etc) would place it there. Has he written this wrong? I realise I have a way to go with CSS, but the problem is, most tutorials don't actually explain things properly...they assume you already have some idea of CSS to begin with.
    Thanks for any help you can give this frustrated and tired newbie!!!

  2. #2
    mollymowler's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2007
    Posts
    3

    Re: Newbie needs help on image caption

    Actually, I realise that I left an end </div> tag off, which has now cleared the error message. I've also found that the following works:
    <td><div style="padding-left:22px"><img src="file/Images/bloggs.jpg" width="87" height="98" /></div>
    <div class="style2" style="padding-left:22px">Fred Bloggs</div></td>
    I think it also works if I simply replace the div class with a <br>.This seems to be okay in both IE and FF.
    But now, if I add some top padding to the div style, it gives an error message again. I've tried:
    <td><div style="padding-left:22px"; style="padding-top:10px> etc,
    I've also tried
    <div style="padding-left:22px"; "padding-top:10px">
    And this doesn't do anything at all! So I can only assume that in both cases I'm writing the code wrong. Can you not have two elements in a div style? Is there anywhere where writing this correctly is explained? Also, I can't see how, unless you're creating a stylesheet rather than an inline style, Dreamweaver lets you put something together like this?
    Cheers...getting there, I hope!

  3. #3
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: Newbie needs help on image caption

    Try
    <div style="padding-left:22px; padding-top:10px;">

  4. #4
    mollymowler's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2007
    Posts
    3

    Re: Newbie needs help on image caption

    That works perfectly...thanks!



Tags for this Thread