Nesting Div To Make Button Around Tel: Link? - html

I tried to nest a div before closing my tag to make a button around a tap to call tel: link:
<a href=”tel:+18888888888">
<div>
<table>
<tbody>
<tr>
<td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
<td rowspan="2">Tap To Call NOW! 888.888.8888</td>
</tr>
</tbody>
</table>
</div>
</a>
When I upload the html file to my host I get a 404 error when I tap the button.
When I remove the div, and the closing tag is right behind the a href=”tel:+18888888888" tag (i.e. it has correct syntax without a div container before the closing tag) it works but is simply an undecorated link.
Any way to do this?
Thank you.

As dfionov correctly stated, you cannot include block elements inside inline elements. Anchors (<a>) are however an exception to the rule in HTML5, as explained in another answer.
I would like to also mention that for your use-case, tables should be avoided. They are for displaying tabular data not aligning an image.
There are a number of ways to do this with CSS, I would probably suggest using inline-block because it works on all modern browsers and is easier to understand than many of the alternatives.
<a href="tel:+18888888888">
<img id="phone" src="/phoneimg.png" alt="xx">
<span>Tap To Call NOW! 888.888.8888</span>
</a>

Corrected code:
<div>
<table>
<tbody>
<tr>
<td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
<td rowspan="2">Tap To Call NOW! 888.888.8888</td>
</tr>
</tbody>
</table>
</div>

Related

HTML Collapsible with text instead of image?

How can I make an expandable text using only HTML?
I have this working code that I had adapted from a tutorial, but I can't find the original tutorial to go backwards. Right now, the image is clicked and text expands below it. The tutorial originally had text, and I changed it to an image, but now I want text for a different project and can't figure it out for the life of me. (Links, etc. have been changed for stackoverflow)
<table style="width:100%"><tr><td>
<img src="https://i.imgur.com/PYIzMc6.jpg" width="200" title="Click to show/hide text" onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}"/></td></tr><tr>
<td>
<div id="sizes" style="display:none">
one<br/>
two<br/>
three<br/></div></td></tr>
</div></td>
</tr></table>
I can't figure out how to get the part that is clicked to expand the links to text instead of an image - or both if possible.
You write "using only HTML" but are using inline JavaScript, so I assumed that a JS solution analogous to your example is fine.
Just change your <img> tag to a <span> (or a <p> paragraph, or whatever suits your needs` and remove the image-specific attributes.
Also, your markup had a few unnecessary tags bevore the closing </table> tag.
<table style="width:100%">
<tr>
<td>
<span
title="Click to show/hide text"
onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}">
toggle list
</span>
</td>
</tr>
<tr>
<td>
<div id="sizes" style="display:none">
one<br/>
two<br/>
three<br/></div>
</td>
</tr>
</table>

Basic HTML table formatting for email

I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.

A href around table is not working in internet explorer

I want a clickable table. This code works in all browsers, except in IE8. I haven't tested in IE9, but it works in IE10. By not working I mean nothing happens when I click on the table. Why?
<a href="www.cnn.com" target="_blank" class="nonlink">
<table>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
</a>
This works of course:
<a href="www.cnn.com" target="_blank" class="nonlink">
hello
</a>
I tested the code in a clear webpage where no other code exists.
It'll obviously wont work since you using iligal way.
You cannot use <a> tag outside table tag.
However you can allways use <a> inside <p> tag so the code will be vaild, like that:
<table>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
EDIT
Here is an alternative way for your code so the table empty space will be fixed.
$('td').on("click", function(){
window.location = ""; // Add whatever your window location (I.E. index.html)
});
It does work, but it's definitely not good practice. From your example you should be able to include the anchor in the cell.
<table>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
Click here for a demo.

Adding html class to tinymce td element

:)
It is my second post here in stackoverflow and got happy with the results of my first question. Anyway, I already have a working tinymce toolbar with a re-designed appearance. In achieving this I have used jQuery to add classes to the toolbar elements.
But in some way isn't it better if upon initializing the toolbars the classes are also added..
let's say:
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,"
currently: (the one that i have now)
initiate tinymce
find elements add class while there are elements
Result:
<td class="first"> (*save elements here) </td>
<td class="last"> (*newdocument elements here) </td>
<td class="separator"> (*separator element here) </td>
<td class="first"> (*bold elements here) </td>
<td class="center"> (*italic elements here) </td>
<td class="center"> (*underline elements here) </td>
<td class="last"> (*strikethrough elements here) </td>
what I want to achieve:
- initiate tinymce and add classes (*the result would be the same)
wouldn't it be faster this way?
I have been tracing the codes of tinymce but with my inexperience in coding makes it more harder for me... Anyone out there who knows the answer to my problem.. Please help me.. thank you and more power... :)
Looks like you should use the configuraton setting editor_css.

iframe in table - cant overlay

This is my scenario
<div>
<table>
<tr>
</tr>
<tr>
<td>
<div id="innerDiv">
This div contains background image</div>
<iframe></iframe>
</td>
</tr>
<tr id="thirdTR">
<td>
<%--i have table here with a div that has a background image--%>
</td>
</tr>
</table>
</div>
Now when i try to have the "innerDiv" over the "thirdTR" along with the iframe, the div goes behind the "thirdTR". I even tried setting the zindex as high as possible. Can anyone please help me?
Regards,
Lakxman Kumar C
Edited: This is the css that i have for the innerDiv
position:absolute;
z-index:999
you can't lay a div over an iframe, simply impossible. you'll have to find a workaround (maybe using a div and AJAX to replace the iframe... or changing your layout so you don't need something above the frame)
You aren't allowed to put things over iframes in the html standard. If you could, people could hide links on other pages and phish more easily etc.