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>
Related
I want to make a watermark on a specific page on my project.
I write this in app.css
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../images/SystemLogo.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
and this is my blade
#extends('layouts1.index')
#section('content')
<div class="container">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="watermarked">
<div class="text-center">
<h2 class="text-center"> Appri=oval report </h2>
<form method="post" action="/student/share-approval/{{$approval->uniid}}">
#csrf
<p lang="ar" dir="rtl">
// here is the approval report
</p>
<button type="submit" class="btn btn-primary">share the report </button>
</div>
</div>
</body>
</form>
</div>
#endsection
The problem is not showing the watermark as the image I want .. the result is a default background. How can I show the image as a background?
I think your HTML is formatted incorrectly. The ending form tag and div is below the body tag.
Try this:
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://en.opensuse.org/images/4/49/Amarok-logo-small.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
<div class="watermarked">
<div class="text-center">
<h2 class="text-center">Stuff here</h2>
<form method="post" action="/#">
<p>
A Form here
</p>
<button type="submit" class="btn btn-primary">Button</button>
</form>
</div>
</div>
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 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%;
}
I was trying to make a pop-up with a signup form.
I have this script that works fine, if it's tested with a single page. But If I use it with
my wordpress theme, i placed it in the header.php, the submit button doesn't appear and email textbox is shorter.
Image 1: It's OK. http://sdrv.ms/Ysgfmw
Image 2: Script in the wordpress template. http://sdrv.ms/10a3PpU
Does anyone know why this is happening? Thanks for the help.
Note: I omitted the complete urls.
<html>
<head>
<!--*************** INICIO JAVASCRIPT/CSS EVILPOPUP ************-->
<script type="text/javascript" src="......../evilpopup.js"></script>
<link href="........./classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
display: none;
z-index: 10000;
}
#mc_embed_signup form
{
position: fixed;
top: 10%;
left: 50%;
width: 50%;
margin-left: -25%;
font: normal 100% Helvetica,Arial,sans-serif;
font-size: 14px;
border-radius: 4px;
border: none;
padding: 10px 20px;
background-color: #fff;
color: #000;
text-align: left;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
#mc_embed_signup a.mc_embed_close
{
background: transparent url(http://downloads.mailchimp.com/img/closebox.png) no-repeat;
display: block;
height: 30px;
width: 30px;
text-indent: -999em;
position: absolute;
top: 0px;
right: 0px;
display: none;
}
</style>
<!--*************** FIN JAVASCRIPT/CSS EVILPOPUP ************-->
</head>
<body>
<h1>Hola</h1>
<!-- Begin EVILPOPUP MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action=".................us5.list-manage2.com/subscribe/post?u=3e03d112fc6fe9e6e2d643fa4&id=28e366ba2d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h2>Gratis $3.000 en tu primera compra</h2>
<div class="indicates-required"><span class="asterisk">*</span> indica requerido</div>
<div class="mc-field-group">
<label for="mce-EMAIL">
Email <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Nombre </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
Cerrar
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none"></div>
<div class="response" id="mce-success-response" style="display: none"></div>
</div>
<div class="clear">
<input type="submit" value="Suscribeme" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End EVILPOPUP mc_embed_signup-->
</body>
</html>
Change the max-height
#mc_embed_signup form{
position:fixed;
top:10%;
left:50%;
width:50%;
margin-left:-25%;
font:normal 100% Helvetica,Arial,sans-serif;
font-size:14px;
border-radius:4px;
border:none; padding:10px 20px;
background-color:#fff;
color:#000;
text-align:left;
max-height:500px;
overflow-y:auto;
overflow-x:hidden;
}
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.