The contact section of my website has the same menu, however the logo still hovers in red although the class you mentioned before is applied, it's also applied in the right image with social media.
Also, I have a footer created which has no style, how can I align it to the center and have them ordered including the icons? (which cannot be seen)
* {
padding: 0;
margin: 0;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: rgb(151, 37, 37);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #9E1B2F;
}
.testform {
border-radius: 5px;
background-color: black;
padding: 10px;
font-family: calibri;
color: white;
width: 25%;
margin-top: 200px;
margin-left: 700px;
margin-bottom: 300px;
}
.logo {
display: flex;
padding: 6px;
border: 0;
margin-left: 350px;
margin-bottom: 0px;
justify-content: center;
}
.bbicons {
padding: 6px;
border: 0;
margin-left: 1650px;
margin-bottom: 5px;
margin-top: -60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
font-weight: bold;
border-style: dashed;
border-color: black;
border-radius: 20px;
height: 80px;
width: 1900px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
border-style: none;
margin-left: 24px;
margin-top: 11px;
}
li a:hover {
background-color: #9E1B2F;
}
logo:hover {
background-color: transparent;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/favicon.png">
<link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Contact</title>
<body>
<div class="navigation active">
<ul>
<li>Tours</li>
<li>Listen to Music</li>
<li>Contact</li>
<li>About</li>
<li>
<img class="logo" src="./img/logo.jpg" alt="logo">
</li>
<li>
<a class="bbicons"><img src="./img/bbicons.jpg"></a>
</li>
</ul>
</div>
<div class="testform">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4><a class="textDecoration" href="./terms.html">Terms and Conditions</a></h4>
<h4><a class="textDecoration" href="./privacy.html">Privacy
and Policy</a></h4>
<h4>Follow Us</h4>
</div>
<div class="social-links">
<img src="./img/face4.png"></a>
<img src="./img/ig3.png"></a>
<img src="./img/tw2.png"></a>
<img src="./img/yt2.png"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
I personally would use it this way, just implement it... If you need anything, just ask me!
.logo img {
transition: transform 1s ease;
}
.logo:hover img {
transform: scale(1.2,1.2);
}
Related
I'm writing the website code using HTML and CSS for now and I don't know why the same purple background color that I set at the beginning of my code for the whole body is getting break and it displays white background further. Here is the code for HTML and CSS.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="maximum-scale=1.0, initial-scale=1.0, user-
scalable=no, height=device-height, width=device-width">
<meta name="format-detection" content="telephone=no">
<title>MAXMA</title>
<meta name="description" content="Оплата только за клиентов, которых мы вам
вернули">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght#100&family=Nuosu+SIL&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="mainpage">
<div class="header">
<img class="logo" src="assets/images/logo-white.svg" alt="maxmaicon">
<nav>
<ul class="header-menu">
<li>Возможности</li>
<li>Кейсы</li>
<li>Цены</li>
</ul>
</nav>
<a class="header-contacts" style="font-size: 1.2em; margin-top: 6px;
line-height: 1.5;">
+7 (499) 938 49 80
<br>
hello#maxma.com
</a>
<p id="demo"><b>Посмотреть демо</b></p>
</div>
<div class="site-header"></div>
<div class="body">
<div class="body-text">
<h1>Платформа лояльности<br>
<span style="color: rgb(98, 240, 98)">для ритейл сетей</span>
</h1>
<input type="text" name="phone" id="phone" placeholder="Phone Number"
style="margin-left: 120px; margin-top: 120px; padding: 10px; width: 250px; height:
20px;">
<button id="watchbut">Посмотреть демо</button>
<p style="font-size: 0.8em; margin-left: 135px; margin-top: 5px;
color: whitesmoke;">Будет отправлен код по смс</p>
</div>
<div class="body-video">
<div class="laptop1">
<img src="assets/images/laptop.png" alt="laptop1_image">
<video src="https://maxma.com/assets/video/lead-1080.mp4"
playinline autoplay muted loop></video>
</div>
</div>
</div>
<div class="b-lead__nav mod-only-lg">
<nav class="b-nav-lead" itemscope
itemtype="http://www.schema.org/SiteNavigationElement">
<a id="buts" itemprop="url" href="#" class="js-link-anchor btn-
primary" style="width: 180px;">Программа лояльности</a>
<a id="buts" itemprop="url" href="#" class="js-link-anchor btn-
primary">Сегментация базы</a>
<a id="buts" itemprop="url" href="#" class="js-link-anchor btn-
primary">Рассылки</a>
<a id="buts" itemprop="url" href="#" class="js-link-anchor btn-
primary">Приведи друга</a>
<a id="buts" itemprop="url" href="#" class="js-link-anchor btn-
primary">Другое</a>
</nav>
</div>
<div class="lead_clients" >
<div class="clients_title">Наши клиенты<a class="stars"
href="https://startpack.ru/application/cloudloyalty/reviews"></a></div>
<div class="clients_list">
</div>
</div>
</div>
</section>
</body>
</html>
CSS Code
=======
*{
margin: 0;
}
.mainpage{
height: 100vh;
}
li, a{
text-decoration: none;
color: white;
}
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 1px;
}
.logo{
cursor: pointer;
margin: 2em;
}
.header-menu{
display: flex;
flex-direction: row;
font-size: 1.5vw;
gap: 15px;
justify-content: center;
list-style: none;
}
.header-menu li a{
transition: all 0.3s ease 0s;
}
.header-menu li a:hover {
color: #0088a9;
}
.body{
display: flex;
font-family: 'Montserrat', sans-serif;
padding-top: 6em;
margin-top: 30px;
}
.body-text{
width: 50%;
}
.body-video{
width: 50%;
}
.laptop1{
width: 100%;
max-width: 1200px;
position: relative;
}
.laptop1 img{
width: 80%;
}
.laptop1 video{
position: absolute;
width: 75%;
height: 84%;
top: 6%;
left: 2.6%;
}
.body-text input [type=text]{
float: left;
width: 100px;
padding: 6px;
margin-top: 16px;
margin-right: 8;
border: 2px;
font-size: 22px;
}
.site-header {
border-bottom: 1px solid rgb(167, 160, 160);
}
#demo{
border-radius: 20px;
border: 1px solid white;
padding: 20px;
width: 150px;
height: 20px;
text-align: center;
color: white;
font-size: 1em;
margin-right: 90px;
}
h1{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 2.8em;
margin-left: 120px;
color: white;
line-height: 1.5;
}
#watchbut{
font-size: 1.3em;
padding: 8px;
}
.b-nav-lead{
display:-webkit-box;
display:-ms-flexbox;
display:flex}
.b-nav-lead a:not(:last-child){
margin-right: 18px;
}
.b-nav-lead .btn-primary{
font-size:20px;
border-radius: 20px;
margin-left: 20px;
padding-top: 200px;
}
.b-nav-lead .btn-primary:hover{
background:#fff;
border-color:#ffff;
color:#6152d2;
-webkit-box-shadow:0 6px 14px rgba(0,0,0,.16);
box-shadow:0 6px 14px rgba(0,0,0,.16);
-webkit-transition:-webkit-box-shadow .35s ease-out;
transition:-webkit-box-shadow .35s ease-out;
-o-transition:box-shadow .35s ease-out;
transition:box-shadow .35s ease-out;
transition:box-shadow .35s ease-out,-webkit-box-shadow .35s ease-out;
}
#buts{
border-radius: 20px;
border: 0.5px solid whitesmoke;
padding: 20px;
width: 150px;
height: 15px;
text-align: center;
color: white;
position: relative;
font-size: 1em;
margin-left: 30px;
margin-top: 30px;
padding-top: 18x;
left: 80px;
font-weight: bold;
}
#buts:hover{
color: #4a42ba;
background: #fff;
}
section{
background-color: #4a42ba;
}
.lead_clients{
margin: 80px;
}
.clients_title{
text-align: center;
font-size: 1.6em;
font-family: 'Montserrat', sans-serif;
color: #fff;
}
if you run the code you can see that at the bottom of the page there are oval shapes that contain some text and this place is the last where the purple color background is applied. I don't know which part is making it to turn to white background after that cause I even gave the whole background for the section and it still displays the same thing.
P.S. Important thing is that I can't set the same background color for the whole body cause I need sections which would have different backgrounds but till this part I need it to be the same.
you need to increase the height in .mainpage css class to height:100%;
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 90%;
background-color:#000;
border: .0625rem solid #ccc;
position:absolute;
top:0;
bottom:0;
left:300px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I have divided the Signup form into two parts, left part is for displaying some content and right side is for displaying Signup form elements like Username, email, password and repeat password.
Now i want to move the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
Tried Creating all but having issue with(CSS PART) moving the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
you can use these code
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem 2rem 2.5rem 3rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 100%;
background-color: #000;
border: .0625rem solid #ccc;
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 2px);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
I need to float my columns on the right but I don't know how I can put them under each other with space between them. The CSS is linked to the HTML page some of the CSS is in the HTML page because I used google fonts for them.
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto;
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<style>
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
</style>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<style>
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
width: 350px;
}
.grid {
float: right;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
This is what you want?
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 20px 0;
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
}
.wrapper2 form{
padding-bottom: 59px;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<style>
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
</style>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
You need to specify clear property for wrapper2 class in your CSS
Per Mozilla Developer Documentation Web technology for developers > CSS > clear:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
More specifically for the floating elements, as in this case:
When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
You can achieve this by setting the clear property to either both or right, as follows--
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
clear:both;
}
Full demo posted on: JsFiddle
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto;
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
clear:both;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
I am trying to increase the text input height inside a form on a site I am programming. I try to override the default bootstrap css of 20px height but nothing seems to be changing. Here is my code--
css
.inputfield
{
position:relative;
top:30px;
font-size: 60px!important;
font-family:'Lato', sans-serif !important;
font-weight: 400;
color:white ;
width:400px;
line-height: 100px!important;
opacity:0.2;
}
and
the form HTML
<form class="text-center" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="inputfield" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="inputfield" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
please help
You can use css height attribute both as
inline css :
<input style="height:50px"/>
or class
<input class="inputfield"/>
and the css
.inputfield {
height: 50px
}
For Bootstrap 4+ use
<input type="text" class="form-control form-control-lg mb-2">
Although It is possible to attach a CSS file to apply your request, Bootstrap has got some predefined classes that can be helpful for your aim.
In bootstrap 4:
You can manipulate the size of the form control with .form-control-sm or .form-control-lg classes.
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Of course, you can change the default settings of classes by overriding them:
.form-control-sm {
height: calc(1.5em + .5rem + 2px);
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
In bootstrap 3:
You can set the heights of input elements using classes like .input-lg and .input-sm.
<input class="form-control input-sm" id="inputsm" type="text">
<input class="form-control" id="inputdefault" type="text">
<input class="form-control input-lg" id="inputlg" type="text">
Based from the code you gave, you are not using bootstrap so I will just assume that this is what you are trying to achieve. https://jsfiddle.net/127c14bu/
If you want to override the height, you can add another css class on your input text that contains the desired height. See the .overrideheight and change the value of height.
I hope it helps.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="/demo/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<style >
*{
margin:0 !important;
padding:0 ! important;
}
body {
width: 100%;
min-height: 800px;
background-size: 100%;
background-repeat: no-repeat;
position:absolute;
background-image: url(demo_BG_1024.png);
background-color: rgb(0,0,0);
}
ul{
padding-top: 0px;
}
.form-signin {
width:500px !important;
height:300px ! important;
}
.form-signin {
max-width: 500px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.left {
float: left;
display: block;
width: 25%;
padding-left: 0px;
text-align: left;
}
.right {
float: right;
display: block;
width: 75%;
text-align: right;
padding-right: 0px;
}
.header
{
font-family: 'Lato', sans-serif;
font-weight: 700;
color: white;
font-size: 64px;
padding-top: 60px;
}
.header2
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 46px;
}
.header3
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 30px;
}
.header4
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 18px;
}
nav{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
width: 100%;
height: 78px;
padding:0 px;
background-color: rgb(0,0,0);
}
ul li {
list-style-type: none;
margin: 0px;
display: inline-block;
}
#logo_image
{
padding: 10px 30px!important;
}
.menu_buttons
{
font-family:'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
color:white ;
display: inline-block;
padding: 10px 30px !important;
}
.demobtn {
height:1.3em;
width:2.5em;
background-color:#00b6ee;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:'Lato', sans-serif;
font-weight: 300;
font-size:30px;
padding:10px 100px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
}
.demobtn:hover {
`enter code here`background-color:#00b6ee;
text-decoration:none;
}
.demobtn:active {
position:relative;
text-decoration:none;
top:1px;
}
.inputfield
{
position:relative;
top:30px;
font-size: 60px!important;
font-family:'Lato', sans-serif !important;
font-weight: 400;
color:white ;
width:400px;
line-height: 100px!important;
opacity:0.2;
}
.overrideheight {
height: 90px;
}
.sign-in
{
padding-top: 100px;
margin-top:100px;
}
.myForm
{
position:relative;
top:230px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="row">
<nav>
<ul class="left" ><li id="logo_image"><img alt="logo" src="img/demo_logo.png"></li></ul>
<ul class="right" >
<li><a class="menu_buttons" href="#">Login</a></li>
</ul>
</nav>
</div>
<div class="row ">
<div class="myForm">
<div class="row sign-in ">
<div class="col-xs-6 col-md-4 col-lg-4"></div>
<div class="col-xs-6 col-md-4 col-lg-4 text-center"><h2 class="header2">Login to demo</h2></div>
<div class="col-xs-6 col-md-4 col-lg-4"></div>
</div>
<br>
</div>
</div>
<form class="text-center form-group" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="form-control overrideheight" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="form-control overrideheight" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
<div class="navbar-fixed-bottom">
<ul class="left">
<li><a href="#" class="menu_buttons" >Home</a></li>
<li><a href="#" class="menu_buttons" >About</a></li>
<li><a href="#" class="menu_buttons" >Support</a></li>
</ul>
<ul class="right">
<li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#submit").attr("disabled",true);
var username = '';
$("#username").on('change keyup paste mouseup', function() {
if ($(this).val() != username) {
username = $(this).val();
}
});
var password = '';
$("#username").on('change keyup paste mouseup', function() {
if ($(this).val() != password) {
password = $(this).val();
if(username!=""&&password!="")
{
$("#submit").attr("disabled",false);
}
}
});
});
</script>
</body>
</html>