Image Not Displaying On Web Page - html

I am probably missing the blindingly obvious but I can't figure out why an image is not displaying on my web site. Here is the HTML:
<p>Above the image</p>
<img src="/Trends/TDBFGLogo5.gif" alt="" />
<p>Below the image</p>
My code is executing in the directory D:\WebApp which contains a folder called Trends that has all of my images. I have even tried the absolute path D:/WebApp/Trends/TDBFGLogo5.gif but all I see is:
Above the image
Below the image
I have no CSS that affects the img tag and this tag is in the body of the HTML.
Any advice is appreciated.
Regards.

<p>Above the image</p>
<img src="Trends/TDBFGLogo5.gif" alt="" />
<p>Below the image</p>

Try it like this
<p>Above the image</p>
<img src="./Trends/TDBFGLogo5.gif" alt="" />
<p>Below the image</p>

Related

aligning images using HTML

I'm currently trying to design a web page. I don't have much experience with HTML and are therefore finding it difficult to get my page looking how i'd planned. I would like to have four square images, two top with two directly below but im struggling to align these. I've tried to research this but all i seem to be able to find are examples with text wrap.
any help appreciated, thanks.
Are your images of the same size ?
Without more information on what you want/have on your page, it's kind of hard to know what you need.
But here's an simple example : http://codepen.io/cecileledoux/pen/mWJyGV
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
section{
margin-bottom: 20px;
text-align: center;
}
figure{
display: inline-block;
}

Avoid slider being resized when adding a picture

I am making a slider with this basis https://codepen.io/naomilea/pen/XjbXVE
I want to add other pictures and when I add a picture that has another size than the already added pictures the whole slider changes in size. Is there a way to avoid this to happen or resize the images to the already added images?
I am trying to resize the images in CSS.
I've adjusted the HTML to suite me better but not changed the CSS anything
Here is the HTML
<div id=slides>
<div id=overflow>
<div class=inner>
<article>
<img src="aboutuscoffee.jpg" />
</article>
<article>
<img src="#"/>
</article>
<article>
<img src=http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png />
</article>
<article>
<img src=http://csscience.com/responsiveslidercss3/CliffsByBjzaba.png />
</article>
</div>

Can i put logo inside the figure?

Can i put logo nested with anchor inside the <figure> ? Is it right?
Here is the code
<header>
<div class="row">
<figure class="col-sm-5"> <img src="images/logo.gif" class="img-responsive" height="60" width="330" alt="site-logo"> </figure>
<div class="col-sm-7">
<div class="well">
<div class="row">
<div class="col-xs-9"><nav></nav></div>
<figure class="col-xs-3"> <img src="images/helpline.gif" class="img-responsive" height="60" width="120" alt="helpline-image"> </figure>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
Yes you can.
The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.
Reference : MDN
I know this is old, but please do not place your logo in an <h2>; it is not the place for it and can mess up your accessibility, your dom heading structure, and your SEO performance. Doing something because you can, does not make it the right solution below are some links about how to use heading tags. If you want it to look like an <h2>, then style it in your CSS.
W3 Schools
MDN
SEO and Headers Article
For better SEO, put your logo inside H2 tag.
<h2>
<a href="#">
<img src="logo.gif" alt="stackoverflow-logo"/>
</a>
</h2>
Give proper name for alternate text tag alt, instead of site logo, give your companyname-logo

two images in HTML one is loading and the other one is not

<div class="logos">
<img scr="twitter-logo.png"widht=50 alt="twitter logo"
<img src="facebook-logo.png"width=50 alt="facebok logo"
</div
the twitter logo is not working but the facebook one is. Ive tried everything i could think of. Please help!!!
It's because you misspelt src in your Twitter line
Clean up your code. widht and scr is wrong.
Closing div is missing '>'
Add quotes for the attribute values. add a space between each attributes. space missing after scr="twitter-logo.png"
To prevent further issues like that in the future the W3C validator can be helpfull:
W3C Online Validation Tool
You can try this code hopefully it will be working perfectly
<div class="logos">
<img src="twitter-logo.png"widht=50 alt="twitter logo"
<img src="facebook-logo.png"width=50 alt="facebok logo"
</div>
This should work, fixed your "widht" to "width" too :)
<div class="logos">
<img src="twitter-logo.png" width=50 alt="twitter logo">
<img src="facebook-logo.png" width=50 alt="facebok logo">
</div>

Placing image on another image in Javascript

I am working in javascript. I am facing an issue i.e. I want to place an image on another image. MY Code is follows:
<div>
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; left:-100px;"/>
</div>
The problem is when i run the code it places image on the right bottom corner of the DIV but not on the image.
Any help would be appreciated.
Working DEMO
Use position: absolute in CSS:
img { position:absolute; }
<div>
<img src="1.jpg"/>
<img src="2.png"/>
</div>
Note: You don't need to specify z-index if you want last image to appear on top. This is default browser behaviour.
<div>
<img src="1.jpg" />
<img src="2.png" style=" left:-100px; position:relative"/>
</div>
try:
<div style="position:relative">
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; position:absolute;top:0;left:0;"/>
</div>
You need to add the position property to the image style, e.g. ->
position:relative
https://developer.mozilla.org/en-US/docs/CSS/position
Also, this isn't javascript, it's CSS