I'm not good in css and not able to quick fix this issue.
I have the following html, css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>temp</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="Subhranath Chunder">
<!-- Date: 2011-08-19 -->
<style type="text/css">
div {
width:400px;
}
p, input {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
</style>
</head>
<body>
<div>
<p><input type="text" value="Name" name="name" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><input type="text" value="Email" name="email" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><textarea name="address" />Address</textarea></p><ul class="error-list"><li>Error 1</li></ul>
</div>
</body>
</html>
The first two error messages corresponding to the first two input elements is getting vertically centered. But, for the textarea element, the error message is vertically at the bottom.
If I change the last element to input type element, then it gets vertically centered. But, I need the last element to be of textarea type.
Can anyone fix the css, and give an explanation of why it's behaving as such.
Try this.
<style type="text/css">
div {
width:400px;
}
p, input, textarea {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
textarea {
vertical-align:middle;
}
</style>
As for why this happens: input and textarea are different elements, and they behave in different ways. Possibly because input only takes one line of text, and the error message is by default aligned to the bottom line of text, for inputs it looks as you want it to. But textarea takes many lines of text, so the error message aligns to the bottom of the element, rather than the bottom of the text in the element.
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 trying to set the properties in the text area using class text area.form-control but its is useless.My defined properties of textarea in formarea.form-control is not changing my text in the text area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background-color: aquamarine;
width:100%;
height:auto;
}
input[type="text"],textarea,textarea.form-control{
background-color:#efeeef;
width:396px;
height:48px;
border-radius:4px;
}
textarea.form-control{
line-height:50%;
font-size:16px;
color:red;
font-weight:500;
}
</style>
</head>
<body>
<div class="container">
<p>cxfdsgfdagfa
dsvkbdslkD
DSNBXCZBV<br>
SDAKFDSBVLSDF
<br>
dskfdskafbvsakdh
cxfdsgfdagfa
dsvkbdslkD
DSNBXCZBV<br>
SDAKFDSBVLSDF
<br>
dskfdskafbvsakdh
cxfdsgfdagfa
dsvkbdslkD
DSNBXCZBV<br>
SDAKFDSBVLSDF
<br>
dskfdskafbvsakdh </p>
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email" >
</fieldset>
</form>
</div>
</body>
</html>
Please tell me how can I change my activate font properties in textarea and I want to outline outside gray border of 3px in light gray gradient color. Please tell me how can I fix these issues?
foo is a type selector
.foo is a class selector
Your element:
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email" >
Is a member of the class textarea so .textarea would select it, but it is not of the type <textarea>, it is an <input> so textarea will not select it (but input will).
Note that giving class names the same names as standard HTML element types is a good way to create this type of confusion so is best avoided.
Your problem is that you are selecting a class that you dont assign to any component You should use
.form-control{
line-height:50%;
font-size:16px;
color:red;
font-weight:500;
}
instead of
textarea.form-control{
line-height:50%;
font-size:16px;
color:red;
font-weight:500;
}
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
I have this HTML code, and I just want to place the images directly on top of each other. (so without this green line in between them)
How to do this?
Example URL: http://todolist.x10.mx/test.html
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body bgcolor="green">
<img src="f.jpg" width="200" height="80" alt="plaatje1" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
<img src="f.jpg" width="200" height="80" alt="plaatje2" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
</body>
</html>
Don't use <br /> instead add the following CSS:
img {
margin: 0;
display: block;
}
The gap belongs to the line height reserved character as the inline elements (the images in this case) are aligned vertically in their baseline by default.
You could align the inline elements vertically by vertical-align: middle; (or top/bottom) to remove the vertical gap between the lines.
You can refer my answer here for further info.
Also, you could simply remove the <br> between two lines and change the default display type of the images to block, as: display: block;.
If I want my textarea to be hidden, how do I do it?
Everyone is giving you answers, but not much on the reasons. Here you go: if you use the CSS rule visibility:hidden; the text area will be invisible, but it will still take up space. If you use the CSS rule display:none; the textarea will be hidden and it won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.
So you want something like this to be totally hidden:
<textarea cols="20" rows="20" style="display:none;">
Example
/* no styling should show up for either method */
textarea {
background: lightblue;
border: 1px solid blue;
font-weight: bold;
}
<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>
<hr />
<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>
<hr />
<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>
You have a few options, here are some examples:
Display:none
Visibility:hidden
Here is some example code for you to see for yourself
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Area Hidden</title>
<style type="text/css">
.hideButTakeUpSpace
{
visibility: hidden;
}
.hideDontTakeUpSpace
{
display:none;
}
</style>
</head>
<body>
<h1>Text area hidden examples</h1>
<h2>Hide but take up space (notice the gap below)</h2>
<textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>
<h2>Hide Don't take up space</h2>
<textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>
</body>
</html>
See this jsFiddle Example
Using css: display: none; (this will make the textarea disappear completely, the space it would normally take up will not be reserved)
Hidden with occupy the space on current webpage.
<textarea style="visibility:hidden"></textarea>
Disappear on current webpage with no other effect.
<textarea style="display:none" ></textarea>
<!DOCTYPE html>
<html>
<head>
<style>
textarea.none {
display: none;
}
textarea.hidden {
visibility: hidden
}
</style>
</head>
<body>
<textarea class="none">The display is none.</textarea>
<br>
<textarea class="hidden">visiblity is hidden</textarea>
<br>
<textarea >This is visible and you can see a space taken visiblity:hidden</textarea>
</body>
</html>
Using the CSS visibility property should do the trick.