1 Correct answer
OK. Start by fixing these 30 HTML Code Validation Errors
https://validator.w3.org/nu/?doc=https%3A%2F%2Fpaulschilliger.com%2FSanstitre-1.html
And 7 invalid CSS Properties
Or simply create a new, blank document.
Go to File > New > New Document > HTML > HTML5.
Hit the CREATE button.
In CODE view, Remove & Replace everything with this responsive layout code.
<!doctyp
15
Replies
This is a quick sketch to show the problem I am running into. Images added to the container are displayed side by side. I cannot use a line breaker to distribute them in additional lines. Once viewed in the browser, everything is fine though and only the right frame in this case is displayed, with changing images.
OK. Start by fixing these 30 HTML Code Validation Errors
https://validator.w3.org/nu/?doc=https%3A%2F%2Fpaulschilliger.com%2FSanstitre-1.html
And 7 invalid CSS Properties
Or simply create a new, blank document.
Go to File > New > New Document > HTML > HTML5.
Hit the CREATE button.
In CODE view, Remove & Replace everything with this responsive layout code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Layout, CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 85%;
margin: 0 auto;
background-color:antiquewhite;
color:#372602;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
/**linked text**/
a:link {color:darkred; text-decoration:none}
a:visited {color:darkgray;}
a:hover, a:active, a:focus {color:crimson; text-decoration: underline}
.grid-container {
display: grid;
grid-column-start: col 1;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}
.grid-container img {
vertical-align: baseline;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<main>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum consequuntur numquam eaque deserunt repudiandae optio dolores soluta voluptate quaerat, incidunt assumenda aperiam vitae unde reprehenderit, voluptas minima ducimus tempore, etc.</p>
</div>
</main>
<h2>CSS Grid Test</h2>
<div class="grid-container">
<!--unordered list-->
<ul>
<li><a href="#">Linked Text</a></li>
<li><a href="#">Linked Text</a></li>
<li><a href="#">Linked Text</a></li>
</ul>
<!--Slideshow Slides-->
<div class="slideshow-container">
<img class="mySlides fade" src="https://dummyimage.com/650x490/000/EAE" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/FFF/555" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/000/F0F" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/FFF/F00" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/000/FF0" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/000/EAE" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/FFF/555" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/000/F0F" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/FFF/F00" alt="placeholder">
<img class="mySlides fade" src="https://dummyimage.com/650x490/000/FF0" alt="placeholder">
<!--end slideshow--></div>
<!--end container--></div>
<!--slideshow script-->
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 6000); // Change image every 6 seconds
}
</script>
</body>
</html>
This works in LIVE or DESIGN View in Dreamweaver.
No tables were used & no animals were harmed.
copying and pasting my page into a new HTML5 document solved the problem...
By alpshiker
==========
Right. Because your previous code contained 37 errors -- denoted by the red X.
To render pages correctly, use valid code -- green checkmark ✓.
Bookmark these tutorials for reference:
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
...since I already have a -textpadding- for the images, I cannot add a -transition ease- property in the CSS. One cancels the other.
By alpshiker
==========
Padding & Easing are wildly separate properties.
The former provides empty space around an element like this:
Easing specifies a transition's-timing-function — linear, slow to fast, fast to slow, etc...
See CSS references below for details and code examples.
https://www.w3schools.com/css/css_padding.asp
https://www.w3schools.com/cssref/css3_pr_transition-timing-function.php
Thank you again for your suggestions in helping me sort this layout problem I had with an image slide show. Since I am now asked by the forum community if my problem is solved, here is the short answer.
It was suggested that I start from new HTML5 page to see if this worked out better. Indeed, this solved the problem. In fact, after exploring the code, I realised that some of my pages lacked the introductory tag:
After adding the missing line, all my pages work now as they should, even if many elements are still outdated or marked as errors and should be renewed.
So yes, my problem is solved, and I thank you both wholeheartedly!
AdChoices