I am trying to write a short piece about the Congo with photos for a historical society. Hopefully it will eventually be posted on their website.
So, I have been learning some coding.
From the code below, my current problem is that the first <div>element has three images; the second set of <div> elements has four.
.column is set for 25% width. This means that the first three photos do not fill the available space, The second set of four photos fill the available space exactly. I would like the first three photos to span across the space - I realise that they will then be slightly larger.
In CSS in that it seems that only one set of rules can apply to say, the number of columns, or the colour of a background. I know this cannot be correct! I understand that CSS rules can be applied in an HTML document using the style element. I would do this here except that I cannot find the correct style selector (?probably the wrong term), or the correct syntax, to use. In the case of my photos, I can't find a way of modifying the use of space with a style element.
I'd be grateful for advice. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;}
h3 {
text-align: center;
color: BlanchedAlmond;}
p {
line-height: 1.21em;
font-size: 1.18em;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<p>
The Congo Free State (French: État indépendant du Congo, lit. "Independent State of the Congo"; Dutch: Kongo-Vrijstaat) was a large state in Central Africa from 1885 to 1908. It was ruled personally by Leopold II and operated entirely separate from Belgium, of which he was also king. Leopold II was able to procure the region by convincing other Eurasian states at the Berlin Conference that he was involved in humanitarian and philanthropic work and would not tax trade.[2] Via the Association internationale africaine, he was able to lay claim to most of the Congo basin. On 29 May 1885, the king announced that he planned to rename his new colony "the Congo Free State".
<div class="row">
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo1" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo2" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo3" style="width:100%">
</div>
</div>
</p>
Leopold's reign in the Congo eventually earned infamy on account of the atrocities perpetrated on the locals. Leopold II's Free State extracted ivory, rubber and minerals in the upper Congo basin for sale on the world market through a series of international concessionary companies, even though its ostensible purpose in the region was to uplift the local people and develop the area. Under Leopold II's administration, the Congo Free State became one of the greatest international scandals of the early 20th century. The Casement Report of the British Consul Roger Casement led to the arrest and punishment of officials who had been responsible for killings during a rubber-collecting expedition in 1903
<div class="row">
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo4" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo5" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo6" style="width:100%">
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo7" style="width:100%">
</div>
</div>
So, I have been learning some coding.
From the code below, my current problem is that the first <div>element has three images; the second set of <div> elements has four.
.column is set for 25% width. This means that the first three photos do not fill the available space, The second set of four photos fill the available space exactly. I would like the first three photos to span across the space - I realise that they will then be slightly larger.
In CSS in that it seems that only one set of rules can apply to say, the number of columns, or the colour of a background. I know this cannot be correct! I understand that CSS rules can be applied in an HTML document using the style element. I would do this here except that I cannot find the correct style selector (?probably the wrong term), or the correct syntax, to use. In the case of my photos, I can't find a way of modifying the use of space with a style element.
I'd be grateful for advice. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;}
h3 {
text-align: center;
color: BlanchedAlmond;}
p {
line-height: 1.21em;
font-size: 1.18em;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<p>
The Congo Free State (French: État indépendant du Congo, lit. "Independent State of the Congo"; Dutch: Kongo-Vrijstaat) was a large state in Central Africa from 1885 to 1908. It was ruled personally by Leopold II and operated entirely separate from Belgium, of which he was also king. Leopold II was able to procure the region by convincing other Eurasian states at the Berlin Conference that he was involved in humanitarian and philanthropic work and would not tax trade.[2] Via the Association internationale africaine, he was able to lay claim to most of the Congo basin. On 29 May 1885, the king announced that he planned to rename his new colony "the Congo Free State".
<div class="row">
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo1" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo2" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo3" style="width:100%">
</div>
</div>
</p>
Leopold's reign in the Congo eventually earned infamy on account of the atrocities perpetrated on the locals. Leopold II's Free State extracted ivory, rubber and minerals in the upper Congo basin for sale on the world market through a series of international concessionary companies, even though its ostensible purpose in the region was to uplift the local people and develop the area. Under Leopold II's administration, the Congo Free State became one of the greatest international scandals of the early 20th century. The Casement Report of the British Consul Roger Casement led to the arrest and punishment of officials who had been responsible for killings during a rubber-collecting expedition in 1903
<div class="row">
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo4" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo5" style="width:100%">
</div>
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo6" style="width:100%">
<div class="column">
<img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo7" style="width:100%">
</div>
</div>
Comment