if anything, take more time make background than code. :)
if you already good with css and html then nothing here should be new - this for people who not so confident.
step 1.
make toybox div. as css, this go inside style tags.these first 6 lines centre everything on page. you can remove them, or add specific position, but not all screen have same size so this might break for others.
next 3 lines simple: your background picture, and that picture's height and width. if this div bigger than picture, picture will likely tile.
you can choose any size - can make toybox that scroll, or put inside larger page :)
final line just simple border! take note: borders that not solid may appear strange.
step 2.
next, need make class for each adopt:each one need unique name - you could use numbers, but words might help to bug fix better.
top and left positions here tell picture where place - for this one, 100 pixels down and 30 from left. css positions not move in that direction, but offset from.
important: when inside div tags, relative position will track coordinates from where div start. absolute position instead track from where page start.
one downside is that each picture get different start position. same coordinates will not put different pictures in same place, and if you remove one, need fix all that come after.
you could probably achieve this - and still keep some screen size flexibility - with absolute positions in percentages. your call!
note: also possible include this as inline css within img tag. but this can be hard read back if ever need change code later, especially if add animation. you could do this if those not problem for you!
step 3.
end style tag - as html, this now go inside body tags.nice and easy from here:
- div class tell your toybox div to start
- a href link to where get adopt
- img class give picture position
- img src is of course where find picture
- and img alt is small summary, should any picture fail load in or else someone can not see. web accessibility good :)
step 4.
profit. :)optional: pictures feel too static? could always apply css animations... :)
just about any style tags can be put inside animation frame: make things hover, flip and dance, or more.