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>
Related
When building my site, I visited the Resizing Image Based on Browser Width/Height page to attempt to create an image that would resize itself based on the size of the window. It currently works on most displays, but a large portion of whitespace appears on the right when the display goes beyond approximately 16 inches.
How would I eliminate this whitespace?
Here is my HTML/CSS:
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
p {
padding: 1em 2em;
font-size: 1.3rem;
}
h2 {
font-size: 3em;
margin-left: 1em !important;
}
.main-title h1 {
font-size: 4em;
}
.main-title h3 {
font-size: 2em;
}
.post-hero-image {
max-width: 100%;
height: auto;
width: auto; /* Internet Explorer */
}
.content img {
max-width: 50%;
height: auto;
width: auto;
margin: 2em 25%;
}
.main-title {
font-size: 120%;
text-align: center;
font-weight: 800;
margin: 2em 5em;
}
ol li {
font-size: 1.5em;
margin-left: 2em;
}
.content div {
margin-left: 3em;
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="the-10x-rule-style.css" rel = "stylesheet" type="text/css" media="screen"/>
<meta charset="utf-8">
<title> The 10X Rule - The Novel Column </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" class="post-hero-image">
<div class="main-title">
<h1> The 10X Rule</h1>
<h3 class="author"> Grant Cardone</h3>
</div>
<div class="content">
<p> I first heard about Grant Cardone and his work on Youtube. In one of his videos, he briefly talked about how one of his books, <span style="text-decoration: underline;">The 10X Rule</span>, caused him to organize one of the largest personal growth and business conferences in the entire world. As I picked up this primer to massive action, I thought, <i> “This must be interesting!” </i> </p>
<img class="infographic" src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-10X-Rule-Infographic.png">
<h2>What is the 10X Rule?</h2>
<div class="about-book">
<ol>
<li><b> Set goals and targets that are 10X higher than what you believe you can achieve.</b></li>
<p class="goals_intro"> Grant believes that it is imperative for us to set goals higher than what you believe you can achieve. If your goal is to close 5 customers every week, convince 50 customers that your product provides them the best value. If you want to get one article written every week, try getting one polished article every day. Your 10X goal doesn’t necessarily need to be exactly 10 times more than what you expect; 4, 3, or even 2 times more is acceptable. The main idea is to attempt to maximize your potential.</p>
<p class="goals_why">Why should we do this? If we don’t set high goals for ourselves, we actually work below our expected level of work ethic (since not high goal = easy to achieve). However, when we set a challenging goal for ourselves, we know that our standard work level is not high enough for success. Due to the difficulty of the target, we will naturally raise our level of work habits to a higher standard than before. This in turn allows us to reach our original goal or even exceed it.</p>
<p class="goals_example">I absolutely agree with this principle. When reading the section of The 10X Rule regarding this topic, I was preparing for a computing contest (similar to a hackathon). The average score was in the 40 – 50 range with the highest score being 75 (a perfect score). At first, I told myself that getting a 60/75, a fairly competitive score, was enough. However, I remembered Grant’s advice and raised my goal to 70 or more. Reflecting back on that decision, I realized that raising my goal motivated me to wake up early in the morning to complete a practice contest every day (each one took approximately 3 hours).</p>
<p class="goals_conflict">During this process, there were times where difficult problems caused me to ask myself, “Is this truly necessary?” “Do I really need a 70?” In this situation, Grant would list his goals out on a notepad so that he put his main focus on the end goal he wants to achieve, not so much in the problem at hand. This is exactly what I did. I grabbed my journal and wrote, “I have a score of 70 or more on the CCC contest” (it is important to write your goal as if you already accomplished it). I then added some further detail on the steps I would take to achieve this objective.</p>
<p class="goals_conclusion">Even though I ended up with a score of 60 in the end, the 10X actions that came as a result of the revised goal were what got me to my original target. If I stuck to my original goal, I may have got an even lower score!</p>
<li><b>Take actions that are 10X greater than what you expect you need to take.</b></li>
<p class="10x_actions">Not doing this plays a key part in why many people give up on completing a certain task. Since this is my first review, take creating a website as an example. Before setting up The Novel Column, I was fairly overconfident and only listed out two possible problems I would encounter. As I was designing my pages and creating the content, I found more than 20 problems that needed to be dealt with. As I spent three hours trying to find an answer in vain, I remembered this part of the rule and how I directly violated it by not spending enough time pondering the possible problems I would encounter and how I would tackle them. Due to this, I went back to the drawing board, thought about 30 design and content problems I may encounter, and found a detailed and specific answer to each one of them. By doing so, I mentally prepared myself for more problems along the way and will therefore be less susceptible to quitting when encountering them.</p>
</ol>
</div>
<a data-cp-link="1" href="#" target="_self" rel="noopener noreferrer"><img class="good-size" src="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?zoom=2.5&w=3840&ssl=1" "="" i1.wp.com="" thenovelcolumn.com="" wp-content="" uploads="" 2019="" 04="" 6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?zoom="2&w=3840&ssl=1"" width="563" height="393" src-orig="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?w=3840&ssl=1" scale="2.5"></a>
<h2> The ONE Takeaway:</h2>
<div id="one-message">
<p class="the-takeaway"> Massive success is only achieved through massive action.</p>
</div>
<h2>Main Takeaways</h2>
<div id="takeaways">
<ol>
<li><b>Don’t Compete With Others</b></li>
<p class="dont_compete"> When you compete with others, you are restricting yourself from achieving massive results. Think about it: you are telling yourself that you simply need to be better than your competition. In other words, your competition dictates your work ethic. Thus, the 10X Rule is directly violated since you are not even attempting to achieve your full potential. For example, what if the competition is offering sub-par services? Based on Grant’s analysis, you simply have to develop your product or service until yours is at their level or a little bit better to beat them. This means that your service is also sub-par (or maybe a little bit better). Are you making an effort to reach your (company’s) potential? Definitely not. Instead, Grant suggests delivering so much value to your clients through your product and service that you will obliterate all competition. This will help you dominate the sector you are in.</p>
<li><b>Successful People take Massive Action</b></li>
<p class="massive_action_focus">Grant tells us that ordinary people approach a task and simply quit when it gets too difficult (or when they realize that the difficulty of completing the task is higher than what they expected). Even then, they are self-satisfied and tell themselves that the attempt is good enough. However, Grant tells us that an attempt without an intended result is the exact same thing as not accomplishing anything at all. If you meet hardships, the author suggests persisting and continuing to take massive action to overcome them and reach the end result (focusing on the goal and not the process).</p>
<p class="massive_action_four_degrees">There are four degrees of actions. Many average people fit inside the first three. They aren’t happy with their 9-5 job but don’t find a way to change for the better. However, successful people take the last degree: massive action. They do everything then can to improving their skill, dominate their sector (instead of competing with others), and reach their maximum potential. This is done by reading an average of 60 books and attending an average of 3 seminars and/or webinars every year.</p>
<p class="massive_action_no_bounds">The successful also know that their energy, creativity, and effort have no bounds. Take one of Aesop’s fables, <u>The Tortoise and the Hare</u>, for example. In this short parable, the hare is portrayed as a fast but cocky individual and the tortoise as slow but steadfast. Due to the hare’s lack of action, the tortoise wins in end, causing most readers to infer that the slow and perseverant will always beat the skilled but arrogant. However, if there was an individual who had the speed of the hare and the steadfastness of the tortoise, it would crush both animals and have no competition. Grant’s advice here is to take attributes from both animals; we not only want to take massive actions and maintain motivation but also posess continued persistence. This helps us become the best in whatever sector we are in.</p>
<li><b>Average is a Failing Formula</b></li>
<p class="average_failing_intro"> Ordinary, standard, and usual. These are the first three words that come up when we google synonyms for the word “average”. Thinking and doing the typical way will stop many dreams from becoming a reality. This is due to two reasons: average thoughts and average actions.</p>
<p class:="average_failing_starbucks">During the troubling economic times in 2008, Starbucks could be seen as the best example for anything but average action. Not only were they doing what other companies in their and sector were (cutting expenses and removing unprofitable locations), Starbucks CEO Howard Schultz would travel to different locations around the US and ask customers on how his company could better serve them. It was most likely these massive actions and improvements to the company that got the attention of investors and customers and caused Starbucks to be one of the biggest coffee companies in the world.</p>
<p class="average_failing_company">Average also assumes that everything will work as intended. These consequences can be seen in many startup companies. For example, members of a startup decide to “play it safe” and present their product to 5 people (potential buyer or investor). They think that 10 calls is simply enough. However, what if none of the 10 people they called have time or interest in learning about your product? Even the most successful products may need 100 calls to gather 10 people. Along with other negative setbacks (competition dominating the startup’s sector, a key member in an accident), these average thoughts and actions this startup took will cause many members may be overwhelmed (since these possibilities were never considered) and even result in the majority of them leaving.</p>
<p class="average_failing_conclusion"> Will ordinary results appeal to potential clients? Will standard results help us dominate our sector? Will typical actions and thoughts propel your product or service to high levels of success? Definitely not! It is due to these reasons that Grant finds it critical to eliminate the notion of average in our minds if we want massive results.</p>
</ol>
</div>
<img class="good-size" src="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/cd45503f6ff3529bfcfc10e3924f18a-e1555886172469.jpg?zoom=2.5&w=3840&ssl=1" alt="" title="Highlighted Page" width="563" height="393" src-orig="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/cd45503f6ff3529bfcfc10e3924f18a-e1555886172469.jpg?w=3840&ssl=1" scale="2.5">
<h2> Personal Opinions</h2>
<div class="opinions">
<p class="opinions-intro">For starters, this book is very easy to understand. I love how Grant only focuses on <b>one or two</b> important points of information in each chapter, use multiple examples in the real world, and repeating his idea and his supporting points multiple times in the chapter. These small things allowed me to clearly understand what his points and principles are and why they are true while the reiterations allowed the information to stick in my head.</p>
<p class="successful-vs-unsuccessful">I especially love the <u> Successful or Unsuccessful</u> section of the book. It is here where Grant talks about his findings on the common traits of successful people. There are some examples which can be found in other books, such as persistence, having a “can-do” attitude, and being goal oriented. However, there are also many that are unique to <u> The 10X Rule </u> itself, such as being highly ethical, being uncomfortable, and committing first – figure out later (my personal favorite). To me, this section is worth more than the price of the book itself!</p>
<p class="minor-issues">Even with these important facts, there are some minor issues I have with <u> The 10X Rule</u>. First, the repetition of an idea over and over again through 7 – 10 pages. If I was not highlighting important points in the book (which was something not done for the first 100 pages), it was easy for me to doze off and lose engagement in Grant’s information. It would have also been better if there were some sort of pictures or diagrams instead of simply a page filled with words. This would have allowed Grant to elaborate on his points without using so much text, giving any reader’s attention span some leeway.</p>
</div>
<div class="conclusion">
<p>Along with many important non-conventional principles successful people abide by, <u> The 10X Rule </u> showed me why many habits of the majority of society don’t allow for massive success and what high achievers do to get the success they have.</p>
<p> Due to this, I give this book a <b> 7.5 </b>.</p>
</div>
<img class="infographic" src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-10X-Rule-Infographic.png">
</div>
</div>
</body>
</html>
Thanks for your help in advance!
Try adding min-width: 100%; to the .post-hero-image class in your CSS. That will allow it to fill the full width of the page even if the image resolution is smaller than the window width.
anchor does not work, but if a move the anchor to the top it works. I don't understand whats going on. this is my first time asking a question in StackOverflow. thanks in advanced.here is the full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet" >
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
Send me an email
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content
for the book, which includes a complete subset of usable skills. After the core
content, each section of the book is designed as an independent module. This
means that these sections don't have to be taught in sequence. As a result, you
can customize your courses by assigning just those sections that you want to
teach.</p>
<p>Whenever possible, each of the chapters is also designed as an independent
module. When this is true, you can assign just those chapters that are right
for your courses. This approach also makes the chapters better for on-the-job
reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a
unique top-down design that moves from the simple to complex. This makes it
easier for trainees to learn. It also means that you can present the topics at
the start of a chapter to make sure everyone understands the essential details,
without presenting all of the topics in a chapter. Then, your trainees can
learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information
is presented in "paired pages." In each pair, the right page is a
figure that contains the syntax, guidelines, and examples, and the left page is
text that contains the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace.
If, for example, you're a novice, you'll probably want to read the text on the
left as you refer to the figure on the right. But if you have experience, you
may be able to get all the information you need from the figure. Either way,
our customers tell us that they love this presentation method because it helps
them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our
paired-pages format makes it easy for your trainees to access all the
information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the
expanded table of contents or the index to find the topic they're looking for.
Then, the figure on the righthand page will give them the details they need to
apply what they learned in your course.</p>
<p>This type of quick reference is absolutely essential when you're working
with the hundreds of classes, methods, and properties of an OO language like
Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on
experience without wasting any time. That's because we provide the starting
code, either from our web site or the Instructor's CD, so that trainees don't
have to enter routine code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of
what they've just learned. Sometimes, they challenge the trainees to apply what
they've learned in new ways. And you can assign the exercises so your trainees
do them in class or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text
and exercise design. Curiously, though, the exercises in some books do present
new skills. Unfortunately, this means that (1) trainees who don't do the
exercises don't learn the new skills, and (2) there's no easy way for trainees
to find the information they need if they're having trouble since the skills
haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books
teach by presenting complete, real-world applications that include design,
code, and all related components. These applications help your trainees get
started quickly and also help them reach new skill levels. As we see it,
studying applications like these is the best way to learn how all of the parts
of an application work together, so this is an essential part of the learning
process.</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD
for one of our books, you'll see that our CDs provide everything else you need
for an effective course...except the busywork. That's why you should be able to
plan and implement a course that's based on one of our books in record time.
Once that's done, our books and instructional materials will help ensure the
success of your course.</p>
</div>
</body>
</html>
here is the full css
section{
height: 100vh;
vertical-align: middle;
background-color:#f794f2;
}
.section_text {
color:#f7eb94;
font-size:15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
.content{
display:inline;
/*relative so it would move to the left*/
position:relative;
}
--------here is where I have the trouble
<div class="aside">
<!--if a move anchor here it works-->
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
<!--here it does not work-->
Send me an email
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did
in college, also some of my personal projects and programming concepts I
learn in college. visiting.</h3>
</div>
This is the css the use this part of html
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
By using position relative on the content and sidebar you were overriding some of the features of float, so the content div was actually over the sidebar even though the contents looked to be positioned correctly. I just removed the position: relative; rules and it seems fine now. To see what was happening, right click and inspect the link in your code and you'll see .content is actually being selected.
section {
height: 100vh;
vertical-align: middle;
background-color: #f794f2;
}
.section_text {
color: #f7eb94;
font-size: 15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/* background-color:#5bde47; */
}
.image_myself {
margin-left: 25%;
display: block;
}
.anchor_Send_Email {
margin-left: 25%;
}
.content {
display: inline;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
Send me an email
<form></form>
<h3>Hello! My name is Salvador Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content for the book, which includes a complete subset of usable skills. After the core content, each section of the book is designed as an independent module. This means that these
sections don't have to be taught in sequence. As a result, you can customize your courses by assigning just those sections that you want to teach.
</p>
<p>Whenever possible, each of the chapters is also designed as an independent module. When this is true, you can assign just those chapters that are right for your courses. This approach also makes the chapters better for on-the-job reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a unique top-down design that moves from the simple to complex. This makes it easier for trainees to learn. It also means that you can present the topics at the start of a chapter
to make sure everyone understands the essential details, without presenting all of the topics in a chapter. Then, your trainees can learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information is presented in "paired pages." In each pair, the right page is a figure that contains the syntax, guidelines, and examples, and the left page is text that contains
the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace. If, for example, you're a novice, you'll probably want to read the text on the left as you refer to the figure on the right. But if you have experience, you may be able to
get all the information you need from the figure. Either way, our customers tell us that they love this presentation method because it helps them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our paired-pages format makes it easy for your trainees to access all the information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the expanded table of contents or the index to find the topic they're looking for. Then, the figure on the righthand page will give them the details they need to apply what they learned
in your course.</p>
<p>This type of quick reference is absolutely essential when you're working with the hundreds of classes, methods, and properties of an OO language like Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on experience without wasting any time. That's because we provide the starting code, either from our web site or the Instructor's CD, so that trainees don't have to enter routine
code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of what they've just learned. Sometimes, they challenge the trainees to apply what they've learned in new ways. And you can assign the exercises so your trainees do them in class
or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text and exercise design. Curiously, though, the exercises in some books do present new skills. Unfortunately, this means that (1) trainees who don't do the exercises
don't learn the new skills, and (2) there's no easy way for trainees to find the information they need if they're having trouble since the skills haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books teach by presenting complete, real-world applications that include design, code, and all related components. These applications help your trainees get started quickly and also
help them reach new skill levels. As we see it, studying applications like these is the best way to learn how all of the parts of an application work together, so this is an essential part of the learning process.
</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD for one of our books, you'll see that our CDs provide everything else you need for an effective course...except the busywork. That's why you should be able to plan and implement
a course that's based on one of our books in record time. Once that's done, our books and instructional materials will help ensure the success of your course.</p>
</div>
</body>
</html>
I'm trying to rewrite our eBay listing body, but unfortunately, I haven't been able to stay current on web programming since I had my angelfire website over a decade ago.
I am very confused with this new CSS programming language, and how it works with HTML.
Here is the code that I came up with so far, but I am having some issues with it.
First of all, I want the links to be pop-ups, but ebay says it will be blocking all "active content", which I believe pop ups are included in.
The second issue is that listing description doesn't appear properly on a mobile device, automatically scaling the "Lorain Furniture" image on the top of listing. I'm not sure if it is an issue with the table, or the image. I feel like ive tried everything I've read on the internet, but I don't understand how to implement it.
Here is a link to the new eBay guidelines.
http://pages.ebay.com/sell/itemdescription/bestpractices.html
and a link to a listing with the new description.
http://www.ebay.com/itm/VTG-NEW-Amana-Gas-Range-Burner-Ignition-Switch-WPY0300521-AP6024095-/192070169613?ssPageName=STRK:MESE:IT
The code is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div style="display:none; color:white; font-size:1px;" id="HtmlAreaEditor"> [zipedit]</div>
<table id="BodyBackground" class="template0" width="100%" cellspacing="50" cellpadding="0" border="0" bgcolor="#ffd635" align="center">
<tbody><tr><td>
<table id="PageContent" width="100%" cellspacing="10" cellpadding="30" border="0" bgcolor="#00000" align="center">
<tbody><tr><td id="par0" valign="top" bgcolor="#ffffff">
<center><img class="resize" src="http://www.lorainfurniture.com/lorainfurniture.jpg" alt="Lorain Furniture and Appliance">
</center>
<h2><font color="black" face="arial,helvetica,sans-serif">Details</font> </h2>
<font size="3" color="black" face="arial,helvetica,sans-serif">All of our used parts have been tested while installed in the original appliance by one of our skilled and knowledgeable technicians.<br><br></font><font size="3" color="black" face="arial,helvetica,sans-serif"><font size="3" color="black" face="arial,helvetica,sans-serif">Typically, our items are photographed on a 1x1 inch grid. <br>You can determine the item's rough dimensions by counting the squares on the grid.<br><br></font></font><font size="3" color="black" face="arial,helvetica,sans-serif">We DO NOT sell parts for trial and error and would much rather see to it that you receive the proper part that you need to repair your appliance the first time around.<br>If you are unsure if this is the proper part for your appliance, visit the Lorain Furniture and Appliance Online Parts Store to enter your model number and view the diagrams and part numbers for your appliance. For Kenmore appliances, visit Sears Parts Direct. <br><br>Should you not be able to sort it out on your own, or if you aren't sure what exactly is wrong with your appliance, feel free to send us a message through eBay.<br>Be sure to include your Model Number and Serial Number, along with a description of what is wrong with your appliance.<br>We will try to help you diagnose the issue and get your appliance back up and running in a timely manner.</font><font size="3" color="black" face="arial,helvetica,sans-serif"><br></font><br><font size="3" color="black" face="arial,helvetica,sans-serif">
<h2><font color="black" face="arial,helvetica,sans-serif">Returns</font></h2><p>You may return any part for 30 days, however, you will be subjected to a 20% restocking fee.<br>The restocking fee helps cover the cost of the time and effort involved in reprocessing the item, and the original cost of shipping and supplies.<br></p><p>Please note that any electrical parts cannot be returned once they've been installed on the appliance.<br>This is a standard policy among appliance parts dealers.</p><p>If you wish to make a return, please use the return system provided under your purchase history on the eBay website.</p><p>Please contact us if your part arrived damaged or is non-functioning before attempting a return. We will figure something out.<br></p></font>
<h2><font color="black" face="arial,helvetica,sans-serif">About Us<br></font></h2>
<font size="3" color="black" face="arial,helvetica,sans-serif">We have been in the used appliance business for over 15 years, and are a proud member of the Better Business Bureau. <br>Please feel free to contact us with any questions.<br>www.LORAINFURNITURE.com<br><br> </font></td></tr></tbody></table>
</td></tr></tbody></table>
Thank you for any assistance that you can give.
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).