Problem: I am creating a testimonials page and one of the replies is by an admin, who have a red "ADMIN" tag where the normal stars would go. I have tested the waters by removing the ending p tag, putting quotes on both the red and color tags. Nothing seems to work.
Expected Result: Testimonial profile with a red ADMIN tag on the top right corner of the box
Code:
<div class="container">
<p test-align: right; color="red";>ADMIN<p>
<img src="pic-3.jpg" alt="Avatar" style="width:90px">
<p><span>Someone.</span> TRAVEL Travel CEO.</p>
<p>We are glad you enjoyed are service. We hope to see you again!</p>
</div>
You have to place inline styles inside the style attribute:
<p style="text-align: right; color:red;">
Also: don't use equal signs (=) to specify styles ;-)
It will work with just that!
Try playing around with the CSS using inspect element.
you must use style, and you should learn CSS again.
<p style='test-align:right;color:red';>ADMIN<p>
Related
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! 👍
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
So I'm having a sorta minor issue that is really bothering me. I'm trying to make a single line but the live site is separating the h3 and the sup onto two separate lines.
<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> <sup>
Forgot? I got you </sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>
The concept is to have the "Forgot? I got you" and the button be on the same line but spaced a little further from the word "Consent".
As you haven't really provided an exact example of what you want your result to look like, you might consider using the following mark-up :
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
What this does :
<h3> and other heading tags are block level elements, which means that they will take not be rendered inline by default. You can change this by indicating that you want to display them inline by using display:inline; or display:inline-block;
The <font> tag hasn't been used in ages, you are better off simply applying a style attribute to the most relavent tag to style your contents.
You were previously using all of these tags within a <p> tag, which can constitute invalid markup. They have each been broken out, if you need some type of container tag, you can use a <div>.
Replaced the superscript tag <sup> with a small tag <small> to keep everything on the same line. You could replace this if you preferred.
Previously, you were using target="_black", which undoubtedly you meant to be target="_blank" for your <a> tag.
Generally, you would want to avoid using an abundance of inline style tags in favor of using an actual CSS file along with class attributes.
Example
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
Your code needs a lot of work but really you could achieve this with simple CSS. As simple as it gets would be using a vertical-align on a <span> element, unfortunately vertical-align: middle; does NOT work directly on your <p> or <h3> tags. There are plenty of other ways to achieve this with separate <div>'s and all but here is the most basic.
HTML:
<span class="vAlign">
<h3 class="crimson flt-left vAlign">CONSENT</h3>
<p class="vAlign"><a href="http://www.exampledomain.com/example"
target="_black">Forgot? I got you</p>
</span>
And CSS
.flt-left{
float: left;
}
.crimson {
color: crimson;
}
.vAlign {
display:inline-block;
vertical-align: middle;
}
I have a <a> link with items inside. When I put a <p> tag around it, to simulate drupal's line break and paragraph filters that will be applied to my code automatically, The link becomes two links. One link is inside the <p> with no children the other is outside with one of the child elements. Why is this happening and how can I prevent it?
<div class="notDrupal srvTileGroup">
<p>
<a href="http://www.airforcemedicine.af.mil/" class="notDrupal srvTile shadow2 shadow6h">
<div class="notDrupal srvTileTxt bAirforce"><!-- <p class="notDrupal">AIR FORCE</p> --></div>
<img class="notDrupal srvTilePic" src="https://openclipart.org/image/2400px/svg_to_png/256723/BackgroundPattern126Colour.png" alt="air force"></img>
</a>
</p>
</div>
Codepen
The issue is not related with Drupal. You had placed a div element inside an anchor. Replace that div with span and you can see your code start working perfect.
For Info please see Fiddle
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.
A preview of the site is available here : http://dev.cuonic.com/cuonic.com/
I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)
All of then content within //*[#id="content"]/div[2] is floated to the left. Floating elements don't affect the height of their containing block-level elements. If you add this:
#contact-me { clear:both; }
to your CSS somewhere, the <span id="contact-me"> tag will reposition to where you actually want it. Your page still isn't long enough for the contact form to go all the way to the top (at least on my monitor), but it will still scroll to the end of the page.
Change this section of code:
</div>
<span class="anchor" id="contact-me"></span>
<h1>Contact Me</h1>
<div class="text">
To this:
</div>
<h1>Contact Me</h1>
<span class="anchor" id="contact-me"></span>
<div class="text">