I have a problem with a textbox and a label on a html page. I need to put two textboxes and two labels on the right size of the page, but I can't. I try with some answers from stackoverflow but it doesn't work too, it always put the textbox and the label down from the first textbox and label.
I put my css code:
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0 auto 0 auto;
vertical-align: middle;
float: center;
max-width: 70em;
}
a {
color: #ff6f00;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.card, header, nav, article {
margin: 1em .5em;
border-radius: .25em;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
overflow: hidden;
}
header {
text-align: center;
background-color: #3f51b5;
color: white;
margin-top: 0;
margin-bottom: 0;
padding: .25em;
border-radius: 0 0 .25em .25em;
}
main {
width: auto;
overflow: hidden;
margin-bottom: 5em;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #3f51b5;
color: white;
text-align: center;
box-shadow: 0 -.125em .5em rgba(0, 0, 0, .4);
}
footer a {
color: #ffd740;
}
nav {
float: left;
width: 20em;
background-color: #eee;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li a {
display: block;
color: black;
padding: .5em 1em;
transition: background-color .25s;
}
nav li a:hover {
background-color: #ffc107;
text-decoration: none;
transition: background-color .25s;
}
article {
background-color: #eeeeee;
padding: .5em;
}
article h1 {
border-bottom: 1px solid rgba(0, 0, 0, .4);
}
article img {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
transition: box-shadow .25s;
}
article img:hover {
box-shadow: 0 .3em 1em rgba(0, 0, 0, .4);
transition: box-shadow .25s;
}
hr {
border-style: none;
background-color: rgba(0, 0, 0, .4);
height: 1px;
}
pre {
overflow: auto;
}
#media only screen and (max-width: 45em) {
body {
min-height: calc(100vh);
display: flex;
flex-direction: column;
}
nav {
float: none;
width: auto;
}
main {
flex-grow: 2;
margin-bottom: .25em;
}
footer {
position: relative;
padding: .25em;
width: auto;
}
}
/* Forms */
input[type=button], input[type=submit] {
background-color: white;
padding: .5em;
border: 0;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
border-radius: .25em;
transition: box-shadow .125s;
}
input[type=button]:hover, input[type=submit]:hover {
box-shadow: 0 .3em 1em rgba(0, 0, 0, .4);
transition: box-shadow .125s;
}
input[type=button]:active, input[type=submit]:active {
box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4);
transition: box-shadow .0625s;
}
input[type=text], input[type=number], input[type=password], select {
width: 10em;
background-color: white;
padding: .5em;
border: 0;
box-shadow: inset 0 .0625em .25em rgba(0, 0, 0, .4);
border-radius: .25em;
transition: box-shadow .25s, width .4s ease-in-out;
}
input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, select:hover {
box-shadow: inset 0 .0625em .5em rgba(0, 0, 0, .4);
transition: box-shadow .25s, width .4s ease-in-out;
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus {
box-shadow: inset 0 .0625em .375em rgba(0, 0, 0, .4);
width: 20em;
transition: box-shadow .25s, width .4s ease-in-out;
}
input[type=text]:disabled, input[type=number]:disabled, input[type=password]:disabled, select:disabled {
background-color: #eee;
}
input[type=radio], input[type=checkbox] {
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
border-radius: .5em;
}
input[type=radio]:active, input[type=checkbox]:active {
box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4);
}
input[type=radio]:disabled, input[type=checkbox]:disabled {
background-color: #eee;
box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4);
}
And also I put my html code, only where I want to put a textview and a label on the right of the screen:
<html>
<head>
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/main-style.css">
</head>
<body>
<header>
<p>TEST</p>
</header>
<main>
<article>
<h1>Insert</h1>
<form action="index.php" method="get">
<p>Label: <input type="number" name="Label" <?php if ($estadoBD != 0) echo "disabled value=\"$LabelDB\" "; ?>/></p>
<p>Textview: <input type="number" name="Textview" <?php if ($estadoBD != 0) echo "disabled value=\"$TextviewDB\" "; ?>/></p>
<p><input type="submit" /></p>
</form>
<?php if($msg) { ?>
<p><?php echo $msg; ?></p>
<?php } ?>
<?php if($msg_estado) { ?>
<p><?php echo $msg_estado; ?></p>
<?php } ?>
</article>
</main>
<footer>
<p>TEST</p>
</footer>
</body>
</html>
I want one more textview and label, at the same line of the other two, but on the right of the screen.
Can anyone helps me? Thanks a lot!
Wrap your label and input in a div with a class like this:
<div class="label-wrapper">
<label>My left label</label>
<input type="text" />
</div>
and then copy paste it and put it below it so it looks like this:
<div class="label-container">
<div class="label-wrapper">
<label>My left label</label>
<input type="text" />
</div>
<div class="label-wrapper">
<label>My left label</label>
<input type="text" />
</div>
</div>
Now you can use CSS to put them next to each other like this:
.label-wrapper {
width: 50%;
float: left;
}
.label-container:after {
clear: both;
display: block;
content: "";
}
and then you can mixture and test things inside, like right align and such. hope this will get you underway!
Moving lablel to right
you should use style ...
put style in label like this;
<label style="margin-left:12cm";>
Related
I found this a nemorphism toggle and can´t figure out how to change the background if checked. I am aware how basic this question is. I did it several times with basic toggle checkboxes but it seems either I am confused or this design pattern is ignoring my attempts.
So far I tried different solutions as:
input[type="checkbox"]:checked {
background: red
}
or
.toggle:checked {
background: red
}
Unfortunately none of them does the job. I am aware its a basic question and thought you guys could direct me to the correct solution as I am struggling.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
You're trying to apply background on the input but the indicator class is overriding it. Why not give the property to the indicator class itself?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
background: red;
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
You don't have to put the input inside the div, you can put it before it and as long as it's in the label it will work fine. And then you can update the selectors
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
transition: background 0.3s ease;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
input[type=checkbox] +.toggle { /* Now you can select the div next to the input */
background: yellow
}
.toggle-state:checked + .toggle {
background: red;
}
.toggle-state:checked + .toggle .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="toggle">
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox]:checked ~ .indicator {
background: red;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
So I'm new to ionic and to get started I am truing to recreate a blog I had made so that it is not only accessible as a website but as a cross-platform mobile application as well. I was working on the top nav bar when I ran into a problem - the links were not clickable, just static as if were text and only seem responsive in mobile view and even then the menu cuts off the content. I have tried to post as little code as possible but have the files with me so i can add as comments if need be. Thank you in advance
I have tried moving the app-nav tag around, adding (click) which i didnt think i had to if i used routerlink. Adding a toolbar solves the cutting off problem but further eventuates the unresponsiveness as even in mobile view it is unresponsive.
//index.html
<head>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.13/css/solid.css'>
<link rel="stylesheet" href="assets/css/navstyle.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
//nav.component.html
<nav>
<div class="nav-fostrap" [ngClass]="{'visible': mobileMenu}">
<ul>
<li><a routerLink="/blogs">Home</a></li>
<li><a routerLink="">About</a></li>
<li><a routerLink="">News </a></li>
<li><a>About<span class="arrow-down"></span></a>
<ul class="dropdown">
<li><a routerLink="">News </a></li>
</ul>
</li>
<li><a routerLink="">Contact</a></li>
</ul>
</div>
<div class="nav-bg-fostrap" >
<div class="navbar-fostrap" (click)="mobileMenuExpand()"> <span></span> <span></span> <span></span> </div>
<a routerLink="" class="title-mobile">A2E</a>
</div>
</nav>
<ion-router-outlet main></ion-router-outlet>
nav.component.ts
mobileMenuExpand()
{
this.mobileMenu = !this.mobileMenu
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #F0F0F0;
font-size: 15px;
color: #666;
font-family: 'Roboto', sans-serif;
}
.content {
height: 200px;
}
a { text-decoration: none; }
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.nav-fostrap {
display: block;
margin-bottom: 15px 0;
background: #03A9F4;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 3px;
}
.nav-fostrap ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
.nav-fostrap li {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
font-size: 14;
color: #def1f0;
}
.nav-fostrap li a {
padding: 15px 20px;
font-size: 14;
color: #def1f0;
display: inline-block;
outline: 0;
font-weight: 400;
}
.nav-fostrap li:hover ul.dropdown { display: block; }
.nav-fostrap li ul.dropdown {
position: absolute;
display: none;
width: 200px;
background: #2980B9;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
padding-top: 0;
}
.nav-fostrap li ul.dropdown li {
display: block;
list-style-type: none;
}
.nav-fostrap li ul.dropdown li a {
padding: 15px 20px;
font-size: 15px;
color: #fff;
display: block;
font-weight: 400;
}
.nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }
.nav-fostrap li:hover a {
background: #2980B9;
color: #fff !important;
}
.nav-fostrap li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-fostrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #def1f0;
position: relative;
top: 15px;
right: -5px;
content: '';
}
.title-mobile {
display: none;
}
#media only screen and (max-width:900px) {
.nav-fostrap {
background: #fff;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.title-mobile {
position: fixed;
display: block;
top: 10px;
font-size: 20px;
left: 100px;
right: 100px;
text-align: center;
color: #FFF;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 50px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: #03A9F4;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin: 0;
position: absolute;
top: 0;
left: 0;
padding: 12px;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) { width: 20px; }
.navbar-fostrap span:nth-child(3) { width: 20px; }
.nav-fostrap ul { padding-top: 50px; }
.nav-fostrap li { display: block; }
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a { border-radius: 0; }
.nav-fostrap li ul.dropdown { position: relative; }
.nav-fostrap li ul.dropdown li a {
background: #2980B9 !important;
border-bottom: none;
color: #fff !important;
}
.nav-fostrap li:hover a {
background: #03A9F4;
color: #fff !important;
}
.nav-fostrap li ul.dropdown li:hover a {
background: rgba(0,0,0,.1); !important;
color: #fff !important;
}
.nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
border-top: 5px solid #505050;
position: absolute;
top: 20px;
right: 10px;
}
.cover-bg {
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#media only screen and (max-width:1199px) {
.container { width: 96%; }
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
}
//blogs.pag.html
<ion-header>
<app-nav></app-nav>
</ion-header>
<ion-content class="has-header">
<ion-list>
<app-blog-item *ngFor="let blog of blogs" [blog]='blog'></app-blog-item>
</ion-list>
</ion-content>
I am trying recreate an active navbar that works on ionic as to have a fluid mobile and web experience :< i have tried to post as little code as possible but have the files with me so i can add as comments if need be
I'm currently making a forum in school, and I'm working on a profile page. On this profile page, I want to have a couple of banners that the users can choose from. I want to make these banners the same size as the div they're in. I also want them to be centred inside the div and resize it. Is it possible to do what I have shown in the two images where the banner get's cut off when it's resized?
This is my code:
.user-pic {
width: 120px;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
float: left;
margin: 10px;
transition: .4s ease-in-out;
z-index: 2;
}
.user-pic:hover {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.user-pic-overlay {
width: 120px;
position: absolute;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
margin: 10px;
opacity: 0;
transition: .5s ease-in-out;
z-index: 3;
}
.user-pic-overlay:hover {
opacity: .8;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
width: 75%;
margin: 25px auto;
box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
height: 33vh;
margin: auto;
border: 5px solid #1b1b1b;
box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
z-index: 2;
}
.user-header-pic {
position: absolute;
z-index: -2;
margin: auto;
width: 75%;
}
.user-header-pic-overlay {
position: absolute;
margin: auto;
height: 33vh;
opacity: 0;
cursor: pointer;
transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
opacity: .8;
}
.user-header-nav {
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
text-align: right;
margin: auto;
}
.user-header-btn {
margin: 5px 5px 5px 5px;
padding: .4em .6em;
background-color: #424242;
border-radius: 2px;
font-size: 14px;
color: #f5f5f5;
cursor: pointer;
border: none;
}
.user-haeder-btn:focus {
outline: none;
}
<div class="user-header-wrap">
<div class="user-header">
<img class="user-header-pic" src="../images/header.jpg" alt="">
<img class="user-pic" src="<?php echo $ppp;?>" alt="">
<p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
<p class="prof-txt-2">Level</p>
</div>
<div class="user-header-nav">
<button class="user-header-btn">Edit Profile</button>
</div>
</div>
First Image Second Image
added
.user-header-pic {
position: relative;
z-index: -2;
margin: auto;
width: 100%;
height: 100%;
}
.user-pic {
width: 120px;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
float: left;
margin: 10px;
transition: .4s ease-in-out;
z-index: 2;
}
.user-pic:hover {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.user-pic-overlay {
width: 120px;
position: absolute;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
margin: 10px;
opacity: 0;
transition: .5s ease-in-out;
z-index: 3;
}
.user-pic-overlay:hover {
opacity: .8;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
width: 75%;
margin: 25px auto;
box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
height: 33vh;
margin: auto;
border: 5px solid #1b1b1b;
box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
z-index: 2;
}
.user-header-pic {
position: relative;
z-index: -2;
margin: auto;
width: 100%;
height: 100%;
}
.user-header-pic-overlay {
position: absolute;
margin: auto;
height: 33vh;
opacity: 0;
cursor: pointer;
transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
opacity: .8;
}
.user-header-nav {
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
text-align: right;
margin: auto;
}
.user-header-btn {
margin: 5px 5px 5px 5px;
padding: .4em .6em;
background-color: #424242;
border-radius: 2px;
font-size: 14px;
color: #f5f5f5;
cursor: pointer;
border: none;
}
.user-haeder-btn:focus {
outline: none;
}
<div class="user-header-wrap">
<div class="user-header">
<img class="user-header-pic" src="https://images.unsplash.com/photo-1553052944-763b0cbd086a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="">
<img class="user-pic" src="<?php echo $ppp;?>" alt="">
<p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
<p class="prof-txt-2">Level</p>
</div>
<div class="user-header-nav">
<button class="user-header-btn">Edit Profile</button>
</div>
</div>
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
I have a site here: http://americanbitcoinacademy.com/user-login/
As you can see the form is not yet centered.
The "username", "password", "remember me" are centered which must be text-aligned left.
I want to center the form and then text align left the username, password and the remember me label..using inspect element tool how can I do that?
Here's my CSS:
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #dd374d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
body {
background: #ecf0f1; /* fallback for old browsers */
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-heading{ display: none; }
Please help!
You can remove
text-align: center;
from your form element.
for text left in labels..
.form label{width:100%;text-align:left;}
And if you change the <div id="content" class="col-md-9" role="main"> to <div id="content" class="col-md-12" role="main"> the form will be centered.
Cheers!
remove text-align:center form .form class
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
and also remove col-md-9 class form the div having content as ID
<div id="content" class="col-md-9" role="main">
Remove text-align: center; from this class -
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
And add this CSS to the remember me checkbox width: auto;
Avoid using element level CSS specificity such as: .form input always use classes.
Read more on CSS specificity:
MDN: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
And a specificity calculator: https://specificity.keegan.st/
Remove the text-align:center from class form and change the class ub div from col-md-9 to col-md-12
<div id="content" role="main" class="col-md-12">
....
</div>
Your Updated CSS would be
.form {
position: relative;
z-index: 1;
/* text-align:center; Remove this line */
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
Change no. 1-
<div id="content" class="col-md-9" role="main"></div> to
<div id="content" class="col-md-12" role="main"></div>
Change no. 2-
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
} to
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
Change no. 3- Add the following Css-
.login-remember label{ width: 100%;}
.form .login-remember input{width: auto;}
In fact the form itself is centered inside its container <article class="single-page-content">. You simply need to give that article, or actually its parent element (i.e. the div with id=content) full width.
For left alignment inside the form just change text-align: center to left inside the CSS rule for .form
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #dd374d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
body {
background: #ecf0f1; /* fallback for old browsers */
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-heading{ display: none; }
<div id="body" >
<div class="container">
<div class="content-pad-3x">
<div class="row">
<div id="content" class="col-md-9" role="main">
<article class="single-page-content">
<div class="login-page">
<div class="form">
<form class="login-form">
<form name="loginform" id="loginform" action="http://americanbitcoinacademy.com/wp-login.php" method="post">
<p class="login-username">
<label for="user_login">Username:</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>
<p class="login-password">
<label for="user_pass">Password:</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
</p>
<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label></p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Log In" />
<input type="hidden" name="redirect_to" value="" />
</p>
</form><br />
Click here to become a full member…<br />
<br />
</form>
</div>
</div>