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.
Related
I would like to vertically align a text input field with the adjacent text, namely, with a heading that precedes it and a radio button that follows it (all styled with display: inline). Here is an image of what I would like to see:
Now, without a vertical-align property on the input field, I get the following:
I.e., the input field is lower than the adjacent text. Playing around with the possible values of vertical-align on the input field, I realized that vertical-align: super gives me what I want (i.e, what can be seen in the first image). But I do not understand why it gives me what I want. I would have expected that vertical-align: baseline or vertical-align: text-bottom would do what I need. So my question is this: Why does vertical-align: super produce the result that it does? Is it a coincidence that it gives me what I want (i.e., a workaround rather than the solution)? If so, what would be the proper solution?
Here is my HTML and CSS:
h1,
form,
div.search {
display: inline;
}
input#search_string {
vertical-align: super;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
The default setting for vertical-align is indeed "baseline", and it also works that way in your example. What you are forgetting is that the baseline alignment doesn't align the bottom borderline of the input box, but the baseline of the text that is inside that box. If you write something in there, you'll see it. (BTW, it's the same if you create a div with a border and text inside it.)
In the following snippet (which is almost identical to your code except that the alignment is not defined , i.e. default, i.e. "baseline") I added a value text to the input tag, so here you see the baseline alignment.
h1,
form,
div.search {
display: inline;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" value="here's some text" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
And I would say that YES, it's a coincidence that the super setting gives you something so close to the desired result that you see it as correct. super actually just means that the element is "raised" (sorry, i don't know the English word, but its like the number "2" in "three to the power of two").
I guess the safest way to achieve what you want would be to apply position: relative; to that input field, and a bottom setting to offset it from the default alignment. If you use the em unit in that (as I did below), it's relative to the font size, but to find an adequate value will still be a matter of trial and error:
h1,
form,
div.search {
display: inline;
}
#search_string {
position: relative;
bottom: 0.3em;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
I am a beginner in HTML I want to ask this question.
how can I move all the items in the center of the page?
see the picture below
You need use flexbox and wrap items inside block with fix size.
.parent {
display: flex;
flex-direction: column;
align-items: center;
}
.parent__inner {
width: 500px;
}
<div class="parent">
<div class="parent__inner">
<!-- child items -->
</div>
</div>
Just, make div contains your from and make it's style align: center; as example below :
<!DOCTYPE html>
<html>
<body>
<p>welcome</p>
<div style="text-align: center;">
<form>
<label for="x1">Input x1:</label>
<input type="text" id="x1" name="x1"><br>
<label for="x2">Input x2:</label>
<input type="text" id="x2" name="x2"><br>
<button type="button">Compute</button><br>
<button type="button">Clean</button><br>
<label for="Midpoint">Midpoint result:</label>
<input type="text" id="Midpoint" name="Midpoint" placeholder="Try again"><br>
</form>
</div>
</body>
</html>
You must use css styles or add attribute style="text-align: center" to form element.
In your HTML code, you can use the tag (however, you cannot use it in HTML 5, because it does not support it). So if you use HTML 4, you can use it.
In your CSS code, you can use "text-align: center;"(do not include the double quotes)
This is an easy one, just use the <center> tag : )
I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.
Here is the relevant coding.
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
Go Back
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
**********
</p>
<p>
<span style="color:#000000">By Email:</span>
****#****.ca
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
And here is the CSS.
.name {
display: inline;
}
The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.
The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline
.name, .name p {display: inline;}
See https://jsfiddle.net/t0z2p9bn/
It would be better to change your html such that the stars are not contained within a <p> tag
<div class ="name">
*****
Go Back
</div>
See https://jsfiddle.net/t0z2p9bn/1/
divs should not be used for inline elements. Did you mean to use a span?
There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:
<div class ="name">
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!
The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>
Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.
I have a horizontal menu and want to place a search form in line with it but it appears left aligned on a new line.. I am new to html so just learning the basics (working on my third site just really got the hang of CSS).
<div id="nav">
<span class="nav">
<span id="jqFade"><img src="images/skydevUpperNav.png"></span>
<span id="jqFade"><img src="images/goftbUpperNav.png"></span>
<span id="jqFade"><img src="images/genUpperNav.png"></span>
<span id="searchBox">
<form action="#" method="get">Search
<input type="text" name="searchGoogle" size="12" maxlength="45" />
</form>
</span>
</div>
Use display: inline-block;
Working fiddle:
http://jsfiddle.net/wN6Ae/1/
CSS:
searchBox{
display: inline-block;
margin-left: 10px;
}
Form elements are rendered as block by default, so you'll need to set the search box form to display: inline-block;. Wrapping block elements in spans is not an effective solution since it doesn't change the way the contained elements are rendered.
jsFiddle demo: http://jsfiddle.net/Bf46a/
you should use <ul> with <li> tags for navigation and float:left; the list elements span is not nice. set list-style-type: none; if u dont whant the list styles displayed. <img> should be closed too -> <img .... />