/    Sign up×
Community /Pin to ProfileBookmark

Phone Call Link Disabled when Styling

Copy linkTweet thisAlerts:
Jul 30.2019

Hello!

I am creating a web site for myself. I want it hard coded by myself to deliver it in the minimum time. I am doing the basics of the site in HTML and moving forward slowly to make it into what I want. The URL is fencerepairomaha.com please right click and view source. I made the header inline, so far it is behaving how I want it to. I tried to superimpose elements over an image and it disables the click-to-call linking I have setup. I am trying to superimpose a rounded call now button as we see available on many sites from places such as wix.com.

Please let me know if there is any advice that may help me.

Have a great day!

to post a comment
CSSFull-stack DeveloperHTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJul 30.2019 — The image is the last entry in the div#mycontainer, therefore it covers the other entrys. Shift it to the top of the container and everything will be fine.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-07-30/1564492679-218243-tel-on-image.png]
Copy linkTweet thisAlerts:
@thethispointerauthorJul 30.2019 — Thank you!
Copy linkTweet thisAlerts:
@thethispointerauthorJul 30.2019 — @Sempervivum#1606918 Thank you!
Copy linkTweet thisAlerts:
@thethispointerauthorJul 30.2019 — @Sempervivum#1606918 I updated this and published it via FTP to the managed hosting account. Something strange happened though, it pushed what should be super imposed on the image to below the image. Also, it placed the content that should go below the image on top of the image. I am looking at this more closely at this time also.
Copy linkTweet thisAlerts:
@SempervivumJul 30.2019 — When testing I used the HTML-Inspector and modified the HTML: Shifted the large img to the top of the container div.mycontainer. Have a close look at the screenshot. The screenshot was taken from the window of the HTML-Inspector. The page was updated immediately and looked exactly as before.

I see the following issue in the latest code:

The large image was shifted [b]into[/b] the container div.mycenter. Shift it to the top [b]outside[/b] div.mycenter as visible in my screenshot.
Copy linkTweet thisAlerts:
@thethispointerauthorJul 30.2019 — Bravo! Great Solution!

``<i>
</i>&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

&lt;head&gt;
&lt;style&gt;
body {
max-width: 85%;
margin: auto;
}

.mycover {
width: 1600px;
}

.myheader {
display: inline-block;
}

.mycontainer {
position: relative;
}

.mycenter {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}

img {
width: 100%;
height: auto;
opacity: 0.3;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;span class="myheader"&gt;&lt;h1&gt;Local Locksmith Omaha&lt;/h1&gt;&lt;/span&gt;

&lt;span class="myheader"&gt;&lt;h3&gt;Call us 24/7!&lt;/h3&gt;
&lt;a href="tel:+1-402-714-5351"&gt;+1 (402) 714-5351&lt;/a&gt;&lt;/span&gt;

&lt;div class="mycontainer"&gt;
&lt;img src="http://fencerepairomaha.com/images/locksmithWorkingOnDoor.jpg" alt="Locksmith working on a door." class="mycover"&gt;
&lt;div class="mycenter"&gt;

&lt;h2&gt;Call for Vehicle Unlock&lt;/h2&gt;
&lt;a href="tel:+1-402-714-5351"&gt;+1 (402) 714-5351&lt;/a&gt;

&lt;h2&gt;Call for Home Unlock&lt;/h2&gt;
&lt;a href="tel:+1-402-714-5351"&gt;+1 (402) 714-5351&lt;/a&gt;

&lt;/br&gt;&lt;img src="https://www.merchantequip.com/image/?logos=v|m|a|d|p|g&amp;height=64" alt="Merchant Equipment Store Credit Card Logos"/&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;table style="width:100%"&gt;
&lt;tr&gt;
&lt;th&gt;Service&lt;/th&gt;
&lt;th&gt;Price USD $&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vehicle Unlock&lt;/td&gt;
&lt;td&gt;$50+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Home Unlock&lt;/td&gt;
&lt;td&gt;$50+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lock Rekey&lt;/td&gt;
&lt;td&gt;$45+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lock Repair&lt;/td&gt;
&lt;td&gt;$45+&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;h2&gt;About&lt;/h2&gt;

&lt;p&gt;Local Omaha area Locksmith. We unlock vehicles, homes, and business. Experts at rekeying locks, repairing door handles or locks, and installing door handles or locks!&lt;/p&gt;

&lt;p&gt;We are headquartered in Elkhorn, Nebraska, but we serve the entire metropolitan area including Council Bluff, Downtown Omaha, and Sarpy County.&lt;/p&gt;

&lt;p&gt;We are dedicated to providing fair prices, fast service, and maintaining top quality standards.&lt;/p&gt;

&lt;h2&gt;Install, Repair, or Rekey&lt;/h2&gt;
&lt;h3&gt;Expert Service&lt;/h3&gt;

&lt;p&gt;We professionally install the best lock brands with expert technicians. We can repair many lock or handle issues. We can make one key open as many locks as you can get to match!&lt;/p&gt;

&lt;h2&gt;Automotive Unlock Services&lt;/h2&gt;
&lt;h3&gt;Fast and Reliable&lt;/h3&gt;

&lt;p&gt;We drive to you where ever you are locked out in the Omaha Area. We can unlock nearly any vehicle type including automobiles and large commercial trucks.&lt;/p&gt;

&lt;h2&gt;Residential or Commercial Door Unlock&lt;/h2&gt;
&lt;h3&gt;Always Prepared&lt;/h3&gt;

&lt;p&gt;We can unlock many of the toughest locks! If you've lost your keys or if you've accidentally locked the door behind you, we can help open it quickly!&lt;/p&gt;

&lt;h3&gt;locallocksmithomaha.com&lt;/h3&gt;

&lt;p&gt;Copyright 2019 locallocksmithomaha.com All Rights Reserved&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;<i>
</i>``
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-07-30/1564503610-697071-screensnap.jpeg]
×

Success!

Help @thethispointer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...