I have an image header used in an automatic reply Email system, How can I align my text to the image?
Here is how it looks like:
Source Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img alt="" src="myImage.png" /><br />
<p style="font-family: arial;">Dear [Test Text],<br />
<br /> Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation. <br /> While that day hasn't arrived yet, we are committed
to understanding our employees' perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.<br />
<br /> Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
<br />
</p>
</body>
</html>
You can put your <p> in a <div> and give it an inline style like this:
<div style="width:500px;">
<p style="font-family: arial;">
Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this
date in 1946, the country now known as the Hashemite Kingdom of Jord
</p>
</div>
Here is one approach:
To really answer your question thoroughly, I recommend learning about the CSS box model, in order to understand how all of the elements behave.
Here, I made a container div and set its width to 90% of the parent container. You can also set it to a fixed measurement, like 500px. Now, all of the divs that are inside it will stretch to fill it's width, by default.
Then, I put a div inside of that container div. It moves to the top of the container div and automatically matches the width of the container. It will not have any height automatically, so I set a random height (which you can adjust).
Then, instead of using an img tag, I made the banner image into a background image of this div. (I recommend looking up background-size property to learn how to size the background image).
Next, take out all of the <br> tags. They're not good practice for because they're hacky and don't give you good access to styling your content. Instead, put each paragraph in its own <p> tag.
To center the container div on the page, you can use the style "margin:auto." That makes the left and the right side have an equal margin. If you don't want it to be centered, take that out and put "float:left" in the style.
To see how all of the div tags are acting, put a "border:solid purple 2px" on them with different colors.
<div class="container" style="width:90%;margin:auto;">
<div alt="" style="background-image:url('https://png.pngtree.com/thumb_back/fh260/back_pic/00/02/44/5056179b42b174f.jpg');height:3rem;border:solid blue 1px;background-size:cover;">the image is the background of this div</div>
<p style="margin-bottom:1rem">Dear [Test Text],</p>
<p style="margin-bottom:1rem">
Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation.
</p>
<p style="margin-bottom:1rem">
While that day hasn't arrived yet, we are committed to understanding our employees' perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.
</p>
<p>
Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
</p>
</div>
Do you want the text to align next to the image? You can use float: left style to the image.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img alt="" src="https://picsum.photos/400/300" style="float: left" />
<p style="font-family: arial;">Dear [Test Text],<br />
<br /> Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation. <br /> While that day hasn't arrived yet, we are committed
to understanding our employees' perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.<br />
<br /> Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
<br />
</p>
</body>
</html>
Related
I am currently taking a coding course and I am learning how to code in Python (Python 3) and I am doing an assignment that involves making my own webpage. In the instructions of the assignment, it says I have to implement either a background color or a background image and I found some code that did exactly that but when I run it through the course's grader, it says I am missing that. I am currently coding on Repl.it. Can anyone help me figure out what I am doing wrong? Is there another way that I can implement a background color?
Here are the assignment instructions:
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>All About Sharks</title>
</head>
<body bgcolor="#86A2FF">
<h1 align = "center" style ="color:White;font-family:Times;font-size:50px">All About Sharks</h1>
Endangered Sharks Page
Send Mail Here
<hr>
<h2 style ="color:White;font-size:20px;font-family:Arial"> What Are Sharks?</h2>
<p style ="color:Black;font-family:Times"><b><i> Sharks are a type of long-bodied marine fish with a cartilaginous skeleton (skeleton made entirely of cartilage), a large dorsal fin, and toothlike scales (also called placoid). Most sharks are predatory, although the largest kinds feed on plankton, and some can grow to larger sizes.</b></i></p>
<img src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="250" height="200">
<img src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="250" height="200" class="center">
<hr>
<h3 style ="color:White;font-family:Arial;font-size:20px"> Where Are Sharks Found?</h3>
<p style ="color:Black;font-family:Times"><b><i>Sharks are found in all five of the Earth's oceans: the Atlantic, Pacific, Indian, Arctic, and Southern. Although they are commonly found in oceans, sharks can also be found in freshawater lakes and some rivers.</b></i></p>
<img src="https://images.freeimages.com/images/large-previews/749/flatnose-shark-1250133.jpg" width="250" height="200">
<img src="https://images.freeimages.com/images/large-previews/201/shark-1520496.jpg" width="250" height="200" class="center">
<hr>
<h4 style ="color:White;font-family:Arial;font-size:20px"> What Do Sharks Eat?</h4>
<p style ="color:Black;font-family:Times"><b><i>Sharks eat a wide variety of marine life ranging from smaller organisms like snails, sea urchins, crabs, and fish to larger organisms like stingrays, other sharks, seals, and birds.
<img src="https://images.freeimages.com/images/large-previews/cd1/blue-crab-1539361.jpg" width="250" height="200">
<img src="https://images.freeimages.com/images/large-previews/50f/stingray-1520490.jpg" width="250" height="200" class="center">
<hr>
<h5 style ="color:White;font-family:Arial;font-size:20px"> What Is The Purpose Of This Page?</h5>
<p style ="color:Black;font-family:Times"><b><i>The entire purpose of this page is to bring attention to educate about endangered marine animals, particularly sharks. According to IUCN analysts, among all 470 species of sharks, 2.4 percent are critically endangered, 3.2 percent are endangered, 10.3 percent are vulnerable, and 14.4 percent are near threatened. Sharks are considered apex predators (meaning that they sit at the very top of the food chain) and their lives are being threatened everyday by commercial shark finning (usually for medicine or shark fin soup), overfishing, fisheries bycatch, and habitat and prey loss.
<hr>
</body>
</html>
**The line that says
<body bgcolor="#86A2FF">
is my background color code.**
NOTE: My pictures may look a little weird under the header What Do Sharks Eat.
You can easily do this using CSS inline styles:
<body style="background-color: red">
...
</body>
The reason why your course grader doesn't think that this method is correct is probably because it's rather unconventional to use the bgcolor property.
I've searched online for the answer to this question and I know it is possible to do this, but I just can't figure it out with what's out there.
Background: I'm creating a frequently asked questions segment where one can click the question and be directed to the answer on the same page. I also have the questions split into categories.
Although I have been able to achieve this with basic href concepts, I would like for the answer to the question to be displayed on the middle of the page and not right below of the margin of the top of the page once the user clicks the questions that's anchored.
Hopefully, I was able to paint a somewhat picture of what I mean. Now, I will show you what I have in terms of syntax.
I definitely do believe there are multiple ways in which I could've created the code using style, class, or other attributes, but I don't hold a strong coding background :(. Therefore, I went with what I was able to pick up from W3School stuff XD.
If someone can help me out, I'd very much appreciate it since it'd make the FAQ section a lot cooler to use.
Here are images explaining the scenario a little better as well.
Question Section
Answer Section
<p>
<strong>Color Questions</strong>
<br/>
What is the door's color?
<br />
What is the window's color?
</p>
<p>
<strong>Shape Questions</strong>
<br/>
What is the shape of a ball?
<br/>
What is the shape of a box?
</p>
<h3>Answers</h3>
<p>
<strong>Color Questions</strong>
</p>
<p>
<strong>
<a id="A"></a>What is the door's color?
</strong>
<br />The door's color is blue.
</p>
<p>
<strong>
<a id="B"></a>What is the window's color?</strong>
<br />The windows's color is red.
</p>
<p>
<strong>
Shape Questions</strong>
</p>
<p>
<strong>
<a id="C"></a>What is the shape of a ball?
</strong>
<br />A ball has the shape of a sphere.
</p>
<p>
<strong>
<a id="D"></a>What is the shape of a box?
</strong>
<br />A box has the shape of a cube.
</p>
if you want to put your text in middle you can use <center>and put your text in this tag but it is obsolete right now,there are better methods to do this.you can use margin and paddingand set your text in great position also you can use position.check the w3schools.com for more details.its helpful.
I'm busy making my own website. I have the following as a homepage but I get the warning. Element 'title' occurs too few times. I would also like to know how you can do word rap, I want the text to fit neatly in the web browser window. It is not an error only a warning but I would like to know what it means.
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
</head>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORM</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<table style="height: 92px; float: left;" >
<tbody>
<tr>
<td>Form</td>
</tr>
<tr>
<td style="text-align: left;">Contact Details</td>
</tr>
<tr>
<td>About</td>
</tr>
<tr>
<td>Musical Hereos </td>
</tr>
</tbody>
</table>
<p> <span style="text-decoration: underline;"><strong>MY TEACHING PHILOSOPHY:</strong></span></p>
<p> I would like to take this opportunity to introduce myself and what I do for a</p>
<p> living. I'm a music teacher specializing in Music Theory education, I also teach</p>
<p> Guitar to a lesser extent.</p>
<p> </p>
<p>I have been teaching since 2014 and in these last couple of years, I have learned a few things.</p>
<p>There is no reason Innate to a child that decides music ability. No child or person is born with</p>
<p>some sort of gift where the other is not. Being 'Tone Deaf' is a myth, if a teacher tells a child he</p>
<p>cannot do music then it speaks more to the teacher's inability than the child's ability.</p>
<p> </p>
<p>Music, for the most part, is just another trade. If a child is taught well and puts in the hours he or</p>
<p>she can become proficient in his or her instrument. I don't believe in talent, I believe in hard work.</p>
<p> </p>
<p>When natural born 'talent' has little to do with music, what has a profound effect on the progress of</p>
<p>the musician is the attitude and the work ethic. Children who are motivated and especially those who</p>
<p>motivate themselves will succeed where those who are stubborn and lazy will not.</p>
<p> </p>
<p>I teach both Guitar and Music Theory, I can teach both the Rock and Classical styles. I also insist that </p>
<p>my students do Music Theory as part of their training as it is important for there continued development.</p>
<p>I was raised on the rock music of the early 2000's. The pop-punk genre was a big part of my childhood. </p>
<p>I eventually graduated from popular music and found the wonderful world of classical music. My love for </p>
<p>the guitar grew further as I fell in love with this fascinating part of the guitar world. I eventually </p>
<p>came to know the great Andres Segovia and what he meant for the development of </p>
<p>the guitar as instrument.</p>
<p> </p>
<p>The guitar to me is the most beautiful of instruments, in all of it's forms it fascinates me. The electric version just </p>
<p>as much as the acoustic version. With the electric version there is a power to move you that is simply tremendous.</p>
<p> </p>
<p>All music gets us to move, that is why music and dance have such a rich history together, but with the electric guitar,</p>
<p>it is even more the case. When you stand in the crowd in front of those wall of Marshalls and you can feel the speaker cabinets</p>
<p>literally move the air around you. You feel the air thumping against you chest it moves you on a primitive, visceral level. When</p>
<p>the gods decided to add electricity to the guitar, music was made anew.</p>
<p> </p>
<p>The acoustic guitar in both it's steel and nylon string variants fascinates me on another level. The acoustic guitar</p>
<p>to me has a purity of tone. It also has a richness in harmonics, that is why a guitar can sound wonderful even when only few </p>
<p>notes are played.
<p> </p>
<p>The acoustic guitar is the instrument set between a piano and a violin. With it's six strings </p>
<p>it can play chords in a manner resembling the piano somewhat, but when it comes to dynamical qualities it resembles the violin.</p>
<p>You can do vibrato just like a violin and you can even do bends which is unique to the guitar. All of this gives you </p>
<p>an instrument with some siilarities with others and still enough things particular to it, to make it unique.</p>
<p> </p>
</body>
</html>
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
</head>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORM</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" />
</head>
You should merge duplicated head section. The parser do not see <title> tag in the first one. Also notice <head> must be child of <html>.
for word wrap add in css
style="word-wrap: break-word;"
The text-align:center is not working. Please help me out. Why is it not working?
That's the HTML below:
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div style="display:inline-block;">
<h1 style="font-weight:bold; text-align:center; background-color:blue;">
Wheat
</h1>
</div>
<p>Wheat is a cereal grain...</p>
<p>This grain...</p>
</body>
</html>
Make use of center tag
Surround the div like this -
<center><div> ... </div></center>
It works, the color will stay behind the text only! Also it'd be centered!
Thanks.
Text align work fine, but display inline-block elements are like inline elements but they can have a width and a height.
If you don't assign width the div as wide as the text.
Simply remove inline-block, div element is already display block.
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div><h1 style="font-weight:bold; text-align:center; background-color:blue;">Wheat</h1></div>
<p>Wheat is a cereal grain, originally from the Levant region of the Near East but now cultivated worldwide. In 2013, world production of wheat was 713 million tons, making it the third most-produced cereal after maize (1,016 million tons) and rice (745 million tons). Wheat was the second most-produced cereal in 2009; world production in that year was 682 million tons, after maize, and with rice as a close third.</p>
<p>This grain is grown on more land area than any other commercial food. World trade in wheat is greater than for all other crops combined. Globally, wheat is the leading source of vegetable protein in human food, having a higher protein content than other major cereals, maize (corn) or rice. In terms of total production tonnages used for food, it is currently second to rice as the main human food crop and ahead of maize, after allowing for maize's more extensive use in animal feeds. The archaeological record suggests that this first occurred in the regions known as the Fertile Crescent.</p>
</body>
</html>
If possible don't use inlene CSS but in external file. For reference:
http://www.w3schools.com/css/css_howto.asp
You can Add width:100% to h1 style and can remove div..
<h1 style="font-weight:bold; text-align:center; background-color:blue; width:100%">Wheat</h1>
Here is JSFIDDLE
EDIT :
Do you want like this ? Just Check Updated JSFIDDLE
Thanks to everybody who has so far answered this question. #HMGtbOfficial's post proved most helpful among all others. As per his suggestion, I put the <div> in the center. Hopefully, this works! A big, fat thanks to him. Thanks for helping me out!
I rewrote the HTML code as such:
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div style="display:inline-block; text-align:center;">
<h1 style="font-weight:bold; background-color:blue;">
Wheat
</h1>
</div>
<p>Wheat is a cereal grain...</p>
<p>This grain...</p>
</body>
</html>
I searched this site for 2 days and applied probably every single example of code I found, but I can't simply move div to the bottom on my site. Here's the simpliefied 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" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
*{margin:0;padding:0}
body{font-family:Tahoma,Verdana,Arial,sans-serif;background-color:#000;border:none;margin:0 auto}
#site{background-color:#fff;width:980px;border:0;margin:0 auto}
#whitefill{background-color:#FFF;height:inherit}
#left{width:260px;font-size:12px;height:100%;float:left;background-color:#fff;}
#right{width:720px;float:right;height:100%;background-color:#fff;font-size:13px}
</style>
</head>
<body>
<div id="site"><div id="whitefill">
<div id="left">
<div>move me to bottom!</div>
</div>
<div id="right">
<div id="main">
<p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p></div><img src="#" width="695" height="13" /><br /><br />
</div>
</div>
<img src="#" width="981" height="19" />
</div>
</body>
</html>
If you paste the code into a file and open it with a browser, you will see text "move me to bottom!" displayed at the top. I need it to be displayed at the bottom of the left column. How can I do that?
Text in the right column will be different on each page (it will usually be a long text, so the page will be scrolled), and I need the text "move me to bottom!" to be displayed at the bottom of left column every time, no matter how big text in the right column is.
Thank you.
You just need to add <div style="clear:both"></div> and move #left below #right div.
<div id="right">
<div id="main">
<p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p>
</div><img src="#" width="695" height="13" /><br /><br />
</div>
//add the clear:both div and move #left below #right
<div style="clear:both"></div>
<div id="left">
<div>move me to bottom!</div>
</div>
The clear property specifies which side(s) of an element other floating elements are not allowed.
You can find more detail of it here http://www.w3schools.com/cssref/pr_class_clear.asp