Replies

Nov 2, 2014 11 years ago
Cocaine
wants to dance with somebody
User Avatar

So, I thought I had this DIV ID thing down, put some "image mapping" in a layout I did, intended on having the image links move to the correct spot with an ID, put in the correct coordination, and low and behold...they're all lop-sided and half way across the screen when clearly, those are NOT the coordinations I put in. I mean, the positioning from the top is the same for both, yet one is further down than the other... The layout in question is right here. The coding is the basic HERE and then inserting it by <* div id = NAME HERE *>.

Also, trying to do a transition that comes out the SIDE of the layout (all the way to the right, after the blue border) for the comments, and somehow when I do it, the image I have set from the background is about 15-20px away from the border, and the comments box is right out in the open. I've read through W3 countless times, tried the original code I used for pet profiles, but I'm guessing it'll be a little different from User Profiles... yes? I can't find any user profile examples to show you what I mean, but basically instead of transitioning down, I want it to transition out to the right, and before it transitions I would like the whole image (just a parenthesis) to be visible, so you know what to hover over. Here is the coding I am using for that: { background-image: url(http://i1254.photobucket.com/albums/hh606/niksheaffer/Comment-Hover-01_zpsaa82df26.png); background-repeat: no-repeat; background-color: !important; position: absolute; left: 901px; top: 25px; width: 33px; background-color: ; transition:width 2s, margin-right 2s; -webkit-transition:width 2s, margin-right 2s; }

:hover { width: 250px; overflow: hidden; }

Nov 3, 2014 11 years ago
Adventure Captain
sonata
User Avatar

The position being off is probably because the comment box is inside a positioned column. So even though you're using position:absolute for the comment box it's being positioned relatively to its original placement.

.edit

also you need overflow:hidden on the unhovered state if you don't want the actual comment box showing before you hover.

Art by
[tot=sonata]

Nov 3, 2014 11 years ago
Cocaine
wants to dance with somebody
User Avatar

- I figured that was the case, because when I just did a rough draft of where the comment box could go if I didn't figure it out, I had to use negative numbers, so I was just like "Oh. I'm an idiot. :3" So, basically, do the same thing for these hover links as well?

Andddd....if I add overflow: hidden, that should solve my little comment transition box dilemma?

Nov 4, 2014 11 years ago
Adventure Captain
sonata
User Avatar

Since you're only using two columns I'd say stuff them in a blank section in the third one.

I think so. If your main problem (aside from positioning) is that the box isn't hidden before hovering. It's a bit difficult to fix problems when the problem isn't currently there. :P

Art by
[tot=sonata]

Nov 4, 2014 11 years ago
Cocaine
wants to dance with somebody
User Avatar

- Thanks! And yeah, I GUESS you have a very valid point, hahaha. :-P

Nov 5, 2014 11 years ago
Adventure Captain
sonata
User Avatar

Well technically since you posted the code it's not that bad. On the first day I used the Inspect Element tool to add it to your code so I could see thew problem. I was just too lazy to do that again on the second day. :P

Art by
[tot=sonata]

Please log in to reply to this topic.