I have been trying to put 5 images in an horizontal row. I have set up the body width to 1800px but the pictures overpass that 1800px what can i doo
This is old school, but worth a try just for the experience:
Remove the height attribute from all the img elements. For now, set the width of every img to 19%
<img src="#" width="19%" alt="">
Now remove that width of 1800px and make it 100% of the parent width, which should be a DIV in the BODY for this experiment. We cannot set the width of the BODY.
It should render every image on one line and scale them at any width of display.
We can use CSS to set the width:
div {
width: 100%;
}
img {
width: 19%;
}
<body>
<div>
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
</div>
</body>
1 Like
Tea Cozy
Tea Cozy
<h2 class="Navegation-items">Mission</h2>
<h2 class="Navegation-items">Featured Tea</h2>
<h2 class="Navegation-items">Locations</h2>
</div>
Our Mission
Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
<div>
<h2>Tea of the Month</h2>
<h3>What's steeping at the Tea Cozy?</h3>
</div>
<div class="tea-of-the-month-part">
<img class="image-size" src="/resources/img/img-berryblitz.jpg" alt="">
<figcaption>Fall Berry Blitz</figcaption>
<img class="image-size" src="/resources/img/img-spiced-rum.jpg" alt="">
<figcaption>Spice Rum Tea </figcaption>
<img class="image-size" src="/resources/img/img-donut.jpg" alt="">
<figcaption>Seasonal Donuts</figcaption>
<img class="image-size" src="/resources/img/img-donut.jpg" alt="">
<figcaption>Seasonal Donuts</figcaption>
</div>
Please stick to the topic that this thread is about, and start a new topic about Tea Cozy. Don’t let it interfere with a very important discussion already underway. If you can run this experiment in a sandbox, or on your own machine, that would be best.
How it relates to Tea Cozy is for the next step of understanding. Let your thinking absorb these basic parameters, in this demo. Let’s just focus on how images get to the screen and how we can control their placement and size relative to screen size.
Perform this experiment using my above code. Any browser or sandbox will run it as HTML even in that stripped down form. They are worst case scenario based and try to do their best, regardless.
fiveimginline.html.txt (299 Bytes)
Save this file on your machine, locate it, and open it. Once you have read it and are sure it is just HTML, remove the, .txt extension (rename) and then click it.
The screen will be white and appear blank. Look more closely and we see the row of dots across the top of the window. How many segments are there? Five. These are the borders of still to be downloaded images. Remember, we left out the height attribute because it will always scale proportionally as the image width. Therefore, in this demo there is no height but for the border, which is itself trying to squeeze two rows into zero, with one row winning. Pay close attention to this demo. Study it. At some point the term, ‘collapsing’ will garner some meaning from this.
Now plug the image URLs into the elements run the page again.
We wrestled with a lot of stuff in the olden days. This markup and styling reflects that early period, when we did the most with the least. Barebones markup could be made to render in a decent fashion, which was/is good. The less we need to manipulate, the truer to form our rendering will be, or so we hoped/expected.
There is no secret to this. It’s all declarative and we are in full control. Work from the ground up, and don’t take any giant leaps. Make it progressive every step of the way. That fits the design modus operandi exactly.
Bottom line, if you fail to experiment with this stuff in your own local environment, and expend hours on it, none of it will mean anything in six months time.
In this iteration we will need an images folder adjacent to wherever you store the HTML.
fiveimgsinline.html.txt (404 Bytes)
Again, make sure it is only HTML, then rename and click the file.
It will help if you have these files in the images folder:
For reasons that still need to be explored, the img width of 18.8% is the largest that does not wrap when the screen is shrunk to minimum width. This is the sort of stuff we learn by experimenting. It is not in any text book. Don’t experiment and don’t succeed in this science.
1 Like
In this last iteration, we take into account that linebreaks are whitespace and HTML browsers usually insert a space just to be useful. We eliminate the linebreaks between elements and achieve true 20% dimensional freedom for our five images.
You already have a file going so here is the edit:
<head>
<style>
div {
width: 100%;
}
img {
width: 20%;
}
</style>
</head>
<body>
<div>
<img
src="images/1820-1800Ma.PNG" alt=""><img
src="images/1840-1820Ma.PNG" alt=""><img
src="images/1860-1840Ma.PNG" alt=""><img
src="images/1920-1860Ma.PNG" alt=""><img
src="images/1960-1920Ma.PNG" alt="">
</div>
</body>
It was @ionatan who first put me onto the idea of, ‘promises’. Immediately I began to see the implications across the whole spectrum of languages, programming and otherwise. What we see above is the carrying out of one or more promises that we render with no surprise or incongruency with our expectations. It is satisfying to actually discover this.
Validation
Document checking completed. No errors or warnings to show.
Source
<!DOCTYPE html>↩
<html lang="EN">↩
<head>↩
<meta charset="UTF-8">↩
<title>Five Images All In A Row</title>↩
<style>↩
div {↩
width: 100%;↩
}↩
img {↩
width: 20%;↩
}↩
</style>↩
</head>↩
<body>↩
<div>↩
<img↩
src="images/1820-1800Ma.PNG" alt=""><img↩
src="images/1840-1820Ma.PNG" alt=""><img↩
src="images/1860-1840Ma.PNG" alt=""><img↩
src="images/1920-1860Ma.PNG" alt=""><img↩
src="images/1960-1920Ma.PNG" alt="">↩
</div>↩
</body>↩
</html>
1 Like