@nelsonngsb
Hey Nelson how’s it going this am? I apologize for the delay in getting back to you.
I have had this ongoing issue with any sort of positioning of elements (ie: rel, abs, fixed). I can’t seem to discover the best way to position certain elements so they act as I intend them to - responsively.
In the example below I am attempting to align several lightbox text links (without the lightbox thumbnail) to the lines within the image in the middle that has the RED border around the entire image. Having the lines that appear under the light box text links align horizontally with the lines from within the image and have the links move as they should (responsively) as the viewport sizes change. The TEAL lines represent where the lightbox links should rest upon coming off of the image in the middle column encompassed in the RED border.
Just to narrow my issue down to the nuts and bolts – I have always had trouble with element positioning (relative, absolute or fixed). If the element is fixed to the top or bottom, i.e.: a navbar or footer – this works just fine. However, if I am trying to position another element within the page, this is where I run into the issue of elements moving in an undesired path.
Thx guys!
Cheers
B
That’s a fun challenge! Be sure to have relative or absolute positioning set on parent divs so you can adjust everything inside accordingly. Can you share which page of the site this is on and which element you are working on now? And I’ll take a look. Likely, what you are wanting to accomplish will take a good amount of adjusting per device.
Absolutely and thanks for you’re help! The page from the example above is called “ES Enclosures Landing Page,” and the elements I am trying to position are the lightbox text links on the left and right side of the image in the middle. Here is an UPDATED READ ONLY LINK: https://preview.webflow.com/preview/glcac?preview=646d71e490397efbb06c7b09465b4b49
Also, on the GLCC Home page there is another element I am have the same issue with. It is the blue pin that houses a link to YouTube and this keeps moving on me as well.
This element positioning has me going in circles!!!
Not sure how flexible you are with the image, number, lines, link combo…
Here is what I might have tried if starting from scratch. Just the image no numbers or lines. Create a div and make it relative position, insert the image and position, create a div (lets call it HOLDER) and place the number inside, place another div inside HOLDER…turn this div into a line via css, then place another div inside HOLDER and drop the light box link inside. Normally, I would then give these all percentage widths and left float (you might have to change the order id structure tree). Then repeat the structure for the elements.
However, this could be a great test of Flexbox…save a backup before doing any Flexbox work. I haven’t had a chance to really work with Flexbox yet but maybe @sabanna or @PixelGeek could advise more.
Look at it this way, once you get this sorted you will be and expert in position and/or Flexbox.
To answer your question of is there a best practice…probably not. What you are working on is something three designers might all approach differently.
@Waldo@jdesign@cyberdave Yes this is true in regard to designers skinning the cat in more than one way! I used hotspots around the text within the image which are meant to be the lightbox links without the thumbnail (define thumbnail id then display none to leave only the lightbox link and not the thumbnail). So the hotspots are linkable however now I can’t get the lightbox link to function correctly with the hotspots. All i have been able to do is to lead those hotspot links to a separate page with the elements I would rather display as a lightbox.
@jdesign Although your above suggestion with the divs and HOLDER didn’t workout with this issue - I applied this same suggestion to another area of the site which worked quite well! Thank you for your advice! However, I am still having trouble getting the lightbox links into my image hotspots. Any other good advice?
@Brian_M_Fromknecht Glad my suggestion worked for something else. Okay, I think I see what you are asking. I’ll have to play around with it a bit and get back to you.
Oh boy! I hope this is even possible. From my research it doesn’t appear to be a clear cut way to do it. Putting a link to open up a Lightbox ( along several other images within that group ) by clicking on an image hotspot.
