I have divided an html page into four sections. I have created four buttons inside it which contain images. I also want text to be displayed at the center of each button. But due to the images the texts are moving below the button. Please tell me how to achieve this.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
}
button img {
width: 100%;
height: 100%;
}
button:hover {
opacity: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nature</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">Himalaya</button>
<button><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<button><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<button><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<script src="script.js"></script>
</body>
</html>
Use background-image: url('https://someurl.com');
instead of placing the image inside the button tag.
See: How to add background image for input type="button"?
You can use the CSS property background-image to set the background of the image for a css property, and you can use your text-align to center the text:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
}
button:hover {
opacity: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nature</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button style="background-image: url('https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')">Himalaya</button>
<button style="background-image: url('https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')"></button>
<button style="background-image: url('https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>
<button style="background-image: url('https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>
<script src="script.js"></script>
</body>
2 possibiities:
1.) Use an element with position: absolute for the text
or
2.) Use the images as background-images
As mentioned above, you could use background-image instead of img elements. But on hover, opacity:0.4 will apply to both image and text. If you want to keep the text at opacity:1 on hover, wrap up the text in a span and position it absolute center it, and apply opacity on hover to img only:
HTML:
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>
CSS:
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
position: relative;
}
button img {
width: 100%;
height: 100%;
}
button span {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
button:hover img {
opacity: 0.4;
}
Example: https://jsfiddle.net/1q879w3p/
Related
I have been trying to fit an image inside of the text input to the left, i have tried using float, i have tried making it a div and wrapping it, i have tried making the background image to the image, and it either breaks it or doesn't make an difference. Not sure what to do.
body {
background-color: #141c2f;
}
.search {
background-color: #1d2c4c;
border: none;
border-radius: 10px;
text-align: center;
width: 500px;
height: 50px;
text-decoration: none;
}
.infoBox {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<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">
<link rel="stylesheet" href="./static/css/app.css">
<title>Github User Search App</title>
</head>
<body>
<div class="infoBox">
<input class="search" type="text" placeholder="Search..">
</div>
</body>
</html>
Assuming you want to put the image above input to the left (if you just want them side by side, use display: flex in class .infoBox). So You can use :before to get that, add this code to your:
.infoBox {
position: relative;
}
.infoBox:before {
content: '';
background: url('your image url') center center no-repeat;
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 10px 0 0 10px;
}
.search {
padding-left: 65px;
}
All attributes can be modify to your liking.
I created a vertical line on my webpage, and want the line to grow/shrink as the user scrolls by it. Right now the line is just staying the same height the entire time. If you look at this website, https://robbowen.digital/ a good example of what I would like is shown. I have been looking into parallax but can't quite seem to figure it out. Can anyone help? Is this something simple that can be implemented? Here is my codepen https://codepen.io/atrain42/pen/OJQLPqx
HTML:
<!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="container">
<div class="vertical"></div>
<header>
<h1>hello</h1>
</header>
<section>
<h1>section 01</h1>
</section>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
header {
position: relative;
width: 100vw;
height: 100vh;
background-color: aquamarine;
z-index: 1;
}
header h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
section {
position: relative;
width: 100vw;
height: 100vh;
background-color: rgb(235, 198, 245);
z-index: 1;
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
.container {
position: relative;
z-index: 2;
}
.vertical {
position: absolute;
top: 30%;
left: 20%;
height: 40rem;
z-index: 2;
color: black;
border-right: 2px solid black;
background-attachment: fixed;
}
You can do so adding an event listener to scroll and set the height of div according to the scroll value, take a look:
const verticalLine = document.getElementById("vertical")
document.addEventListener('scroll', function(e) {
// use division by two to limit the height size
scrollPosition = window.scrollY / 2 ;
// set the current scroll position as the height of div
verticalLine.style.height = `${lastKnownScrollPosition}px`
});
See the example on codepen
I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.
So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src = "images/maps.png" alt = "Maps" id="maps">
<img src="images/zug.png" alt= "Zug" id="train">
<h1>Meine Herausforderung</h1>
</body>
</html>
And the css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#maps {
width: 100%;
position: absolute;
}
#train {
position: absolute;
margin-left: 55%;
margin-top: 10%;
width: 3%;
}
Thanks for any help and sorry for my english.
Would be very happy to help you, if you provide more insight about the problem.
From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.
Please check this helps you
const $train = $('#train')
document.addEventListener('scroll', function (event) {
$train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
overscroll: scroll;
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#map-container {
width: 100%;
height: 100vh;
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
background-attachment: fixed;
background-size: cover;
}
#map, .inner-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow:scroll;
}
.inner-container {
background: transparent;
z-index: 2;
}
#train {
width:50px;
height:50px;
top: 20%;
position: absolute;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map-container">
<!-- <img src = "" id="maps"> -->
<div class="inner-container">
<img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
</div>
</div>
<h1>Meine Herausforderung</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I want a button that splits the screen when clicked. The button is on a html page called PF1.1.html and when the button is click i want it to spilt the screen but the new screen created to be a page named PF1.html and so on. No matter how many times u click the button it keeps creating split screen pages with the PF1.html.
This is the split screen test: https://jsfiddle.net/v1p5h9g7/1/
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: white;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
<div class="split left">
<div class="centered">
<h2>Don't know how to make it open PF1.HTML and how to resize it after</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<p>Test</p>
</div>
</div>
Here it is, i think you want something like this - here is the code mentioned and also you can check out this
<!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>Split screen on click</title>
<!--added text to remove the answer-->
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
width: 100%;
/* height: auto; */
height: auto;
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
#child{
width: 200px;
height: 200px;
border: 2px solid #000000;
border-radius: 3px;
}
#clicker{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
<button id='clicker' onclick="spliter()">Click me to create a new element</button>
<script>
function spliter(){
var sec = document.createElement("DIV");
sec.setAttribute("id", "child");
document.getElementById("container").appendChild(sec);
}
</script>
</body>
</html>
Im trying to have resizable/draggable objects contained inside a div with overflow : auto. (so that the objects stay on page like div and scroll up and down with the div)
To do that, I must set the position of the item to relative; unfortunately that will affect things when I resize because the resizing affects all previous objects.
HERE IS A SAMPLE I MADE FOR TESTING:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery-ui.css">
<style>
.dropZone {
width: 750px;
height: 750px;
padding: 0;
overflow:hidden;
margin: 0;
background: #aaa;
}
.forCanvas {
height: 500px;
width: 500px;
overflow: hidden;
overflow: auto;
padding: 20px;
background: white;
border: 1px solid #d9d9d9;
border-radius: 5px;
}
.block {
width: 80px;
height: 60px;
background: #d9d9d9;
box-sizing:border-box;
position: relative;
align-content: center;
overflow: hidden;
}
.block h3 {
text-align: center;
margin: 0;
font-size: 15px;
background: #d9d9d9;
border: none;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="forCanvas" >
<div class='block'><h3>Object1</h3></div>
<div class='block'><h3>Object2</h3></div>
<div class='block'><h3>Object3</h3></div>
<div class="dropZone ">
</div>
</div>
<script>
$(function(){
$(".block")
.draggable()
.resizable();
});
</script>
</body>
</html>
You also need to have the jquery-ui.css to see the resizing handles:
This is the link to download the jquery zip that has the jquery.css file
I know that setting the .block position to absolute will fix the resizing problem, but they won't stay on div when I scroll.