I am trying to create a website that scrolls horizontally with a fixed character in the centre, similar to http://www.rleonardi.com/interactive-resume/.
When trying to change the css to resize the images it doesnt affect the website and I dont know if I need to use the position:fixed to fix the character in the centre.
background
floor
character
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Your title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background>
<character><img src="Photos/Character.png" alt= "Background image"/> </character>
<div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div>
</body>
and css:
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
For a complex project like this you're really going to have to wrap your head around the positioning of elements and how fixed/relative and absolute positioning work. This should set you on the right track. In this case I used chrome inspector to have a look at the example that you are trying to replicate and I can see that the character has position: absolute. Here's some css with the character resized. Hope it helps!
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
background img {
width: 100%;
}
floor img {
width: 100%;
position: fixed;
bottom: 0;
}
character img {
position: absolute;
width: 200px;
bottom: 140px;
left: calc(50% - 100px);
}
Related
i am trying the image to cover full page.
Vertical scroll : allowed
Horizontal scrolling : disallowed
Image : image must show full page without leaving border and responsive based on device size.
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="example.png" />
</body>
</html>
The issues is, it leaving a blank space in all 4 side of the screen. How to fix this?
It may Help you :
*{
padding:0px;
margin:0px;
}
img{
width:100%;
object-fit:cover;
max-width: 100%;
}
You can use the background image property
Check here - W3schools
You have to reset the browser added styles to the body tag by removing the padding and margin from it, feel free to add this at the top of your styles:
body {
padding: 0;
margin: 0;
}
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
If you want the image to cover full page, better use background-image and background-size cover, using this way your aspect ratio is also maintained
html, body {
height: 100%;
}
body {
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
Try this
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: 100%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
</body>
</html>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
I am making a topnav and I don't want space between the body and the div element.
I want to look like that. But the thing is, I do not know how I can 'delete' or 'remove' the space between the body and the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
</head>
<body>
<style>
body {
background: #484d49;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
}
</style>
<div class="topnav"></div>
</body>
</html>
That's what I have done, but how can I use CSS or JavaScript to delete the space between the elements.
If you could help, that'd be great.
Thanks,
Ring Games
You can remove the top margin of the body by styling it to have margin-top:0;.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
</head>
<body>
<style>
body {
margin-top:0;
background: #484d49;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
}
</style>
<div class="topnav"></div>
</body>
</html>
Your style declaration needs to be in the head of the page - not the body. And because most browsers style the html and body to have a bit of space around - you should set margin and padding to 0 on each.
Also - you should investigate the semantic elements to use for the nav and main - eg <nav> ... </nav> and <main> ... </main> in order to make the code as good as you can.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #484d49;
color: #fff;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
padding: 8px
}
.main-content {
height: 100%;
padding: 8px
}
</style>
</head>
<body>
<div class="topnav">This is the navigation</div>
<div class="main-content">This is main-content</div>
</body>
</html>
You can use margin to remove the space between body and stuff inside the body not padding.
body {
margin: 0;
}
My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?
This is my code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 100%;
}
div.nscr {
width: 100%;
padding-left: 10%;
background: #FFFFFF;
color: #000000;
}
div.content {
box-shadow: 0em 0em 1.25em silver;
clear: left;
height: 93%;
overflow: auto;
background: #ffffff;
color: #000000;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nscr">
<h1>Menu</h1>
</div>
<div class="content">
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</p>
</div>
</body>
</html>
<div id="Dvloading" style="float: left;">
<i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i>
</div>
It is the code for showing a loading graphic while page is getting loading. It shows above a grid view. When the grid consist of large number of rows, when I scroll down the page, I can't see the loading graphic . But when I go to the top of the screen I can see the loading graphic. How I keep it always in the middle of the screen even while scrolling the page?
Please help me.
I went through my old answers to see if I could add something that is more modern. In my newer solution you do not need to specify the height or the width. Its a more generic solution.
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; //Half of the height of the loading graphic
margin-left: -50px; //Half of the width of the loading graphic
}
Here's my solution...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<style>
body {
height: 100%;
position: relative;
}
.k-loading-image{
position: fixed;
}
.longDiv {
height:1500px;
background: red;
}
</style>
<div class="longDiv">This is a long DIV...</div>
<script>
const showBusyIndicator = (show) => kendo.ui.progress($("body"), show);
$(document).ready(showBusyIndicator(true));
</script>
</body>
</html>
Placed popup mask in page. its showing white space while rotating mobile screen for a second.
please find the sample,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
html, body {
margin: 0px;
padding: 0px;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
.skMask {
height: 1500px;
width: 100%;
opacity: 0.9;
background-color: #000000;
}
</style>
</head>
<body>
<div class="skMask"></div>
</body>
</html>
i have tried using backface-visibility option. but still its showing on rotate.