I want code in which when I click on the whole part of <td> (including the td background image) the link will open. I am trying that code but when I click on whole part of <td> then nothing happens. I am able to open link when I click on the link only, so what to do.
Here is the code
<td width="47%" height="150">
<a href="MY_LINK">
<div width="47" class="gimg">
<style type="text/css">
.gimg {
background-image: url("IMAGE_LINK");
background-color: lightblue;
background-size: 100% 100%;
border-radius: 12px;
vertical-align: bottom;
}
</style>
</br/>
<font color="#ECEFF1"><b>LINK_NAME</b></font>
</div>
</a>
</td>
Related
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</section>
</th>
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</table>
</th>
</tr>
I wanted to make it 2 rows 2 columns but seems like it has a conflict. Previously, I've tried div tags but couldn't work too.
result:
You can stack the components by adding two table rows <tr> - so there are two table head (th) elements inside each new row.
The inline CSS seems to be causing some problems too. I didn't have time to clean it all up but just moved the important parts over to a separate CSS. Still needs more styling in order to get the font sizes right and import the Lora font correctly. Of course you could get good results with just positioned divs too instead of tables, maybe someone will post that solution.
tr, th {
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
text-align: center;
}
header {
padding: 30px;
text-align: center;
font-size: 35px;
color: #8c734b;
}
header.span {
font-size: 20px;
font-family: Lora;
}
th {
mso-line-height-rule: exactly;
border-radius: 1px;
padding-top: 50px;
padding-bottom: 20px;
/* padding-left: 30px;
padding-right: 200px; */
}
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header class="span"><span class="span">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<tr>
<th class="earn points"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<th class="get rewarded"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</tr>
<section class="col-1-2">
<tr>
<th class="early access"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</tr>
</section>
</table>
</th>
</tr>
I found some errors on the structuring of the table. If you wonna create a table with 2 rows and 2 columns, here is a simple example:
<table>
<tr>
<td>Company</td>
<td>Contact</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
</table>
Here some mistake:
The <tr></tr> should be inside the table. Probably the <tr></tr> was passed cause of is outside the table.
You probably forgot a <section></section> tag (not sure if it was wanted)
You have used only one <tr></tr> tag instead two.
Here is the solution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<tr id="section-6465178" class="section loyalty">
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<section class="col-1-2">
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</section>
</tr>
<tr>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</tr>
</table>
</body>
</html>
If it keeps getting messy then the problem is in your css file. I hope it helped you :)
I am trying to create a banner that has a two tone blue color similar to this:
I am using Bootstrap 4.x with asp.net mvc. I have tried dividing the banner into 3 columns but I couldn't expand the the background color all the way in the icon column.
Here is how it currently looks on my end:
Here is my code:
View
<div class="row alert-banner-row">
<div class="col-sm-2 icon-column">
<i class="fas fa-3x #Model.Icon1 fa-inverse"></i>
</div>
<div class="col-sm-8 body-column">
<h5>#Model.Title</h5>
<p>#Model.Content</p>
</div>
<div class="col-sm-2 button-column">
#if (Model.ButtonUrl.EndsWith(".pdf"))
{
<a class="ctaBanner-cta button button--white" target="_blank" href="#Model.ButtonUrl">#Model.ButtonLabel</a>
}
else
{
<a class="ctaBanner-cta button button--white" href="#Model.ButtonUrl">#Model.ButtonLabel</a>
}
</div>
</div>
SCSS
.alert-banner-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem;
border-radius: 1rem;
background-color: #004089;
.body-column {
padding-top: 10px;
font-family: 'Roboto', sans-serif;
margin: 0rem;
color: white;
}
.icon-column {
background-color: #00336D;
}
}
How can I edit what I currently have to make it look like the first screenshot?
In order to have the darker background on your .icon-column, its parent .alert-banner-row cannot have any padding. Otherwise it would show a gap:
<div class="row alert-banner-row">
<div class="col-sm-2 icon-column">
<i />
</div>
<div class="col-sm-8 body-column">
<h5 />
<p />
</div>
<div class="col-sm-2 button-column">
<a />
</div>
</div>
And to show the left corner, you would need to specify overflow:hidden; otherwise it won't be shown as it's covered by its overflow content.
.alert-banner-row {
background-color: #004089;
border-radius: 1rem;
color: #fff;
overflow: hidden;
.body-column {
padding-top: 1rem;
padding-bottom: 1rem;
font-family: 'Roboto', sans-serif;
}
.icon-column,
.button-column {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.icon-column {
background-color: #00336D;
}
}
demo: https://jsfiddle.net/davidliang2008/krdu6wjc/53/
You need to make the columns display:flex and align-items: center instead...
.alert-banner-row {
display: flex;
padding: 0.5rem;
border-radius: 1rem;
background-color: #004089;
.body-column {
padding-top: 10px;
font-family: 'Roboto', sans-serif;
margin: 0rem;
color: white;
align-self: center;
}
.icon-column {
background-color: #00336D;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.button-column {
align-self: center;
}
}
https://codeply.com/p/wJMhKZ7P7y
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row" style="height:100px;color: white;">
<div class="col-2" style="background-color: #00336D;">
<div style="text-align: center; position: relative; top:40%;">
<i class=" fa fa-exclamation-circle "></i>
</div>
</div>
<div class=" col-8 " style=" background-color: #004089;padding: 2%; ">
<h1><b>Creative Writing</b></h1>
Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears. This forces the writer to use creativity
to complete one of three common writing challenges. The writer can use the paragraph as the first one of a short story and build upon it.
</div>
<div class=" col-2 " style=" background-color: #004089; " ">
<button type=" button " class=" btn btn-primary align-content-center " style=" background-color: white; color:#00336D ;position:relative;top:30% "><b>Click Here</b></button>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js "></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js "></script>
</body>
</html>
check it:
https://jsfiddle.net/s9qmj1fn/
I'm making a web-app and came accross an interesting thing.
So I have a wrapper div with other divs in it. The wrapper has the following formating:
#ready{
height:568px;
white-space: nowrap;
}
their children divs have this:
.theme{
overflow: hidden;
position:relative;
display: inline-block;
height:568px;
width:320px;
text-align: center;
background-color: #FFF;
}
It works in firefox and chrome, the divs are next to each other as intended. I have to add float:left to .theme to make it work in Safari. Although when I add float:left Mobile Safari will break the divs to new lines.
Is this a bug, or am I doing something wrong? Any ideas, workarounds?
[EDIT]
Added html
<div id="ready">
<div id="welcome"class="theme active">
...
</div>
<div id="cat"class="theme">
...
</div>
<div id="minap"class="theme">
...
</div>
<div id="minecraft"class="theme">
...
</div>
<div id="padthai"class="theme">
...
</div>
<div id="orange"class="theme">
...
</div>
<div id="bszn"class="theme">
...
</div>
</div>
Since you've tried variations of float: left, display: inline-block, position: relative and position: absolute to get your row to stay in one line, but it always breaks into two lines on one device/browser or another, maybe a table layout will achieve your goal.
You can use either the HTML <table> element or CSS table properties. In my example below I've gone with CSS.
http://jsfiddle.net/w01ckufb/2/
HTML
<div id="container">
<div id="ready">
<div id="welcome"class="theme active">IMAGE</div>
<div id="cat"class="theme">IMAGE</div>
<div id="minap"class="theme">IMAGE</div>
<div id="minecraft"class="theme">IMAGE</div>
<div id="padthai"class="theme">IMAGE</div>
<div id="orange"class="theme">IMAGE</div>
<div id="bszn"class="theme">IMAGE</div>
</div><!-- end .ready -->
</div><!-- end #container -->
CSS
#container {
display: table;
width: 4000px;
border-spacing: 15px;
}
#ready{
display: table-row;
border: 2px solid red;
}
.theme {
display: table-cell;
height: 568px;
width: 820px;
text-align: center;
background-color: #FFF;
border: 2px dashed blue;
}
Hope this helps. If you have any questions leave a comment below.
I've applied a background image to the div I use as my data-role="page" but now I realise it has also added a length to the div, below where the image ends. If I user scrolls down on the app, they see this gap.
Would anyone know how to fix this and have background images work properly with iOS devices?
My css is:
#startuphero {
color: #fff;
background-image: url('../img/hero5.png');
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
HTML is:
<body>
<div id="startuphero" data-role="page" data-title="Home">
<!--INDEX MENU-->
<div id="indexmenu">
<table>
<tr>
<td>
<img src="img/programicon.png"/>
</td>
<td>
<img src="img/plannericon.png"/>
</td>
<td>
<img src="img/newsicon.png"/>
</td>
</tr>
<tr>
<td>
<img src="img/wordicon.png"/>
</td>
<td>
<img src="img/convicon.png"/>
</td>
<td>
<img src="img/designicon.png"/>
</td>
</tr>
</table>
</div><!--INDEX MENU--> </div>
</body>
(PS: this is a PhoneGap/Cordova project on iOS)
ok so i have this address for a part of my website,
localhost:2001/?botid=Alice&template=alice
and i want to make it so what i put after that will be put into the input box on the page. So something like this,
localhost:2001/?botid=Alice&template=alice#Hello
how are you?
can anyone help out with a javascript or something?
heres the source code,
<!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">
<!--This is a simple example of an HTML chat template for Program D.-->
<head>
<!--The value associated with a bot predicate, such as
"name", is inserted wherever you use a bot element
with a name attribute that corresponds to a predicate name.-->
<title>
Dialogue with <bot name="name"/>
</title>
<!--This is a simple stylesheet to format the page.-->
<style type="text/css">
html
{
overflow: hidden;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 10px;
text-align: left;
background: transparent;
}
.fieldlabel
{
font-weight: bold;
font-style: normal;
font-size: 14px;
color: #0000aa;
}
#userinput
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #aa0000;
}
.botresponse
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #00aa00;
}
.bottomtext
{
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
font-style: italic;
font-size: 10px;
}
li p
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
}
ul
{
margin-top: 0px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 0px;
}
form
{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
#audio
{
display: none;
}
</style>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('audio')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.play();
}
</script>
<script type="text/javascript">
document.getElementById('text')[0].value = window.location.hash.substring(1);
</script>
</head>
<!--The body element is set to automatically give focus to the
input field each time the document is loaded.-->
<body>
<table border="0" cellspacing="5" cellpadding="0" width="500">
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
You said:
</p>
</td>
<td width="70%" valign="top">
<p id="userinput">
<userinput/>
</p>
</td>
</tr>
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
<!--The name of the bot will be substituted here.-->
<bot name="name"/> said:
</p>
</td>
<td width="70%" valign="top">
<p class="botresponse">
<!--The bot's response will be substituted here.-->
<reply></reply><response/>
</p>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<form method="post">
<input type="text" size="50" name="text" id="text" onkeydown="if (event.keyCode == 190) document.getElementById('go').click()" x-webkit-speech />
<input type="submit" id="go" value="Say" />
</form>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<p class="bottomtext">
<!--Again we display the bot name, and also the hostname.-->
You are speaking with <bot name="name"/> from <hostname/>.
</p>
<p class="bottomtext">
<!--Here is an example of getting another bot predicate value (master).-->
<bot name="name"/>'s botmaster is <bot name="master"/>.
</p>
<p>
You can:
</p>
<ul>
<li>
<p>
<!--This link will request a login form.-->
log in.
</p>
</li>
<li>
<p>
<!--This link will request a new user registration form.-->
register a new username and password.
</p>
</li>
</ul>
</td>
</tr>
</table>
<audio id="audio" onended="document.forms[0].elements[0].focus();" controls="controls" autoplay="autoplay" src="http://translate.google.com/translate_tts?tl=en&q=><response/>" type="audio/mpeg"></audio>
</body>
</html>
With jQuery:
$('input').val(window.location.hash.substring(1));
Without jQuery:
document.getElementsByTagName('input')[0].value = window.location.hash.substring(1);
Either way, you have to make sure the DOM is loaded. If you want to unescape it, use decodeURIComponent E.g.:
window.addEventListener("load", function()
{
document.getElementsByTagName('input')[0].value = decodeURIComponent(window.location.hash.substring(1));
}, false);
window.location = window.location + '#' + document.getElementById('inputbox').text;