Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Floating Images In a Div

    Can someone take a look at the bottom of my site (where the green watches are) and please explain how to get the text to show "under" the images.

    Am I doing this right?

    http://www.americanwebmakers.com/demo_college

    Thanks in advance!
    Trust everybody. Just don't trust the Devil inside of them.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by lmw1 View Post
    Can someone take a look at the bottom of my site (where the green watches are) and please explain how to get the text to show "under" the images.

    Am I doing this right?

    http://www.americanwebmakers.com/demo_college

    Thanks in advance!
    remove float: left from the img tag and add to the a tag two declarations:
    float: left;
    width: 240px;

    would be better to use a span around captions since you probably want to style it later.
    Code:
    <a style="float: left; width: 240px;" title="my caption" rel="lightbox"
    href="images/watches/most_popular/baylor.jpg"><img width="240"
    height="240" class="thumbs"
    src="images/watches/most_popular/baylor.jpg"><span>image #1</span></a>
    best regards

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Still have a few issues...

    1) The text is acting like an anchor. It should just be plain text there, not a link. The image is the link that opens in a lightbox.

    2) I've set margins for the thumb images but they are still butted up right next to each other. I'd like to have a 10-15px gap between them.

    Any ideas?
    Trust everybody. Just don't trust the Devil inside of them.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by lmw1 View Post
    Still have a few issues...

    1) The text is acting like an anchor. It should just be plain text there, not a link. The image is the link that opens in a lightbox.

    2) I've set margins for the thumb images but they are still butted up right next to each other. I'd like to have a 10-15px gap between them.

    Any ideas?
    in this case you need to move the caption outside of the a tag but that means that you need to add a div to put inside the a tag and the caption. In this case you need to remove float and width from a and move them to the div.
    about 2), did you remove the float: left from the img tag? the margin-top: 10px to the span caption or margin-bottom to the img tag should work.

    best regards

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I did as you suggested for #2 and it worked.

    I'm a little confused as to what you meant in regard to #1 though.
    Trust everybody. Just don't trust the Devil inside of them.

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by lmw1 View Post
    I did as you suggested for #2 and it worked.

    I'm a little confused as to what you meant in regard to #1 though.
    something like this instead of what you have:
    Code:
    <div>
      <a ...>
        <img...>
      </a>
      <p> caption </p>
    </div>
    now you need foat: left and width: 240px to the div because the a tag is inside the div container and you want to put watches one ofter another and both css declaration doesn't do nothing inside the div.
    i replaced span with p for caption because you want to be on a new next line under the picture.

    best regards


  •  

    Posting Permissions

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