I found a solution to align the top of textarea with the top of its label.
My question is: the vertical-align property of <label> is still the default value(baseline), so why we can align them on top just by setting the vertical-align property of <textarea> to top?
Thank you very much!
<!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>Active learning: Implementing our form HTML</title>
<style>
form {
margin: 0 auto;
width: 500px;
padding: 1em;
border: 1px solid #ccc;
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li+li {
margin-top: 1em;
}
label {
width: 90px;
display: inline-block;
text-align: right;
}
input,
textarea {
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #999;
outline: none;
}
input:focus,
textarea:focus {
border-color: #000;
}
img {
vertical-align: top;
width: 150px;
border: 1px solid blue;
}
textarea {
vertical-align: top;
}
</style>
</head>
<body>
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</li>
<li>
<label for="mail">E-mail:</label>
<input type="email" name="user_email" id="mail">
</li>
<li>
<label for="msg">Message:</label>
<textarea name="user_message" id="msg"></textarea>
</li>
<li class="button">
<button type="submit">Send your message</button>
</li>
</ul>
</form>
</body>
</html>
My question is: the vertical-align property of is still the default value(baseline), so why we can align them on top just by setting the vertical-align property of to top?
They are still aligned at the baseline but the visual result is the top.
By adding vertical-align:top to <textarea> this one is no more considered in the baseline alignment so only the label is concerned and since its the only element then it will set the baseline and will logically touch the top.
Here is an illustration to better understand:
div {
border:1px solid red;
margin:4px
}
The label is alone aligned at the baseline
<div>
<label for="msg">Message:</label>
</div>
The baseline and top are the same
<div>
<label for="msg" style="vertical-align:top">Message:</label>
</div>
Adding the textarea with vertical-align:top will not change the baseline. It will simply add the textarea at the top and expand the height
<div>
<label for="msg">Message:</label>
<textarea name="user_message" style="vertical-align:top"></textarea>
</div>
add another element aligned at the baseline and the label will get affected. The textarea is still at the top unaffected by the baseline
<div>
<label for="msg">Message:</label>
<span style="font-size:40px">AA</span>
<textarea name="user_message" style="vertical-align:top"></textarea>
</div>
the default value for label, vertical-align is still baseline, so you need only to add this to your code:
label {
width: 90px;
display: inline-block;
text-align: right;
vertical-align: top;
}
If you wanna know more about it, you can find more information there: w3schools.com/cssref/pr_pos_vertical-align.asp
Related
I have written a simple form to test out the width in CSS. Regardless of the value I put for width, the borders still have the same width. Can somebody please help what am I missing?
<html lang="en-US">
<meta charset="UTF-8">
<head>
<style type="text/css">
label {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
}
</style>
<title>Trying CSS </title>
</head>
<body>
<form action="#">
<fieldset >
<label> Name </label>
<input type="text"/>
<label >Contact</label>
<input type="text" />
<label >Phone</label>
<input type="text" />
<button type="button">Submit </button>
</fieldset>
</form>
</body>
</html>
Use this css
label {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
float:left;
}
input{float:left;}
<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
label {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
float:left;
}
input{float:left;}
</style>
<title>Trying CSS </title>
</head>
<body>
<form action="#">
<fieldset >
<label> Name </label>
<input type="text"/>
<label >Contact</label>
<input type="text" />
<label >Phone</label>
<input type="text" />
<button type="button">Submit </button>
</fieldset>
</form>
</body>
</html>
Basically label is a tag. So what you should try is put a class inside the label tag and then write css for that . and for width try--
width=100%
Use Padding instead of width
label {
padding: 0 55px;
border-color: brown;
border-width: .5em;
border-style: double;
margin-right: .5em;
}
<div class="labelborder">
<label>sample text</label>
</div>
.labelborder {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
}
If label width accessing according to font-size only,if you want to increase without increasing font size,use above code like that,
just add one more style to label as per your requirement
display: "inline-block"
or
display: "block"
Simply add display:inline-block to the label to give width
I am pretty new to CSS display, currently I want to center align some text and icon(vertically), but it just not works:
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I thought a line 100% line height can control the text and inline-block elements vertically align center, but if you pay a specify attention to those icon, they are a little above the center.
"Why inline-block can not be vertically aligned?"
The point of in-line is to have elements be propagated to the screen from left-to-right; so, horizontally.
If you want it vertically, don't use elements styled with in-line because the elements naturally propagate from top to bottom; so, vertically.
vertical-align:middle seems to be what you are after but you need to apply it to the pseudo-elements too.
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width: auto;
height: 30px;
background-color: lightblue;
float: right;
line-height: 30px;
}
.menuitem,
.menuitem::before {
display: inline-block;
vertical-align: middle;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I've got a page that has a background color for the main container, but for some reason, the color ends just below the header div. The page and the CSS validate in the w3 validators, though, and I have no idea why and I've tried several different fixes.
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT -- Raw html source straight from view source in my browser
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? Register here!
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
You are floating #contentwrapper which takes it out of the document flow so #maincontainer no longer contains it.
To contain it, you need to give #maincontainer an overflow attribute (auto should work).
FYI, adding borders to your elements are a good way to debug things like this.
If I understand correctly, this is a well addressed question. See CSS 100% height in ie or http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.
This is a follow up to this question. I've tried to come up with a solution that allowed me to have in-line labels in a multi-column form, by reading some of the answers provided in the question mentioned above I realized that it was much more simpler than I originally had though, this is my prototype:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
In theory this seems to work, but in practice all I get is this very weird result (in FF 3.5.6):
If I drop the p tags around the labels and input the result changes a bit:
What's wrong? Is there any hack I'm supposed to make use of?
How can I place the labels / inputs inside the box like they are supposed to?
I appreciate all input, thanks.
Try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
BTW, Check this out: How to create perfect form Markup and style it with CSS
Here's one. The main thing is the clear:both; div at the bottom, but there are a few more things changed too.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<label>Name:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div class="_20">
<label>Email:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
first of all you need to reset the padding and margins on the <p> elements
p,label{
padding:0;
margin:0
}
secondly, you are floating elements inside a block element without clearing them later... hence the overflow issue... here is a working version of the code http://jsbin.com/eheva3
Note: I have used the clearit method which requires extra markup
You can use either that or the "clearfix" method... google for "clearfix" to find out more
You should start with the simplest possible implementation that works and build whatever fancy styling you want up from there. Getting rid of all the extraneous tags, all you really need is:
<div class="box">
<div class="content">
<label>Name:</label>
<input type="text" />
</div>
</div>
You don't need to add more divs and paragraphs to get it to snap to a grid, just style the elements that are already there.