I need help with getting a number text to change color once clicked on. When I click on the text it goes to a next html file, but when I return to the main html. the number is still the same color so Im unable to determine the already visited files. Here is an example of what I've created.
<Center> <font size="6"><a href="question2.html"><font color="#FFCC00">Taylor</font>
</td></Center>
<td bgcolor="#0000CC">
<Center> <font size="6"><a href="question3.html"><font color="#FFCC00">Sanders</font>
</td></Center>
<td bgcolor="#0000CC">
This will set the colors for your links:
<body link="#FF0000" vlink="#00FF00" alink="#0000FF">
But you'll also need to edit your code example too. Remove the <font color="#FFCC00"> tags, which are overriding the browser's default href colors, and add closing tags to your anchors:
<font size="6">Taylor
</td>
<td bgcolor="#0000CC">
<font size="6">Sanders
</td>
<td bgcolor="#0000CC">
If you want to use <center>, you should move the opening and closing tags inside the <td></td> tags.
Try this
<html>
<body link="Orange" vlink="White" alink="Yellow">
<table>
<tr>
<td bgcolor="#0000CC" align="center">
<font size="6">Taylor</font>
</td>
<td bgcolor="#0000CC" align="center">
<font size="6">Sanders</font>
</td>
</tr>
</table>
</body>
</html>
Related
I am using a base tag with an iframe tag and I would like to know how I can restrict certain links that open in the iframe.
e.g I have a menu panel and when clicked on menu link that desired page is displayed in the iframe.
<div class="start">
<h1 class="start">Geek Box <img src="box_icon.png" alt="Box width=" 40" height="40"></h1>
<hr />
</div>
<div class="table">
<table class="table" border="1" align="center">
<tr>
<td>
Home
</td>
<td>Tech Charts</td>
<td>Videos</td>
<td>About Me</td>
</tr>
</table>
</div>
<hr />
<br />
<div>
<table border="1" width=100% height="500px" style="text-align:center">
<tr>
<td width="25%">Smart Phones</td>
<td width="25%">Laptops</td>
<td width="25%">Dektops</td>
<td width="25%">Tablets</td>
</tr>
<base target='display' />
<tr><td colspan="4"><iframe name="display" frameborder=0 width="100%" height="500px" /> </td></tr>
</table>
</div>
If I understand correctly, you would like some of the pages to open in the iframe, and others in either the same window or another one (or whatever other way), ie. not in the iftame.
This won't work with the base tag using your example because...
The HTML <base> element specifies the base URL to use for all relative URLs contained within a document.
...and also
There can be only one <base> element in a document.
...so using another base tag would not make it work the way you want it.
Instead you'll have to get rid of the base tag, and add the target attribute to each of those links that you want to appear in the iframe.
So assuming you would like to open only the "sub-menus" (so they seem at least, ie. phone, laptop... etc) in the iframe, this is what I suggest you change your code to:
<div>
<table border="1" width=100% height="500px" style="text-align:center">
<tr>
<td width="25%"><a href="phone.html" target='display'>Smart Phones</a></td>
<td width="25%"><a href="laptop.html" target='display'>Laptops</a></td>
<td width="25%"><a href="Desktop.html" target='display'>Dektops</a></td>
<td width="25%"><a href="Tablets.html" target='display'>Tablets</a></td>
</tr>
<!-- Notice I have removed the 'base' tag! -->
<tr><td colspan="4"><iframe name="display" frameborder=0 width="100%" height="500px" /> </td></tr>
</table>
</div>
...and you can leave the rest of your code intact.
Quoted source: <base - HTML | MDN
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
I am trying to make a template, which I want to use with outlook, but when I use this code, i am getting logo at right and link text left in outlook, which is total oppose to which output I want. How do I resolve it?
<center>
<table width="600px;" style="margin:auto auto;">
<tr style="left:auto">
<td>
In this main table's td tag below mentioned tables are included.. I also check that all tags are closed properly without forget any single tag.
This code is for logo and link's main table...
<table width="150px;" bgcolor="ffffff" cellpadding="0" cellspacing="0" align="left">
this code for link
<td style="text-align:right;">
<a href="http://www.url.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px; text-align:end; inline-box-align:last; left:auto" data->www.linkurl.com
</span>
</td>
I had also used text-align, left:auto, right:auto in
<table> <tr> <td>
level accordingly but not getting proper output.
Image of output in outlook
I think this is more towards what you are looking for here: JSFiddle Example
You had the right idea with
<td style="text-align:right;">
<a href="http://www.url.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px; text-align:end; inline-box-align:last; left:auto" data->www.linkurl.com
</span>
</td>
but some of your css looks a little off. Text-align doesn't have an 'end' value and I had never heard of inline-box-align before.
The text on my webpage has the following awkward spacing problem:
It is in asp.net. I have tried the following:
CSS
.optionClosed
{
font-size: large;
font-weight:bold;
color:#004C7E;
}
HTML
<table border="0px" width="50%" style="float:left; display:inline-table;" >
<tr id="optCloseMessage" runat="server" align="justify" style="display:none;">
<td>
<span class="optionClosed"> An option has already been selected for this month. If you would like to make further changes to your account, please cancel your pending option</span>
</td>
</tr>
</table>
I have also tried replacing <span> with a <p> tag and also not including any tags and just using <td class="optionClosed">
Is there a way to get rid of the spacing problem or some insight into what I am setting up incorrectly? Thanks.
align="justify" ... take that out.
You need to remove align="justify" from your html
I have this:
<html>
<head>
<link rel="icon" type="image/ico" href="../images/logo.ico" />
<title> About Dideban </title>
</head>
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12; margin-left:130; margin-bottom:200">
<tr>
<td >
<br>
<b> txt </b> txt txt
<br>
txttxttxttxttxttxt
<br>
txttxttxttxttxt
<br>
txttxttxt
<br>
txttxttxttxttxttxttxttxt
<b> Snort </b>.
<br><br>
<b> Dideban Team </b>
<li> <font color="blue"> Manager: </font> Dr. Masood Hashemi</li>
<li> <font color="blue"> Designer&Developer:</font>txttxt</li>
<li> <font color="blue"> Supporter:</font>txttxt</li>
<li> <font color="blue"> Developer:</font> txttxt</li>
<li> <font color="blue"> Designer:</font> txttxttxt</li>
<br>
<!--<input class="but" type="button" value="close" onclick="window.close();" style="margin-top:200">-->
</td>
</tr>
</table>
</body>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</html>
My problem is that when I see it the table is in the center and bottom of my above image
I want the table be in the left hand but when i tried align="left"
in the table tag nothing changed what can i do?
in my linux system it shows me right but in XP it is not fixed.
Thanks In advance.
Try to insert your "header" table in the body tag. The formating works only for tables that are within it. The head tag is not for your web page header. It's a header for a web browser to provide information about your page and etc - more
That should work:
<html>
<head />
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12px; margin-left:130px; margin-bottom:200px">
<tr>
<td >
<br>
<b> Sometext </b> Sometext
</td>
</tr>
</table>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</body>
</html>
I don't understand anything after this edits. Everything looks fine. Remember that you have margin-left:130 in your content table. This is why it is not glued to the left side of the page. Was that the case?
The problems you are having with the browsers rendering your page differently are caused by errors in your code. The markup is not correct and the browsers have a hard time guessing what you actually want them to do.
Some of the problems with your code include:
<li> tags with no <ul> or <ol> parent
invalid style declarations: values should also include the measure units ( margin-left:130px; )
Instead of copying and pasting different solutions found over the internet, you should take your time and learn the basics of HTML. There are many tutorials on the web that are actually outdated by today's standards (the font tag is deprecated in HTML4 and should be replaced with CSS styles) so you should be careful in the resources you read.
This is a great resource for learning about HTML and it's relatives (CSS and JS):
https://developer.mozilla.org/en-US/learn
You can also use this validate your code:
http://validator.w3.org/
If you don't take your time to learn the proper way of coding webpages, you will have no luck finding developers willing to help you.