Current condition of site
I want to make sure that the choose file button should be positioned at the upload image position. I am new to HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<div class="class">Upload Image</div>
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>
</body>
</html>
You can put the "choose file button" inside the "upload image" div. You can then position them to achieve what you want. Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
<style type="text/css">
.class {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#myFile {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<form action="/action_page.php">
<div class="class">
Upload Image
<input type="file" id="myFile" name="filename">
</div>
<input type="submit">
</form>
</body>
</html>
Add the appropriate css attribute to the class fullscreen table-cell valign-middle text-centerwhich is having a input element.
body {
margin : 0px;
}
.fullscreen {
width : 100vw;
height : 100vh;
}
.table-cell {
display : table-cell;
border: 1px solid red;
position: relative;
width : 200px;
height :200px;
display:flex;
align-items: center;
}
.valign-middle {
vertical-align : middle;
}
.text-center {
text-align : center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<div class="fullscreen table-cell valign-middle text-center">
<input type="file" id="myFile" name="filename"></div>
<form action="/action_page.php">
<input type="submit">
</form>
</body>
</html>
Related
I am using Telerik to generate a textbox. Now I would like to equip this with an animation.
The problem is that Telerik wraps a span around the input, so I don't know how to change the hr element when the input is focused.
My Code:
span.inputanimation {
width: 100%;
}
// Here is what i dont know how to do !
span.inputanimation > .input > input:focus hr.underline {
width: 100%;
}
hr.underline {
width: 0%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr class="underline">
</span>
</body>
</html>
I removed some of the CSS classes and HTML Properties so it is better to look at.
My Telerik Code:
<span class="inputanimation">
<TelerikTextBox #bind-Value="Value"
Id="#Id"
PlaceHolder="#Label"
Class="input">
</TelerikTextBox>
<hr class="underline" >
</span>
Looking at various posts on hover and focus, it seems that the two elements have to be related, such as child or sibling. Which would be easy if you weren't using Telerik.
One solution is to use javascript. I am using ids to show the concept.
let search = document.getElementById('Vorname');
let ruler = document.getElementById('Ruler');
search.onfocus = function(){ ruler.style.width = '100%'; }
span.inputanimation {
width: 100%;
}
hr.underline {
width: 0%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr id="Ruler" class="underline">
</span>
</body>
</html>
Another solution is to use focus-within
span.inputanimation {
width: 100%;
}
span.inputanimation:focus-within hr.underline {
width: 100%;;
}
hr.underline {
width: 10%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr id='Ruler' class="underline">
</span>
</body>
</html>
I'm trying to create a square whereas if the square gets clicked the background color of body element gets changed. But the code doesn't seem to work.
Here are the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}
You will need to use JavaScript to do this in the following way:
let sq = document.querySelector('.square');
sq.addEventListener('focus', ()=>{
document.body.style.backgroundColor = 'yellow';
});
.square {
width: 100px;
height: 100px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>
HERE WE GO!
use this in script:
function myFunction() {
document.body.style.backgroundColor= "yellow";
It will change pre-decided color to yellow
do not forget to call this fuction via button or link
customize button/link as you want
Check sample code below ---- Run snippet code
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>
As #AHaworth pointed out it's not possible to go up in the hierarchy to select the parent element.
Probably the best solution is to use JavaScript as answered by Master Yushi.
However, there's sort of a CSS-only solution if you change a layout a bit. Using the general sibling combinator it's possible to select a sibling element if it comes somewhere after the .square in HTML. So you can add a new div to wrap the entire page inside it. And make .square position: absolute; and position it wherever you need it. It might or might not work for you depending on the page layout you need.
Here's a demo:
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>
Also, one way of doing it is through JQuery. Firstly add JQuery plugin to your HTML code and then add this code to your script.
$(".square").click(function(){
$("body").css("background-color", "yellow")
});
Is this something you wanted? I have added [onclick="document.body.style.backgroundColor ='yellow'] after the body tag. I hope it works for you!
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>
I have the below HTML. For some reason the page is being rendered with the head as text like:
Document
* { display: block; width: 300px; } textarea { height: 300px; }
My Form
I've been searching for an explanation and think it could be because there is an error in the code in the head tag, so the never gets called and it is treated as part of the body, but I can't see any problem with it and VSCode doesn't show any errors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
You can't use display, width and some more properties in "* (universal selector)". Replace * with body selector, it will work :)
I run your code on my system and the header is coming out bold just like it should... maybe you have to clear your browser cookies or try to open the code on an incognito window
.......
then for the
Document
{ display: block; width: 300px; } textarea { height: 300px; }
that is showing, i guess its an error so i removed the "*" and everything works fine... the working code is below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
{
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
I want to design a form input with icon inside of it.
when I click on this form element(:focus) then that icon is getting disappear and I want icon to be visible all the times.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,body {height: 100%;}
input {
width: 400px ;
height: 4em;
border: none ;
padding: 1em 0 1em 2em ;
color: black;
background: url('https://www.bluebadgeinsurance.com.au/wp-content/uploads/multi-user-icon.png') left center no-repeat ;
background-size: 30px 30px ;
}
</style>
</head>
<body>
<form name="myForm">
<input type="text" name="username" placeholder="username">
</form>
<script>
</script>
</body>
</html>
looks like its a problem with 'live server' from vs-code and without live server there is no problem.
I'm a total newbie to coding, just trying to create a circle for a course, but it's not working. Can someone help and suggest what I'm doing wrong?
<!doctype html>
<html>
<head>
<title>JavaScript Lesson</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle = {width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}
</style>
</head>
<body>
<div id="circle"> </div>
</body>
</html>
Everything is fine, except that = in <style> tags. Just remove that.
#circle {width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}