I've got a button, two textboxes and some text. How to put all this elements into the center of page?
<body>
Hello world!
<p><input TYPE="text" name="textbox1"><p>
<p><input TYPE="text" name="textbox2"></p>
<p><input TYPE="button" VALUE="Enter" ONCLICK="HomeButton()"></p>
<script>
function HomeButton()
{
location.href="registration.html";
}
</script>
</body>
I would do something like this, or you can use external CSS Sheets :)
<!--In your <head> add this-->
<style type="text/css">
body{margin:0;padding:0}
#body{width:800px; margin:auto}
</style>
<!--And here is your body-->
<body>
<div id="body">
CONTENT HERE!
</div>
</body>
This will make a set width of 800px and then it will align it in the center of the page
try this:
<body>
<div style="margin:0 auto;text-align:center;">
Hello world!
<p><input TYPE="text" name="textbox1"><p>
<p><input TYPE="text" name="textbox2"></p>
<p><input TYPE="button" VALUE="Enter" ONCLICK="HomeButton()"></p>
<script>
function HomeButton()
{
location.href="registration.html";
}
</script>
</div>
</body>
Take a look at this. Her they explain a solution to your problem: http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
Put:
body {
text-align: center;
}
in your CSS. JSFiddle: http://jsfiddle.net/QXkCn/1/
you can put these controls into div or using <center> tag or <body align="center">
Use table or divs
try the below code
<body >
<table width="100%" border="0">
<tr>
<td height="200"> </td>
<td> </td>
</tr>
<tr>
<td width="400px"> </td>
<td> Hello world!
<p><input TYPE="text" name="textbox1"><p>
<p><input TYPE="text" name="textbox2"></p>
<p><input TYPE="button" VALUE="Enter" ONCLICK="HomeButton()"></p> </td>
</tr>
</table>
</body>
for this simply use <body align="center">
here how it look Fiddle
Although its not a good practice but this will work,
Related
I am trying to create a simple login page, but I keep stumbling upon a problem. An input I put in a form (which is in turn in a table) goes to the top left corner of the page. Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table class="center">
<tr>
<td>
<p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
</td>
</tr>
<tr>
<td>
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset"></td>
</form>
<input type="submit" name="submit">
<td>
</tr>
</table>
</body>
</html>
I also have a couple lines of css "code"
table.center {
margin-top: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
I don't quite get why the poor "submit" input won't stay in place.
Thanks in advance for your help.
Your nesting of the td around the form is wrong. the /td needs to come after the submit so that all of the form plus the submit are in the cell.
Here's the changed code:
<style>
table.center {
margin-top: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table class="center">
<tr>
<td>
<p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
</td>
</tr>
<tr>
<td>
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset">
</form>
<input type="submit" name="submit">
</td>
<td>
</tr>
</table>
</body>
</html>
Try putting the submit element inside form?
Otherwise you can just make a button. I might be wrong here tho but worth a try.
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset"></td>
<input type="submit" name="submit">
</form>
I am new to CSS and I am creating a welcome page with a login section at the navbar. I managed to create the entire page's div sections however I need help with css coding the navbar.
CSS of what I have right now:
div.col-4
{
width:41%;
float:left;
background: #ffffff;
height: 100%;
}
div.col-6
{
width:58%;
float:right;
background: #ffffff;
height: 100%;
}
#topbar-hello{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background-color:#0084fd;
}
HTML:
<body>
<div id="topbar-hello">
<!-- This is where I need to add the login section -->
</div>
<div class="col-4">
</div>
<div class="col-6">
</div>
</body>
This is what I have right now:
I need to add a login area (2 textboxes and spans as given below) to the navbar:
I am having difficulty understanding how to fit those two textboxes, 3 labels and checkbox to the navbar.
Can you point out the CSS code for the navbar to achieve the above login area?
Just write a code inside navbar's div. You can use table in that style of log-in form.
<div id="topbar-hello">
<table>
<tr>
<td>
Email
</td>
<td>
Password
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="password" />
</td>
<td>
<button>
Log In
</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" /> Remember me
</td>
<td>
Forgot Password
</td>
</tr>
</table>
<!-- This is where I need to add the login section -->
</div>
<div class="col-4">
</div>
<div class="col-6">
</div>
You can see it live here, jsFiddle.
You would need to increase the height of the nav bar. Then use HTML to add the login area.
It would look a bit like this:
<body>
<p>Email</p>
<p>Password</p>
<p>
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Log in</button>
</p>
</body>
You can then style it as you would like.
I have a simple problem. I have created an html file and when i try to embed the html file in my outlook to send it to my client. The elements are not visible. Why? What am i missing. Please guide. Below is my html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css"> body{background-color: #FFFFFF;font-family: arial;margin: 0;} </style>
<title>TEst</title>
</head>
<body>
<table height="100px;" width="72px;" border="1" align="center" cellpadding="0" cellspacing="0" style="font-family:Verdana, Geneva, sans-serif;">
<tr>
<section id="form">
<form id="gform" method="post" action="someAction">
<div id="left-col-forms" style="float: left; width: 330px; font-family: 'Open Sans', sans-serif;font-size:12px;">
<fieldset style="width:700px;">
<label for="name"><b>Name:</b> </label>
<input id="name" name="name" placeholder="Please Enter Your Name" style="width:400px;" />
</fieldset>
<fieldset style="width:700px;">
<label for="Phone"><b>Phone:</b> </label>
<input id="phone" name="phone" placeholder="" />
</fieldset>
<button style="float: left;">Submit</button>
</div>
</form>
</section>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Forms in emails are considered a security risk, they typically don't work and depending what email client you are using it may not show at all.
Campaign monitor has a good table you can refer to here:
https://www.campaignmonitor.com/dev-resources/will-it-work/forms/
A better solution would be to put the form in a webpage and send them a link to the webpage itself.
I have the child tags of a tag and made the background-color of the parent tag to blue. It change the background-color of the block, but I want it color to the entire width of the web page. Even the background-image of such a tag is not even displayed. Here is my code:
<html>
<head>
<title>Login</title>
<style>
#login
{
background-color:blue;
color:white;
overflow:hidden;
}
#registration
{
background-color:white;
overflow:hidden;
}
.logintable
{
color:white;
}
</style>
</head>
<body bgcolor="white">
<div>
<div id="login">
<div style="display: inline-block; white-space: nowrap;float:left">
<font face="Monotype Corsiva" color="white" size="5">Facebook</font>
</div>
<div style="display: inline-block; white-space: nowrap;float:right">
<table class="logintable" align="right">
<tr>
<td>email:</td>
<td><input type="text" name="email" id="email"></td>
<td>password:</td>
<td><input type="password" name="pswd" id="pswd"></td>
<td><input type="submit" value="Login" onClick="return validate()"></td>
</tr>
</table>
</div>
</div>
<div id="registration" style="background-image:registration.jpg">
<div id="empty" style="float:left">
<img src="registration.jpg" height="610">
</div>
<div id="registraionform" style="float:right">
<table align="right" height="630" cellspacing="10" cellpadding="3">
<tr>
<td><B><font size="6">Sign Up</font></B></h1>
<br><br><font size="3">Its free and always will be.</font>
</td>
</tr>
<tr>
<td>Firstname <input type="text" name="First"></td>
<td>Lastname <input type="text"name="Last"></td>
</tr>
<tr><td>Gender</td><td><input type="radio"name="gender">male
<input type="radio"name="gender">female</td>
</tr>
<tr><td>phone</td><td><input type="text"name="phone"></td></tr>
<tr><td>email</td><td><input type="text"name="user"</td></tr>
<tr><td>password</td><td><input type="text"name="pass"></td></tr>
<tr><td>Re-typepassword</td><td><input type="password"name="rpass"></td></tr>
<tr><td><input type="checkbox" name="check" id="check">I agree to the terms and conditions</td><td></td></tr>
<tr><td></td><td><input type="submit"value="Sign Up"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
Even the background-image is not loaded, I have used tag to display that pic beside sign up.
And this is the pic of the resultant page:
Setting body {margin: 0;} in the style section fixes the extra white space around the page.
My code is as follows
<div data-role="content" id="div1" align="top" style="padding:3 !important;" >
<table border="0" align="CENTER" cellspacing="0" width="100%" style="vertical- align: text-bottom;" >
<tr>
<td></td>
<td>
<div id="question1" class="question">
<input type="text" id="question" />
<Style>
#question{
font:5px;
font-family:verdana;
}
</style>
</div>
</td></tr><tr>
<td width="50"><img id="img2" width="40" height="36" style="float:right; margin-top: 0px;" ></td>
<td style="text-align:center;">
<div class="ui-grid-b" >
<div class="ui-block-a"><button id="button1" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-b"><button id="button2" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-c"><button id="button3" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
</div>
</td>
</tr>
</table>
</div>
In the block of code above, in the following line of code
<input type="text" id="question" />
when the value is populated through jQuery, all i'm doing is
$('.question').text(questionText);
and when I view this in my iPhone, the text goes to the next line when it's longer than the width. I thought textarea was the only HTML tag which has multiline. Not sure why the text here is going multi-line and how do I avoid it? I don't mind the text cutting off but I really don't want it to go multi line.
Try applying overflow: auto to the input field
<style type="text/css">
input[type=text] { overflow: auto; }
</style>
You might need to set the height of the input element, I'm not exactly sure what you're trying to achieve here. You could set overflow-x: auto if you only want it to scroll horizontally or overflow-y for vertical scrolling
So the way I fixed it for now is, I did the following
<div id="question1" class="question" style="height: 12px;">
<input type="text" id="question" />
<Style>
#question{
font:5px;
font-family:verdana;
}
</style>
</div>
I atleast got the multi-line to disappear but if there's a more elegant way (jQuery ellipsis seems nice but I didn't get it to work), please let me know.