Menu
I am including an image in a fairly simple site but it isn't appearing. Inspection of the element style in Chrome shows a final (right at the top, after all inherited styles) style of
element.style {
display: none !important;
}
Sure enough, if I unset that style the graphic's outline appears and the page height adjusts to accommodate it. But I don't know where this style is coming from - it looks like something is adding it dynamically. Here's the Django template that I'm using to create the page (the image in is <div class="secondary col">) :
{% load markup %}
<!doctype html>
<html lang="en">
<head>
<title>Holden Web: {{ flatpage.title }}</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<link href="{{ STATIC_URL }}normalize.css" rel="stylesheet" type="text/css" />
<link href="{{ STATIC_URL }}styles.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bluebar"> </div>
<header class="pageheader shadow">
<h1><a href="/">Holden Web</a></h1>
<div class="tagline">What you'll need to know tomorrow</div>
<nav class="pagenav">
<ul class="inline_list">
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/training/">Training</a></li> [13/1858]
<li><a href="/contact/">Contact</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
</ul>
</nav>
</header>
<div class="content">
<section class="secondary col">
<div>
<a href="http://www.jdoqocy.com/click-7520687-11258637" target="_top">
<img src="http://www.awltovhc.com/image-7520687-11258637" width="200" height="200" alt="O'Reilly 50% Ebook Deal of the Day" border="0"/>
</a>
</div>
{% block secondary %}
{% endblock %}
</section>
<section class="primary col">
{% block primary %}
{{ flatpage.content|markdown:"safe" }}
{% endblock %}
</section>
</div>
<footer class="vcard">
<div class="secondary col">
</div>
<div class="primary col">
<h1>Holden Web, LLC</h1>
<p>Email: <a href='mailto:[email protected]' class="email">[email protected]</a>Phone: <span class="tel
">1.800.494.3119</span></p>
<nav>
<ul class="inline_list">
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/training/">Training</a></li>
<li><a href="/contact/">Contact</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
</ul>
</nav>
<p><a href="http://theopenbastion.com/">The Open Bastion</a></p>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>
The first style file is normalize.css v3.0.1. styles.css is given below.
body{font:62.5% arial, helvetica, sans-serif;min-width:815px;background-color:#f6f6ef}
.pageheader{font-size:1.4em;background-color:#f6f6ef;padding:0 2em;height:10em;border-bottom:1px solid #eae7d1}
.pageheader h1{margin:0;position:relative;top:1em;display:inline-block}
.pageheader h1 a{background:transparent url(images/logo.png) no-repeat left top;display:block;text-indent:-9999em;height:225px;width:207p
x}
/*logo flip*/
.pageheader h1 a:hover{
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-webkit-transform-style:preserve-3d;
-webkit-transition: -webkit-transform 1.7s;
-webkit-transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-moz-transform-style:preserve-3d;
-moz-transition-duration: 1.5s;
}
.tagline{font-size:2em;font-weight:bold;color:rgba(0,0,0,.1);
font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;
text-shadow:1px 1px 3px rgba(0,0,0,.1);
margin:-6em 0 0 30%;
-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;
}
.tagline:hover{color:rgba(0,0,0,.2);text-shadow:3px 3px 4px rgba(0,0,0,.2);}
h1,h2,h3,.h1,.h2,.h3,.inline{font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;color:#444}
.content div section p strong {font-weight:bold;font-size:18px} [28/1894]
.content a {color:#449}
.content a :hover{color:#66c}
h1{margin:.5em 0 .25em}
h2{margin:.6666em 0 .3333em}
h3{font-size:16px;margin:7px 0 5px}
.content{font-size:1.3em;background-color:#fff;padding:0 2em;z-index:10}
.content p{line-height:1.7142;margin:.5em 0}
.content ul{list-style-position:outside;padding-left:1em;list-style-type:none}
.pagenav{margin:.6em 0 0 30%}
.pagenav a{font-size:1.0714em;color:#4646e9;font-weight:bold;text-transform:uppercase;text-decoration:none;text-shadow:1px 1px 2px rgba(0
,0,0,.2);
-moz-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
}
.pagenav a:hover{
text-decoration:underline;
/* just a little too much
font-size:110%;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-moz-text-size-adjust: 120%;
-webkit-text-size-adjust: 120%;*/
}
ul.inline_list{list-style-type:none;padding:0;margin:0}
ul.inline_list li{display:inline;margin-right:1em}
.col{padding:1em 0}
.secondary{line-height:1.6;float:left;width:25%;overflow:hidden;padding-top:11em}
.primary{font-size:1.0769em;line-height:1.6;width:60%;margin-left:30%;max-width:700px;padding-bottom:3em}
footer{font-size:1.3em;clear:both;background-color:#f6f6ef;padding:.5em 2em;border-top:1px solid #092694;height:14em}
footer .primary{padding-top:0;padding-bottom:0}
footer .primary nav{margin-top:.5em}
.bluebar{
background-image: linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -o-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -moz-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -webkit-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -ms-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #092794),
color-stop(1, #5475EE)
);
}
footer p{margin:.5em 0}
.bluebar{height:20px}
footer h1{font-size:1.2em}
.email{margin-right:1em}
.shadow{box-shadow:1px 1px 2px rgba(0,0,0,.2)}
.footnav ul{list-style-type:none;position:absolute;top:-6em;left:27em}
.hw{border-bottom:1px solid #eee;padding-bottom:3em}
.hw,.tob{margin:3em 0}
Clues from the clueful will help me get moving again.
975
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
Hiding an Image in CSS The trick to hiding any element on your web page is to insert either a " display: none; " or " visibility: hidden; " rule for that element. The " display: none; " rule not only hides the element, but also removes it from the document flow.
Images or wrapper elements that have display: none set, will still get loaded. So if you want to eg. load a different image for desktop and mobile, you can either: use display: none , but with the loading="lazy" parameter set on img .
This is likely a result of an ad blocking software running on your local machine.
195
answered Oct 15 '22 11:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
