Good morning.
I am very new to CSS and been reading up on a few topics but completely stumped when I am trying to keep a form submit button over a BG image. As soon as I zoom on the page, the buttons move out of position.
Here is my CSS code for the BG:
body
{
background-image:url('../pics/BGs/FrontBG.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background size: auto;
}
.bannerlogin1
{
position: relative;
top: 50;
left: 50;
}
.bannerlogin2
{
position: absolute;
top: 5px;
left: 400px;
}
.bannerlogin3
{
position: absolute;
top: 5px;
left: 800px;
}
.bannerlogin4
{
position: absolute;
top: 5px;
left: 1250px;
}
And the code from my welcome page:
<BODY class="body" bgcolor="black">
<form action="../Nightlife.php">
<input class="bannerlogin1" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
<form action="../Portrait.php">
<input class="bannerlogin2" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
<form action="../Contact.php">
<input class="bannerlogin3" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
<form action="../Client.php">
<input class="bannerlogin4" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
Thank you for any help :). I have a feeling I may be doing something fundamentally daft but have read a few things from w3 schools and the like and can not seem to find a concise answer to solve this.
The form needs to have a relative positioning. Otherwise when you zoom in, the input's will be positioned to the body of the page:
form{position:relative;}
Also, you should move your inline CSS of your submit buttons to your styles block:
input["submit"]{width: 250px; height: 100px; background-color:transparent;}
NOTE: ["submit"] is a CSS3 only attribute.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
i have been trying for a while now to figure out how to change the opacity of a login panel that is being called in using a php function. and in css i have tryed this in css
.container
{
background: #FFF;
opacity: 0.6;
width: 320px;
height: 500px;
align-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 30px 30px;
transition: 0.3s;
}
.container:hover
{
opacity: initial;
transition: 0.3s;
}
.container input[type="text"]:focus .container
{
opacity: initial;
transition: 0.3s;
}
to change the opacity of the .container element when the input is focused on
but it dosnt work is there any way to fix this
btw the input is in a form like this
<div class="container">
<form action="validatelogin.php" method="POST">
<p>Username:</p>
<input type="text" name="usernameinput" id="usernameinput" />
<p>Password:</p>
<input type="Password" name="passwordinput" id="passwordinput" />
<br />
<div style="margin-top:10px;">
<input type="submit" value="Login" />
<button type="button" onclick="location.href=\"register.html\";">Register</button>
</div>
</form>
</div>
https://jsfiddle.net/97py6vgj/23/ is my solution. I just used jQuery when I detected a mousedown on the container. To change the css, I used the .css() method. Then, I did the trick where you detect a click outside of the element, and made it back to regular. You can edit this accordingly.
I will add the snippet here.
var stay = 0;
$('input').mousedown(function() {
$(".container").css("opacity", "initial");
stay = 1;
});
$(window).mousedown(function () {
$('.container').css("opacity", "0.6")
stay = 0;
});
$('.container').mousedown(function (event) {
event.stopPropagation();
});
$('.container').mouseenter(function() {
$(this).css("opacity", "initial");
$(this).css("transition", "0.3s");
});
$('.container').mouseleave(function() {
if(stay == 0) {
$(this).css("opacity", "0.6");
$(this).css("transition", "0.3s");
} else {$(this).css("opacity", "initial");}
});
.container
{
background: #FFF;
opacity: 0.6;
width: 320px;
height: 500px;
align-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 30px 30px;
transition: 0.3s;
}
.container input[type="text"]:focus .container
{
opacity: initial;
transition: 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form action="validatelogin.php" method="POST">
<p>Username:</p>
<input type="text" name="usernameinput" id="usernameinput" />
<p>Password:</p>
<input type="Password" name="passwordinput" id="passwordinput" />
<br />
<div style="margin-top:10px;">
<input type="submit" value="Login" />
<button type="button" onclick="location.href=\'register.html\';">Register</button>
</div>
</form>
</div>
I'm not sure if this is what you wanted but here you are.
I would like to create a slider diagram like this for my webpage to display results:
How can I do this provided I have a maximum and minimum and the value I would like to plot? Prefereably, I would like to create it on-the-fly as I generate the result page using html/javascript/php.
EDIT:
I can see that my question was confusing. I do not want to create a slider (like an input to a form form) but an output diagram that has a vertical line at a fixed value with a colour gradient background.
Thank you for any answers!
<html>
<style>
#slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
</style>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
</body>
</html>
here you have a slider, enjoy!
Since you want min-max value you need to create 2 range slider.
Check snippet
below.
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
<label>Min.</label>
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<label>Max.</label>
<input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
<span class="range-slider__value">0</span>
</div>
And If you want save space you can create 1 range slider with 2 control slider.
Create a html for range slider then apply some jquery.
Please check snippet below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
Then if you want to submit data to db you need to create form for this
Reference for range slider : https://www.w3schools.com/howto/howto_js_rangeslider.asp
I hope this answer can help.
At last, I've got it. Just HTML and CSS (and PHP if I want to be able to dynamically assign the vertical line by using style="left:x%")
.grad {
background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75));
width: 100px;
height: 15px;
border-radius: 24px;
border-color: #446e9b;
border-width: 1px;
}
.vertical-line {
width: 1px;
height: 15px;
border-left: 2px solid #446e9b;
position: relative;
top: 0;
background: none;
}
.tick {
width: 1px;
height: 5px;
border-left: 1px solid #999999;
position: relative;
top: 0;
background: none;
}
.bottom-tick {
margin-top: -5px;
}
.top-tick{
margin-top: -5px;
}
.inner10{
z-index: 10;
}
.inner2{
z-index: 2;
left: 20%;
margin-top: -15px;
}
.inner3{
z-index: 3;
left: 40%;
}
.inner4{
z-index: 4;
left: 60%;
}
.inner5{
z-index: 5;
left: 80%;
}
.inner6{
z-index: 6;
left: 20%;
}
.inner7{
z-index: 7;
left: 40%;
}
.inner8{
z-index: 8;
left: 60%;
}
.inner9{
z-index: 9;
left: 80%;
}
<div class="grad">
<div class='vertical-line inner10' style="left:35%"></div>
<div class='tick inner6 bottom-tick'></div>
<div class='tick inner7 bottom-tick'></div>
<div class='tick inner8 bottom-tick'></div>
<div class='tick inner9 bottom-tick'></div>
<div class='tick inner2'></div>
<div class='tick inner3 top-tick'></div>
<div class='tick inner4 top-tick'></div>
<div class='tick inner5 top-tick'></div>
</div>
I wanna have 3 clickable icons in textbox
can someone support me with this
I found this code for a single clickable icon
I tried more icons in it but is not working
#form1 div {
position: relative;
width: 400px;
padding: 5px;
border: 1px solid #000;
overflow: hidden
}
#form1 label {
float: left;
text-align: right;
width: 80px;
padding: 0 20px;
}
#form1 input {
width: 200px;
padding: 5px 40px 5px 5px;
float: left;
}
#form1 a {
float: left;
margin: 2px 0 0 -32px;
text-decoration: none;
width: 30px;
height: 25px;
background: transparant;
position: relative;
z-index: 99;
}
<form id="form1" method="post" action="">
<div>
<label for="text">Enter text:</label>
<input type="text" name="text" id="text" />
<a href="http://www.pmob.co.uk"><img src="/user/icos/6.gif" border="none">
</a>
</div>
</form>
How about this???
sample screenshot
<form id="form1" method="post" action="">
<div>
<label for="text">Enter text:</label>
<input type="text" name="text" id="text" />
<a href="http://www.url.com"><img src="/folder/img/name.png" height="20" width="20">
</a>
</div>
<input type="submit" value="submit"/>
</form>
You can expand from here, take a look at the picture.... if thats what you want
I know how to put a picture in one checkbox (via css)
But this example:
I want to put Checkboxes into the picture at every number exactly at this position. The checkboxes can also be next to the picture but at the exact positions.
How we do this ?
Thank you for your help
You want to position a checkbox in an absolute position? You can use the absolute in css:
div.container {
position: relative;
}
.chk1 {
position: absolute;
left: 50px;
top: 50px;
}
.chk2 {
position: absolute;
left: 65px;
top: 65px;
}
.chk3 {
position: absolute;
left: 80px;
top: 80px;
}
<div class="container">
<img src="https://i.stack.imgur.com/aS3WP.jpg" />
<input type="checkbox" class="chk1" />
<input type="checkbox" class="chk2" />
<input type="checkbox" class="chk3" />
</div>
You can change the left and top values to set them in the exact correct place you want.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.pic{
background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat;
width:242px;
height:197px;
position: relative;
}
.poin1{
left: 165px;
bottom:50px;
position: absolute;
}
.poin2{
left: 165px;
bottom:90px;
position: absolute;
}
.poin3{
left: 155px;
bottom:125px;
position: absolute;
}
.poin4{
left: 180px;
bottom:122px;
position: absolute;
}
</style>
</head>
<body>
<div class="pic">
<input type="checkbox" class="poin1">
<input type="checkbox" class="poin2">
<input type="checkbox" class="poin3">
<input type="checkbox" class="poin4">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.pic{
background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat;
width:242px;
height:197px;
position: relative;
}
.poin1{
left: 165px;
bottom:50px;
position: absolute;
}
.poin2{
left: 165px;
bottom:90px;
position: absolute;
}
.poin3{
left: 155px;
bottom:125px;
position: absolute;
}
.poin4{
left: 180px;
bottom:122px;
position: absolute;
}
</style>
</head>
<body>
<div class="pic">
<input type="checkbox" class="poin1">
<input type="checkbox" class="poin2">
<input type="checkbox" class="poin3">
<input type="checkbox" class="poin4">
</div>
</body>
</html>
I have a simple PHP website, that uses PHP only to include another files in index.php, so you may consider it uses HTML only.
The problem is that when viewing a one page of the site in my laptop, it seems to display normally, while viewing it from my smartphone or PC makes it very strange.
Here is the link: strasbourgmeetings.org/rigaCloud/login: you will find two-color page there with a semi-transparent login form in the middle. Well the problem is that only my laptop displays it in the middle, but my PC and other devices are not.
Yes, I know there is a horrible CSS code, but, anyway, I would highly appreciate your help to place this block in the middle.
P.S.: I thought that top: 50%; left: 50% and margin: -25% 0 0 -25% will make it centered, but...
That is the HTML I use:
<div class="white"></div>
<div class="blue"></div>
<div class="heraldry"></div>
<!--</div>-->
<section class="container">
<div class="login">
<div class="loginOpacity"></div>
<h1>Login to RigaCloud</h1>
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>
<!--<div class="login-help">-->
<!--<p>Forgot your password? Click here to reset it.</p>-->
<!--</div>-->
</section>
.white {
position: absolute;
top: 0;
width: 100%;
height: 50%;
}
.blue {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
}
.heraldry {
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 428px;
margin: -214px 0 0 -364px;
}
.container {
margin: 80px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.containerOpacity {
margin: 90px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.login {
position: absolute;
left: 50%;
top: 50%;
//margin: 0 auto;
margin: 0 auto 0 -25%;
padding: 20px 20px 20px;
width: 310px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
.loginOpacity {
background: #000;
position: absolute;
width: 310px;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: 0 auto;
padding: 20px 20px 20px;
}
Using auto for the left and right-margins will centre an element within its parent (together with other suitable css rules). However, your whole login form is within a section <section class="container"> which is absolutely positioned. You should concentrate on centring this container element, which will probably require removing its absolute positioning.
BTW Your login is also not centred if you reduce your browser's width on your laptop.
Give it a specific width and do margin: 0 auto;
This is my way of centering an element with no specific width.
You can use this method for text, images, buttons etc!
/* The HTML */
<div class="container">
<div class="content"></div>
</div>
/* The CSS */
.container {
float: left;
position: relative;
left: 50%;
}
.content {
float: left;
position: relative;
left: -50%;
}