Witam próbuje dodać obrazek na moją stronę w htmlu lecz gdy tworzę prosty tag img:
<img src="img/ad.jpg" alt="Reklama">
na stronie pojawia się coś takiego:
<img width="0" height="0" style="background-position: 0px 0px; display: none !important; visibility: hidden !important; opacity: 0 !important;" src="img/ad.jpg">
co próbuje jak tylko może ukryć ten obrazek
index.php
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>Title</title>
<meta name="description" content="Desc">
<meta name="keywords" content="Tags">
<meta name="author" content="author">
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('stickynav');
} else {
$('nav').removeClass('stickynav');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js">
<![endif]-->
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav id="topnav">
<ul class="menu">
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Strona Główna1</a></li>
<li><a href="#">Strona Główna2</a></li>
<li><a href="#">Strona Główna3</a></li>
<li><a href="#">Strona Główna4</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="west">
<main>
<article>
<header>
<h1>Lorem ipsum dolor sit amet dolor</h1>
</header>
<p>Lorem ipsum dolor sit amet dolor. Pellentesque placerat. Duis vulputate quam. Nam nec tellus. Cras dignissim. Vivamus sit amet dolor. Nulla facilisi. Nullam laoreet vel, pellentesque sed, ornare laoreet. Morbi fermentum leo sed adipiscing wisi. In et magnis dis parturient montes, nascetur ridiculus mus. Mauris nec magna. Sed tincidunt augue id ipsum. Aenean congue at, convallis aliquam ut, turpis. Etiam risus at augue leo, a lacus. Nunc dictum consectetuer. Quisque neque vel mauris enim, ac quam sem, imperdiet in, adipiscing gravida non, dictum vitae, bibendum quis, auctor odio. Vestibulum quam. Integer id tortor. Maecenas gravida, erat ornare laoreet. Vestibulum ante ipsum primis in dictum justo felis vitae porttitor ullamcorper, enim arcu a odio. Ut facilisis. Maecenas blandit tempus enim quis massa sit amet, accumsan nisl in velit justo ac viverra auctor, ante ipsum sed est sit amet, tempor tincidunt risus in ligula lorem a laoreet metus nec diam iaculis mi. Fusce nonummy condimentum et, justo. Maecenas nec ipsum. Suspendisse adipiscing iaculis. In hac habitasse platea dictumst. Praesent rutrum. Nullam consequat lorem quam nec lorem tortor in faucibus orci luctus nulla.</p>
<p>Sed aliquet commodo volutpat aliquam at, egestas purus. Phasellus ornare interdum, lacus. In mauris enim, malesuada augue eget elit nibh, ut tellus in tortor et tortor. Phasellus dignissim. Phasellus fermentum, dui et ultrices posuere arcu. In lacinia accumsan congue, velit nec odio non eros. Donec libero ornare ligula enim nunc, mollis tempus. Pellentesque laoreet viverra mattis. Integer vestibulum faucibus ipsum ante, luctus nisl. Fusce non dui. Morbi augue ut nonummy laoreet, ante pellentesque sed, fermentum ut, sapien. Donec eleifend adipiscing urna. Proin vitae imperdiet faucibus eu, tortor. Vestibulum tempus leo velit lectus nec massa metus hendrerit wisi. Suspendisse adipiscing. Vestibulum ante ullamcorper ligula quis lacus. Vivamus nec cursus dignissim non, facilisis pharetra. Suspendisse at lorem sodales semper, quam ultrices posuere sit amet nunc fringilla odio. Suspendisse potenti. Vivamus faucibus orci fermentum nec, pede. Morbi molestie, neque vitae massa non ullamcorper pede quis metus. Nulla mi odio, fermentum rutrum. Nullam at ultrices interdum. Nulla mi id elit sit amet neque. Sed gravida vitae, lacinia aliquet. Aliquam eget dolor fermentum ante ipsum at ultrices velit odio lobortis semper. Sed egestas ipsum dolor.</p>
</article>
</main>
</div>
<div class="east">
<aside>
<img src="img/add.jpg" alt="Reklama">
</aside>
</div>
<div style="clear: both;"></div>
</div>
<footer>
<div class="info">
Strona zrobiona przez Łukasza Mariańskiego. Wszelkie prawa zastrzeżone. © 2017 Dziękuje za wizytę!
</div>
</footer>
</body>
</html>
common.css
body {
/* Background pattern from Subtle Patterns
http://subtlepatterns.com */
background-image: url(../img/background.png);
margin: 0 !important;
color: black;
font-size: 17px;
}
h1.logo {
color: black;
font-size: 44px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 50px;
margin-bottom: 40px;
}
#topnav {
background: lightgrey;
text-align: center;
}
.menu {
list-style-type: none;
margin: 0px;
padding: 10px;
font-size: 18px;
min-height: 38px;
line-height: 200%;
}
.menu > li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dashed grey;
}
.menu > li:first-child {
border-left: 1px dashed grey;
}
.menu a {
color: black;
text-decoration: none;
}
.menu a:hover {
color: white;
text-decoration: underline;
}
.stickynav {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
.info {
background: lightgrey;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
.west {
float: left;
width: 750px;
padding: 20px;
text-align: justify;
}
.east {
float: left;
width: 170px;
pading: 20px;
}
