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.
Related
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.
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>
I am a relative newbee to HTML. Please be gentle!
I am trying to lay some text on top of a background image in am HTML email and am getting lost in the finer syntax. The background image is not showing up. I believe it is in fact getting pulled, but simply not being rendered (I could be very wrong)
<table width="100%">
<tr>
<td style="margin:0; padding:0; margin-top:1px; background-image:url ('http://www.insurehomehealth.com/MM/greenbar.png')";>My Text</td>
</tr>
</table> <!--end table-->
Thanks for teaching me a in advance!
You added a space between url and (
So replace:
background-image:url ('http://www.insurehomehealth.com/MM/greenbar.png');
by
background-image:url('http://www.insurehomehealth.com/MM/greenbar.png');
I need advice on a simple exercise I am trying to do - I do not code to html UI usually.
The following code attempts to load 2 iframes within table cells:
<html>
<body>
<table border="1">
<tr>
<td>
<div id='outerdiv '>
<iframe src="book.jsp" id='outiframe' scrolling=no >< /iframe>
</div>
</td>
</tr>
<tr>
<td>
<div id='summarydiv '>
<iframe src="book-view.jsp" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
</tr>
</table>
</body>
</html>
Obviously additional attributes have to be added to make the 2 iframes visible.
Currently,IE8 shows the iframes horizontally placed beside each other,with neither displaying in full.
Firefox only displays the top one.
What is the minimum basic template needed here to make the 2 iframes adjust and be visible together - and resize well with the browser size.
The problem is that your closing iframe tags have a space in them
< /iframe>
Should be
</iframe>
No need to add extra div tags. give the id 'outerdiv' and 'summerydiv' to TD and set css style max-height and max-width.
It may able to hold your iFrames in position.
:)
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.