I've been looking for this in google and it says that the css code is margin: 0 auto;. I tried it and it doesn't work for me. Please help. Thanks in advance.
login.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Log In</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="formLogin">
<table class="formTable">
<tr>
<td>Username: </td>
<td> <input type="text" id="loginusername" name="loginusername"/> </td>
</tr>
<tr>
<td>Password: </td>
<td> <input type="password" id="loginpassword" name="loginpassword"/> </td>
</tr>
</table>
<div align="center">
<input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
<input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
</div>
</div>
</body>
</html>
stylesheet.css
table.formTable {
margin-left: auto;
margin-right: auto;
}
table.formTable td {
padding: 8px;
}
#formLogin {
width: 360px;
background-color: #eeeeee;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
If you want to center it vertically also try reading this.
Update:
Try this code. Of course you can move CSS out to your css file. Tested in IE9 and FF6:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Log In</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
#wrapper{
background-color: #ccf;
position: relative;
text-align: left;
width: 100%;
height: 100%;
margin: 0px auto;
}
#content{
background-color: transparent;
position: absolute;
top: 40%;
left: 0px;
width: 100%;
margin-top: auto;
text-align: center;
min-width: 900px;
}
table.formTable {
margin-left: auto;
margin-right: auto;
}
table.formTable td {
padding: 8px;
}
#formLogin {
width: 360px;
background-color: #eeeeee;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="formLogin">
<table class="formTable">
<tr>
<td>Username: </td>
<td> <input type="text" id="loginusername" name="loginusername"/> </td>
</tr>
<tr>
<td>Password: </td>
<td> <input type="password" id="loginpassword" name="loginpassword"/> </td>
</tr>
</table>
<div align="center">
<input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
<input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
</div>
</div>
</div>
</div>
</body>
</html>
Like Hachi says try text-align:center; but you could also add this to your CSS:
body {
width:100%;
}
This will give your page a width, so your elements will have a width to use.
Update:
Didn't realise you wanted it vertically centered too. You could put the whole thing in a table cell and use valign="middle" to center it.
I think it's about DOCTYPE. Have try to put DOCTYPE
HTML 5
<!DOCTYPE HTML>
<html>
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
Related
so I started doing HTML email template with using the table form or the tr>td codes and stuff, my template mostly combine with small text and mostly graphic my main concern is that when I test my email template in my pc It jus work fine also. the images and graphic ay pretty responsive but when I test it on my mobile the image is not even loading even the place holders for it does bother to load I really confuse
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Accepted </title>
<head>
<style type="text/css">
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#200&display=swap');
.body{
margin: 0px;
background-color: #ffffff;
font-family:'Manrope', sans-serif;
}
.table{
border-spacing: 0;
}
.td{
padding: 0;
}
.img{
border: 0;
}
.wrapper{
width: 100%;
table-layout: fixed;
background-color: #ffffff;
padding-bottom: 40px;
}
.main{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family:'Manrope',sans-serif;
color: #FDB833;
}
.Logo{
padding: 10px;
text-align: left;
}
.content{
padding: 0px;
text-align: center;
line-height: 0;
}
.logo{
text-align: right;
}
#media screen and (max-width: 600px){
.content .img{
width: 600px!important;
max-width: 600px!important;
}
.Logo .img{
width: 400px!important;
max-width: 400px!important;
}
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width= 100%>
<!--header-->
<tr>
<td>
<table width="100%">
<tr>
<td class="Logo">
<img src="https://lh3.googleusercontent.com/dydWcJy6wrBvml0hAPEw12f9CiHgEEf9MN0vFDkrEPx7i0bzCpdq4_WqDhC9mGCeMv3CsWnq2BH1jgaDXsEhCd9DWaRMu1LBPJCCCWsnt9NrRyucZf5qeJz1wOMUsNjZ2rl4CITbE4GXf1_FudMM473BriHc_gILDFmQ4qdD0rUeJkfDVdXFns0bJUA0HqPFh9nyWoNbSe5g5SHTulxEYCemom23K-5_ld1zMvX_AkZwC-brRTN4gTAHk_eWAi6wbdXzVujAhc6_IrYByYd3HMqhD8WJBe8qi9FsR95AlX1ncMVvzXwEmd4Ozz_KvSxf2BXi8tWTZJc6pUEhkVTlCOHrqgiVP13HzYOEhUol1_3X3fJUD6IxTcKzI5kGBA4byp_47cQWqnSRVx_9t5QH3dVEzJjsorPEH19JhQ54NSdhoQg3KkHsJzS0lJTLIfDdP8EQv90kGWKh8Up7B4XLn0z0Hycp_WciuaEupO_ykCDFrPhRNk74vjWyo8mMhxzkQEvRf2Jvvmn8-yzp8B_AB9J4SmbnUXehwabt13SSgK8QN70cYzpjij3HX7ABng0kXiyVH_pGlcXruVNokaisVr4lpCHGUgsTuTLC83A9iEsoNPuViaYJPQm_Rs-tvYS2jJy-ejXCd8W5FynfxibIL9CXynSzqEWQKlGBtc2LHDfcHowtXMuEVddGUCJ9lg=w400-h113-no?authuser=0"
alt="" width="200px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=100% height= 20px style="background-color: #007F5F;"></td>
</tr>
<!--content-->
<tr>
<td class="content">
<img src="https://lh3.googleusercontent.com/mU8vN1xEsyHYAbV7IZZEbvpxRijXbTf7B2OlX_0kKDKTIWDeREXmRymFksPekBaVkX-fZ9MwYlGTH4roD9K0qzu8LHpyfOJwJ54fZO9m6O6Cl4jn1ErWRNqEcRMXNr3LescX20M-lTDsiiMrjik5fiPKoKPiy-WxsEDP3r3VtQllkE4ISTjwSrTSYbDBawi2Hx-2VAJSL34CZwDAeIICqcQSxJPD5JCE1FEejrGCdQPzrYr7tUpUyfygTn5_5SOoNHvCbnZW3GsnMzQ4nSqWyFTZF1qrmN1tlVlAbL6lVSsF_V9QY5xRqhaxjtyky6kBNxAXBjU6QX4WlpFD-8Dj2hMDM9X9ckzMuZWuju5C_bKni1bw1OpsYKyO0lyiNamABd5l8rrkRVFK7Z_5gz3KJJYsBqcSn97hmhxjkgQjt0HJwfEIbd_H5bKGcl3GikiCNOsNY5sb_L7c6mx65y_vlKln4DJ25jk927_t6VM0aCZUMah1KrbcQdqUvopeDD0vp008cnREa15_17waa3_hZD1yJwzmFEmtmOq_Z7UItGr5rWIvPCZfQFznX-k6znGJ7xr7i-MGZihGplciBV-5rn6ncMjXzEkd-JQvQbOcM8HbJFZOiLNDYaJPPJYWV4hgNJi9ueuCjPmoVXLsdS7PfqcxhT4Kqse6SviuXwktYziddS_quS_EjrJexDrImg=w495-h695-no?authuser=0"
alt="" width= auto style="max-width: 600px;">
</td>
</tr>
<!--footer-->
<tr>
<td class="footer" style="background-color: #007F5F; padding: 15px;">
<p style="text-align: left;font-size: 15px; font-weight: bold;">Courtesy:</p>
<p style="text-align: left;font-size: 10px;"> Approved by the St.Jerome School Administration and Club Committee<br>
Valid only for Academic year 2020-2021</p>
</td>
</tr>
</table>
</center>
</body>
this my code for it I also the check the sizing if that the case yet it seems it's not, I am really new in coding and this is not even my forte.
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 need to send mail with the image embedded as mail body. Below is the code
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="background: url(http://localhost/image/mvp-bg.jpg) no-repeat top left; width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;">
<div style="width: 700px; margin: 0 auto; padding-top: 80px;">
<p>Mail Body</p>
</div>
</div>
</body>
</html>
Could some one let me know how to fix this.
Thanks
For email templates better refer the images from server instead of localhost, You cannot expect the user will have the images loaded in their localhost :)
Change it to url(http://domain.com/image/mvp-bg.jpg)
Got the solution from html email with background-image style not shown . Also below is the code i modified so that css are rendered properly in mail. When using tags the css were not rendering, so instaed used table tags.
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:*
{
behavior: url(#default#VML);
display: inline-block;
}
</style>
</head>
<body>
<table style="background-image: url('image/mvp-bg.jpg'); background-repeat: no-repeat;width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;" >
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="http://www.domain.com/image/mvp-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody>
<tr>
<td>
<div style="width: 700px; margin: 0 auto; padding-top: 85px; font-family: Arial; font-size: 16px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="2" valign="top" style="padding: 10px; color: #ffffff;">
Mail Body
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}
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/