I have a page that just has a title, header and 3 links.
Is it possible to have them next to each other with a small space in between? I have tried tables but it doesn't create a space, they are too close together. Or if anyone knows a better way to display them please let me know. I just require them to be next to each other.
Eg. Out Of Office--------Leave Application---------Extension List
Just a lot neater and better to look at.
My code:
body {
background-image: url("burg.jpg ");
}
<CENTER>
<h1> Alpine Motors Local Services </h1>
<HR>
<table border="0">
<td>
<h2>*Set Out Of Office*</h2 </td>
<td>
<h2><a href='leaveform/LeaveForm.php'>Leave Application*</a></h2 </td>
<td>
<h2><a href='VW Ext List/index.php'>Extension List Directory*</a>
</h2>
</td>
</table>
<HR>
</center>
Out Of Office Leave Application Extension List
This is the easiest way to achieve this with only html, but there are much better ways. Anyways, the output will be as follows
Out Of Office Leave Application Extension List
if you want more space between them, simply add more $emsp; between words
Related
I'm working on a project for class and I need to use HTML preview to see my work so far. Whenever I try it, I get a blank window saying preview not available.
<!DOCTYPE html>
<html>
<head>
<title>Identity Theft</title>
</head>
<body style=background-color:lightsteelblue>
<h1 style=text-align:center;color:blue> Protecting against identity theft</h1>
<hr style=background-color:white size=5px>
<div style="font-family;Arial">
<h2> Keping Your Personal Information Secure Online</h2>
<ol><li> Be aklert to impersonators</li></ol>
<li> Safely dispose of personal information</li>
<li>encrypt your data</li>
<li> Keep passwords private</li>
<li> Don't overshare on social networking sites</li>
<h2> Keeping your devices secure</h2>
<ul><li> Use Security Software</li>
<li>lock up your laptop</li>
<li>Be Wise about wi-fi</li>
<li> Avoid phishing emails</li>
<li> Read privacy policies</li></ul>
</div>
<p>Source: Federal Trade Commission</p>
<div align ="center">
<h3> Report Crimes or Suspicious Activity</h3>
<table border ="2">
<tr>
<th>Activity</th>
<th>Contact</th>
</tr>
<tr>
<td>Identity Theft</td>
<td> The Federal Trade Commission </td>
</tr>
<tr>
<td> Internet Crime </td>
</body>
</html>
View your HTML file rendered dynamically as you type.
From Plugins > Plugin Manager, install plugin Preview HTML.
Focus your HTML File.
Select Plugins > Preview HTML > Preview HTML.
The window now should show HTML file (if not, test it on a simple sample). Keep the window floating or dock it, e.g. to the bottom of the Notepad++ window.
Type at least one character into your HTML code to see the preview.
and thank you in advance.
When putting together the source coding all seems fine and displays as it should (dreamweaver, browsers, etc.) As soon as the email template gets sent out the text 'spills' out of the div that contains it.
I'd would appreciate any help in the right direction!
Here is the code:
<!DOCTYPE html><HTML xmlns:o =
"urn:schemas-microsoft-com:office:office"><HEAD><TITLE>Olympia Moving</TITLE>
<META charset=utf-8>
<STYLE>#content {
PADDING-LEFT: 10px; WIDTH: 580px; DISPLAY: block;
}
UL {
LIST-STYLE: circle none inside;
}
P {
LINE-HEIGHT: 1.25em; MARGIN: 1.25em 0px; FONT-SIZE: 1em;
}
</STYLE>
</HEAD>
<BODY><img id=header
src="http://olympiarelocationinc.com/mailing/img/img_001.jpg" width=600
height=248 useMap=#header>
<DIV id=content>
<P>Dear ##First_Name##,</P>
<P>I tried reaching you by telephone today, without success, and thought that
maybe communicating via email would be more convenient for you. <BR><BR>I
received your contact information from our website, indicating that you are
currently looking for movers to assist you on ##Move_Date##. I would love to be
able to help you out with your upcoming move. <BR><BR>I understand that you will
be moving from ##PickCityStateZip## to ##DelCityStateZip##. If this is incorrect
please let me know. <BR><BR>I do have a few additional questions for you prior
to providing you with an estimate. If you could please answer the following
questions, it would be greatly appreciated and I will then promptly respond with
both an estimate and a detailed explanation of all services we will provide for
you. <BR></P>
<UL>
<LI>
<P>How many bedrooms do you currently have? </P>
<LI>
<P>Currently, do you live in a home, town house, or an apartment/condo?</P>
<LI>
<P>Is there an elevator in either location that you already have or still need
to reserve for a specific time? </P>
<LI>
<P>Are you going to be moving everything or only specific items? (If specific,
please list.) </P>
<LI>
<P>Are you going to be doing the packing yourself? </P>
<LI>
<P>Are you going to be moving any major appliances and/or heavy items such as
pianos, refrigerators, etc…? </P>
<LI>
<P>How long would you say the drive from your current location to your new
location would take? (Drive time, not distance.) </P></LI></UL><BR>
<P>If you are no longer moving, have chosen another carrier or would like to be
removed from our database for any other reason please reply to this email with a
brief explanation in the subject line. <BR><BR>I look forward to speaking with
you soon and it would be a pleasure to help. I can be reached at the number
listed below from 9am – 5pm or by email at all times. <BR><BR>On behalf of
Olympia Moving and Storage we truly appreciate your consideration in our
company! I hope to hear back from you soon! <BR><BR><BR>Thank You,<BR><BR>
<BR>
##Signature##
</DIV><img id=footer
src="http://olympiarelocationinc.com/mailing/img/img_003.jpg" width=600
height=87> <MAP name=header><AREA
href="https://www.facebook.com/movingcompany" shape=RECT target=_blank
coords=387,63,424,99><AREA href="https://twitter.com/OLYMPIAMOVINGIN"
shape=RECT target=_blank coords=423,63,468,98><AREA
href="http://www.bbb.org/chicago/business-reviews/moving-and-storage-company/olympia-moving-and-storage-in-skokie-il-47000954"
shape=RECT target=_blank coords=467,61,543,99><AREA
href="http://moveforhunger.org/what-we-do/" shape=RECT target=_blank
coords=543,59,592,100></MAP></BODY></HTML>
Something just doesn't add up! When I view the source out of outlook its identical to the original source. GRR!
Email plays nicer with tables. Try wrapping everything in a 100% wide table.
Htmls email is very different from the web. Here is some more info on how to design for html email.
Do you have a copy of an email that shows the "spilling"? A view source of the generated email might help us see if something is being introduced during generation that throws the formatting off.
All is fixed! I turned everything into table formatting, here is the code:
<!DOCTYPE html><HTML><HEAD>
<STYLE>BODY {
TEXT-ALIGN: center
}
P {
TEXT-ALIGN: left
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TBODY>
<TR>
<TD style="WIDTH: 600px"><IMG id=header
src="http://olympiarelocationinc.com/mailing/img/img_001.jpg" width=600
height=248 useMap=#header> </TD></TR>
<TR>
<TD style="WIDTH: 600px; HEIGHT: auto">
<DIV id=content>
<P>Dear ##First_Name##,</P><BR>
<P>I tried reaching you by telephone today, without success, and thought
that maybe communicating via email would be more convenient for you.
<BR><BR>I received your contact information from our website, indicating
that you are currently looking for movers to assist you on ##MoveDate##. I
would love to be able to help you out with your upcoming move. <BR><BR>I
understand that you will be moving from ##PickCityStateZip## to
##DelCityStateZip##. If this is incorrect please let me know. <BR><BR>I do
have a few additional questions for you prior to providing you with an
estimate. If you could please answer the following questions, it would be
greatly appreciated and I will then promptly respond with both an estimate
and a detailed explanation of all services we will provide for you.
<BR></P>
<UL>
<LI>
<P>How many bedrooms do you currently have? </P>
<LI>
<P>Currently, do you live in a home, town house, or an
apartment/condo?</P>
<LI>
<P>Is there an elevator in either location that you already have or
still need to reserve for a specific time? </P>
<LI>
<P>Are you going to be moving everything or only specific items? (If
specific, please list.) </P>
<LI>
<P>Are you going to be doing the packing yourself? </P>
<LI>
<P>Are you going to be moving any major appliances and/or heavy items
such as pianos, refrigerators, etc…? </P>
<LI>
<P>How long would you say the drive from your current location to your
new location would take? (Drive time, not distance.) </P></LI></UL><BR>
<P>If you are no longer moving, have chosen another carrier or would like
to be removed from our database for any other reason please reply to this
email with a brief explanation in the subject line. <BR><BR>I look forward
to speaking with you soon and it would be a pleasure to help. I can be
reached at the number listed below from 9am – 5pm or by email at all
times. <BR><BR>On behalf of Olympia Moving and Storage we truly appreciate
your consideration in our company! I hope to hear back from you soon!
<BR><BR><BR>Thank You,<BR><BR>##Signature##</P></DIV></TD></TR>
<TR>
<TD style="WIDTH: 600px"><IMG
src="http://olympiarelocationinc.com/mailing/img/img_003.jpg" width=600
height=87> </TD></TR></TBODY></TABLE><MAP name=header><AREA
href="https://www.facebook.com/movingcompany" shape=RECT target=_blank
coords=387,63,424,99><AREA href="https://twitter.com/OLYMPIAMOVINGIN"
shape=RECT target=_blank coords=423,63,468,98><AREA
href="http://www.bbb.org/chicago/business-reviews/moving-and-storage-company/olympia-moving-and-storage-in-skokie-il-47000954"
shape=RECT target=_blank coords=467,61,543,99><AREA
href="http://moveforhunger.org/what-we-do/" shape=RECT target=_blank
coords=543,59,592,100></MAP></BODY></HTML>
Apologies if this is a really simple thing, I can't seem to get it. Think I need to use clear but it's not working right (or I'm not using it correctly).
Am doing a pretty simple page, floating one image logo left and text on right. Then using a line break to break up image / text (you can see example here: http://transitions-london.co.uk/index.php/testimonials
It looks fine on firefox, but move to safari or chrome and the formatting is shunting some images/text to the right. Also when you scale up or down (cmd +-) the formatting changes.
I think I need to use <div style="clear: both;"> after every <hr /> but when I do nothing happens and the Joomla editor removes the code after saving.
Each testimonials (chunk of logo then text) is currently coded like so:
<div style="float: left;"><img src="images/otherlogos/nationalgrid92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>"Transitions opens up an avenue for us to recruit a diverse graduate workforce. There's an option for recruiting to more experienced roles too. There's a real demand in the UK for highly skilled candidates in cables and tunnels and this presents a real alternative to find international people without the complexities around international recruitment. Some of these people may have experience in their home country that we just don't have here. If the requirements change quickly we can now respond quickly."</p>
<h5 style="text-align: right;">Sharon Goymer, Graduate Resourcing Manager, Development Programmes, National Grid</h5>
<hr />
<div style="float: left;"><img src="images/otherlogos/crossrail92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>“We gained a first-class civil engineer employee as a result of Transitions. The internship and recruitment service and candidate was above our expectations.. The refugee community offers a good untapped market.“</p>
<p> </p>
<p> </p>
<h5 style="text-align: right;">Dawn Barker, Crossrail Head of HR, Crossrail</h5>
<hr />
Would really appreciate the help. I know it's probably very simple.
Cheers, N
Your template already has a class clr you can use. Try adding it to your <hr> element like so:
<hr class="clr">
If that continues to be stripped out by the Joomla WYSIWYG Editor, then add this to one of your Joomla CSS files
hr {clear: both}
I am trying to create an interface for emails. I want to import a picture but I can't do it without having cid. For example:
That works just fine. but i Can't seem to put the text to the left of the picture. Please look at the code below to get a better understanding!
<div style="background-color:black;">
<body style="font-color:white;">
<h1><i>Airline Credits</i></h1>
</br>
</ul>
Dear [FullName],<br/>
Thank you for your <i>Airline Credits</i> redemption. Below is a summary of your order:
<b>Order Date:</b>[OrderDate]<br/>
<b>Description:</b>[ItemName]
<br/><b>Redemption Amount:</b>[CostInPoints]
<br/><b>Order Tracking Number:</b>[OrderNumber]
<br/><br/>
<b>Please note:</b>
If you did not make this request, please contact us immediately at [AirlinePhoneNumber]. Our Customer Service Representatives are available to help you.
<br/><br/>
Please read the terms and conditions for Airline Credits Redemptions at [WebSiteAddress] about how you are provided your redeemed items. To view your Airline Credits balance, please click here
<br/>
<img src=cid:AirlineCredits.jpg/>
</body>
</div>
HTML email is pain - nothing inherent in it, but because Microsoft decided to make Outlook 2007, 2010, and 2013 use Word's horribly broken and poor HTML rendering implementation (whereas Outlook 2003 used IE's).
Outlook has poor floating box support, so I advise against it in this situation.
Anyway, ordinarily I'm a web-standards zealot - but in HTML email that doesn't really seem to matter, so I'd just say to use tables, like so:
<table border="0"> <!-- Tim Berners-Lee, forgive me, for I have sinned. -->
<tr>
<td>
<p>Please read the terms and conditions for Airline Credits Redemptions at [WebSiteAddress] about how you are provided your redeemed items. To view your Airline Credits balance, please click here</p>
</td>
<td> <img src=cid:AirlineCredits.jpg /> </td>
</tr>
</table>
Relatively painless, gets the job done.
(and causes me to die inside).
I am redesigning my website so that the right navigation categories -Occasion and Project Type - are side by side ([http://www.merrimentdesign.com][1]). However, when I implement the table, I can't seem to get them to align correctly. Here is my code:
I've taken some of your advice and div'd them up as opposed to using tables. But now, I'm wondering how to style them so that they are side by side. New with CSS so bear with me.
<div id="right">
<table class="categories">
<tr>
<td>
<img class="categories" src="<?php bloginfo('url'); ?>/images/sidebar.gif" alt="Let The Merriment Begin..." title="Let The Merriment Begin..." /></td>
</tr>
<tr>
<td class="categorycontent">
<br />
<div id = "occasion">
<h1>Occasion</h1>
<ul>
<?php wp_list_categories('show_count=1&title_li=&child_of=537'); ?>
</ul>
</div>
<div id = "ptype">
<h1>Project Type</h1>
<ul>
<?php wp_list_categories('show_count=1&title_li=&child_of=538'); ?>
</ul>
</div>
float:right; the div with a fixed width, float:left; the list elements within? I can't really tell what it is you are asking but from looking at your site, it seems that's what you want to do.
What's wrong with how it is displayed now? That is, what is the result you'd like to have?
If you'd go tableless, which some of the commenters suggested (and I do too), you'd solve this using divs instead. Have a look at for instance http://webdesign.about.com/od/css/a/aa102102a.htm to learn more about how to do that. Or google "tableless css" for even more.