- This topic is empty.
-
AuthorPosts
-
May 9, 2013 at 9:36 am #44655mintertweedParticipant
Edit: Scroll down to my most recent post to see what’s up. Thanks!
Okay, so I have two fairly simple questions. I am working on a gallery, here. Scroll down until you see the photographs.
On rollover, some information pops up about each individual photograph, but I lose the image link when this happens. You have to be quick to click the image before the text scrolls up to see the image in full. How do I retain the link to the image even after the text scroll?
Secondly, I want to have five pictures span the width of the site. I measured everything so that I could do this. I am using
:last-child
so that the image at the end of a row will not have ten pixels of right margin. But how do I define the last child of a row? I tried to create a containerdiv
calledimage-row
, but that seemed to screw up my website for some reason. I know I can create a seconddiv
called something likeimage-box-last
and just give it its own properties and use thatdiv
at the end of each row in the HTML, but is there a better way to do this?Thank you in advance!
May 9, 2013 at 9:47 am #134547Paulie_DMemberInstead of adding right margin and removing it from the last one, add left margin and remove it from the first one?
May 9, 2013 at 9:49 am #134548Paulie_DMemberAlternatively you could use nth-child
May 9, 2013 at 11:28 am #134555TheDocMemberAs for your first question, simply alter your markup and have the anchor wrap around everything.
I have a little trick for you for your second problem. Basically, you wrap all of the image divs in a wrapper, call it whatever you like. Give that div enough room to fit all of your divs + margins inside of it but then give it a negative margin to bring it back to 960px.
It’ll look something like this: http://codepen.io/ggilmore/pen/bbd121b060400333d6ce7d886c47bbe6
May 9, 2013 at 11:46 am #134561Paulie_DMemberPerhaps ‘nth-of-type’
May 9, 2013 at 12:11 pm #134565TheDocMemberYup. Or you could wrap the anchor around your `h4` and `p` in the `.image-details` div as well.
May 9, 2013 at 5:46 pm #134608TheDocMemberI think you have unclosed `
` tags so for whatever reason Chrome is listing the link twice in the Inspector (which would certainly cause the plugin to load the image twice).
Also, you still have a problem that when the thing scrolls, you have to hover over the text to actually click the link.
I’d probably go like this:
and the CSS:
.image-container {
position: relative;
}.image-container a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.