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.
Related
I am trying to make a text collapsible when I press the word 'Abstract' in my webpage, https://rubencioak.github.io/research.html, I thought the following code was going to be enough:
<ol class="lead">
<li> <p> <b>Free-riding in Collective Agreements,a Search and Matching Model of Minimum Wages</b>
<br />
<span id="abstract-link" class="abstract-click">Abstract</span>
<p class="abstract-text" style="display:none; font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
</p> </li> </ol>
I am using a templeate from HTML5 and also looking at this webpage: https://messertodd.github.io/research.html. for reference.
Now, although I thought it was basically the same, something is obviously wrong with this code.
All in all, the question is: is there a simple way to make my text under the word abstrac collapsible?
Any help would be much appreciated.
KR
You can use <details> and <summary> tags:
<details>
<summary>Abstract</summary>
<p class="abstract-text" style="font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
</details>
Hi and thanks in advance for help. I'M A BEGINNER-PLEASE HELP ME AS SIMPLY AS POSSIBLE.
I have a column of data. In the middle is some stuff I want left indented about 15px, this is the paragraph. It won't indent. I have paragraphs above and below without div's that indent correctly. Only this one with the div and box doesn't indent on the left. What do i do?
THANKS:
1ST PARAGRAPH & 3RD PARAGRAPH ARE PERFECT, MIDDLE PARAGRAPH WON'T INDENT.
<p style="margin-left: 25px"><font size="+2">$83,000 SETTLEMENT<br> Our client was injured when she fell in a theatre that had installed a dangerous temporary lighting board system...</p>
<p><font color="#556B2F"><div style="width:600px;height:100px;border:4px solid #349554; background:Chartreuse"; "margin-left:15px;">YOU WILL GET ABOUT 3 ½ TIMES MORE MONEY BY HIRING AN ATTORNEY COMPARED TO SETTLING A CASE ON YOUR OWN.*</div></font></p>
<p style="margin-left: 25px"><font size="+2">$25,000 SETTLEMENT<br> Our client was burned on the leg at a spa when she was receiving a treatment...</p>
you just didn't define the margin left property in the style tag. this should be it.
<p>
<font color="#556B2F">
<div style="width:600px;height:100px;border:4px solid #349554; background:Chartreuse; margin-left:15px;" >YOU
WILL GET ABOUT 3 ½ TIMES MORE MONEY BY HIRING AN ATTORNEY COMPARED TO SETTLING A CASE ON YOUR OWN.*</div>
</font>
</p>
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>
On this website: https://www.arsenal.com/news/new-fa-youth-cup-kick-time
In the headline New FA Youth Cup Kick Off Time
If I inspect the element I note that they have contained all words in a <span> and added a <span class="spacer">.
<h1 class="article-card-header__title" title="New FA Youth Cup kick-off time">
<span class="article-card-header__title-words">
<span>New<span class="space"> </span></span>
<span>FA<span class="space"> </span></span
<span>Youth<span class="space"> </span></span>
<span>Cup<span class="space"> </span></span>
<span>kick-off<span class="space"> </span></span>
<span>time<span class="space"> </span></span>
</span>
</h1>
They also don't specifically select the spacer with any CSS that I can see. So I'm not sure why it requires a class.
I think this must be something to do with consistency of fonts or spacing. But I can't really think of a reason why.
Can anyone else think of a good reason as to why someone would do this?
Not sure if this is the only purpose, but my first thought would be possibly tighter control over line breaks.
You can see in another headline down the page, the classes have been updated to show row-1 and row-2. This particular example doesn't control wrapping any differently than a normal sentence would, but I could see reasons why you might want to force wrap (or no wrap) between different words.
Especially in content/editorial heavy sites, line breaks can be really nuanced and/or problematic.
I don't see any logic reasons to do this as no styles are applied to the span elements nor the span.spacer.
In fact you can remove the spans and paste directly the title text and it will look exactly the same.
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)