Here is my code:
<p align="center">Do you want to play the game?</p><br>
<Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
<Input type = 'Submit' Name ='LogOut' value="No" align="center">
The buttons are not in the center. Do I have to use CSS for this? I read on the net to just use the simple align tag.
How should I go about aligning these buttons to the center?
Align is deprecated on HTML5, so considered use CSS3 instead. The align attributte is to center the content and not the element itself.
The input element is inline-block by default, so, to center you need to put them inside a div as here:
<div style="text-align:center;">
<input type="text" />
</div>
This is cause the inline-block elements share the same line with other elements and you need to center all elements that share the same line. The div element is a block element that display alone in one line.
So you have another option to center an input, and you can set to "display:block;" as here:
<input type="text" style="margin:0px auto; display:block;" />
See: http://jsfiddle.net/T4f3W/
You should be using CSS for such styling. Rid of the HTML align attributes, add a wrapper, and center the text. Also note that the <center> tag and certain uses of align=center are deprecated as of HTML5.
<div>
<p>Do you want to play the game?</p><br>
<input type="submit" name="StartQuiz" value="Yes">
<input type="submit" name="LogOut" value="No">
</div>
And for your CSS:
div
{
text-align: center;
}
<p align="center">Do you want to play the game?</p><br>
<div style="text-align: center">
<Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
<Input type = 'Submit' Name ='LogOut' value="No" align="center">
</div>
Define one div parent and give to text-align center in your css .
Hi Check to live demo http://jsfiddle.net/vdUEZ/
Remove p tag align center and give to one div
Updated Live demo http://jsfiddle.net/vdUEZ/1/
chuck the inputs inside a <center> tag. check out the live demo http://jsfiddle.net/xA2kS/
Your strategy should work if you move the <input> tags inside the the <p> tag and remove the deprecated align attributes in the <input> tags. Even if you were to use the align attribute in an <input> tag, the correct value would be "middle", not "center". Try this code:
<p align="center">Do you want to play the game?<br>
<Input type = 'Submit' Name ='StartQuiz' value="Yes">
<Input type = 'Submit' Name ='LogOut' value="No">
</p>
It's also possible (preferred, actually) to use CSS for centering.
Related
Trying with the below code but not getting exact output.
Can someone please help me here?
<head>
<title>question3</title>
</head>
<body>
<form>
name:<input type="text" name="hjcg"><p style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</p>
username::<input type="text" name="hjcg"><span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</body>
</html>
<p> tags are block level elements which makes them full width on a new line.
To make them appear on the same line as other elements, you can style them as inline or inline-block elements or use elements that are inline like <span>
To make elements appear on the next line you can use <div> tags which are block level elements by default (which you can change too using css)
<html>
<head>
<title>question3</title>
</head>
<body>
<form>
<div>
name:<input type="text" name="hjcg">
<span style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</div>
<div>
username:<input type="text" name="hjcg">
<span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</div>
</form>
</body>
</html>
Using Flex should fix your issue, but you should definitely consider using an external css file.
You can add it to your html page with:
<link href="your_style_file.css" rel="stylesheet">
then you could try:
form{
display: flex;
}
or even better, giving your form a class or an id like
<form id="my-form">
or
<form class="these-forms">
and then
#my-form{
display: flex;
}
or
.these-forms{
display: flex;
}
Please check FlexBoxFroggy if you want to learn Flex basics in minutes.
What you are doing actually with text-align is align text within its container.
What you want in aligning items inside the form. Displaying the form as Flex will help you do that.
I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:
<div className="terms-checkbox">
<input type="checkbox" required />
<p>I accept the Terms and Conditions</p>
</div>
And I'm setting display to be inline-block for terms-checkbox like so:
.terms-checkbox {
display: inline-block;
}
However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?
Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/
edit: fixed indentation.
You must set the terms-checkbox class to input or p tag. Not their parent.
Means your input and p tag must be inline-block
<p><input type="checkbox" required/>I accept the Terms and Conditions</p>
I have the following markup inside razor view, at the top navigation bar of my web site:-
<section id="login" class="navbar-search pull-right">
#if (Request.IsAuthenticated) { <span class="username customTopNavText " style=" display:block; ">
[ Logout ]
<i class="icon-user"></i> <strong > #User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1) </strong></span>
<div class="customTopNavText" id="currentdate"></div>
<div class="customTopNavText" id="currenttime" ></div>
<form class="customSearch"method="GET" action="#Url.Action("Search", "Home")">
<input name="exactmatch" type="hidden" value="true"> <b>Search by Tag </b> <input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/><input type="submit" value="Search" class="btn" />
</form>
<br/> Advance Search
}</section>
what i am trying to achieve is to have the "Advance Search link just below the search button, currently i am getting these output on IE:-
and on firefox:-
can anyone advice how i can force the advance search link to be just below the search button?
Thanks
One way would be to set margin-top to a sufficient height on Advance search. If it isn't "blocked" by the search input field, it will float to the right of the page, leaving you to just set the margin height.
In order to push Advance Search link just below the search button, inline style can be used like this i.e:
Advance Search
you can set the top and left according to the setting that fits to you. give multiple values to top and left and choose the best which fits to the area in which you wants.
Here,
position:relative // make position of your <a></a> absolute
top:30px; // place your <a></a> to 30px down from top of your parent div or element
left:200px; // place your <a></a> to a distance of 200px far from left border of your div or element
Hope this helps.
I would use a table inside the div/container to layout exactly where to put it. The container would hve the positioning applied to it and then the advanced search will always be in the same place as the search bar. all you would need to do is format the table and every browser you open, all the elements will be in the same place.
for example:
<form ...... >
<table>
<tr>
<td> Advance Search </td>
<td><b>Search by Tag </b></td>
<td><input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/></td>
<td><input type="submit" value="Search" class="btn" /></td>
</tr>
</table>
</form>
I have some images, with one of them being able to submit a hidden form.
My problem is that I need all the images to display inline with each other. The image with the form submit refuses to do this.
The code, basically, is this:
<img class="inline" src="image.png" />
<img class="inline" src="image2.png" />
<img class="inline" src="image3.png" />
<form action="/forms/important-form.php" method="POST">
<INPUT TYPE="hidden" NAME="infoForForm" VALUE="Information">
<INPUT TYPE="hidden" NAME="URL" VALUE="/employee-xyz76r3-headshot.png">
<INPUT TYPE="hidden" NAME="employeeTitle" VALUE="Salesperson" >
<input type="image" class="inline" src="email.png" alt="Submit Form" />
</form>
CSS like this:
.inline {
display: inline!important;
float: right;
}
Definitely not working though. The image that functions to submit the hidden form (the email icon) refuses to stay inline.
Thank you for all of your help! Any ideas/solutions are appreciated.
P.S. Just try to ignore that Chief Marketing Officer is misspelled haha.
The issue here is that a form element is a block element by default. To change this, making the images appear on the same line, only the following CSS rule is needed:
form { display: inline }
Well, you also need to change href attributes in img elements to src attributes, but without this fix, the first three images do not display at all.
You don’t need anything else, since img elements are inline by default.
You don’t need even that single CSS rule if you move the img elements inside the form element.
Wrap the images around a div floated right.
You have to float images too. And display: inline do nothing there, all floating elements are blocked.
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}