body background image doesn't fill the page - html

I'm not sure what's happened as haven't changed CSS but suddenly my background image stops towards the top of the page and won't cary on to the bottom no matter what i change
here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="../London Food Therapy/css/style.css" type="text/css" media="screen" />
<style type="text/css">
#import url("../../../CSS/JJ.css");
</style>
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li></ul>
</nav>
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<div class="arrow right"></div><div class="arrow"></div>
<h1>DENTAL PERFECTION</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
<script>
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}
</script>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Dental/Dental5.jpg" alt="Kookielogo" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental4.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental2.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons5.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons6.jpg" alt="LFT" class="image" height="378" width="580">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
html{
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/Lines%20background.jpg);
background-repeat: repeat;
background-attachment: fixed;
}


in your body class you should add background-size: cover; so that it covers the entire <body>

Related

Revealing footer with position: sticky

I want to realise this effect on website Link of video
my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Resto</title>
<link rel="icon" href="favicon/logoB.ico">
</head>
<body>
<main class="container">
<nav class="menu">
Burger
Sandwich
Chawarma
Salades
BBQ
Boissons
</nav>
<div class="central" dir="ltr">
<div class="logo">
<img src="images/logoB.png" alt="Logo">
</div>
<p class="text">Decouvrer des Saveurs exquises</p>
<div class="pictures">
<img src="images/burger.jpg" alt="Hamburger">
</div>
</div>
</main>
<footer>
<p>©*Copyright*****Chez MED***2023</p>
<p><img src="images/loc.png" class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p>
</footer>
</body>
</html>
my css:
.container{
position: relative;
z-index: 1;
box-shadow: 0 2rem 4rem #f3ebe0;
}
footer{
position:sticky;
bottom: 0;
padding: 15vmin 2rem;
background-image:url("images/fries.jpg");
background-repeat: no-repeat;
background-size: cover;
}
the result is
my page
My footer
the problem is my footer is visible under the body
can I get some idea to fix this problem?
I try to add an effect on my first page the footer should be under the main content who get the z-index

Slideshow is not seen in its entirety on the mobile screen

as you can see in this photo: https://postimg.cc/YLC0cnsY the photo of the slideshow is not shown in full on the mobile screen. I wanted to see it in full, so that it would fit the screen, bootstrap if possible.In the computer it's shown right, but the problem it's in the movile screen. This is my css code and my html code:
.contenedor{
width:485px;
height:540px;
margin :auto;
}
.slick-prev:before, .slick-next:before {
color:black !important;
}
<html>
<head>
<title>Slide</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="js2/slick/slick.css">
<link rel="stylesheet" href="js2/slick/slick-theme.css" charset="UTF-8">
<link rel="stylesheet" href="css2/estilos.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
</head>
<body>
<div class="container-fluid">
<div class="contenedor">
<div class="slideshow2" >
<div class="slide slide1">
<img src="img2/1.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/2.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/3.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/4.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/5.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js2/slick/slick.min.js"></script>
<script>
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:true,
centerMode: false, //centrar foto
slidesToShow: 1,
slidesToScroll: 1
});
</script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="js/utilidades.js" type="text/javascript"></script>
</body>
</html>

try this:
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="slideshow">
<center>
<img src="src of your first img" height="400px">
</center>
</div>
</body>
</html>
CSS:
<style>
#slideshow {
border: solid 20px;
margin: 0 auto;
background-color: black;
display: table;
height: 40%;
width: 100%;
}
</style>
JavaScript:
<script>
let adding = 1;
setInterval(function () {
document.getElementById("simg").innerHTML =
"<img src=\"p" + adding + ".jpg\" height=\"400px\"/>"
adding++
if (adding > 8) {
adding = 1
}
}, 3000);
</script>
name your imgs like p1.jpg,p2.jpg etc.
I named them like that.If you want yo can change,but also change
the 4rth line in script with your img name.
to make it fit to the screen on mobile use bootstrap.

thanks for your answer but i finally resolved it setting max-width and max-height instead of width and height:
.contenedor{
max-width: 485px;
max-height: 540px;
margin:auto;
}
and removing class="img-fluid" from the images on the slide code.

Adblock Changes My Paragraph Position whenever I turn it on or off

How come whenever I turn on or off my adblock my paragraph/text changes positions. When I turn on adblock and the ads are off the paragraph goes all the way at the bottom, and when I turn off adblock where the ads are on the paragraph changes and goes to a place where I want it to be but I want it to stop moving positions whenever I turn on/off adblock I just want it to stay in one place.
here's my webpage
.Copyright {
width: 700px;
height: 177px;
margin-top: 1895px;
margin-left: 615px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="https://adventureplus.ca/webicon.ico" type="image/icon">
</head>
<head>
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
<link rel="stylesheet" href="aboutstyle.css">
</head>
<body class="aboutbg">
<body>
<div>
<img src="adventureplusbodypage.jpg" class="bodypage" alt="ed">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
</body>
<div class="main">
<a href="index.html">
<p align="center"> <img src="new adpluslogo.png" class="Pluslogoon" alt="HTML Tutorial"></a>
</p>
<div class="menu">
<div>
<img src="new navbar.png" class="nav" alt="nav">
</div>
<img src="Aboutbar.png" class="Aboutbar" alt="about">
<img src="Archivebar.png" class="Archivebar" alt="archive">
<img src="Extrasbar.png" class="Extrasbar" alt="extras">
<img src="Charactersbar.png" class="Charactersbar" alt="characters">
</div>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<link rel="stylesheet" type="text/js" href="jsabout.js">
</body>
<div>
<img src="friends, graduations , and begininigs part 86.jpg" class="Part99" alt="img">
<link rel="stylesheet" type="text/css" href="Navi.css">
</div>
<div>
<img src="aboot.jpg" class="Acrbar" alt="img">
<link rel="stylesheet" type="text/css" href="Navi.css">
</div>
<head>
<div>
Previous »
Next »
</div>
</head>
<div>
<img src="ben banner.jpg" class="bensbanner" alt="mn">
<link rel="stylesheet" type="text/css" href="Other.css">
</div>
<div>
<a href="https://twitter.com/Anonymisartist?lang=en">
<img src="twitterlogo.png" class="Twat" alt="img">
</a>
</div>
<div>
<a href="https://www.deviantart.com/sanrokk?rnrd=258670">
<img src="deviantartloglo.png" class="deviant" alt="img">
</a>
</div>
<div>
<a href="https://instagram.com/anonymisartist/?hl=en">
<img src="instalogo.png" class="insta" alt="img">
</a>
</div>
<div>
<head>
<div id="disqus_thread" style="height: 538px; width: 1200px; margin-left: -415px; margin-top: -247px">
<script>
var disqus_config = function() {
this.page.url = 'https://adventureplus.ca/January202020.html';
this.page.identifier = 'January202020.html';
};
(function() {
var d = document,
s = d.createElement('script');
s.src = 'https://adventureplus-ca.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<link rel="stylesheet" type="text/css" href="Navi.css">
</ul>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
</div>
</div>
</head>
</script>
<div>
<link rel="stylesheet" type="text/css" href="Other.css">
<div class="Commentary">
<h1>Hi Guys</h1>
<p>Welcome to my site. This is where I will be posting lots of ADplus content and plus more juicy stories. Just sit back and relax and enjoy the fun "adventures" of this webcomic has to offer. The comic updates every weekdays. Stay tuned for more updates
soon to come :).</p>
</div>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<link rel="stylesheet" type="text/js" href="jsabout.js">
</body>
</div>
</head>
<div>
<img src="placeholder.jpg" alt="img" class="adone">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
<div>
<img src="adtwo.jpg" class="adstwo" alt="i">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
</div>
<head>
<style type="text/css">
.adslot_1 {
max-width: 190px;
max-height: 772px;
}
#media (min-width:193px) {
.adslot_1 {
width: 193px;
height: 770px;
}
}
#media (min-width:193px) {
.adslot_1 {
width: 193px;
height: 770px;
}
}
</style>
<ins class="adsbygoogle adslot_1" style="display: block; position:relative;margin-top: -1469px; margin-left: 315px; width: 160px; max-height: 600px;" data-ad-client="ca-pub-9710909156400610" data-ad-slot="5003175748"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</head>
<body>
<style type="text/css">
.adslot_2 {
max-width: 728px;
max-height: 93px;
}
#media (min-width:728px) {
.adslot_2 {
width: 728px;
height: 93px;
}
}
#media (min-width:728px) {
.adslot_2 {
width: 728px;
height: 93px;
}
}
</style>
<ins class="adsbygoogle adslot_2" style="display: block; position: relative; margin-top: -869px; margin-left: 725px; width: 728px; height: 93px;" data-ad-client="ca-pub-9710909156400610" data-ad-slot="5873404284"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</body>
<div>
<head>
<div>
<link rel="stylesheet" type="text/css" href="Other.css">
<div class="Copyright">
<p>© 2019–2020 AdventurePlus Comics Created By Nathaniel Enriquez</p>
</div>
</head>
</div>
</html>
output:
Image of Adblock On
Image of Adblock Off
Image of Adblock On

i have a slide show code in HTML, but when using chrome or mozzila sometimes when refreshing the page all the images get stacked

i am trying to make a slidehsow using HTML+ CSS
but when using chrome or mozzila sometimes when refreshing the page all the images get stacked
works fine on IE.
enter code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.R.Grada</title>
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/inscricaos.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_page.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inscricaos.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/slideShow.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="b/G7IFct+anugyX+DeDZhI5xYSzmREjC2Y2uPXx7HHA=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
Associação Recreativa de Grada
<nav>
<ul class="nav navbar-nav pull-right">
<li>Pagina inicial</li>
<li>Mapa</li>
<li>xxx</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="center jumbotron">
<div id="slideShowImages" class="slideshow">
<img alt="1" src="/assets/1.jpg" />
<img alt="2" src="/assets/2.jpg" />
<img alt="3" src="/assets/3.jpg" />
<img alt="4" src="/assets/4.jpg" />
<img alt="5" src="/assets/5.jpg" />
<img alt="6" src="/assets/6.jpg" />
</div>
<script src="slideShow.js"></script>
</h2>
|Inscrição |
| Lista incritos|
</div>
<div class="logo">
</h1>
<img alt="xxx_logo" src="/assets/logo.png" />
</div>
<footer class="footer">
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
CSS code:
.slideshow
{
background-colour:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box- shadow:0 0 22px #111;
}
The images become stacked on above anothe. to resolve the issue i must press CTRL F5.
i can not upload a imge so i try to explain with this:
it look like that:
image1
image2
image3
image4
it should look like that
image1
wait 1 sec
image2
...

Try to hide the images using CSS first. The page must not have been loaded fully for the script to run.

How to reduce space between an image and a photo slideshow?

So I have an image and a slideshow on my website.
Image can be viewed here:
As you can see, there is a space between the grass logo and the slideshow. Is there anyway to get rid of that space? (space has a yellow arrow between the two objects)
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<STYLE>
<!--
A{text-decoration:none}
-->
</STYLE>
</head>
<title>Webcleats, LLC - Traction on the Web</title>
<body bgcolor="#FFFFFF">
<center><h2>Home About Us Services Customers Contact Us</a></center></h2>
<h1> <center> <img src="webcleats_logo.tiff" /></center> </h1>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/newest.001.jpg" alt="newest.001" title="" id="wows1_0"/></li>
<li><img src="data1/images/district_lines.002.jpg" alt="district_lines.002" title="" id="wows1_1"/></li>
<li><img src="data1/images/see_me.jpg" alt="see_me" title="" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<img src="data1/tooltips/newest.001.jpg" alt="newest.001"/>1
<img src="data1/tooltips/district_lines.002.jpg" alt="district_lines.002"/>2
<img src="data1/tooltips/see_me.jpg" alt="see_me"/>3
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</body>
</html>
And CSS (doesn't have a lot on it at the moment, I am new to CSS)
h1 {
margin:5spx;
}
#title span {
font-size: 4em;
color: #c13636;
line-height: 0.9em
}
#sidebar .links a:hover {
color:"white";
}
#webcleats {
margin: 5px 0;
}

This ought to fix you up, although it's hard to tell from your code whether the problem is the <H1> or the <UL>. Try one or the other to determine the offender.
h1,
h1 img {
margin-bottom: 0;
}
#wowslider-container1 ul,
#wowslider-container1 ul li {
margin-top: 0;
padding-top: 0;
}

simple,
add this to your header image css :
margin-bottom:0px;
and add css for your wow slider div so it looks like this:
#wowslider-container1 {
width[enter your width];
height:[enter your height];
margin-top:0px;
padding-top:0px;
}
and replace [enter your width/height] with whatever values you want them to be.