The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Adding a floating Contact Link, Adding a floating Contact Link in a 1 page website.
okmatthew
post Nov 16 2016, 03:22 PM
Post #1





Group: Members
Posts: 1
Joined: 16-November 16
Member No.: 24,932



Hello, sad.gif

I am NOT an HTML person. biggrin.gif
I've been a Disabled Vet since 72.

I have an extremely simple site that has a long graphic to scroll down.

I like a 'FLOATING' Contact button which activates their email app that has as it's subject line " I have a question "

I would greatly appreciate it if someone could Pretty rolleyes.gif PLEASE add this button to the following html.

In Return, I'll ad your contact info on the bottom of the Web Page Graphic if you would like it. OR PayPal you if you want to get paid.

Here it is:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Treehouse's Built For You! Handicap Access Possible!</title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
</head>

<body>
<p><img alt="Web Page Graphic" src="../rthman-website.jpg" width="1255" /></p>
</body>
</html>


Attached File(s)
Attached File  index.html ( 555bytes ) Number of downloads: 249
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2016, 04:46 PM
Post #2


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

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



I think you are looking for position: fixed .
https://www.w3.org/TR/CSS2/visuren.html#propdef-position

You can place the link anywhere in the HTML. Preferably somewhere suitable if the page is displayed without CSS. If you have an about us blurb, that's maybe a good place.

HTML
<div id="contact"><a href="mailto:you@example.com?subject=I%20have%20a%20question">Contact us</a></div>


And in your style sheet this will place the link just a little bit from the top right corner of the browser window where it will stay when the page is scrolled. If you want it somewhere else you need to change the parameters.

CODE
#contact    { position: fixed; top: 20px; right: 20px }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 16 2016, 05:28 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7



QUOTE(okmatthew @ Nov 16 2016, 09:22 PM) *

Contact button which activates their email app

Keep in mind many use webmail and may not have an email program installed. An email link won't normally open their webmail service, unless the user has configured the browser: https://www.chainsawonatireswing.com/2015/0...h-mailto-links/ but I suspect few users are aware of those settings.

Because of this, it might be a good idea to write the email address in clear text so the user can copy it to his webmail. Perhaps something like this:

CODE
<div id="contact">Contact us: <a href="mailto:you@example.com?subject=I%20have%20a%20question">you@example.com</a></div>

(alas the email will not arrive to you with the predefined subject line this way).

Or the user may simply right-click the email link and copy the link address to his webmail, but again many users are not aware of this possibility.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 19th April 2024 - 08:48 PM