I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera
Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
Related
How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.
HTML & CSS
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.registerbox-front ::placeholder {
padding-left: 10px;
}
.box-firstline, .box-secondline {
margin-top: 10px
}
<body>
<div class="registerbox">
<div class="inner-registerbox">
<div class="registerbox-front">
<h2>BORANG PENDAFTARAN MURID</h2>
<form>
<section>
<div class="box-firstline">
<div style="float:left;margin-right:25px;">
<label for="idmurid">ID Murid</label> <br />
<input type="text" name="idmurid" class="input-box2" placeholder="ID Murid" required>
</div>
<div style="float:left;">
<label for="namamurid">Nama Murid</label> <br />
<input type="text" name="namamurid" class="input-box3" placeholder="Nama Murid" required>
</div>
</div>
<br style="clear:both;" />
</section>
<div class="box-secondline">
<div style="float:left;margin-right:25px;">
<label for="namakelas">Nama Kelas</label> <br />
<input type="text" name="namakelas" class="input-box2" placeholder="Nama Kelas" required>
</div>
<div style="float:left;">
<label for="katalaluan_murid">Kata Laluan</label> <br />
<input type="password" name="katalaluan_murid" class="input-box3" placeholder="Katalaluan" required>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
I took the code you posted, removed the ::placeholder padding and then added
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
And it adjusted the the text to match the placeholder.
Here is the full CSS:
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.box-firstline, .box-secondline {
margin-top: 10px;
}
I am trying to build a Dual Step Slider using HTML and CSS alone without any JQuery. It is working fine in Chrome and Mozilla, But in IE11, it is not registering the click inside first input element.
I designed the slider by using position:absolute and made two html input sliders on top of each other. In IE, i could click and drag on Second Input Elemenr only.
.slider {
-webkit-appearance: none;
width: 100%;
//height: 10px;
position: absolute;
//background: #f3f3f3;
outline: none;
border-radius: 8px;
}
.slider input {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 25%;
top: 15px;
width: 50%;
outline: none;
height: 18px;
margin: 0;
padding: 0;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: #E6E6E6;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
//border: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
border: 1px solid #3972D6;
margin-top: -4px;
cursor: pointer;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #e6e6e6;
border: 2px solid #cdcdcd;
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #ea4550;
pointer-events: all;
position: relative;
z-index: 10;
-moz-appearance: none;
}
.slider input::-moz-range-track {
position: relative;
z-index: -1;
border: 0;
}
.slider input:last-of-type::-moz-range-track {
-moz-appearance: none;
background: none transparent;
border: 0;
}
.slider input[type="range"]::-moz-focus-outer {
border: 0;
}
.flex-next {
display: flex;
justify-content: flex-start;
}
.dual-slider-container {
position: relative;
width: 100%;
}
.dual-slider-text-left {
position: relative;
bottom: 12px;
right: 8px;
.text-style {
color: #303030;
font-size: 20px;
font-weight: 600;
text-align: right;
}
.text2 {
text-align: right;
font-size: 14px;
}
}
.dual-slider-text-right {
position: relative;
bottom: 12px;
left: 8px;
.text-style {
color: #303030;
font-size: 20px;
font-weight: 600;
text-align: left;
}
.text2 {
text-align: left;
font-size: 14px;
}
}
.pointer {
cursor: pointer;
}
//Internet Explorer Support
input[type=range]::-ms-track {
width: 100%;
height: 8px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
#lower::-ms-fill-lower {
background: #E6E6E6;
border-radius: 10px;
}
#lower::-ms-fill-upper {
background: #E6E6E6;
border-radius: 10px;
}
#higher::-ms-fill-lower {
background: transparent;
border-radius: 10px;
}
#higher::-ms-fill-upper {
background: transparent;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
//border: none;
height: 18px;
width: 18px;
border-radius: 50%;
background: white;
border: 1px solid #3972D6;
//cursor: hand;
}
input[type=range]::-ms-tooltip {
display: none;
}
<div style="padding:8px" class="col-12 row m-0">
<div class="dual-slider-text-left col-2 p-0">
<div class="text-style">
{{minValue}}
</div>
<div class="text2">{{minValueText}}</div>
</div>
<div class="col-8 p-0">
<div class="dual-slider-container">
<input (click)="getSliderOneValue($event)" type="range" min="{{minValue}}" max="{{maxValue}}" step="1"
value="{{sliderOneValue}}"
class="slider" [disabled]="disabled" [ngClass]="{'pointer' : !disabled}"
id="lower">
</div>
<div class="dual-slider-container">
<input (click)="getSliderTwoValue($event)" type="range" min="{{minValue}}" max="{{maxValue}}" step="1"
value="{{sliderTwoValue}}"
class="slider" [disabled]="disabled" [ngClass]="{'pointer' : !disabled}"
id="higher">
</div>
</div>
<div class="dual-slider-text-right col-2 p-0">
<div class="text-style">{{maxValue}}</div>
<div class="text2">{{maxValueText}}</div>
</div>
</div>
It seems that you can only reach the second slider if they're lapped in IE. You could use two slides side by side as a workaround. I make a demo and you could refer to it.
body {
min-height: 100px;
}
div {
display: flex;
}
input {
flex: 1 0 0;
min-width: 0;
padding: 0;
}
input::-webkit-slider-thumb {
margin: 0;
padding: 0;
}
output {
display: block;
text-align: center;
margin-top: 3px;
color: gray;
}
<div>
<input id="a" type="range" min="0" max="10" value="0" />
<input id="b" type="range" min="11" max="20" value="20" />
</div>
<output></output>
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I have a little question about CSS and image buttons. I searched and tryed many options but none of them worked for me.
I need to link my image button in the CSS style. When you push the image a new webpage opens where you can take a picture of yourself. But my image stays at the same position no matter what I change.
If I use the code that is written on How to link an image and target a new window then my image stays at the bottom.
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 80px 40px;
width: 350px;
height: 500px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
.user {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 65px);
}
button.imgbtn1 {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
h2 {
margin: 0;
padding: 0 0 20px;
color: deepskyblue;
text-align: center;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="submit"]:hover {
background: #deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
<div class="loginBox">
<img src="user.png" class="user">
<h2>Meld u aan</h2>
<form>
<p>Naam</p>
<input type="text" name="" placeholder="Naam">
<p>Voornaam</p>
<input type="text" name="" placeholder="Voornaam">
<p>Bedrijf</p>
<input type="text" name="" placeholder="Bedrijf">
<p>Doel
<p>
<input type="text" name="" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
<img src="foto.png" />
</form>
</div>
</body>
</html>
After playing around for a while I have found something that works.
html:
<center><div id = "imgPositioning">
<img id = "imgOne" class = "user" src="user.png" />
<img src="foto.png" id = "imgTwo" class="user"/>
</div></center>
css:
#imgPositioning{
display:inline;
}
#imgTwo{
height:100px;
width:200px;
}
#imgOne{
height:50px;
width:100px;
float:center;
}
The answer. (found it with help from a friend). Now I need to do a bit of restyling.
Thanks for the answers! ;)
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.user-picture {
position: absolute;
top: -25px;
width: 100%;
}
.user-picture-box {
max-width: 150px;
height: 150px;
margin: 0 auto;
position: center;
}
.user-picture-image {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 70px);
}
.user-create-picture {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.user-create-picture ('img') {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.login-box {
display: block;
position: relative;
background-color: rgba(0, 0, 0, .5);
margin: 100px auto 0px auto;
max-width: 350px;
}
.login-form {
padding: 80px 20px 20px 20px;
}
.login-box h2 {
color: deepskyblue;
text-align: center;
}
.login-box label {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.login-box input {
width: 100%;
}
.login-box input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
margin-bottom: 20px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
background: deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="login-box">
<div class="user-picture">
<div class="user-picture-box">
<img src="user.png" class="user-picture-image">
<a href="http://localhost/Form/foto.html" class="user-create-picture">
<img src="foto.png" height="70px" width="70px">
</a>
</div>
</div>
<div class="login-form">
<h2>Meld u aan</h2>
<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" placeholder="Naam">
<label for="voornaam">Voornaam</label>
<input type="text" id="voornaam" name="voornaam" placeholder="Voornaam">
<label for="bedrijf">Bedrijf</label>
<input type="text" id="bedrijf" name="bedrijf" placeholder="Bedrijf">
<label for="doel">Doel</label>
<input type="text" id="doel" name="doel" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
</form>
</div>
</div>
</body>
</html>
end result picture
What i am doing is that in search box when user enter a search term, i display a close button ('x' character to be specific, embedded as content after reset button) to clear the contents of search box.
It works fine in both Chrome and IE but not in firefox.
Any kind of help would be highly appreciated.
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>
This code should help you
.search-box,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box
{
width:300px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
position: absolute;
top:19px;
left:305px;
z-index:1;
padding: 1px 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</form>
</div>
NOTE : set your .search-box width and according to it set left of your .close-icon
Try this code: Hope this solve your problem. Adjust "outer_box" class for width.
<style>
.search-box, .search-wrapper {
padding: 10px;
box-sizing: border-box;
}
.search-box {
position:relative;
width:100%;
}
.outer_boxs{
position:relative;
width:60%;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
position: absolute;
right:5px;
top: 10px;
background:#f2f2f2;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
</style>
<div class="search-wrapper">
<form>
<div class="outer_boxs" >
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</div>
</form>
</div>