This is my html file
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
width: 1000px;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
My question is how can I align the box div align center(horizontally) responsively(dynamically) and how to make this webpage responsive when I checked this page's responsiveness it's not showing responsiveness.
Try this code:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
What I have done is that I have changed the
.box {
width: 1000px;
}
to
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
You can also use display: flexbox; and justify-content: center; in the div box to get almost the same result
Here is the code that I think will work if you want to use flexbox:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
display: flexbox;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
NOTE I have used max-widht: 1000px; in my first method, you can change that as per need.
Change this
.box{
max-width: 1000px;
width:100%;
margin:0 auto;
}
use this but the condition is your parent div has 100% width(window width).
or another way to use flex
form{
width: 200px;
margin: auto;
}
<body>
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here">
<button type="button">Search</button>
</form>
</div>
</body>
You can follow the below code. I try to give some explanation where I changed and why I did it
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 0px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
/*if you want to take result as a responsive then you need to add width as % not fixt size */
width: 100%;
text-align: center;
margin: 0 auto;
}
/*This div for form responsive */
.search-form{
width: 90%;
text-align: center;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 70%; /* I change here for px to % base one your requerment */
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
float: left; /* I change here for div assign as a left */
}
button {
position: relative;
border-radius: 0 25px 25px 0;
width: 30%; /* I change here for px to % base one your requerment */
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
float: left; /* I change here for div assign as a left */
}
<h1>This is my page title...</h1>
<div class="box">
<div class="search-form">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
</div>
display: block fix needs these two blocks to be inserted in the css
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
Working Fiddle
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
If you are good to go with flexbox implementation, you could wrap your .box in flex and have a justify-content: center; to have an horizontal alignment.
Add the below update in your css for flexbox
.box {
display: flex;
justify-content: center;
}
Working flexbox fiddle
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
display: flex;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
Please note I have made use of max-width: 1000px; for .box in both examples. This is to make sure that the ui wont fail in the SO fiddle. You can update that as your requirement.
Related
I am trying to move this form but it keeps 'hitting' the h3 tag and the button. I want to move them around without them interfering with one another.
I am talking about the gray panel:
Even when resizing the window, they interact and push one another.
I have tried using margin and padding, but that doesn't seem to work.
.section-3 {
position: relative;
background-color: white;
height: 600px;
top: 959px;
text-align: center;
}
.join-btn {
height: 45px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
padding: 9px 20px 7px;
color: #373f3d;
border: 2px solid rgba(55, 63, 61, 0.2);
}
.section-3 .heading_section_3 {
font-size: 20px;
position: absolute;
bottom: 70%;
}
.description {
position: absolute;
color: #6e6e6e;
padding-left: 200px;
padding-right: 200px;
}
.join-right-side {
overflow: auto;
background-color: #c9c8c8;
position: absolute;
height: 300px;
padding: 30px;
margin-left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.Join-left-side {
overflow: auto;
position: absolute;
height: 300px;
padding: 30px;
background-color: #f5f5f1;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.text-join-left {
color: black;
text-align: center;
padding-left: 200px;
padding-right: 200px;
}
.form {
height: fit-content;
overflow: hidden;
}
input[type="email"] {
border-color: black;
border-width: 2px;
background-color: #c9c8c8;
box-sizing: border-box;
list-style: none;
direction: ltr;
box-sizing: border-box;
padding: 0;
margin: 200px 200px 0px 0px;
display: block;
width: 100%;
appearance: none;
background: none;
border: none;
color: #373f3d;
font-family: GT Pressura Mono, Roboto Mono, monospace;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
<div class="section-3">
<div class="join-right-side">
<div class="join-btn">Join</div>
<h3 class="text-join-left">Sign up and get 10% off your first purchase.</h3>
<form class="form" action="/">
<input
class="input"
placeholder="Your email address..."
type="email"
name="EMAIL"
/>
</form>
</div>
<div class="join-left-side">
<h2 class="heading_section_3">Swallowtail Tea</h2>
<h3 class="description">
Swallowtail Tea is a Virginia-based tea company sourcing only the highest
quality tea, herbs, and spices from around the world.
</h3>
</div>
</div>
I think it could be linked to the way I'm accessing the div classes, or to the structure of the div's.
You can try:
CSS
.section-3 {
display:flex;
justify-content: space-between;
}
.join-left-side , .join-right-side {
width : 50%;
height: 300px;
}
.section-3 {
position: relative;
background-color: white;
height: 600px;
top: 959px;
text-align: center;
}
.join-btn {
height: 45px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
padding: 9px 20px 7px;
color: #373f3d;
border: 2px solid rgba(55, 63, 61, .2);
}
.section-3 .heading_section_3 {
font-size: 20px;
}
.description {
color: #6e6e6e;
}
.join-right-side {
background-color: #c9c8c8;
height: 300px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.join-left-side {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.form{
height: fit-content;
overflow: hidden;
}
input[type=email] {
border-color: black;
border-width: 2px;
background-color: #c9c8c8;
box-sizing: border-box;
list-style: none;
direction: ltr;
box-sizing: border-box;
padding: 0;
margin: 200px 200px 0px 0px;
display: block;
width: 100%;
appearance: none;
background: none;
border: none;
color: #373f3d;
font-family: GT Pressura Mono,Roboto Mono,monospace;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
HTML
<div class="section-3">
<div class="join-left-side">
<h2 class="heading_section_3">Swallowtail Tea</h2>
<h3 class="description">
Swallowtail Tea is a Virginia-based tea company sourcing only the highest
quality tea, herbs, and spices from around the world.
</h3>
</div>
<div class="join-right-side">
<div class="join-btn">Join</div>
<h3 class="text-join-left">Sign up and get 10% off your first purchase.</h3>
<form class="form" action="/">
<input
class="input"
placeholder="Your email address..."
type="email"
name="EMAIL"
/>
</form>
</div>
</div>
I have a problem: I want to align an interactive text which is already in the left of a slider. So, I just want to align a login form in the right of that interactive text.
I have inform all the codes as well as an image of the output right now and the image inside the slider:
The image inside the slider:
The output of the code right now:
Desired outcome:
This is the CSS + HTML code of the text :
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/graduation1.png);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="wrapper">
<div class="typing-demo">
Hello!
<br> Welcome to the website- </br>
</div>
</div>
<style>
.wrapper {
height: 50vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid;
font-family: monospace;
font-size: 2.3em;
color: #FFFFFF
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
</style>
**this is the CSS + HTML code of the form :**
<html>
<div class="container"></div>
<div class="form">
<div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg"/></div>
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="Email"/>
<input type="password" placeholder="Password"/>
<button>login</button>
<p class="message">Are you a Business/Society? Register here</p>
</form>
</div>
</html>
<style>
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 300px;
margin: right;
padding: 60px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
}
.form .thumbnail {
background: #ffd700;
width: 150px;
height: 150px;
margin: 0 auto 30px;
padding: 50px 30px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
box-sizing: border-box;
}
.form .thumbnail img {
display: block;
width: 100%;
}
.form input {
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
outline: 0;
background: #ffd700;
width: 100%;
border: 0;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
color: #FFFFFF;
font-size: 14px;
transition: all 0.3 ease;
cursor: pointer;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #ffd700;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #ffd700;
}
/* END Form */
</style>
I think I found a solution to your problem. The main thing you where missing is display: inline-block; This allows DIVs to be next to each other.
.flexslider {
display: inline-block;
width: 100%;
}
.row {
float: left;
}
.container {
float: right;
}
I am trying to fix the design error that I am facing with my log in page.
I have been trying to center the username and password form input field but it doesn't work. The icon is also misaligned with the username and password field.
I have tried altering the CSS but it just wouldn't center.
Below are my HTML and CSS codes:
body {
margin: 0;
padding: 0;
font-family: 'Corbel', sans-serif;
color: #FFFFFF
}
/*CSS for login.html & signup.html*/
#login-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 445px;
text-align: center;
}
#login-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
#register-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 500px;
text-align: center;
}
#register-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
.register {
margin: auto;
padding: 16px 0;
text-align: center;
margin-top: 30px;
width: 85%;
border-top: 1px solid #696969;
}
#register-link {
margin-top: 15px;
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
border-radius: 3px;
}
#register-required {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
color: black;
margin-top: 25px;
}
}
.input {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
margin-top: 25px;
}
.input-addon {
position: relative;
top: -2px;
float: left;
background-color: #ededed;
border: 1px solid #ededed;
padding: 4px 8px;
color: #757575;
border-right: 1px solid #757575;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=text] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15;
border: 1px solid #ededed;
padding: 6px 0px;
}
input[type=password] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15;
border: 1px solid #ededed;
padding: 6px 0px;
}
/*to remove blue block while in focus */
*:focus {
outline: none;
}
input[type=submit] {
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
margin-top: 35px;
}
/*CSS for main.html*/
.sidebar {
margin: auto;
padding: 0px;
width: 200px;
background-color: #FFFFFF;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #FFAE42;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
.content {
margin-left: 250px;
padding: 30px 16px;
height: 100%;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
/* Alert message box */
/* The alert message box */
.alert {
padding: 5px;
background-color: green;
color: white;
margin-bottom: 15px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phisherman - Login</title>
<meta name="description" content="Phisherman - Login/Register">
<!--Meta name=viewport for mobile phone scaling-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
background-image: url('backgroundimg.png');
}
</style>
</head>
<body>
<div id="login-container">
<div id="login-container-title">
Login
</div>
<form method ="POST" action="auth.php">
<div class="input">
<div class="input-addon">
<i class="material-icons">face</i>
</div>
<input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
</div>
<div class="input">
<div class="input-addon">
<i class="material-icons">vpn_key</i>
</div>
<input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
</div>
<input type="submit" name="submit" value="Log In" />
</form>
<div class="register">
<span style="color: #657575">Don't have an account yet?</span>
<button id="register-link">Register here</button>
</div>
</div>
</div>
</body>
</html>
Use flexbox
body {
margin: 0;
padding: 0;
font-family: 'Corbel', sans-serif;
color: #FFFFFF
}
/*CSS for login.html & signup.html*/
#login-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 445px;
text-align: center;
}
#login-container form {
display: flex;
flex-flow: column wrap;
}
#login-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
#register-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 500px;
text-align: center;
}
#register-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
.register {
margin: auto;
padding: 16px 0;
text-align: center;
margin-top: 30px;
width: 85%;
border-top: 1px solid #696969;
}
#register-link {
margin-top: 15px;
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
border-radius: 3px;
}
#register-required {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
color: black;
margin-top: 25px;
}
.input {
display: flex;
justify-content: center;
background-color: #ededed;
padding: 8px 0px;
margin: 25px auto 0;
width: 100%;
}
.input-addon {
position: relative;
top: 0;
float: left;
background-color: #ededed;
border: 1px solid #ededed;
padding: 6px 10px;
color: #757575;
border-right: 1px solid #757575;
margin-right: auto;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=text] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15px;
border: 1px solid #ededed;
padding: 10px;
width: 100%;
}
input[type=password] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15px;
border: 1px solid #ededed;
padding: 10px;
width: 100%;
}
/*to remove blue block while in focus */
*:focus {
outline: none;
}
input[type=submit] {
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
margin-top: 35px;
}
/*CSS for main.html*/
.sidebar {
margin: auto;
padding: 0px;
width: 200px;
background-color: #FFFFFF;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #FFAE42;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
.content {
margin-left: 250px;
padding: 30px 16px;
height: 100%;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
/* Alert message box */
/* The alert message box */
.alert {
padding: 5px;
background-color: green;
color: white;
margin-bottom: 15px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phisherman - Login</title>
<meta name="description" content="Phisherman - Login/Register">
<!--Meta name=viewport for mobile phone scaling-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
background-image: url('backgroundimg.png');
}
</style>
</head>
<body>
<div id="login-container">
<div id="login-container-title">
Login
</div>
<form method="POST" action="auth.php">
<div class="input">
<div class="input-addon">
<i class="material-icons">face</i>
</div>
<input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
</div>
<div class="input">
<div class="input-addon">
<i class="material-icons">vpn_key</i>
</div>
<input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
</div>
<input type="submit" name="submit" value="Log In" />
</form>
<div class="register">
<span style="color: #657575">Don't have an account yet?</span>
<button id="register-link">Register here</button>
</div>
</div>
</div>
</body>
</html>
I want to move to the text area to align with other fields and then move all these fields to the down of the text "Feel free...." I was trying to use marigin-left, marigin-top, but nothing works. All the time these fields stay in one place. Do not know why.
It has to work on ip 6/7/8 plus resolution.
Could you tell me how can I achieve it?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#tekst {
position: absolute;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-left: 1000px;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-device-width: 500px) {
#profilesign {
width: 1000px;
margin-top: 750px;
margin-left: 400px;
font: Bold 60px/40px Georgia;
letter-spacing: 0;
color: black;
}
img.left {
padding: 0px 40px 20px 40px;
width: 550px;
height: 550px;
margin-left: 550px;
margin-top: 450px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 50px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
#sign a {
background-color: #DCDFDE;
padding: 20px 15px 17px 1px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#logo img {
margin-left: 550px;
text-align: center;
width: 650px;
}
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size: 100% 3000px;
width: auto;
}
.row {
width: 2500px;
display: grid;
grid-template-columns: 0% 80%;
}
.main-nav {
margin-left: 100px;
margin-top: 250px;
float: left;
display: inline-flex;
list-style: none;
}
.main-nav li a {
border-right: 3px solid black;
color: #000000;
text-decoration: none;
font: Bold 58px/45px Arial;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
article input {
width: 400px;
height: 70px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 45px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 700px;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div id="lala">
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
</div>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
My login page looks and acts how I want it to when my container div is set to display: block and position: static. However, when it becomes either display: inline-block or position: absolute, it stops taking up its max width of 500px. I want to use absolute positioning to center my div vertically and horizontally, so I need the layout to stay the same as it looks when it has static position. How can I achieve this?
* {
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#login-box {
max-width: 500px;
min-width: 300px;
box-shadow: #bbb 0 0 20px 0;
display: block;
position: static;
/*position: absolute;*/
}
#HeaderForLoginForm {
background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO');
background-repeat: no-repeat;
background-size: 200px;
background-position-x: center;
background-position-y: 25px;
background-color: #000;
height: 110px;
text-align: center;
line-height: 56px;
}
#headerlinks {
color: rgb(90, 90, 90);
font-weight: bold;
font-size: 12px;
margin-top: 54px;
display: inline-block;
}
#media (min-width: 450px) {
#HeaderForLoginForm {
background-position-x: 25px;
background-position-y: center;
text-align: right;
height: 95px;
line-height: 95px;
}
#headerlinks {
margin-right: 20px;
margin-top: 0;
}
}
#DivForLoginForm {
background: #b7d9ff;
background: -webkit-linear-gradient(#b7d9ff, #fff);
background: -o-linear-gradient(#b7d9ff, #fff);
background: -moz-linear-gradient(#b7d9ff, #fff);
background: linear-gradient(#b7d9ff, #fff);
text-align: center;
}
#LoginForm {
display: inline-block;
width: 74%;
margin-top: 20px;
margin-bottom: 40px;
}
#LoginForm input.textField {
display: inline-block;
width: 100%;
padding: 10px;
margin-top: 18px;
font-size: 14px;
border-radius: 3px;
border: 1px solid #999;
}
#terms-wrapper {
margin-top: 16px;
margin-bottom: 30px;
text-align: left;
font-size: 14px;
font-weight: bold;
}
#terms-wrapper input {
margin-left: 0;
vertical-align: -2px;
}
a[href] {
color: #0079dd;
text-decoration: none;
}
a[href]:hover {
text-decoration: underline;
}
input#btn-login {
padding: 14px;
height: auto;
width: 40%;
min-width: 100px;
float: right;
background-color: #1064d8;
color: #fff;
font-weight: bold;
font-size: 16px;
outline: none !important;
border: none;
border-radius: 3px;
cursor: pointer;
}
input#btn-login:hover {
background-color: #004BBF;
}
input#btn-login:active {
background-color: #0031A5;
}
#loginfooter {
background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg");
color: rgb(100, 100, 100);
padding: 12px;
font-size: 11px;
}
[data-val-required] {
background-color: #fff;
}
<section id="login-box-wrapper">
<div id="login-box">
<header id="HeaderForLoginForm">
<div id="headerlinks">
some link |
some other link
</div>
</header>
<div id="DivForLoginForm">
<form method="post" id="LoginForm">
<input class="textField" id="UserName" name="UserName" placeholder="Username" type="text">
<input class="textField" id="Password" name="Password" placeholder="Password" type="password">
<div id="terms-wrapper">
<input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox">
<label for="HasAcceptedTermsConditions">
I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a>
</label>
</div>
<input id="btn-login" type="submit" value="LOG IN">
</form>
</div>
<footer id="loginfooter" style="text-align: center;">
<span>© 2009-2017 Some Company, LLC — All rights reserved</span>
</footer>
</div>
</section>
Add width: 100%; to #login-box to get it to take up the max-width rule.
Use position: absolute; with top, left and transform with the translate function to horizontally and vertically center the login box.
#login-box {
width: 100%;
max-width: 500px;
min-width: 300px;
box-shadow: #bbb 0 0 20px 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
}
* {
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#login-box {
width: 100%;
max-width: 500px;
min-width: 300px;
box-shadow: #bbb 0 0 20px 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
}
#HeaderForLoginForm {
background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO');
background-repeat: no-repeat;
background-size: 200px;
background-position-x: center;
background-position-y: 25px;
background-color: #000;
height: 110px;
text-align: center;
line-height: 56px;
}
#headerlinks {
color: rgb(90, 90, 90);
font-weight: bold;
font-size: 12px;
margin-top: 54px;
display: inline-block;
}
#media (min-width: 450px) {
#HeaderForLoginForm {
background-position-x: 25px;
background-position-y: center;
text-align: right;
height: 95px;
line-height: 95px;
}
#headerlinks {
margin-right: 20px;
margin-top: 0;
}
}
#DivForLoginForm {
background: #b7d9ff;
background: -webkit-linear-gradient(#b7d9ff, #fff);
background: -o-linear-gradient(#b7d9ff, #fff);
background: -moz-linear-gradient(#b7d9ff, #fff);
background: linear-gradient(#b7d9ff, #fff);
text-align: center;
}
#LoginForm {
display: inline-block;
width: 74%;
margin-top: 20px;
margin-bottom: 40px;
}
#LoginForm input.textField {
display: inline-block;
width: 100%;
padding: 10px;
margin-top: 18px;
font-size: 14px;
border-radius: 3px;
border: 1px solid #999;
}
#terms-wrapper {
margin-top: 16px;
margin-bottom: 30px;
text-align: left;
font-size: 14px;
font-weight: bold;
}
#terms-wrapper input {
margin-left: 0;
vertical-align: -2px;
}
a[href] {
color: #0079dd;
text-decoration: none;
}
a[href]:hover {
text-decoration: underline;
}
input#btn-login {
padding: 14px;
height: auto;
width: 40%;
min-width: 100px;
float: right;
background-color: #1064d8;
color: #fff;
font-weight: bold;
font-size: 16px;
outline: none !important;
border: none;
border-radius: 3px;
cursor: pointer;
}
input#btn-login:hover {
background-color: #004BBF;
}
input#btn-login:active {
background-color: #0031A5;
}
#loginfooter {
background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg");
color: rgb(100, 100, 100);
padding: 12px;
font-size: 11px;
}
[data-val-required] {
background-color: #fff;
}
<section id="login-box-wrapper">
<div id="login-box">
<header id="HeaderForLoginForm">
<div id="headerlinks">
some link |
some other link
</div>
</header>
<div id="DivForLoginForm">
<form method="post" id="LoginForm">
<input class="textField" id="UserName" name="UserName" placeholder="Username" type="text">
<input class="textField" id="Password" name="Password" placeholder="Password" type="password">
<div id="terms-wrapper">
<input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox">
<label for="HasAcceptedTermsConditions">
I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a>
</label>
</div>
<input id="btn-login" type="submit" value="LOG IN">
</form>
</div>
<footer id="loginfooter" style="text-align: center;">
<span>© 2009-2017 Some Company, LLC — All rights reserved</span>
</footer>
</div>
</section>
Be careful when using width: 100% on elements removed from the normal flow of the document.
Using right: 0 instead of width: 100% could be prefered for consistency, it depends on which results you are expecting when using margins in these elements.
Using width: 100%.
div {
height: 20vh;
border: .2em solid violet;
box-sizing: border-box;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-color: dodgerblue;
margin: .5em;
}
<div class="relative">
<div class="absolute"></div>
</div>
Using right: 0.
div {
height: 20vh;
border: .2em solid violet;
box-sizing: border-box;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-color: dodgerblue;
margin: .5em;
}
<div class="relative">
<div class="absolute"></div>
</div>