CSS Button styling - Need some help -html css RADIO BUTTON LINK - html

I need some help with this button styling ,
see link (clikc on edit code)
enter link description here
as you can see is the add to cart text out of line ... and does the 'imput' command fill up my button.
how can i center the text back into the button?
width: 100%;
}
please advice
thanks,

There are a lot of errors and bad tag formatting in your code. Tags should also not overlap (first open, last closed), like in the following part of your code:
</div>
</button></h2>
</div></div></body></form></button>
This not valid formatting.
Each tag has a specific use, for example:
<h2> tags are used to define second HTML headings of a page.
They should not contain anything else than the title of the section they define.
The closing body tag </body> can't be followed be any by anything except </html> tag.
You should probably rewrite the whole thing.

Related

HTML button only redirect when clicking the text inside

Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers

Im trying to change the html code of a website

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>

How do you write <p></p> and display it on your site?

How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
&ltp> &lt/p>
Check this snippet :
&ltp> &lt/p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>

HTML tags with spaces

so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/

My basic hyperlink tag isn't working

I have a simple website, as I'm a beginner programmer. I inserted a <p> tag, which worked all fine and dandy. There was two words in the paragraph which I wanted to link to a different page on my website, and it decided it didn't want to work. I don't know why it didn't work, because I have <div> tags in the same document to the same page that were working fine.
Edit: To define what wasn't working: It wasn't clickable. It changed color, like a normal hyperlink tag should, but was just a piece of text. You just couldn't click it. Even tags with an invalid or nonexistent href should be clickable. Right? Maybe I'm wrong, again, I am a beginner.
The other strange thing was that in my CSS file, I had the text-decoration set to none, so it shouldn't have changed color in the first place.
CSS:
a{
text-decoration:none;
}
This is the HTML that I had an issue with:
<p id="p1">Ingsoc is the Newspeak word for English Socialism. (For more on Newspeak, see the Ministry of Truth page.)</p>
And here's an example of a link with the same destination that worked just fine:
<a href="TruthPage.html">
<div id="minitrue">Ministry of Truth</div>
</a>
Instead of
<a href="DifferentPage.html">
try
<a href="http://www.yoursite.com/folderpath/DifferentPage.html">
where 'yoursite.com' and 'folderpath' are changed to match your situation.
The code looks ok to me. You could try...
<p />
<div>This is just basic text that was doing what it was supposed to. This was the text that I wanted to link to a different page.
</div>
if it's working within a div tag
Your problem is that your href="DifferentPage.html" is not vailid. My suggestion is to open that other page on your site, then copy the location in the address bar.