I have two html pages one for navbar and other for contact form, when i try to join them both i get distorted single page. Image will be included below. I tried making section but its not helping out:/
This is for a django project so codes might b slightly different. Thanks in advance :)
html of navbar
<nav>
<div class="logo">
<a class="h4" href="{% url 'home' %}">Nihaal Nz</a>
</div>
<ul class="nav-links">
<li>About</li>
<li>Cool Cloud</li>
<li>Contact</li>
</ul>
</nav>
html of contact page
<div class="container">
<form class="shake" action="{% url 'contact' %}" role="form" method="post" id="contactForm"
name="contact-form" data-toggle="validator">
{% csrf_token %}
<h2>Let me know what you felt.</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="name" required="required">
<span class="text">First Name</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="email" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="subject" required="required">
<span class="text">Subject</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea name="message" required data-error="Write your message"></textarea>
<span class="text">Type your message here...</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="submit" value="Send">
</div>
</div>
</div>
combined html code
{% load static %}
<link rel="stylesheet" href="{% static "portofolio/css/contacts.css" %}">
{% block content %}
<body>
<section>
<nav>
<div class="logo">
<a class="h4" href="{% url 'home' %}">Nihaal Nz</a>
</div>
<ul class="nav-links">
<li>About</li>
<li>Cool Cloud</li>
<li>Contact</li>
</ul>
</nav>
</section>
<div class="container">
<form class="shake" action="{% url 'contact' %}" role="form" method="post" id="contactForm"
name="contact-form" data-toggle="validator">
{% csrf_token %}
<h2>Let me know what you felt.</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="name" required="required">
<span class="text">First Name</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="email" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="subject" required="required">
<span class="text">Subject</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea name="message" required data-error="Write your message"></textarea>
<span class="text">Type your message here...</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="submit" value="Send">
</div>
</div>
</div>
</body>
{% endblock %}
css of navbar
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: rgba(93, 73, 84,0.5);
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226,226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
text-decoration: none;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226,226,226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.h4{
text-decoration: none;
color: rgb(226,226,226)
}
css of contact page
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #051115;
font-family: 'Poppins', sans-serif;
}
.container {
width: 80%;
padding: 20px;
}
.container h2{
width: 100%;
color: #45f3ff;
font-size: 36px;
text-align: center;
margin-bottom: 10px;
}
.container .row100{
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.container .row100 .col {
position: relative;
width: 100%;
padding: 0 10px;
margin: 30px 0 10px;
transition: 0.5s;
}
.container .row100 .inputBox{
position: relative;
width: 100%;
height: 40px;
color: #45f3ff;
}
.container .row100 .inputBox input,
.container .row100 .inputBox.textarea textarea{
position: absolute;
width: 100%;
height: 100%;
background: transparent;
box-shadow: none;
border: none;
outline: none;
font-size: 18px;
padding: 0 10px;
z-index: 1;
color: #000000;
}
.container .row100 .inputBox .text{
position: absolute;
top: 0;
left: 0;
line-height: 40px;
font-size: 18px;
padding: 0 10px;
display: block;
transition: 0.5s;
pointer-events: none;
}
.container .row100 .inputBox input:focus + .text,
.container .row100 .inputBox input:valid + .text {
top: -35px;
left: -10px;
}
.container .row100 .inputBox .line{
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 2px;
background: #45f3ff;
transition: 0.5s;
border-radius: 2px;
pointer-events: none;
}
.container .row100 .inputBox input:focus ~ .line,
.container .row100 .inputBox input:valid ~ .line{
height: 100%;
}
.container .row100 .inputBox.textarea{
position: relative;
width: 100%;
height: 100px;
padding: 10px 0;
}
.container .row100 .inputBox.textarea textarea{
height: 100%;
resize: none;
}
.container .row100 .inputBox textarea:focus + .text,
.container .row100 .inputBox textarea:valid + .text {
top: -35px;
left: -10px;
}
.container .row100 .inputBox textarea:focus ~ .line,
.container .row100 .inputBox textarea:valid ~ .line{
height: 100%;
}
input[type="submit"]{
border: none;
padding: 7px 35px;
cursor: pointer;
outline: none;
background: #45f3ff;
color: #000000;
font-size: 18px;
border-radius: 2px;
}
The display:flex on the body CSS is causing this, change it to block (or something else) and it should line up as you want:
body {
display: block;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #051115;
font-family: 'Poppins', sans-serif;
}
Related
I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Sign-up<br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
I have this simple html page, with css it is working good except when I scroll the page down, the input form is above the header. I would like the header to always be above the content When I scroll.
Can anyone help ?
.sticky {
position: sticky;
top: 0;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
When an element has position: absolute or position: fixed, it happens that it can overlap with other elements. When it happens, the container that will be rendered above will be the one that has the higher z-index value. If the z-index isn't set, then it's the lowest possible.
For this reason, you can just add:
z-index: 1;
to your sticky class:
.sticky {
position: sticky;
top: 0;
z-index: 1;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #25274D;
font-family: "Trebuchet MS";
}
.link {
text-decoration: none;
color: whitesmoke;
float: left;
font-size: 20px;
font-weight: 700;
padding-right: 1vw;
padding-left: 1vw;
display: block;
transition: 0.4s;
height: 100%;
}
.link:hover {
background-color: #464866;
color: #2E9CCA;
}
a:link,
a:visited {
line-height: 7vh;
}
#top__nav {
text-decoration: none;
top: 0;
position: fixed;
width: 100%;
z-index: 10;
background-color: darkblue;
left: 0;
}
#top__nav__menu {
display: flex;
justify-content: flex-end;
padding-right: 20px;
list-style-type: none;
background-color: darkblue;
}
#logo {
float: left;
position: absolute;
left: 1vw;
}
.Gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-top: 10vh;
position: relative;
}
.revealCard {
position: relative;
background-color: #25274D;
width: 45%;
height: 400px;
z-index: 1;
float: left;
border: 1px solid #464866;
perspective: 1000;
margin: 20px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
.revealCard:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color: #2E9CCA;
text-align: center;
font-size: 30px;
}
.face.back {
display: block;
transform: rotateY(180deg);
color: #2E9CCA;
text-align: center;
box-sizing: border-box;
padding: 20px auto;
}
.img {
width: 100%;
height: 100%;
}
#dynamicText {
max-width: 100%;
height: 30vh;
font-size: 40px;
}
.appearOnScroll {
color: #2E9CCA;
text-align: center;
padding: 20px 0;
}
#form {
margin-top: 90px;
display: block;
position: relative;
}
.form__fields {
margin-right: 20px;
color: #2E9CCA;
font-size: 25px;
padding: 20px;
}
.input {
position: absolute;
left: 20vw;
line-height: 30px;
color: black;
}
.input:focus {
background-color: #2E9CCA;
color: #25274D;
}
.star {
color: #2E9CCA;
}
.Fields {
padding-top: 20px;
}
<div id="top__nav">
<div id="card">
<ul id="top__nav__menu">
<img id="logo" src="NewProject/Logo.png">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Free Trial</a></li>
<li><a class="link" href="#">Samples</a></li>
<li><a class="link" href="#">Q-Bank</a></li>
<li><a class="link" href="#">Help</a></li>
</ul>
</div>
</div>
<div class="Gallery">
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://i.ytimg.com/vi/TdpBRZ0dZhw/maxresdefault.jpg">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcrkTylq_NcR1xOsclrGiDsbEPFpRFlLK_UxpB4zuF9O3Uvwu5">
</div>
</div>
</div>
</div>
<div id="dynamicText">
<p class="appearOnScroll">See the magic below!</p>
<p class="appearOnScroll">Signup For Your Free Beta Trial Today!</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
</div>
<div id="form">
<form action="">
<div class="Fields">
<label class="form__fields">Full Name :<span class="star"> * </span></label>
<input class="input" type="text" name="full_name" placeholder="Enter your name" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 1:<span class="star"> * </span></label>
<input class="input" type="text" name="address_line_1" placeholder="Address line 1" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 2:</label>
<input class="input" type="text" name="address_line_2" placeholder="Address line 2"><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 3:</label>
<input class="input" type="text" name="address_line_3" placeholder="Address line 3"><br/>
</div>
<div class="Fields">
<label class="form__fields">Email :<span class="star"> * </span></label>
<input class="input" type="email" name="email" placeholder="Enter your E-mail" required><br/>
</div>
</form>
</div>
The form is coming on top of the text in the div #dynamicText, I have tried many things like removing position:absolute from or clear:both from everywhere but I couldn't fix it. Please help. Also it would be nice if I have to change the css properties of form element only. Thanks in advance.
The height property in the #dynamicText seems to be giving trouble. Removing it takes out the overlap. Alternatively, using min-height instead works as well.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #25274D;
font-family: "Trebuchet MS";
}
.link {
text-decoration: none;
color: whitesmoke;
float: left;
font-size: 20px;
font-weight: 700;
padding-right: 1vw;
padding-left: 1vw;
display: block;
transition: 0.4s;
height: 100%;
}
.link:hover {
background-color: #464866;
color: #2E9CCA;
}
a:link,
a:visited {
line-height: 7vh;
}
#top__nav {
text-decoration: none;
top: 0;
position: fixed;
width: 100%;
z-index: 10;
background-color: darkblue;
left: 0;
}
#top__nav__menu {
display: flex;
justify-content: flex-end;
padding-right: 20px;
list-style-type: none;
background-color: darkblue;
}
#logo {
float: left;
position: absolute;
left: 1vw;
}
.Gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-top: 10vh;
position: relative;
}
.revealCard {
position: relative;
background-color: #25274D;
width: 45%;
height: 400px;
z-index: 1;
float: left;
border: 1px solid #464866;
perspective: 1000;
margin: 20px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
.revealCard:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color: #2E9CCA;
text-align: center;
font-size: 30px;
}
.face.back {
display: block;
transform: rotateY(180deg);
color: #2E9CCA;
text-align: center;
box-sizing: border-box;
padding: 20px auto;
}
.img {
width: 100%;
height: 100%;
}
#dynamicText {
max-width: 100%;
/*height: 30vh;*/
font-size: 40px;
}
.appearOnScroll {
color: #2E9CCA;
text-align: center;
padding: 20px 0;
}
#form {
margin-top: 90px;
display: block;
position: relative;
}
.form__fields {
margin-right: 20px;
color: #2E9CCA;
font-size: 25px;
padding: 20px;
}
.input {
position: absolute;
left: 20vw;
line-height: 30px;
color: black;
}
.input:focus {
background-color: #2E9CCA;
color: #25274D;
}
.star {
color: #2E9CCA;
}
.Fields {
padding-top: 20px;
}
<div id="top__nav">
<div id="card">
<ul id="top__nav__menu">
<img id="logo" src="NewProject/Logo.png">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Free Trial</a></li>
<li><a class="link" href="#">Samples</a></li>
<li><a class="link" href="#">Q-Bank</a></li>
<li><a class="link" href="#">Help</a></li>
</ul>
</div>
</div>
<div class="Gallery">
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://i.ytimg.com/vi/TdpBRZ0dZhw/maxresdefault.jpg">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<img class="img" src="https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67fd942ed774f3de1db50cf3dd0065eb&w=1000&q=80">
</div>
<div class="back face center">
<p>Here are the details of the image! Here are the details of the image! Here are the details of the image!</p>
</div>
</div>
</div>
<div class="revealCard">
<div class="card">
<div class="face">
<p>Hey, hover to see the image.</p>
</div>
<div class="back face center">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcrkTylq_NcR1xOsclrGiDsbEPFpRFlLK_UxpB4zuF9O3Uvwu5">
</div>
</div>
</div>
</div>
<div id="dynamicText">
<p class="appearOnScroll">See the magic below!</p>
<p class="appearOnScroll">Signup For Your Free Beta Trial Today!</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
<p class="appearOnScroll">This text appears on scroll</p>
</div>
<div id="form">
<form action="">
<div class="Fields">
<label class="form__fields">Full Name :<span class="star"> * </span></label>
<input class="input" type="text" name="full_name" placeholder="Enter your name" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 1:<span class="star"> * </span></label>
<input class="input" type="text" name="address_line_1" placeholder="Address line 1" required><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 2:</label>
<input class="input" type="text" name="address_line_2" placeholder="Address line 2"><br/>
</div>
<div class="Fields">
<label class="form__fields">Address line 3:</label>
<input class="input" type="text" name="address_line_3" placeholder="Address line 3"><br/>
</div>
<div class="Fields">
<label class="form__fields">Email :<span class="star"> * </span></label>
<input class="input" type="email" name="email" placeholder="Enter your E-mail" required><br/>
</div>
</form>
</div>
Remove the height of the dynamicTest div which is set to 30vh. The overlapping divs is caused due to that property.
Here is my code:
css
*{
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
position: absolute;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
html
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
I am struggling with my page layout.
I know there are some similar posts, I try but looks like my case is different.
How can my <div id=table> height exclude footer?
If possible, I don't wish to set a number for height.
Thanks.
Just remove position: absolute; from footer.
Edit:
One better solution is remove height and minheight from body, #table and .container and use display:flex.
Give following css to .container
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
* {
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
}
body {
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
add this css
#table {
display: table;
height: calc(100% - 31px);
}
Change css for footer
footer {
background-color: #ffffff;
border-top: 1px solid #e7eaec;
bottom: 0;
height: auto;
text-align: center;
width: 100%;
}