1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Phone Call Link Disabled when Styling

Discussion in 'HTML & Website Design' started by thethispointer, Jul 30, 2019.

0
  1. #1
    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!
     
    Solved! View solution.
    thethispointer, Jul 30, 2019 IP
  2. thethispointer

    thethispointer Greenhorn

    Messages:
    5
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    8
    #2
    I have found a solution with some help. I had to place the img in the correct place which was nested one level up.

    [​IMG] 

    <!DOCTYPE html>

<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
<style>
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;
}
</style>
</head>

<body>

<span class="myheader"><h1>Local Locksmith Omaha</h1></span>

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

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

<h2>Call for Vehicle Unlock</h2>
<a href="tel:+1-402-714-5351">+1 (402) 714-5351</a>

<h2>Call for Home Unlock</h2>
<a href="tel:+1-402-714-5351">+1 (402) 714-5351</a>

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

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

<h2>About</h2>

<p>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!</p>

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

<p>We are dedicated to providing fair prices, fast service, and maintaining top quality standards.</p>

<h2>Install, Repair, or Rekey</h2>
<h3>Expert Service</h3>

<p>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!</p>

<h2>Automotive Unlock Services</h2>
<h3>Fast and Reliable</h3>

<p>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.</p>

<h2>Residential or Commercial Door Unlock</h2>
<h3>Always Prepared</h3>

<p>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!</p>

<h3>locallocksmithomaha.com</h3>

<p>Copyright 2019 locallocksmithomaha.com All Rights Reserved</p>
</body>
</html>
    HTML:
     
    thethispointer, Jul 30, 2019 IP
  3. Silvers

    Silvers Well-Known Member

    Messages:
    675
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #3
    You could use a tool like gridbox.io to get it done with Bootstrap relatively easy. Most of elements are drag and drop and for phone numbers you need to have tel: in the url.
     
    Silvers, Jul 30, 2019 IP
  4. thethispointer

    thethispointer Greenhorn

    Messages:
    5
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    8
    #4
    Thank you for this tip! It looks like a sort of IDE, I will look more into this. Have a great day!
     
    thethispointer, Jul 30, 2019 IP
  5. #5
    That image appears to be a background, so it has ZERO business in the HTML. But then neither does STYLE. You seem to have a endless horde of SPAN for nothing, DIV for nothing, gibberish use of numbered headings, SPAN wrapping block level elements which is invalid code, a lack of THEAD and TBODY, lack of SCOPE="",. and a host of other failings that mean you really need to back up a bit and learn more HTML before diving for the application of style.

    Seriously, is "<h3>locallocksmithomaha.com</h3>" really the start of a subsection of "<h2>Residential or Commercial Door Unlock</h2>"? As that's what an H3 means, the start of a subsection of the h2 preceding it. It looks like you're choosing your numbered headigns based on what you want for font-size and/or font-weight, and that is utterly and totally INCORRECT!

    Just like using absolute positioning of CONTENT over a IMG tag is utterly and totally the wrong way of handling a background image. We have CSS for that, it's called "background-image".

    That said, not sure what you're trying to accomplish overall, but I'm 100% certain that's not how you go about it.
     
    deathshadow, Aug 1, 2019 IP
    malky66 and pxgfx like this.
  6. thethispointer

    thethispointer Greenhorn

    Messages:
    5
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    8
    #6
    Ty, I love the honesty. It’ll only make my site better. Only the weak take offense to something that will help!
     
    thethispointer, Aug 1, 2019 IP
    mmerlinn, pxgfx, kk5st and 2 others like this.
  7. Spoiltdiva

    Spoiltdiva Acclaimed Member

    Messages:
    7,739
    Likes Received:
    2,896
    Best Answers:
    53
    Trophy Points:
    520
    #7
    Unfortunately DP has more than it's fair share of weaklings. But those who possess an open mind and are free of ego issues, can and will learn a thing or two here.;)
     
    Spoiltdiva, Aug 1, 2019 IP
    pxgfx and kk5st like this.