HTML images positioning Watch

burgergetsbored
Badges: 14
Rep:
?
#1
Report Thread starter 8 years ago
#1
Hey got a bit of a html/css question here. Right I have one main image that I want positioned in the middle of my page, then have 4 arrows coming off it. But seeing as I want the arrows to be individually clickable and use the css hover state on each they will all have to be individual images. But how would I go about positioning all this correctly. Surly just using divs would cause problems with positioning and shizz?

Crappy example picture (not really gonna be a sock, just used it for an example :P) : http://imbx.us/8Sjj

Sorry if this is a stupidly baffling question, struggled to word it, if you think you might know what I'm saying just ask any questions xD
0
reply
Broderss
Badges: 3
Rep:
?
#2
Report 8 years ago
#2
you could use absolute positioning on the images

http://www.w3schools.com/css/pr_class_position.asp
0
reply
-kit-kat-
Badges: 4
Rep:
?
#3
Report 8 years ago
#3
what about making all the sock and arrows all the same picture, position it, then make an image map to create click-able regions on the image?
0
reply
burgergetsbored
Badges: 14
Rep:
?
#4
Report Thread starter 8 years ago
#4
Absolute positioning looks like an arse, and wouldn't that cause problems on different screen resolutions and sizes? And could you do separate hovers on an image map seeing as there is only one image there.
0
reply
Wookie42
Badges: 14
Rep:
?
#5
Report 8 years ago
#5
(Original post by burgergetsbored)
Hey got a bit of a html/css question here. Right I have one main image that I want positioned in the middle of my page, then have 4 arrows coming off it. But seeing as I want the arrows to be individually clickable and use the css hover state on each they will all have to be individual images. But how would I go about positioning all this correctly. Surly just using divs would cause problems with positioning and shizz?

Crappy example picture (not really gonna be a sock, just used it for an example :P) : http://imbx.us/8Sjj

Sorry if this is a stupidly baffling question, struggled to word it, if you think you might know what I'm saying just ask any questions xD
This should work, but I did it in about five minutes so its not exactly perfect:

http://evansgfx.com/imgposition/

EDIT: on second thoughts, maybe it won't work too well in IE.. too tired.

EDIT2: does work, wew I'm not as tired as I thought
1
reply
Wookie42
Badges: 14
Rep:
?
#6
Report 8 years ago
#6
Double post fml.
0
reply
burgergetsbored
Badges: 14
Rep:
?
#7
Report Thread starter 8 years ago
#7
(Original post by Wookie42)
This should work, but I did it in about five minutes so its not exactly perfect:

http://evansgfx.com/imgposition/

EDIT: on second thoughts, maybe it won't work too well in IE.. too tired.

EDIT2: does work, wew I'm not as tired as I thought
Ahh this is good! I'll give it a go tomorrow, when I'm not so tired! Thanks for the help!
0
reply
burgergetsbored
Badges: 14
Rep:
?
#8
Report Thread starter 8 years ago
#8
Ahh thanks, it works perfectly! Now to try and think of a good layout xD
0
reply
Wookie42
Badges: 14
Rep:
?
#9
Report 8 years ago
#9
(Original post by burgergetsbored)
Ahh thanks, it works perfectly! Now to try and think of a good layout xD
Cool, drop me a PM if you need any help.
0
reply
X

Quick Reply

Attached files
Write a reply...
Reply
new posts
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise

Have you registered to vote?

Yes! (502)
37.74%
No - but I will (102)
7.67%
No - I don't want to (91)
6.84%
No - I can't vote (<18, not in UK, etc) (635)
47.74%

Watched Threads

View All