Ulterior Posted May 30, 2012 Share Posted May 30, 2012 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 More sharing options...
Ingolme Posted May 30, 2012 Share Posted May 30, 2012 (edited) 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 May 30, 2012 by Ingolme Needed a float property Link to comment Share on other sites More sharing options...
Ulterior Posted May 30, 2012 Author Share Posted May 30, 2012 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 More sharing options...
Ingolme Posted May 30, 2012 Share Posted May 30, 2012 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 More sharing options...
Ulterior Posted May 30, 2012 Author Share Posted May 30, 2012 (edited) ... Edited May 31, 2012 by Ulterior Link to comment Share on other sites More sharing options...
Ulterior Posted May 31, 2012 Author Share Posted May 31, 2012 (edited) Feel free to delete these 2 posts, sorry. Edited May 31, 2012 by Ulterior Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now