Here's the question you clicked on:

55 members online
  • 0 replying
  • 0 viewing

akhaliq99

  • 3 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
    • 3 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
    • 3 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
    • 3 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    What are you getting?

  4. akhaliq99
    • 3 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
    • 3 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Do you have an example of your code?

  6. akhaliq99
    • 3 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
    • 3 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
    • 3 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
    • 3 years ago
    Best Response
    You've already chosen the best response.
    Medals 1

    Do you not float the div?

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

    I could try it

  11. akhaliq99
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 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
    • 3 years ago
    Best Response
    You've already chosen the best response.
    Medals 0

    can I do that without using css

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

    What, put text underneath?

  25. akhaliq99
    • 3 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
    • 3 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
    • 3 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
    • 3 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

Sign Up
Find more explanations on OpenStudy
Privacy Policy