Designing the facebook login page for practise using only html and css.But Here I'm facing some problem.Don't know what it is.Here I want to decrease the top margin of class "loginArea" but cant do it.So the facebook logo is okey but the login area is totally different from the genuine facebook page.
body {
margin: 0;
padding: 0;
font-family: arial;
}
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
margin: 40px 40px 0 200px;
}
.mainArea {
max-width: 1600px;
margin: auto;
}
header.mainHeader:after {
content: "";
display: block;
clear: both;
}
header.mainHeader {
background: #3a5797;
padding: 10px 0;
color: #fff;
}
.mainHeader .logoArea {
width: 50%;
float: left;
}
.mainHeader .loginArea {
float: right;
width: 50%;
}
.loginArea .userName,
.loginArea .password {
width: 40%;
float: left;
}
.loginArea input[type="text"],
.loginArea input[type="password"] {
width: 60%;
padding: 2px;
border-width: 1px;
border-color: #29487d;
margin-bottom: 5px;
}
.loginArea .submitButton {
width: 20%;
float: left;
}
.loginArea label {
font-size: 12px;
}
label[for="keepLogin"],
.loginArea a {
font-size: 12px;
color: #9CABC6;
}
#keepLogin {
margin: 0;
}
.submitButton input {
background: #3B5998;
color: #fff;
font-weight: bold;
margin-top: 20px;
border-width: 1px;
border-color: #29487d;
padding: 5px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Facebook- Log In or Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header class="mainHeader">
<div class="mainArea">
<div class="logoArea">
<img id="logo" src="media/6cVHHozUQSt.png" alt="" />
</div>
<div class="loginArea">
<form action="#">
<div class="userName">
<label for="user">Email or Phone </label> <br/>
<input type="text" id="user" /><br/>
<input type="checkbox" id="keepLogin" />
<label for="keepLogin"> Keep me Logged In</label>
</div>
<div class="password">
<label for="password">Password </label><br/>
<input type="password" id="password" /><br/>
Forgotten you password?
</div>
<div class="submitButton">
<input type="submit" value="Log In" />
</div>
</form>
</div>
</div>
</header>
</body>
</html>
Remove the width or margin from .mainHeader .logoArea (or reduce it), so it does not block too much room.
Always be aware that the space an element actually uses is height/width + padding + margin + border, so in your case, the actual width the element takes is 50% plus 240px for the margins.
In .loginArea class reduce top margin to 0 like this. Hope this helps you.
margin: 0 40px 0 200px;
your problem is the margin for .logoArea so you could set box-sizing to border-box and instead of margin use padding.
The default value for box-sizing is content-box:
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px;} THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} a box of width: 370px.
So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).
so two ways of solving your issue:
1. remove the margin
2. set box-sizing to border-box + exchange margin with padding
pls check the box model and box-sizing for further infos :)
https://www.w3schools.com/css/css_boxmodel.asp
https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
first of all at top place,
*{
box-sizing: border-box;
}
then change the margin in .logoArea to padding.
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
padding: 10px 40px 0 45px;
}
Related
I create a webpage like following
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
border: 0;
padding: 0;
}
.wrapper {
padding: 50px 50px;
}
.inp {
display: block;
padding: 6px 12px;
width: 100%;
height: 44px;
font-size: 14px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row">
<input type="text" class="inp" value="" />
</div>
</div>
</body>
</html>
And now, the input width is out of the row, please look at following image
I know the line padding: 6px 12px; cause this, and if I don't want to remove padding: 6px 12px; how can I fix this? Many thanks.
Use box-sizing:border-box in input:
.inp {
display: block;
padding: 6px 12px;
width: 100%;
height: 44px;
font-size: 14px;
background-color: #f00;
box-sizing: border-box;
}
Demo:
* {
margin: 0;
border: 0;
padding: 0;
}
.wrapper {
padding: 50px 50px;
}
.inp {
display: block;
padding: 6px 12px;
width: 100%;
height: 44px;
font-size: 14px;
background-color: #f00;
box-sizing: border-box;
}
<div class="wrapper">
<div class="row">
<input type="text" class="inp" value="" />
</div>
</div>
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Use box-sizing: border-box, because the padding is added on top of the 100% width, so you get 100% + 12px of horizontal dimension. See proof-of-concept below:
* {
margin: 0;
border: 0;
padding: 0;
}
.wrapper {
padding: 50px 50px;
}
.inp {
display: block;
padding: 6px 12px;
width: 100%;
height: 44px;
font-size: 14px;
background-color: #f00;
box-sizing: border-box;
}
<div class="wrapper">
<div class="row">
<input type="text" class="inp" value="" />
</div>
</div>
I'm having a trouble dealing with the padding inside a nested div.
The problem is that I have a banner on top (Small Bar) and another one below that with more content called the Banner. The banner's height is 150px, and I wish to make that entire space padded at the top and bottom for 10%. I also have a "center" div included in the "bannerspace" div which centers all of the content into a straight line down the middle for organization.
However, whenever I apply padding-top: 10%, the padding is applied to the entire body element, making the padding much larger than I expected.
I have spent a few hours looking for solutions and even asked my web-dev friend, and I could not get a working answer. I've found that this may be an expected behavior for vertical padding, but I'm not sure if any of you have solutions.
I have tried changing the positioning of most elements as well as the box-sizing method, neither of which have helped. I also tried using a margin, but the same problem still applies.
Here is my HTML for the body (Head is irrelevant):
<body>
<div class="header">
<!--Header Bar (Top) - "Stats" on PD-->
<div class="center">
<div class="stat1">
Filler: <br>
Test
</div>
<div class="stat2">
Filler: <br>
Test
</div>
<div class="stat3">
Filler: <br>
Test
</div>
<div class="stat4">
Filler: <br>
Test
</div>
<div class="stat5">
Filler: <br>
Test
</div>
</div>
</div>
<div class="banner">
<!--Banner Bar (Middle) - "Banner" on PD-->
<div class="center">
<div class="bannerlogo">
Logo
</div>
<div class="bannerspace">
<div class="loginarea">
Filler
</div>
<div class="registerarea">
Filler
</div>
</div>
</div>
</div>
This will be the homepage!
<form name="input" action="LoginPage.html" method="get">
<input type="submit" value="Login">
</form>
<form name="input" action="AccountPage.html" method="get">
<input type="submit" value="Account">
</form>
<form name="input" action="OtherPage1.html" method="get">
<input type="submit" value="Other 1">
</form>
<form name="input" action="OtherPage2.html" method="get">
<input type="submit" value="Other 2">
</form>
<form name="input" action="OtherPage3.html" method="get">
<input type="submit" value="Other 3">
</form>
</body>
And my CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
font-family: "Roboto Normal 400", "Roboto", sans-serif;
font-size: 20px;
padding: 0px;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
text-align: center;
background: #DAFFDA;
padding: 0px;
text-align: center;
padding: 0px;
margin: 0px;
}
.center {
width: 90%;
height: 100%;
margin-left: 5%;
margin-right: 5%;
position: absolute;
}
.header {
height: 50px;
width: 100%;
border: 0px solid black;
background-color: #7C7C7C;
margin: 0px;
text-align: center;
border-bottom-width: 2px;
border-bottom-color: #3D3D3D;
position: relative;
}
.banner {
height: 150px;
width: 100%;
border: 0px solid black;
background-color: #6EFF81;
margin: 0px;
text-align: center;
border-bottom-width: 2px;
border-bottom-color: #3D3D3D;
position: relative;
}
.bannerlogo {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 2%;
margin-right: 2%;
height: 80%;
width: 36%;
text-align: center;
float: left;
display: table-cell;
line-height: 120px;
vertical-align: middle;
border-width: 1px;
border-color: black;
border-style: solid;
position: absolute;
}
.bannerspace {
height: 100%;
width: 60%;
float: right;
padding-top: 10%;
padding-top: 10%;
}
.loginarea{
height: 80%;
width: 50%;
float: left;
}
.registerarea {
height: 80%;
width: 50%;
float: left;
}
Sorry for the bother. If you could point me to any guides/tutorials that cover information then I would be grateful.
EDIT: Also, it is important to note that this behavior only occurs when I use percentage. When I use a pixel measurement (Up to 130px, since the font size is 20 px), the padding is added from the end of the "Banner" class div, which is correct.
Vertical padding or margin uses parent's width as référence when used width % value.
You may try using an extra element or pseudo element to fill the area where you want padding apllied, using height inheritance.
This would be with empty pseudo:
.banner {height:150px;}
.center, .bannerspace {height:100%;}
.bannerspace:before , .bannerspace:after {
content:'';
display:block;
height:10%;
}
Mind too the use of box-sizing.
I have a div floating to the left of two text input elements. When I set margin-top on the inputs, the margin of the floating div is affected as well. Why is this, and how the F can I stop it from happening?!
Relevant HTML:
<body>
<div class="manage-page">
<h2>Set Logo Order</h2>
<hr>
<div class="logo-container">
<div class="logo-draggable">
<div class="logo-image-box"></div>
<input type="text" />
<input type="text" />
</div>
</div>
</div>
</body>
Relevant CSS:
.manage-page {
margin-top: 2.5em;
margin-left: 25%;
margin-right: 25%;
min-width: 50%;
}
.logo-container {
border:1px solid #777777;
clear: left;
cursor: move;
height: 12.5%;
margin-bottom: 0.625em;
}
.logo-image-box {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
border:1px solid #000000;
float: left;
height: 100%;
margin: 0 .875em;
width: 12.5%;
}
.logo-draggable input {
border: 1px solid #cccccc;
border-radius: 0.25em;
display: block;
font-size: 0.875em;
height: 2em;
line-height: 1.25;
margin-top: .5em;
padding: 0.375em 0.75em;
outline: none;
}
You can see it in action at the jsfiddle URL below. Just change the margin-top of .logo-draggable input and watch as the .logo-image-box gets bumped up/down as well:
http://jsfiddle.net/Uj2K6/
I think you suffer from collapsing margins (scroll down).
Vertical margins on different elements that touch each other (thus
have no content, padding, or borders separating them) will collapse,
forming a single margin that is equal to the greater of the adjoining
margins.
I've inserted an <input type=text /> to the .searchbox div, but it's overflowing out of the body from the right because of the padding. How can I fix this?
.searchbox {
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 20px;
padding-right: 20px;
}
.inputb {
width: 100%;
}
#media (max-width: 490px) {
.searchbox {
padding-left: 5px;
padding-right: 5px;
}
}
HTML:
<div class="searchbox">
<input class="inputb" type="text" />
</div>
http://jsfiddle.net/brendan34/yLH7L/4/
Add box-sizing: border-box. It makes width be computed for the border-box, instead of the content-box. Fiddle. It's support is good enough, and forcing old browsers into quirks mode will make all elements render as border-box. (It's a good idea to give old browsers very minimal CSS, anyway. If you do that, quirks mode shouldn't break much)
.searchbox {
box-sizing: border-box;
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 20px;
padding-right: 20px;
}
you can use calc function in css. chek this http://jsfiddle.net/yLH7L/6/
Add box-sizing:border-box; to your code and ready only works in recent browsers is css3
.searchbox {
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 20px;
padding-right: 20px;
box-sizing:border-box; --- take look a this
}
if you need full cross browser solution take a look at CSS Div width percentage and padding without breaking layout
complete explanation of box-sizing http://css-tricks.com/box-sizing/
Try this. It uses percentage sizes.
.searchbox {
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 2%;
padding-right: 2%;
}
.inputb {
width: 98%;
}
#media (max-width: 490px) {
.searchbox {
padding-left: 1%;
padding-right: 1%;
}
}
Try this
.searchbox {
width: 96%;
height: 40px;
background-color:#0099FF;
padding: 0 2%;
}
.inputb {
width: 100%;
margin:0;
padding:0;
}
#media (max-width: 490px) {
.searchbox {
width:94%;
padding-left: 3%;
padding-right:3%;
}
}
Use a <div> with negative margins
For any child element, the maximum natural width cannot exceed that of the parent's content width — even if the parent has box-sizing: border-box defined.
On typical block-level elements and most elements defined with display: block, you can stretch the child by giving it negative margins equivalent to the padding of the parent container.
This only works if the element has no defined width or it has width: auto explicitly defined. Defining width: 100% is insufficient.
For some reason there is no way to accomplish this directly on an input even if you have defined display: block (this applies to textarea and possibly other form elements as well).
I suspect this is because width: auto defers to the element's default browser-defined width which is calculated uniquely for input elements.
You can, however nest the input within a container that has no padding of its own to which you've also applied the negative margins.
Consider the following examples:
* { box-sizing: border-box } /* FTW */
h2 {
margin: 0;
padding: 0;
line-height: 1;
}
.myuncoolparentdiv {
position: relative;
margin: 10px;
padding: 10px 20px;
background-color:#0099FF;
}
.mycoolparentdiv {
margin: 0 -20px;
}
.mybadinputtoo {
display: block;
width: 100%;
margin: 0 -20px;
}
.myreluctantinput {
display: block;
position: absolute;
width: 100%;
right: 0;
left: 0;
}
.mycoolinput {
width: 100%;
}
.mycooldiv {
margin: 0 -20px;
padding: 3px;
background-color: tomato;
border: 1px solid gold;
}
.mybaddiv {
width: 100%;
margin: 0 -20px;
padding: 3px;
background-color: tomato;
border: 1px solid gold;
}
<div class="myuncoolparentdiv">
<div class="mybaddiv">
My Bad Div has width: 100%;
</div>
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<div class="mycooldiv">
My Cool Div has no defined width (~ width: auto;)
</div>
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<input class="mybadinput" type="text" value="My Bad Input has width: auto;" />
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<input class="mybadinputtoo" type="text" value="My Bad Input has width: 100%;" />
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<input class="myreluctantinput" type="text" value="My Reluctant Input has position: absolute;" />
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<div class="mycoolparentdiv">
<input class="mycoolinput" type="text" value="My Cool Input has width: 100% and a cool parent div" />
</div>
<h2>Other Content</h2>
</div>
I am trying to stretch an input text field to the available width (minus margins). This does not work. Why?
<div style="background:yellow; padding:5px;">
<input id="test-input" type="text" />
</div>
<style type="text/css">
* { box-sizing: border-box; }
#test-input {
margin-left: 10px;
margin-right: 10px;
width: auto;
display: block;
border: 1px black solid;
}
</style>
You could use CSS3 calc() function to calculate the width excluding the left/right margins, as follows:
#test-input {
margin-left: 10px;
margin-right: 10px;
width: calc(100% - 20px); /* Exclude left/right margins */
display: block;
}
WORKING DEMO
Or use padding for the container instead of using margin for the input:
<div class="parent">
<input id="test-input" type="text" />
</div>
.parent {
padding: 5px 15px;
}
#test-input {
width: 100%;
display: block;
}
WORKING DEMO