CSS+div webpage layout appeared, and great help to look under the code where the


I own the page code is as follows: the page layout confusion, trouble. Look, thank you

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
body{
margin:0px;
padding:0px;
background-color:#016aa9;

font-size:12px;
overflow:hidden;
text-align:center;
}

#container{
width:780px;
height:150px;
border:2px solid red;
}
#login{
Background-image:url (11- pages landscaping project -div and CSS case _2013716224752.jpg);
width:750px;
height:400px;
margin-top:80px;
}
#form{
margin-top:226px;
}
#input div{
margin-bottom:5px;
}
#input div input{
width:129px;
height:19px;
}
#btn{
margin-left:11px;
margin-top:6px;
}

#btn input{
margin-right:5px;
margin-left:5px;
color:#990000;
font:bold;
cursor:hand;
}
</style>

</head>


<body>
<div id="container">
<div id="login">
<div id="form">
<form action="">
<div id="input">
<div>The user: <input type="text" name="username" /></div>
<div>Cipher: <input type="password" name="password" /></div>
</div>
<div id="btn">
<input type="submit" value="Sign in" />
<input type="button" value="Registration"/>
</div>
</form>
</div>
</div>
</div>

</body>
</html>

Page display.:


But the reality is, my code is finished, use the browser to open, the following layout confusion is not centered, (but the code which has been written in text-align:center;), but also be rather baffling the appearance of a large space.
(Notable is, I adjust the browser mode to compatible mode, the page is displayed normal)

Started by Anthony at November 11, 2016 - 2:06 PM

Full compatibility mode, using margin:0 Auto Center;
Remember to write to standard document header

Posted by Walker at November 13, 2016 - 2:51 PM

Compatibility mode because you didn't write DOCTYPE, the browser does not recognize the can only run in compatibility mode.

Posted by Lucinda at November 17, 2016 - 3:03 PM

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
body{
margin:0px;
padding:0px;
background-color:#016aa9;

font-size:12px;
overflow:hidden;
text-align:center;
}

#container{
width:780px;
height:auto;
border:2px solid red;
margin:auto;
}
#login{
Background-image:url (11- pages landscaping project -div and CSS case _2013716224752.jpg);
width:750px;
height:400px;
margin-top:80px;
}
#form{
margin-top:226px;
}
#input div{
margin-bottom:5px;
}
#input div input{
width:129px;
height:19px;
}
#btn{
margin-left:11px;
margin-top:6px;
}

#btn input{
margin-right:5px;
margin-left:5px;
color:#990000;
font:bold;
cursor:hand;
}
</style>

</head>


<body>
<div id="container">
<div id="login">
   <div id="form">
   <form action="">
<div id="input">
<div>The user: <input type="text" name="username" /></div>
<div>Cipher: <input type="password" name="password" /></div>
</div>
<div id="btn">
<input type="submit" value="Sign in" />
<input type="button"  value="Registration"/>
</div>
</form>
  </div>   
</div>
</div>

</body>
</html>


Is that right?
Background file name remember into English and digital, don't use Chinese

Posted by Sheila at November 30, 2016 - 3:36 PM

There is no absolute and relative positioning it?

Posted by Vincent at December 06, 2016 - 4:33 PM

I think it is a background picture settings do not let it top center. Background-image:url (11- pages landscaping project -div and CSS case _2013716224752.jpg top center no-repeat);

Posted by Colbert at December 19, 2016 - 4:36 PM

I don't know. If you have a link might help you see
Now look at the pictures and CSS can't watch all

Posted by Mayme at December 25, 2016 - 5:08 PM

-- a large format because you have encircled the style outside of form wrote a top margin -- so will space of a movie, and then you can put the container DIV height to remove die all don't write, write a dead DIV wide and high to remove, as long as the background image DIV width and as the line, and then re layout

Posted by Arthur at January 09, 2017 - 5:36 PM

Your content to the left of the first set up a center{margin:0 auto;}
Div shoved down whether super width

Posted by Vanessa at January 09, 2017 - 6:39 PM

Do not bother to see so much code...

1, 1 buildings remind you to write a standard document header
<!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">

2, Add file header, just leave a mark, the delete.
-If normal, add the next marker
-If not normal, modification to the normal
-Repeat steps...

Posted by Lillian at January 12, 2017 - 5:52 PM