www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Two Image Links, Side by Side; in the Same DIV

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    10

    resolved [RESOLVED] Two Image Links, Side by Side; in the Same DIV

    Hey y'all,
    I am new here and new with this kind of stuff. What I've done is take a template and edit it to my specifications. I am definitely starting to get the hang of it, but still have a lot to learn. Anyway, I have one big div that needs to have 4 thumbnails in it, with descriptions below each one. I am using JAVA to make the thumbnails open a specific sized popup with a more detailed description of each car. For some reason when I inserted the java on the top two images, the right thumbnail moved over and on top of the left one. What gives? Also, I cannot get the descriptions under the right images at all. Here is my code:

    HTML:


    <div class="fcar"> <p><a href="javascript:;" onClick="wimpyPopPlayer('http://www.used-car-seller.com/inventory/03rendezvous.html','Auto-riffic','width=791,height=601')"><img src="images/100_2829_thumb.jpg" width="230" height="173" style="float:left" alt="" /> </a>
    <p><a href="javascript:;" onClick="wimpyPopPlayer('http://www.used-car-seller.com/inventory/02neon.html','Auto-riffic','width=791,height=601')"><img src="images/100_2838_thumb.jpg" width="230" height="173" style="float:right" alt="" /></a>
    <p>



    <div class="clear"></div>
    </div>

    <div class="fcar">
    <img src="images/100_2834_thumb.jpg" width="230" height="173" alt="" /><img src="images/100_2843_thumb.jpg" width="230" height="173" />

    <p><span class="headline2">1999 Ford Ranger 4x4 </span><br />
    Low mileage. Excellent warranty. <a href="#" class="a2">more...</a></p>

    <div class="clear"></div>
    </div>
    </div>


    CSS:

    #featured h2{
    height:150px;
    position:relative;
    background:url(../images/h_welcome.png) 0 0 no-repeat;
    margin-bottom:16px
    }
    #featured p{margin-bottom:10px}
    #featured p span.headline{display:block; margin-bottom:5px}
    #featured .fcar{margin-bottom:13px}
    #featured .fcar img{float:center; margin-right:13px}
    #featured .fcar p{float:left; width:114px}

    And, here is a screenshot of what is happening:
    http://i1303.photobucket.com/albums/...ps73fe52f0.gif

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    A couple of things you might want to look at:

    1. You are using both inline and external styles so take out the inline as not required (i.e. where you have specified the floats in your image tags)
    2. There is no such thing as float:center, you can only use float left or right so that needs changing in your main CSS.

    To be able to help further, how do you want the images to appear? In a line of 4 or 2 lines of 2?

    It could help if you could link to the page you are having problems with.

    Finally, your are not using Java, you are using JavaScript - 2 completely different programming languages (just for your information).

  3. #3
    Join Date
    Mar 2013
    Posts
    10
    Jeez, I am way off. Thanks! I'm checking into what you're talking about. I'd like the images to appear in 2 rows of two, but thus far have had no luck.

  4. #4
    Join Date
    Mar 2013
    Posts
    10
    Ok, I am starting to see what you mean. I still don't understand why the images were side by side, in two rows of two but when I added the JavaScript the right image "floated" over right on top of the left one. Clearly I'm doing something wrong. And I took out the inline styles (which were only there in an attempt to fix the images after I added the javascript - I guess external trumps inline?), and am still having the same problem. The reason I was trying to use the JS was to have a defined popup window appear upon clicking on a picture of one of the cars, displaying the pertinent information about the car as well as some pics. I've been told I'm better off having this info in hidden divs that will appear upon clicking on the thumbnails, but I'm not clear on how to accomplish this. Plus, I will have up to 15 thumbnails on one page; isn't that a lot of code to put in one page? I would have to have 15 hidden divs; is this even possible?

  5. #5
    Join Date
    Mar 2013
    Posts
    10
    Yes, you are correct. My mistake. I've searched through the jquery stuff and I still can't figure it out. Here is the page with the JS on it:

    http://www.used-car-seller.com/index2.html

    Thanks!

  6. #6
    Join Date
    Mar 2013
    Posts
    10
    PROBLEM SOLVED, THANK YOU!!!

    You were right about the jquery stuff, I just hadn't dug deep enough. Thanks again for all the help!!

  7. #7
    Join Date
    Aug 2012
    Posts
    155
    Using javascript to show the larger images is not a problem at all, I have no idea how having images in hidden divs would help. If the problem is only occurring when you add the javascript to the images then there may be something in the javascript function that is causing your issue and you need to look at that rather than your css.

    There are also much nicer and cleaner jquery functions to show images nowadays (in case you are not awae, jquery is a library of javascript functions) which I would recommend you look at using instead (just search for jquery image viewers or similar).

  8. #8
    Join Date
    Mar 2013
    Posts
    10
    Hi,
    Thanks for the quick responses!! I really appreciate it. At any rate, I believe it is something in the JavaScript that is causing this problem because previously, the images sat exactly where I wanted them to and it wasn't until I added the JS that they screwed up.
    Also, an important note: The information that I'm trying to display upon clicking on these thumbnails is more than just an image, it's a small mouseover photo gallery, info about the car, price, and a company logo. The reason I was using java was to set the size of the popup when it came up, so that people can still see the main page behind the popup with the car information. Sorry if I was vague about that before. That's why I was wondering about hidden divs, someone told me they were better than popups.
    Here is a link to the site (without the java):
    http://www.used-car-seller.com

  9. #9
    Join Date
    Aug 2012
    Posts
    155
    Please call it JavaScript, not Java - they really are 2 different languages Also, using jQuery for your requirements is perfect so do a search and see all the scripts available to you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles