Jump to content

Image positioning


Ulterior
 Share

Recommended Posts

Can't seem to get this image to position with a hyperlink, every time I position either relative, absolute or fixed, it positions right but then removes the link. <a href="#"><img src="images/template.png" class="img3" alt="our img" style="border: 1px solid #000101; position: relative; top: 0px; right: -192px; WIDTH:205px; HEIGHT:154px" > </a> .img3 {margin-top: 10px;z-index:-1;} Overall I'm trying to position 9 images equally spaced on the page, 3 then 3 then 3. Is there a better way of doing this?

Link to comment
Share on other sites

Put each one in a container that's 33% wide. Make sure that the parent element does not have any padding.

.image {    float: left;	width: 33%;	text-align: center;}

<div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div> <div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div> <div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div>

Edited by Ingolme
Needed a float property
Link to comment
Share on other sites

Haven't managed to get that working either, it seems to be to do with the z index set at -1, which is there so that the image doesn't show over the top of the navigation drop down menu, how can I get around it?

Link to comment
Share on other sites

The problem here is the absolute positioning. You shouldn't need it. Positioning is a bad way to code website layouts.The code I gave you, if there is no other CSS conflicting with it (including positioning) will put the images equally spaced with three in each row. I forgot to add "float: left" in my previous post, I've updated to post so you can go back and try the updated code.

Link to comment
Share on other sites

Feel free to delete these 2 posts, sorry.

Edited by Ulterior
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...