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>
Related
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>
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 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
My class was asked to use HTML5, not CSS, to create this web page.
Question: I have two h2s, I read somewhere that this is legal and two sets of "unordered lists", but they are not lining up. I mean lining right under each other: example
Confusion
aaa
bbb
ccc
Calm
abc
bca
bac
They are lining up cantilever (?). The Calm header & its lists are more to the right. I've researched several sites and have not come up with why this is happening. I appreciate your help and insight.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Serenity</title>
<style type="text/css">
body
{
background-image:url("images/bg-ocean-body.jpg");
background-repeat:no-repeat;
background-size: cover;
}
</style>
<h1 span style="text-align:center; color:green;">Achieving Calm Amid<span style="color:black"> Confusion</h1>
<h2>Confusion</h2>
<ul>
<li>Government Shutdown</li>
<li>"do nothing" congress</li>
<li>bridgegate, sandygate</li>
<li>Putin, Sochi</li>
<h2 span style="color: green; text-align:left;">Calm</h2>
<ul>
<li>wipe away stress</li>
<li>gain mental/emotional balance</li>
<li>anxiety decreases</li>
<li>develop perspective</li>
</ul>
</head>
</html>
You are adding <span> tags in the wrong place. <span> is a separate tag, not an attribute of <h2>.
You are nearly using <span> correctly around confusion, for example, but you are not closing it with </span>.
I believe you're looking to do something like:
<h1><span style="text-align:center; color:green;">Achieving Calm Amid</span><span style="color:black"> Confusion</span></h1>
Also, you need to close your first <ul> tag with </ul>.
When the css is embedded in the head section it works fine, but when it is in a different file, it just doesn't modify my html file. This is very frustrating. Any help please
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> The Treasure Island </title>
<link rel="stylesheet" href="/~hsono1/css/paged_media.css" />
</head>
<body>
<header>
<img src="island3.gif" alt="Island" width="500"/>
<h1>The Treasure Island</h1>
<h2>By Robert Louis Stevenson</h2>
<hr>
</header>
<div>
<h2>Table of Contents</h2>
<ul>
<ol>Chapter 1</ol>
<ol>Chapter 2</ol>
<ol>Chapter 3</ol>
<ol>Chapter 4</ol>
<ol>Chapter 5</ol>
<ol>Chapter 6</ol>
<ol>Chapter 7</ol>
<ol>Chapter 8</ol>
<ol>Chapter 9</ol>
<ol>Chapter 10</ol>
</ul>
<hr>
<h2>Chapter 3</h2>
<h3>The Black Spot</h3>
<p>ABOUT noon I stopped at the captain’s door with some cooling drinks and medicines. He was lying very much as we had left him, only a little higher, and
he seemed both weak and excited. “Jim,” he said, “you’re the only one here that’s worth anything, and you know I’ve been always good to you. Never a month
but I’ve given you a silver fourpenny for yourself. And now you see, mate, I’m pretty low, and deserted by all; and Jim, you’ll bring me one noggin of rum,
now, won’t you, matey?” “The doctor—” I began. But he broke in cursing the doctor, in a feeble voice but heartily. “Doctors is all swabs,” he said; “and
that doctor there, why, what do he know about seafaring men? I been in places hot as pitch, and mates dropping round with Yellow Jack, and the blessed land
a-heaving like the sea with earthquakes—what do the doctor know of lands like that?—and I lived on rum, I tell you. It’s been meat and drink, and man and
wife, to me; and if I’m not to have my rum now I’m a poor old hulk on a lee shore, my blood’ll be on you, Jim, and that doctor swab”; and he ran on again
for a while with curses. “Look, Jim, how my fingers fidges,” he continued in the pleading tone. “I can’t keep ‘em still, not I. I haven’t had a drop this
blessed day. That doctor’s a fool, I tell you. If I don’t have a drain o’ rum, Jim, I’ll have the horrors; I seen some on ‘em already. I seen old Flint in
the corner there, behind you; as plain as print, I seen him; and if I get the horrors, I’m a man that has lived rough, and I’ll raise Cain. Your doctor
hisself said one glass wouldn’t hurt me. I’ll give you a golden guinea for a noggin, Jim.” He was growing more and more excited, and this alarmed me for
my father, who was very low that day and needed quiet; besides, I was reassured by the doctor’s words, now quoted to me, and rather offended by the offer
of a bribe. “I want none of your money,” said I, “but what you owe my father. I’ll get you one glass, and no more.” continued... </p>
<hr>
</div>
<footer>
<p>© 2013 Hans Sono</p>
<p>Validate this page</p>
</footer>
</body>
</html>
css file
html {
margin: 0;
font: 10pt/1.56 Gill Sans, Gill Sans MT, Verdana,"Lucida Grande", "Lucida Sans",Helvetica, Arial, sans-serif;
}
body {
background: red;
margin: 0 0 0 0;
margin: 0 0 0 20%;
width:700px;
}
p {
margin-left: 3em;
}
I have both files on the right locations .
This link is very suspicious.
/~hsono1/css/paged_media.css
My guess is you want
/hsono1/css/paged_media.css
(without the tilde).
The tilde (~) is used on some platforms to indicate the root of the virtual directory and is automatically resolved by the server. It has no meaning to the browser.
The way to check is to paste it directly into the brower's address bar right after the domain. For example, if your page is at
http://MyServer.com/hsono1/MyPage.html
then the paste in
http://MyServer.com/~hsono1/css/paged_media.css
or
http://MyServer.com/hsono1/css/paged_media.css
and see what you get back.