I have a website with 5 pages (e.g. page1.html, page2.html, etc.), each having its own .css stylesheet. Oddly, some pages display images correctly while others do not. It seems like the issue might be with the specific pages or files, as using the same image in a different HTML file works fine. I've tried using both the full URL and the image name with extension (images are in the same directory as the HTML and CSS files). Any thoughts on why this is happening? (Viewing the website on Chrome)
<!DOCTYPE html>
<html>
<head>
<meta name="description" />
<title>"animātiō" means "bestowing of life"</title>
<link rel="stylesheet" type="text/css" href="CW1_page1_style.css" />
</head>
<body>
<h1>Just a small website about animation</h1>
<div class="container">
<div id="menu">
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page0.html">Menu & Navigation</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page1.html">History and Beginnings</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page2.html">Traditional medium</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page3.html">Computer animation</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page4.html">2D or 3D: Which is Better?</a>
</div>
</div>
<br/><br/><br/><br/>
<div>
<section id="section-a">
<div class="box-1">
The first "animations" were sequences of consecutive images, which would give an illusion of movement.
At the beginning there existed machines like Praxinoscope - series of images rotated at high speed - and Shadow plays - moving figures on a screen.
Not to mention the technique known to every child that is a flipbook - conjuring "moving" image upon quickly flipping paper sheets.
</div >
</section>
<section>
<section id=section
<p id="ex">Examples of machines</p>
<div class="examples">
<img class="slide" src='magic-lantern.png' alt='Magic Lantern'/>
<img class="slide" src='zoetrope.gif' alt='Zoetrope'/>
<img class="slide" src='flip-book.png' alt='Flip-Book'/>
<img class="slide" src='praxinoscope.png' alt='Praxinoscope'/>
</div>
</section>
<br/>
<section id="section-c">
<div class-"box-2">
The breakthrough began with the invention of motion pictures.
Hand-drawn and painted animation was prevalent throughout the whole 20th century. From the first short movies of the silent era, to fresh creations with color and soundtrack
animation started growing in popularity - and bringing more and more profit.
</div>
<div class="box-3">
<img scr="snow-white.jpg" alt="Snow White"/>
The first hand-drawn animated movie - Disney's "Snow White" (1937)
<img scr="disney.jpg" alt="Walt Disney"/>
Walt Disney - pioneer of American animation industry
</div>
</section>
<section id="section-d">
<div class="box-3">
After addition of sound and color and subsequent success of Disney, other studios began to produce their own features. This was, no doubt, the golden years for Hollywood animation.
</div>
<div class="box-4">
With the end of the 1950s and growing popularity of television, stations began to emit various animated productions. A lot of them were cartoons aimed at kids
</div>
<div class="box-5">
Major animated productions from the Golden Era of American Television feature cartoons like "The Flintstones", "Yogi Bear"
<br/>
<img scr="felixc.jpg" alt="Felix the Cat"/>
<img scr="flinstones.jpg" alt="Flintstones"/>
</div>
</section>
</div>
</body>
</html>
body {
background-color: beige;
font-size: 17px;
}
/** {
box-sizing: border-box;
} */
h1 {
color: #3e3e80;
text-align: center;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
#menu {
overflow: hidden;
background-color: green
}
#menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#menu a:hover {
color: #3e3e80;
background-color: white;
}
.slide {
float: left;
width: 25%;
padding: 0px;
}
.examples::after {
content: "";
clear: both;
display: inline-flex;
}
#section-c {
display : inline-flex;
}
In the example above, the first 4 images work while the rest don't.
Below, everything appears without any problems:
<!DOCTYPE html>
<html>
<head>
<meta name="description" />
<title>"animātiō" is "bestowing of life"</title>
<link rel="stylesheet" type="text/css" href="CW1_page2_style.css" />
</head>
<body>
<h1>Just a small website about animation</h1>
<div class="container>
<div id="menu">
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page0.html">>Menu & Navigation</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page1.html">>History and Beginnings</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page2.html">>Traditional medium</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page3.html">>Computer animation</a>
<a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page4.html">>2D or 3D: Which is Better?</a>
</div>
</div>
<br/><br/><br/><br/>
<div>
<section id="section-a">
<div class="box-0">
Traditional animation (hand-drawn animation) is the first type of animation that has been used (not counting any machines equipped with slides).
<br/><br/>
The oldest and commonly used style throughout most of the history of animation,
recently this style seemed to fall out of grace in favor of computer-generated images.
However, it's still used even nowadays and has many enthusiasts.
<br/>
</div>
<div class='box-1'>
<img class="im" src="aniwork1.jpg" alt="Animator working on" />
</div>
<div class="small-fact">
<img class="im" src="aniwork2.jpg" alt="Animator working on" />
</div>
<div class="small-fact">
Did you know: The standard number of frames is 90 per minute of the movie!
<br/> <br/>
That makes 8100 drawings for a 90-minute-long film!
</div>
</section>
<section id="section-b">
<div class="box-2">
The process of creating any animated piece starts with storyboards.
Here, delegated artists prepare rough layouts of the scene, with characters and backgrounds taken into consideration.
<img id="board" src="storyboard.jpg" alt="Storyboard" />
</div>
<div class="box-3">
<img class="phase" src="animatic phase.gif" alt="Animatic phase form Avatar: The Last Airbender" />
The next stage is animatic phase - similar to storyboarding but consisting of keyframe (the most important parts of the particular scenes).
<br/> <br/>
(Above: animatic phase from "Avatar: The Last Airbender")
<br/> <br/>
(Left: Storyboards indicate surroundings, as well as the characters and actions.)
</div>
<div class="box-4">
Afterwards, there's a need to provide the in-between, additional images which will guarantee smoothness of the animation.
Lastly, it's only a matter of inking and coloring the pages.
<img class="slide1" src='inking.jpg' alt='Inking a character #1' />
<img class="slide2" src='ink-color.jpg' alt='Inked and colored character' />
</div>
</section>
<section>
<div class="examples">
<p id="ex">Examples of traditionally animated features</p>
<img class="pink" src='pinkp.jpg' alt='The Pink Panther'/>
<img class="pi" src='pinoccio.jpg' alt='Pinocchio'/>
<img class="lion" src='lion_king.webp' alt='The Lion King'/>
<img class="eldorado" src='eldorado.jpg' alt='Road to El Dorado'/>
</div>
</section>
</body>
</html>
body {
background-color: beige;
font-size: 17px;
}
h1 {
color: #3e3e80;
text-align: center;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
#menu {
overflow: hidden;
background-color: brown;
}
#menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#menu a:hover {
color: #3e3e80;
background-color: white;
}
#section-a {
display: flex;
}
#section-a .box-0{
float: left;
width: 70%;
padding: 5px;
}
#section-a .box-1 .im{
width: 250px;
height: 200px;
}
#section-a .small-fact{
float: left;
width: 30%;
padding: 5px;
}
#section-a .small-fact .im {
width: 250px;
height: 175px;
}
#section-b {
display: inline-flex;
background-color: brown;
color: white;
}
#section-b .box-2{
padding: 5px;
}
#section-b .box-2 .board {
width: 400px;
height: 400px;
}
#section-b .box-3 {
padding: 5px;
}
#section-b .box-3 .phase .{
width: 100vs;
height: auto;
}
#section-b .box-4{
padding: 5px;
}
#section-b .box-4 .slide1 {
width: 300px;
height: 200px;
}
#section-b .box-4 .slide2 {
width: 60%;
height: 35%;
}
#ex {
text-align: center;
font-weight: bold;
text-decoration: underline
}
.pink {
float: left;
width: 300px;
padding: 0px;
}
.pi {
float: left;
width: 300px;
height: 300px
padding: 0px;
}
.lion {
float: left;
width: 300px;
height: 20%;
padding: 0px;
}
.eldorado {
float: left;
padding: 0px;
height: 50vh;
width: 65vh;
}
.examples::after {
content: "";
clear: both;
display: table;
}