Aligning an indicator arrow to appear when unhiding a div
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
I am trying to align a small triangle to display above a hidden div when the div is displayed.
If you look at resdemo.ergonomiq.net/en/shop you will see a number of CD and DVD covers. At the bottom-right of each cover is a small green dot with a white "i".
When you click on the "i" the CD/dvd cover flips to display the back side and unhides a hidden div that slides open below.
The CD/DVDs have text below them that can vary in length from 1 to 4 lines.
In order to maintain the alignment of the images which have different heights and the text which has varying number of lines, the content is being displayed as table-cells, with the cover art vertically aligned to bottom and the text vertically aligned to top.
When the div unhides, it is supposed to display a small indicator triangle pointing to the cover-image/text it refers to.
The indicator, when connected to the image div, will show and unhide as needed, but it's position is relative to the bottom of the image, and that is useless, as it needs to align either relative to the text or more appropriately, relative to the hidden div so it can always display properly aligned to the hidden div.
Right now, on this page, you will see a bunch of these indicators displayed (not hidden) on the CDs on rows 2 and below.
I am trying to get it to work and have been testing different options on the first row.
Here's an annotated screenshot of what I am trying to accomplish.
d.pr/i/f5ph
How do I get what I am trying to do to work properly? - Thank you.
Ali Samii
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
that is not related to gantry at all ... so really way beyond what you can expect to get help with here. I suggest to post in a more css related forum.
Just some rough thoughts: Looking at you your site I can only remind you that there are more options to clear a float than using overflow hidden on .cd-details:. I would use a pseudo element :after on that div instead to clear the float.
perishablepress.com/new-clearfix-hack/
(or use display: inline-block on the contents of cd-details so you don't have to float the track-list and the image)
(also note that you used the :after element for a gradient or so?)
Use a .cd-details: before-element for the arrow like
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom:15px solid green;
use position:absolute to move the arrow around.
use :nth-child() or "+" to determine the left-position for the 1., 2. or 3 .element to get it pointing to the right cd ...
Not sure if this helps ...
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi Henning...I realise that this isn't specific to gantry but more a general question, but wasn't sure where to post it on the forums. Nonetheless, as the site is based on gantry, I thought I'd try posting anyway.
Yes, the CSS needs massaging, certainly, and there are better ways of doing this. As always, I'm on a tight deadline, and sometimes I have to use not-optimal CSS. your advice is sound, and I will make changes based on your feedback.
As always, I truly appreciate your breadth of knowledge. - Thank you.
Ali Samii
-
Time to create page: 0.057 seconds