Question

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

Answer 1

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

Answer 2

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

Answer 3

What are you getting?

Answer 4

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

Answer 5

Do you have an example of your code?

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

Do you not float the div?

Answer 10

I could try it

Answer 11

although would that move all the images to the left

Answer 12

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..

Answer 13

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;

}

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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.

Answer 19

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

Answer 20

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

Answer 21

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.

Answer 22

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

Answer 23

can I do that without using css

Answer 24

What, put text underneath?

Answer 25

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

Answer 26

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.

Answer 27

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

Answer 28

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