How can I move a linked image on my home page closer to the top of the page?

You have the image in a paragraph, and there is an h1 element above that so the image is confined in the paragraph, and the paragraph is being pushed down by the h1.

<p><strong>Hello and welcome!<a href="https://jonathanstein.org/contact/free-consultation/"><img class="alignright size-medium wp-image-470" style="border: 0pt none; margin: 0px;" title="Free consultation link" src="https://jonathanstein.org/wp-content/uploads/2010/09/Free-consultation-link-300x93.png" alt="" width="300" height="93" /></a></strong></p>

The simplest way to move the image is to assign a class to the <a> element, and give it an absolute position.

That will remove it from the document flow, so you can position it anywhere on the page, by applying styles to the class.

Thanks FishDogFish. I wonder if you could give me any info on how to do that or where to find instructions on how to do it?

Thanks again!

I often do this…

<div style="float:right;margin:5px;">
<a href="https://jonathanstein.org/contact/free-consultation/"><img class="alignright size-medium wp-image-470" style="border: 0pt none; margin: 0px;" title="Free consultation link" src="https://jonathanstein.org/wp-content/uploads/2010/09/Free-consultation-link-300x93.png" alt="" width="300" height="93" /></a>
</div>
<p><strong>Hello and welcome!</strong></p>

And you can move this <div> anywhere or up or down in the page that you like and make it float to the left if you like.

So, bare with me here because I’m pretty new at this. Are you suggesting taking that EXACT syntax and putting it somewhere on SPECIFICALLY the homepage? Or in some CSS file?

Thanks for your help!

…and would I out it in the actual paragraph? Though this seems not to work because of what FishDogFish says in his above posting.

go to your admin panel and the post/page that you use as your front page. Place this code where you want it in the text window and click save. Check out that page in your browser and edit if needed. Just play with it, you won’t hurt anything.

If you are afraid of messing something up, copy and paste what you currently have now into notepad just in case as a backup.

Sounds good. I’ll try that!

Best,
J

Should I delete the “Free Consult” banner manually, first? And then paste this in?

Well, I did what you said and it worked…mostly. It put the banner in , but it still falls within the paragraph areas so is still below the hi element…if I’m using the proper terms. It’s still not tucked nicely up in the right hand corner, next to the right column.

…and would I out it in the actual paragraph? Though this seems not to work because of what FishDogFish says in his above posting.

my code is in a div and that is suppose to be outside of a p. i only put the image in a div so that you can float it to one side or the other, or the center as well. it wouldn’t even have to be in anything as your them should have a div hard coded into it, making whatever you place in that text window automatically in the div that is coded into your theme. you can have p’s or div’s in that text area anywhere you like or none at all. excuse the messiness…on the phone.

Thanks for your patience! Check out my site and you’ll see what I’m talking about. https://jonathanstein.org/

place…

<div style="float:right;margin:5px;">
<a href="https://jonathanstein.org/contact/free-consultation/"><img class="alignright size-medium wp-image-470" style="border: 0pt none; margin: 0px;" title="Free consultation link" src="https://jonathanstein.org/wp-content/uploads/2010/09/Free-consultation-link-300x93.png" alt="" width="300" height="93" /></a>
</div>

just above the…

<p><strong>Hello and welcome!</strong></p>

and see what happens. I have to go out for awhile, I will check back in with you later to make sure you ended up with what you wanted.

Your source code has paragraphs with images in them that are inside nested lists and such, which makes it difficult to place your image anywhere without causing issues with other elements; Therefor, it’s simplest to position the image/link in an absolute manner.

Relative positioning might be easier in this case, due to the spaghetti like structure of the code which makes it difficult to determine which element is actually the parent of the image/link.

<a class="FreeConsult" href="https://jonathanstein.org/contact/free-consultation/"><img class="alignright size-medium wp-image-470" style="border: 0pt none; margin: 0px;" title="Free consultation link" src="https://jonathanstein.org/wp-content/uploads/2010/09/Free-consultation-link-300x93.png" alt="" width="300" height="93" /></a>

And in the style.css

.FreeConsult{position:relative;
              top:-30px;}

Thanks again y’all. I tried ljmyers idea but still not working. As for FDF, should I copy your code and put it in just above the

<p>Hello and welcome!</p>

or somewhere else?

And as fot the style.css, where in that should I put the other code you sent me?

jstein814 . . . copy and paste here, exactly what you have entered for this page from beginning character to end character. Also, let me know at exactly what level you want the top of the image to be placed (eg: at the same level as the welcome paragraph, etc) and I will fix it for you when I get back home. Warning, it will probably be late today.