Member Avatar for kukula

Hi everyone,

I have problem with links on my site (). I would like to place them permanently on the top of the notebook (just like in the project: ) and make an animation of rolling out link with jQuery with mouse hover event.

I can manage jQuery by myself but I can't place them exactly on the top of the notebook. I tried to do it but on different screens all the links move into the different places.

  • 3 Contributors
  • 5 Replies
  • 205 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kukula

Dani AI

Generated

Short answer: put the notebook graphic inside a positioned container and absolutely position the link(s) inside that container using percentages (not pixels). That is the robust way to keep link positions consistent as the image scales. As hinted, absolute positioning is correct when the link is positioned relative to a fixed container; floats (as suggested) won't help for overlays. 's final approach (DIVs + notebook as a background) is a good start — the rest is about making the container scale predictably.

Use a wrapper that scales the image and keep the link coordinates in percent so they track the image size. You can either:

  • use an <img> inside a position:relative wrapper (easy and reliable), or
  • use a background image on the wrapper but ensure the wrapper keeps a fixed aspect ratio (CSS aspect-ratio or the padding-top trick) so the image doesn't get cropped by background-size:cover.

Quick example (overlay on an <img>, percent-based positioning and a simple roll-out via transform):

<div class="notebook">
  <img src="notebook.png" alt="notebook" />
  <a href="#" class="sticky-link">Link</a>
</div>

<style>
.notebook{ position:relative; max-width:800px; }
.notebook img{ display:block; width:100%; height:auto; }
.sticky-link{
  position:absolute;
  left:22%;   /* (pixelX / imageWidth) * 100 */
  top:12%;    /* (pixelY / imageHeight) * 100 */
  transform: translate(-50%,-50%) translateX(-60%);
  transition: transform .25s ease;
  z-index:10;
}
.sticky-link:hover,
.sticky-link:focus{ transform: translate(-50%,-50%) translateX(0); }
</style>

Troubleshooting tips: calculate percents from the original image dimensions (left% = x/imageWidth*100), avoid background-size:cover if you need exact positions (it crops), use box-sizing:border-box and no extra wrapper padding, add :focus styles so keyboard users see the roll-out, and handle touch devices with click/touch events since hover alone is unreliable on phones.

Recommended Answers

All 5 Replies

Member Avatar for dany12

Use css reset and float left or wright

Member Avatar for JorgeM

Have you tried to use absolute positioning (would work if the page contents to not move or scroll).

Member Avatar for kukula

Tried to use CSS Reset - no results

I fight with psoition:absolute / relative for a few days - no results

:(

Member Avatar for JorgeM

maybe if you post some of the relevant code, forums members can help you work out the CSS.

Member Avatar for kukula

OK, I managed this. I made a few DIVs and placed notebook image as a background. Now I can edit the content of the notebook and place links exactly where I want to.

Thanks for help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.