The layout of my form is three columns: the first the label, the second for the input, and the third for the units (cm, kg etc.). Everything has been given inside a table in the form. But the first column takes more more (horizontal) space than it should. It has no padding, margin nor border. Here's my code:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff">Weight Goal</div>
<div id="hsCalc" class="tabOff">How Sexy</div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff">Circ. Expect.</div>
<div id="apCalc" class="tabOff">Absolute Power</div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>
Can you please help me find out why?
BTW, I tried giving td {width: auto} but it only worsened the case.
UPDATE: It seems my question is not clear and concise enough. What I want is that td tags to take the width of whatever is inside them...
What you are asking for is not possible.
If your table is set to have a width:100% then the tds will widen-up to take up the space available so that the table is using its prescribed width.
What you might have to do is define which columns need to have a variable width and which ones will be static. (you cannot have it both ways)
Something along the lines of:
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
/* changed this to 'input' */
input{
width: 95%;
/* other properties */
}
I reduced your given code to a MCVE.
See running demo:
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 95%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
If you add border-collapse: collapse; to table, that helps a little bit...:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
border-collapse: collapse;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff">Weight Goal</div>
<div id="hsCalc" class="tabOff">How Sexy</div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff">Circ. Expect.</div>
<div id="apCalc" class="tabOff">Absolute Power</div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>
table{table-layout: fixed;}
td:first-of-type{width: your-width;}
Related
Please help me, i am having a tough time with a box shadow, i've been looking for some time now and didn't find a solution
https://jsfiddle.net/4xqavefz/ .input1 / .input2 / .input3
Above is the whole code, in css you are looking for the .input1 ,.input2, and .input3
I am trying to make the box shadow to be seen through the input like below image
image
You could keep the shadow as it is (it falls outside the element) and add in the rest of the coloring with a background-image which is a linear-gradient.
This snippet puts that background-image displaced by 12px (=14px minus a border width).
#font-face {
font-family: futuraptbook;
src: url(../fonts/futuraptbook.ttf);
}
#font-face {
font-family: futuraptdemi;
src: url(../fonts/futuraptbook.ttf);
}
body {
background: black;
}
.block {
display: block;
}
.center {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 185;
height: 161;
}
.p1 {
color: white;
font-size: 24px;
text-align: center;
width: 620px;
height: 63px;
line-height: 32px;
font-family: futuraptbook;
margin-bottom: 100px;
}
.th1 {
color: white;
font-size: 32px;
line-height: 43px;
font-family: futuraptdemi;
padding-bottom: 30px;
}
.age {
font-size: 15px;
text-align: left;
line-height: 20px;
font-family: futuraptdemi;
color: white;
letter-spacing: 1.5px;
}
td input[class^='input'],
td input[class^=" input"] {
width: 176px;
height: 60px;
border: 2px solid #FFFFFF;
background: rgba(0, 0, 0, 0);
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: 12px 12px;
background-repeat: no-repeat;
box-shadow: 14px 14px 0px 0px #54B3A1;
margin-right: 40px;
color: white;
font-size: 18px;
font-family: futuraptbook;
text-align: center;
}
td input[class^='input']:focus,
td input[class^=" input"] {
box-shadow: 0px 0px 0px 0px black;
width: 218px;
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
background-image: linear-gradient(transparent, transparent);
}
td input[class^='input']:valid,
td input[class^=" input"] {
box-shadow: 14px 14px 0px 0px #54B3A1;
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: 12px 12px;
background-repeat: no-repeat;
width: 218px;
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
}
.btn {
border-radius: 27px;
background: #D94016;
width: 300px;
height: 50px;
margin-top: 50px;
}
.ftr {
position: relative;
text-align: center;
width: 100%;
margin-top: 100px;
margin-bottom: 40px;
}
.under {
text-decoration: none;
position: relative;
}
.under:after {
position: absolute;
content: '';
height: 1px;
bottom: -4px;
width: 75%;
background: #54B3A1;
left: 0px;
}
.logo:hover {
cursor: pointer;
}
.cookiesdiv {
border: 1px solid white;
padding: 10px;
bottom: 0px;
width: 942px;
}
.pcook {
width: 95%;
font-size: 15px;
text-align: left;
color: white;
font-family: futuraptbook;
}
.ckbtn1 {
border-radius: 27px;
background: #54B3A1;
width: 72px;
height: 27px;
color: white;
font-family: futuraptdemi;
font-size: 13px;
}
.ckbtn2 {
border: 1px solid white;
border-radius: 27px;
background: black;
width: 134px;
height: 27px;
color: white;
font-family: futuraptdemi;
font-size: 13px;
}
<html>
<head>
<link rel="stylesheet" href="css/agev.css">
</head>
<body>
<img src="images/viennalogo.png" class="logo center block">
<div>
<p class="p1 center">Welcome! In order to continue your visit on Vienna distribution, you must be of legal drinking age.</p>
</div>
<table class="center">
<tr>
<th colspan="3" class="th1">WHEN WER<span class="under">E Y</span>OU BORN</th>
</tr>
<tr>
<td><label class="age" for="day">DAY (DD)</label></td>
<td><label class="age" for="month">MONTH (MM)</label></td>
<td><label class="age" for="year">YEAR (YYYY)</label></td>
</tr>
<tr>
<td><input type="text" class="input1" name="day" required></td>
<td><input type="text" class="input2" name="month" required></td>
<td><input type="text" class="input3" name="year" required></td>
</tr>
<tr>
<td colspan="3"><button class="btn center block">I AM OF LEGAL DRINKING AGE</button></td>
</tr>
</table>
<footer class="ftr">
<img src="images/facebooklogo.png">
<img src="images/instalogo.png">
<img src="images/twitterlogo.png">
</footer>
<div class="cookiesdiv center">
<table>
<tr>
<td>
<p class="pcook">We use cookies on our website to give you the most relevant experience. By clicking “Accept”, you consent to the use of ALL cookies. Alternatively, you may click “Cookie Settings” to provide a controlled consent.</p>
</td>
<td>
<button class="ckbtn1">ACCEPT</button>
</td>
<td>
<button class="ckbtn2">COOKIE SETTINGS</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Note - to prevent having to repeat the settings for each of the 3 inputs the snippet instead selects by the class beginning with 'input'. You will want to refine that if there is more structure added later to be sure of getting the right elements.
I noted that there was no validation in the sense of making sure that the numbers typed were both numbers and of the right length, but appreciate this is a different question.
The issue is that box-shadow wraps around an element, so you cant use box-shadow here instead you should use an absolute div like in the below example
<td>
<input type="text" class="input1" name="day" required>
<div style="
position: absolute;
width: 80%;
height: 100%;
background: #54b3a1;
top: 16px;
left: 16px;
z-index: 22;
">
</div>
</td>
working example https://jsfiddle.net/ahforcuw/1/
What I want is to make my page a little responsive for desktop browsers.
For example, when I decrease the width of the browser, the left and right portion of the page should be stacked over each other. Please check the code, you'll understand. The outerLeft and outerRight div are floated left and right respectively. When I decrease the width of browser, outerRight goes below outerLeft, which is good. But then the problem is with footer and copyright (last two divs at bottom) divs. These do not get displaced because of the outerRight div. I want them to be below outerRight. How can I do this?
HTML:
<body style="margin: 0px">
<div class="outer">
<div id="header"></div>
<div class="outerLeft">
<h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
<br />
<p>Instant Messaging web application</p>
</div>
<div class="outerRight">
<div class="loginform">
<form name="form2" method="post">
<table>
<tr>
<td><input type="text" name="uname" placeholder="Username" required/></td>
<td><input type="password" name="pass" placeholder="Password" required/></td>
<td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
</tr>
</table>
</form>
<p><?php echo $loginerror; ?></p>
</div>
<div class="signform">
<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" required /></td>
<td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
<input id="imgInput" type="file" name="image" required/></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
</tr>
<tr>
<td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
<div id="seepass"></div></td>
<td><input type="submit" id="button" name="submit" value="Sign Up"></td>
</tr>
</table>
</form>
<div id="userexist"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>
CSS:
html, body{
height: 100%;
background-color: aquamarine;
}
#header{
height: 20%;
}
.outer{
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
}
.outerLeft{
float: left;
width: 320px;
height: auto;
text-align: center;
margin-top: 145px;
padding-left: 50px;
}
.outerRight{
padding-left: 50px;
float: left;
width: auto;
height: auto;
}
.loginform{
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 20px 23px;
background-color: white;
color: red;
}
.loginform input{
width: 187px;
height: 21px;
padding-left: 5px;
}
#logbutton{
background-color: #00CC66;
color: white;
font-weight: bold;
width: 70px;
height: 28px;
cursor: pointer;
}
.signform{
margin-top: 20px;
margin-left: 0px;
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 10px 20px;
background-color: white;
}
.signform input{
width: 250px;
height: 24px;
font-size: 20px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
#button{
background-color: #0099FF;
color: white;
width: 188px !important;
height: 41px !important;
border-radius: 4px;
border: 0px solid grey;
display: block;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
box-shadow: inset 0px 0px 4px grey;
text-shadow: 1px 1px 2px black;
}
.propic{
height: 100px;
width: 100px;
margin: 0 auto;
border: 4px solid white;
box-shadow: 0px 0px 1px 1px grey;
border-radius: 2px;
background-color: grey;
}
#imgInput{
width: 187px !important;
height: 22px !important;
font-size: 14px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cccccc;
margin-left: 10px;
}
#imgid{
height: 100px;
width: 100px;
}
You need to give it a clear: both just this!
<div style="font-family: calibri;text-align: center;color: black;font-size: 16px;padding: 5px 0px 5px 0px;clear: both;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
jsFiddle
Note: I suggest you to do not use inline-css
Not sure what you want..
Since you have an element with height 94% - I'd say you always want to see that footer (being fixed on the bottom..) and generate the scroll just for that outer element.
If that's what you want, you can just include an overflow: auto in the .outer class.
.outer {
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
overflow: auto;
}
Take a look here..
https://jsfiddle.net/uvqk4eeL/1/
ok so im working on a website for a friend and she is wanting a login that when they login and if the information is correct it will redirect them to that page and only members could see that page. so far this is the what i have.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #0361A8; border- radius: 5px; box-shadow: 0px 0px 8px #0361A8; margin: 50px auto auto;">
<div style="background: #0361A8; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">Login to Members Section</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped="">
td { text-align:left; font-family: verdana,arial; color: #064073; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #0361A8; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #D41313; font-size: 1.00em; }
</style>
<form method="post" action="http://www.authpro.com/auth/deluxe/" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Login:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td> </tr>
<tr><td> </td><td><input type="submit" value="Login"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2">Lost your username or password? Find it here!</td></tr>
<tr><td colspan="2">Not member yet? Click here to register. </td></tr>
</table>
</form>
</div></div></div>
every thing is working like it should. The script that is run when you press the login but is what will redirect you
This is the code i have written in html/css in eclipse(kepler) by making the dynamic web application.The error i get is in line:
<style type="text/css" scoped>
error name-invalid location of tag.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">HEY REGISTER NOW!</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped>
td { text-align:left; font-family: verdana,arial; color: #000000; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #D4D4D4; float: right; margin-top: 10px; }
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #000000; font-size: 1.00em; }
</style>
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Username:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td></tr>
<tr><td> </td><td><input type="submit" value="Submit"></td></tr>
<tr><td colspan=2> </td></tr>
</table>
</form>
</div></div></div>
Please help me with an appropriate solution.
Use this format
<!DOCTYPE HTML>
<html>
<head>
<title>Sample Application</title>
<style type="text/css" scoped>
td {
text-align: left;
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
input {
border: 1px solid #CCCCCC;
border-radius: 5px;
color: #666666;
display: inline-block;
font-size: 1.00em;
padding: 5px;
width: 100%;
}
input[type="button"],input[type="reset"],input[type="submit"] {
height: auto;
width: auto;
cursor: pointer;
box-shadow: 0px 0px 5px #D4D4D4;
float: right;
margin-top: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.error {
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div
style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div
style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;">
<span
style="font-family: verdana, arial; color: #D4D4D4; font-size: 1.00em; font-weight: bold;">HEY
REGISTER NOW!</span>
</div>
<div style="background:; padding: 15px">
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login"> <input
type="hidden" name="hide" value="">
<table class='center'>
<tr>
<td>Username:</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit"></td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
You need to put the style tag within the head tags, not the body.
Also, this line:
<div style="background: ; padding: 15px">
Should be:
<div style="padding: 15px">
Or give it a background.
All your styles should go in a separate .css file, rather than inline/same file.
It looks fine here: JSFiddle
In:
HTML 4 and Earlier
XHTML 1.x
HTML 5
The <style> element can only appear in the <head>
In:
The WHATWG Living Standard for HTML
HTML 5.1
The <style> element can appear in the <body> as well, but only if it has a scoped attribute and (IIRC) one or two other conditions are met.
Whatever tool you are using to test your markup with, is testing it against one of the languages in the first group (where it is not allowed) and not in the second group (where it is).
Given browser support for it, I would advise against using the scoped attribute at the moment.
scoped isn't a widely supported attribute (believe it's oly natively available in Firefox at the moment), also you will need to specify the DOCTYPE as HTML5 for it to work. You have two choices, use a JavaScript library to get the tag working: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
Or use conventional styling with classes, id's and appropriate CSS selectors.
More info here: http://html5doctor.com/the-scoped-attribute/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I want my login form to be like Facebook's, but it's rendered too down, nearly going off the header. I want it in the middle like what Facebook has.
<!DOCTYPE html>
<html lang="en" id="morethan"><head>
<link rel="stylesheet" href="stylesheet/5uV6fe9qPff.css" type="text/css">
</head>
<body class="home">
<div id="wrapper">
<div class="loggedout_menubar_container">
<div class="cleaarrfix loggedout_menubar">
<a class="lfloat" href="/" title="Go to Morefun Home"><i class="morefun_logo img sp_6jxgq1 sx_df432d"><u>Morefun logo</u></i></a>
<div class="menu_login_container rfloat">
<form id="" action="" method="post" onsubmit="">
<input type="hidden" name="lsd" value="AVrMo5Pe" autocomplete="off">
<table cellspacing="0">
<tbody>
<tr>
<td class="html7magic"><label for="email">Email or Phone</label></td>
<td class="html7magic"><label for="pass">Password</label></td>
</tr>
<tr>
<td>
<input type="text" class="inputtext" name="email" id="email" value="" tabindex="1" placeholder="Email or Phone"></td>
<td><input type="password" class="inputtext" name="pass" id="pass" tabindex="2" placeholder="Password"></td>
<td><label class="uiButton uiButtonConfirm" id="loginbutton" for="u_0_4"><input value="Log in" tabindex="4" type="submit" id="u_0_4"></label></td>
</tr>
<tr>
<td class="login_form_label_field">
<div>
<div class="uiInputLabel clearfix">
<input id="persist_box" type="checkbox" name="persistent" value="1" tabindex="3" class="uiInputLabelCheckbox">
<label for="persist_box">Keep me logged in</label>
</div>
<input type="hidden" name="default_persistent" value="0">
</div>
</td>
</tr>
</tbody>
</table>
<input type="hidden" autocomplete="off" name="timezone" value="0" id="u_0_3">
<input type="hidden" name="lgnrnd" value="110619_A5vh">
<input type="hidden" id="lgnjs" name="lgnjs" value="1364148375"><input type="hidden" autocomplete="off" id="locale" name="locale" value="en_GB">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
here is the css code
body {
background: url("http://www.sayhellothere.com/images/bg-wrapper.jpg");
color: #c4d6e4;
line-height: 1;
margin: 0;
padding: 0;
text-align: left;
direction: ltr;
unicode-bidi: embed;
}
.loggedout_menubar_container {
background-color: rgba(0,0,0,0.1);
border: 1px solid #556166;
-webkit-box-shadow: 0,0,2px,0,#000;
box-shadow: 0,0,2px,0,#000;
background: url("http://www.sayhellothere.com/images/bg-home.jpg") repeat-x;
height: 82px;
min-width: 980px;
}
.loggedout_menubar {
margin: 0 auto;
padding-top: 13px;
width: 980px;
}
.lfloat {
float: left;
}
a {
color: #3b5998;
cursor: pointer;
text-decoration: none;
}
.loggedout_menubar .morefub_logo {
margin-top: 17px;
}
.sx_df432d {
width: 170px;
height: 36px;
background-position: 0 0;
}
.sp_6jxgq1 {
background-image:url('images/logo.png');
background-size: auto;
background-repeat: no-repeat;
display: inline-block;
height: 9px;
width: 9px;
}
i.img u {
position: absolute;
top: -9999999px;
}
.rfloat {
float: right;
}
form {
margin: 0;
padding: 0;
}
table {
word-wrap: normal;
}
.menu_login_container table tr td {
padding: 0 0 0 14px;
}
td, td.label {
text-align: left;
}
.menu_login_container .html7magic label {
color: #9fafb8;
font-size: 14px;
display: block;
margin: 0 0 6px;
font-weight: bold;
text-shadow: 0px -1px #000;
padding-left: 1px;
}
.menu_login_container .inputtext, .menu_login_container .inputpassword {
width: 138px;
padding: 7px 5px;
background: url("http://www.sayhellothere.com/images/bg-login.png") no-repeat 0 -95px;
overflow: hidden;
margin: 0;
}
.inputtext, .inputpassword {
float: left;
margin: 0;
padding: 0;
width: 138px;
border: 0;
background: none;
color: #fff;
font-size: 14px;
line-height: 17px;
outline: none!important;
}
.uiButtonText, .uiButton input {
float:right;
padding:1px 0 2px;
margin:0;
width:71px;
height:30px;
cursor: pointer;
font-size: 14px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #eaeaea;
background-image: -webkit-linear-gradient(top,#eaeaea,#a8a8a8);
display: inline-block;
font-family: helvetica,arial,sans-serif;
font-weight: bold;
color: #515151;
border: 1px solid #333;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.uiInputLabel label {
display: inline;
font-size: 12px;
font-weight: normal;
vertical-align: -1px;
color: #9fafb8;
margin: 0 0 6px;
text-shadow: 0px -1px #000;
}
If I can understand what you are asking for, is how to make the bar that has the login form larger?
You need to update the height parameter in the .loggedout_menubar_container CSS declaration to being larger, so that the form fits in better.