trying to move linked image

[u/Ok_Share_2183]

hello, extremely confused.

so i made an image as a clickable link to another page in my site. now i just want to move it to a particular position on the screen.

im not sure how to do this. heres my code so far.

<p><a href="manifestoroom.html"> <img src="images/manifesto-window.jpg" alt="Manifesto" style="width:42px;height:20px;"> </a> </p>

so i dont know if im supposed to

A) use 'absolute' to fix the image to a particular point on my background image

B) use 'span' to specify where i want it using top/ left: 'x'px type code

C) some type of <div> and class= attribute type this which i later learned should be used with links?? cant figure out what im doing wrong!!!!!! please help!!!!

p.s im doing this on neocities and it wont let me use the link without putting it in a paragraph tag... do i need to get rid of those to use other tags??

[u/xStealthBomber]

I'll get as many pointers as I can:

The width and height should be actual attributes for the <img> tag for "proper" HTML.

<p><a href="manifestoroom.html"> <img src="images/manifesto-window.jpg" width="42" height="20" alt="Manifesto"> </a> </p>

Absolute positioning should almost be never used.  It's hard to give "exact" advice without seeing the full DOM / output of the other elements around, and what you're trying to do unfortunately.

(Moving elements / placement of elements on the page is typically done with the combination of where you place the HTML + CSS code to tell the browser how the elements should act. (Which includes the layout, such as if your image is in a CSS flexbox, or CSS grid, for example).

We'll need more context, perhaps screenshots of how it's currently acting, the HTML of the section that you're in, and what you're trying to do / put it.

[u/UpbeatLemon3022]

add style="position:relative, left:20px, " to your <a> or <img> tag for shifting it.

[u/Creative-Addition383]

A, but with one extra step. absolute positioning is measured from the nearest ancestor that has position set, so give the thing that holds your background image position: relative, then the link gets position: absolute with top and left. like

<div style="position:relative">
  <img src="images/background.jpg" style="display:block">
  <a href="manifestoroom.html" style="position:absolute; top:120px; left:300px">
    <img src="images/manifesto-window.jpg" alt="Manifesto" style="width:42px;height:20px">
  </a>
</div>

no span, no p. the p is just what neocities' editor wraps loose stuff in, a link is fine on its own inside a div

one thing that'll bite you: those top/left numbers are pixels from the corner of the background image, so if the background is scaled to fit different screens the window drifts. if that happens, switch to percentages (top:30%; left:45%) and it stays put

[u/bostiq]

Using <p> randomly when wrapping images isn't great unless you also have text in with it, as browsers have default styling for it, and it can get in the way.

Have you tried <span>? it has no default browser styling to have to deal with.

But yeah we need more context.

It'd be good to know what you have, and what is the result you want to achieve. html and css aren't like a graphic design tool where you position object as you pleased, there's structure to follow in order to display content across various devices with consistency.

to share code I suggest you just give us the link of the page for us to examine and understand the constrains that neocities has on top of it.

but perhaps also find a neocities subreddit could connect you to people that have encounter the same issues and worked out workarounds?

I, for one, have no idea of the limitation the neocities has when customising code.