The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to add floating image to page?
Cosmo
post Apr 27 2017, 02:03 PM
Post #1





Group: Members
Posts: 3
Joined: 27-April 17
Member No.: 26,386



Hi Forum,
Newbie here. I'm hoping someone out there may be able to help with this. I'm trying to add a small floating security seal image, bottom/right corner. When I say 'floating' I do not mean text wrapped. I mean floating, as in maintaining its position regardless of the vertical page scrolling.

Code provided goes like this:

<a href="https://ssl.comodo.com">
<img src="https://ssl.comodo.com/images/comodo_secure_seal_113x59_transp.png" alt="SSL Certificate" width="113" height="59" style="border: 0px;"></a><br> <span style="font-weight:bold; font-size:7pt"><a href="https://ssl.comodo.com">SSL Certificate</a></span><br>

Placement is the problem.

Thanks for any help.

This post has been edited by Cosmo: Apr 27 2017, 02:09 PM


Attached thumbnail(s)
Attached Image

Attached File(s)
Attached File  Page_1.txt ( 1.96k ) Number of downloads: 176
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2017, 02:29 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sounds like you are looking for position: fixed .
https://www.w3.org/TR/CSS2/visuren.html#propdef-position
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Cosmo
post Apr 27 2017, 03:10 PM
Post #3





Group: Members
Posts: 3
Joined: 27-April 17
Member No.: 26,386



I think so. Sorry, but I did not include the following:

Add this before your </HEAD> tag

<script type="text/javascript"> //<![CDATA[
var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>

Add this before your </BODY> tag

<script language="JavaScript" type="text/javascript">
TrustLogo("www.mysite.com", "CL1", "none");
</script>
<a href="https://www.instantssl.com/" id="comodoTL">Essential SSL</a>

I found that these snippets are required to make the seal work. I am not sure how the third piece of code (first post, above) comes into play. With the two snippets installed, the 'seal' is placed bottom/left and works, but the seal image is missing - only a greyed-out square.

This post has been edited by Cosmo: Apr 27 2017, 03:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2017, 05:50 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The file you attached is a template that some server side program turns into HTML. You need to go to the page with a browser and view source to get the HTML. A browser with a feature called "Inspect Element" or similar will also show you the HTML the script writes out.

When pasting the scripts in a blank document the inspector tells me this is the HTML the script produces.

CODE
<img src="www.mysite.com" border="0" onmousedown="return tLKB(event,'http://www.trustlogo.com/ttb_searcher/trustlogo?v_querytype=W&amp;v_shortname=CL1&amp;v_search=file:///C%25253A/Documents%25252520and%25252520Settings/admin/Desktop/TEST/test.html&amp;x=6&amp;y=5');" oncontextmenu="return tLLB(event);">


The below CSS selector should match that image and nothing else.
CODE
img[oncontextmenu="return tLLB(event);"]


So, in my empty document this line of CSS does the trick.

CODE
img[oncontextmenu="return tLLB(event);"]   { position: fixed; right: 15px; bottom: 15px }


I set the offset to 15px from the bottom right corner. You can change that as you please. It worked for me, but you could have something in your HTML and CSS that makes it not work. You have to try it.

Also, in the second script, did you put www.mysite.com there for the forum? If not you should put your real URL there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Cosmo
post Apr 28 2017, 04:36 PM
Post #5





Group: Members
Posts: 3
Joined: 27-April 17
Member No.: 26,386



Thank you for the help!! Yes mysite is generic.

Unfortunately still lost on this. I'm guessing I need to edit not only the page html but a css file also...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2017, 05:43 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes. Put that line in your style sheet. Or in a style block in HEAD. The problem is you can't edit the HTML directly (I suppose) and if you don't want to mess with the template it's probably easier to put it in an already existing external style sheet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:16 AM