Quantcast

A community for students. Sign up today!

Here's the question you clicked on:

55 members online
  • 0 replying
  • 0 viewing

akhaliq99

  • 2 years ago

I need help with how to put images in this type of layout http://www.cs.umd.edu/class/fall2012/cmsc122/Projects/P2/example.png how do I make images layout like they are on this webpage

  • This Question is Closed
  1. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    One of the easier ways is with a table, what kind of software do you have to use?

  2. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    I am using komodo edit. A table is good but I was thinking of using a id and using margins to change where the photo's are place or floats but they are not working

  3. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    What are you getting?

  4. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    When I use the float after targeting one image with a id nothing happens

  5. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Do you have an example of your code?

  6. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    here is my code: html <img id="good" src="tim.jpg" alt="Tim Berners-Lee" width="140px" height="140px"/> <img id="great" src="GraceHopper.jpg" alt="Grace Hopper" width="140px" height="140px"/> <img id="person" src="Ada.jpg" alt="Ada Lovelace" width="140px" height="140px"/> <img id="man" src="Babbage.png" alt="Babbage" width="140px" height="140px" align="right"/> css #person{ float:left; I images moves to the left actually but I want it to move to the bottom of the other image

  7. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    the css has a } at the end forgot to copy that

  8. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Shouldn't that be <div id="person"> <img src="Ada.jpg>?

  9. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Do you not float the div?

  10. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    I could try it

  11. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    although would that move all the images to the left

  12. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    You have the tag #person that you are trying to float, yet the image is the only id I can see as person. Perhaps you want to put the whole section into a div and then float that, I am not sure exactly what the big picture is that you are trying to accomplish..

  13. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    i tried it and something weird happened i got another border when i didnt specify that and all the images are inside it here is the code <div class="move"> <img src="tim.jpg" alt="Tim Berners-Lee" width="140px" height="140px"/> <img src="GraceHopper.jpg" alt="Grace Hopper" width="140px" height="140px"/> <img src="Ada.jpg" alt="Ada Lovelace" width="140px" height="140px"/> <img src="Babbage.png" alt="Babbage" width="140px" height="140px" align="right"/> </div> .move{ float:left; }

  14. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    i am just trying to replicate that webpage so I need to put the images exactly like they are on that page.

  15. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    And have you tried just using a bit of relative positioning to set the images where you need them?

  16. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    That may interfere with the text if someone resized the window though.

  17. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    how do I do that, I cant figure it out, would using a table be easier

  18. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Using a table would be easier because you would define them and put your images in, but your class might want you to use css specifically.

  19. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    You could try positioning, here is a simple example. http://www.html.net/tutorials/css/lesson14.php

  20. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    I think I can use tables because we haven't covered positioning yet. If that doesnt work then I will do positioning.

  21. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Well good luck with the table, should you try positioning then this w3 school link should help you. http://www.w3schools.com/cssref/pr_class_position.asp The "try it" link gives you a taste of where it will land on the page.

  22. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    thanks, I think the table worked, I will just need to fix the spacing now and put text underneath

  23. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    can I do that without using css

  24. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    What, put text underneath?

  25. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    like in the example, maybe I could use a p tag in inside the td tag

  26. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Sure, just add it in the same cell as the image and include a <br> or add another row beneath the image and put the text inside that.

  27. akhaliq99
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    It worked, although the text is not centered so maybe I will need to use margin after all but thanks for all your help

  28. eSpeX
    • 2 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Any time, as for the centering, you can use the align=center tag to place it in the center of the cell.

  29. Not the answer you are looking for?
    Search for more explanations.

    • Attachments:

Ask your own question

Ask a Question
Find more explanations on OpenStudy

Your question is ready. Sign up for free to start getting answers.

spraguer (Moderator)
5 → View Detailed Profile

is replying to Can someone tell me what button the professor is hitting...

23

  • Teamwork 19 Teammate
  • Problem Solving 19 Hero
  • You have blocked this person.
  • ✔ You're a fan Checking fan status...

Thanks for being so helpful in mathematics. If you are getting quality help, make sure you spread the word about OpenStudy.

This is the testimonial you wrote.
You haven't written a testimonial for Owlfred.