Announcement

**Goeroeboeroe** · Oct 26, 2018, 05:38 PM

Hi,

That's not very difficult. But of course that's always so, after you know how to do it

Code:

<!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-1 {float: left; width: 33.3%; padding: 5px;}
		.column-2 {float: left; width: 25%; padding: 5px;}
		/* Clearfix (clear floats) */
		.row img {width: 100%;}
		.row::after {content: ""; clear: both; display: table;}
		.column-1, .column-2 {outline: red solid 1px;}
	</style>
</head>
<body>
	<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".</p>
	<div class="row">
		<div class="column-1"><img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo1"></div>
		<div class="column-1"><img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo2"></div>
		<div class="column-1"><img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo3"></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</p>
	<div class="row">
		<div class="column-2"><img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo4"></div>
		<div class="column-2"><img src="https://img.xxxxxxxxxxxxxxxxxxx" alt="Congo5"></div>
		<div class="column-2"><img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo6"></div>
		<div class="column-2"><img src="https://img.xxxxxxxxxxxxxxxxxxxx" alt="Congo7"></div>
	</div>
</body>
</html>

The formatting of this code is not very good, but that's the forum I'm afraid. Or I miss something...
* I rewrote your code a bit. Some <p>'s were missing etc. All </p>'s etc. are present now. And I made some indentation.
* I you write in an <img> alt=""style="", it 's better to put a space before the word style. Some browsers have problems if a space is missing between two attributes.
The real changes:
* I gave the first three columns a class of column-1. Now you can use

Code:

.column-1 {float: left; width: 33.3%; padding: 5px;}

for only the first three div's.
* I gave the last four column a class of column-2. They can use

Code:

.column-2 {float: left; width: 25%; padding: 5px;}

That's the original css-rule, but now only for the last four columns.
* Not really necessarily: I removed the 7 time style="width: 100%;" in every <img>. If you use

Code:

.row img {width: 100%;}

it applies to every <img> inside div.row.

If you now want to change it to let's say 90% and a margin of 5% left and right, you only have to change it in one place.
* I made a rule

Code:

.column-1, .column-2 {outline: red solid 1px;}

You should remove that of course, but an outline is very useful in making something visible. It takes no room (a border does), but shows the exact height and width of an element.

There are lots of ways to make css working only for some elements, but a class is one of the most simple ways.
Off topic: I'm glad you're not writing Leopold was a very friendly king...

Hope this helps.

**JoHubb** · Oct 27, 2018, 02:29 AM

Thank you so much! I have to go out with my wife this morning in order to keep her sweet. I will check all your suggestions out this evening.

I had tried using 'columnx' and this worked. But when I added another large photo (75%) I could not use 'columny'. I also tried 'column1' and column2'.

Apart from that, I am very grateful for your other corrections. I've only been at this game a few weeks and there is a steep learning curve, especially for a 72 year-old!

I will write again, tonight or tomorrow.

**Goeroeboeroe** · Oct 27, 2018, 05:27 AM

If you have any more questions, I'll see them coming. But if you put code here, it would be handy if you can copy the complete code. (Or a link to the code somewhere online). Otherwise it's very difficult or impossible to see why something is not working. Some mistaken on the top of the html can very well have influence on something at the bottom.

**JoHubb** · Oct 27, 2018, 01:11 PM

That all worked perfectly. I have included the outline as you suggested and it looks very good. I will probably change it to a brown or olive green to match the subject better.
So, thank you again for this. The only other things which are bugging me are 1) where best to learn what you know?!! and 2) how to make a picture go to full size when it is clicked - I don't know the correct term.

Off topic:
Sir Roger Casement was the lawyer who finally put Leopold II and his friends out of business. Strange that he ended his days on the end of a rope in London, executed by the British in 1916 for taking part in an Irish rebellion. The King had knighted him less than a week before he was hanged! Strange people the Brits! Now it is Brexit.

**Goeroeboeroe** · Oct 27, 2018, 04:06 PM

You can leave the outline of course if you like it, but it was meant to show the outline of the divs while you're coding. An outline is very handy, because it doesn't have any influence on width, height, etc. So you can use it to try out things and remove it very easy when you're ready.
A few weeks ago I wrote a list of sites with free courses etc. about html, css and JavaScript:
https://www.kubuntuforums.net/showth...truction/page2
But it may take a little time before you can do what I do, because I've been making sites for over 20 year. Personally I think the best thing is to look on one of those sites for a course that you like. Html and css, JavaScript can come later or not. That courses are all different, so you can search for a model that fits you.
The base of html and css is not very difficult, so that courses won't take too long. But before you can really, really use it, that will take much more time. It's a bit like chess: simple rules, but very complex to play.
If you follow a short course, you'll learn some base things you'll use all of the time. It's pretty hard to learn that with trial and error, in my opinion.

I had tried using 'columnx' and this worked. But when I added another large photo (75%) I could not use 'columny'. I also tried 'column1' and column2'.

I don't understand what you mean with this.
If in the css a rule starts with a point, like .column-1 {}, the css between the {} is only working for elements that have class="column-1". The same goes for column-2, or columnx, etc. If it's not working, can you put the code here, so I can have a look at it?
I also don't understand what you mean with 'large photo (75%)'. Every image should fill exactly one div. It doesn't matter how wide the image is. If the picture is 1000 px wide, it will be downsized to fit (the height is automatically downsized too, and the ration is kept, so the picture won't get deformed).
(This has some disadvantages: if you use big pictures, people have to download them and pay for the bandwidth, but see possibly only small images on a smartphone. At the other hand a very small image will get bigger to fill the <div> and can get very ugly, because there simply are too less pixels in it. There are techniques to solve this, but they are pretty complicated.

If you use images from around 500 px wide, they'll work well on most screens.)

About making a picture full-size on click. Maybe surprising, but that's something really difficult. Most of the people use touchscreens today. To 'click' on a touchscreen means touching it. But to close the big image again, that's a different matter. On iOS for example it's not possible to close the image again without some complicated css or JavaScript. At the other hand on touchscreens with Internet Explorer or Edge the picture probably won't get bigger if you touch the screen. If you're lucky, on Android it just works. But if you do something a bit different, it may not work.
That's only the making bigger.
But if you make a picture bigger, it has to stay on the screen of course. If somebody clicks/touches on an image on the side of the screen, the image should be visible on the screen and not half outside of it.
And if you make one picture bigger, how about the rest of the page?
If you make image A bigger, it will move image B, because it needs more space.

The page will jump like mad and that's really annoying.

This is not to make you sad, it's just to explain why that's pretty difficult. And why it's handy to follow a course, because you'll see a whole lot of css you won't know. But it is possible of course with quite a lot of css and some JavaScript.
I guess what you want is something like this;
https://www.w3schools.com/howto/howto_js_lightbox.asp
That demo is working pretty well on touchscreens (iOS, Windows and Android) and with a simple mouse. And it has relatively simple code. You could adjust the html and css for you own page. It's not necessarily to really understand the JavaScript. In that demo they have four images on one line, but you can easily use it for two or more lines with 3/4/5/ images on each line.

I don't have the time to completely make it for fitting for you page (maybe somebody else has), but I can help you if you have questions. The nice thing from w3schools is they have a Try it yourself: you can change the code and see directly what happens.

One more thing. You wrote you hope the article is posted on some historical site. But for a site normally you just sent text and images and they'll make code for it. Are you sure that site wants it coded? They have probably templates themselves for articles people write.
If you plan to publish it on your own site, then you'll need the code of course.
And if you just like to learn css/html, that's a good reason too. I'm 67 myself and I think somebody your age can learn it. Of course it's easy speaking for me, because I've been doing this for over 20 years. (Now I only do it for fun, not professionally anymore.) But css /html is evolving so fast, I still have to learn new things too every day. And for me that's working. Though I learn absolutely more difficult then when I was 14...

O, I forgot; A small picture you can change in a bigger is called a thumbnail. A window (like in that demo on w3wchools) standing above the page is called a modal.
And making a small image bigger like in that demo has not an official name, but it's very often called 'lightbox'.

**JoHubb** · Oct 28, 2018, 06:42 AM

Thanks again for taking time to write all this useful information. It is, of course, bookmarked for future reference.

On .columnx and .columny. When I set these up for 25% and 33.3% respectively in the div entry, the pictures followed the rule.
But when I added .columnz as another rule (it was 50% not 75%) in another div entry, the pictures did not follow the rule.

Now, when I use .column-1, .column-2, .column-3 the div entries follow the rule for 25%, 33%, 50%.
I obviously used the wrong syntax by using .columnx, y, z

I've been using www.w3schools.com - I got this from another post of yours. Most of what I know I've learned from here, but sometimes it is difficult to find the answers to simple questions, such as mine. How to change a rule in the middle of an html document? The solution using class was simple, but I could not find this solution anywhere, including in Jon Duckett's excellent book. I am not clear if 'CSS selectors'?? are used for changing the appearance of an HTML document half-way through. Where did you get .column-1, column-2 from?

On the picture enlargement, I was thinking of a popup but perhaps that also is very difficult. It is not a requirement. If someone who reads my stuff wants to enlarge a photo, he/she can download and enlarge it themselves - the resolution will vary of course.

Yes, I am sure about the website. They have a page for review articles into which can be dropped .html files. Alternatively, the page from Kate can simply be cut and pasted into a form.

My ultimate objective is to make a simple website where I can post my own postal history presentations (or excerpts of). Although my short article for the postal history group this time was about États Indépendant du Congo, my main interest is in the Austro-Hungarian Empire. I have letters, photos, stamps and other items which friends in Hungary and elsewhere say they would like to see (!) as would my son in London.

I will try not to bother you again but it is very good to know that you are there if I get badly stuck!

Many thanks once more!

P.S. I like the Modal lightbox! I will keep it in mind for my website rather than slowing up the Congo piece any longer.

**Goeroeboeroe** · Oct 28, 2018, 07:13 AM

Oh, but you don't bother at all! Since I'm retired I do only things for fun, so don't hesitate to ask something.
Maybe you made a mistake in the name of a class ('.column-1', '.columny', etc.). Only characters, numbers, _ en - are allowed in the name of a class. And it may not start with a number. If you use '.column y' as a classname, you actually have the elements <y> in elements with a class 'column'. It's pretty easy to make mistakes, because one simple dot can make a whole world of difference.
For mistakes in the syntax of html and css you could use a validator. They can validate files online, but also when they are in your computer.
Html: https://validator.w3.org/nu/
Css: https://jigsaw.w3.org/css-validator/
Validators won't work against an ugly combination of colors, but they help if you make a mistake in the name of a color, or forget a </div>. Sometimes the error message seems to be written by a lunatic who hates people, but most of the time they are pretty easy to understand.

Do you use some kind of special program for editing your html/css? There are lots of simple or complicated programs that color code etc, or check for syntax error, and that's really handy.

The pop-up can be done, but I think it's good to do some course before that, because there will be lots of new things. You don't have to remember everything (nobody does anymore, it's simply too much), but you will recognize the 'big picture' more easily.

Css selectors are simply the first part of a css rule: the part before the {. If there are more selectors, they are separated with a comma. You can't use a selector to change 'the document' halfway, or something like that. With selectors you can only change one or more elements. If you want to change the document halfway, you have to put the second half in some kind of element (like a <div>), and then you can change that <div> (and everything inside it) with a selector.
The names column-1 and column-2 I just made up. You can make your own names for classes (and id's). It's handy to use a name that says more or less what the thing is supposed to do, so you'll remember it in three months (and it's easier for other people too if they read your code). I've seen people using names like 'rule-1', 'rule-2', ... 'rule-97'. That are valid names.

But the poor coder certainly will not be valid anymore it he or she tries to remember what 'rule-38' doing. If you use, for example, a name like '.street-name' everybody will understand what's in the element with that class, and where the css .street-name {...} is used for.
But you can use any name you like, as long as it listens to the syntax rules about characters and numbers etc.

**JoHubb** · Oct 29, 2018, 11:21 AM

Ah, so I was on the right track by setting up .columnx and .columny! I do not know why 'z' did not work. As you say, it only takes one wrong full stop to wreck everything!

I use Kate as my editor. I like it because there are some in-built 'checkers' which highlight syntax errors in colour. There is also a Preview plugin which can be run alongside the code - a very useful facility. The plugin doesn't work in some Linux distros e.g. Mint Mate 18.3, but it works perfectly in Kubuntu.

Thanks for the information about CSS selectors and class names, and your general encouragement to plod on. This is all very helpful, and reassuring!

Announcement

HTML/CSS layout problem

HTML/CSS layout problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment