Introduction
For those who stumble on this custom object, I'm using this to experiment with various ways to present information. Anything you see here, could be gone the next time you look.At first, after joining up, I just jumped in and uploaded a few pictures. That was easy, albeit a bit slow. Soon I decided to try my hand at other object types, notably albums and trip reports. I've created a few, but I'm still somewhat unclear about the dividing line between the two types. Some of my albums have quite a bit in common with what I've seen in some trip reports, but I feel that a TR needs more structure whereas an album, to me anyway, is primarily a means to group a collection of pictures together, with some explanatory text.
Anyway, while I created my first few albums, I noticed that the appearence of what I submitted did not quite meet my expectations. So, I fiddled around quite a bit while I was editing, but at the same time, after starting on an object, I wanted it to be 'right' quickly. To buy some more time for the next article, and to experiment a bit, I decided to create this custom object.
Since I don't expect to remember why I used a certain trick, I'll help myself by writing explanatory text. I'll need text anyway to experiment with how it comes out, so I might as well write about what I'm trying to achieve. That way, I'll still be able to understand it after my next mountain adventure.
Disclaimer
While I will probably leave an introduction in place, this is just a custom object, used to try out stuff, so anything is subject to change here.
Positioning images
What I find especially tricky, is how to get the pictures positioned just the way I want them. While it's easy to use the Insert Image button - and I do use that quite regularly - the placement of the picture in relation to the text often doesn't look quite right, so I have resorted to trial and error options until it looks acceptable. In addition, I've even noticed that while a page may look fine using a particular browser, it might look awkward with a different one.By the way, if you want to experiment yourself, these articles right here on SP I found quite useful:
A small picture on the left
This section starts with a bit of text (this one sentence, to be precise), followed by one small picture, left aligned, using the Insert Image button.
Small size, left
This is some more text, following the picture, just to see where exactly the picture ends up if there is text before and after.
The results looks all right to me.
A medium sized picture on the left
This section again starts with a bit of text, followed by one medium picture, left aligned, using the Insert Image button.
Medium size, left
This is some more text, following the picture, just to see where exactly the picture ends up if there is text before and after.
Again, the results looks all right, but with this small amount of text, a medium size picture comes across as a bit too dominating. However, that's more a matter of style than anything else.
A small picture on the right
This section starts with a bit of text, followed by one small picture, right aligned, using the Insert Image button.
Small size, right
This is some more text, following the picture, just to see where exactly the picture ends up if there is text before and after.
Evaluation
This first attempt at a right aligned picture, without using any special tricks, doesn't look very nice. Sure, the picture is on the right, but it's too low, or, stated differently, the next section (that is, this one) starts too early.
A medium sized picture on the right
Medium size, right
What I really want, is a way to specify that the next section should start later, after the pictures.
After several failed attemps, with <p>, <br>, <div> and <hr>, to name a few, I finally found something simple that did the trick:
<br clear=all>
By inserting this little fragment at the end of a section, the next one will no longer start too soon!
So, if it still works as intended, there is a medium sized picture to the right of this text, but the next section does not start until after the picture.
Centered pictures
This section starts with a bit of text, followed by one small picture, center aligned, using the Insert Image button.
Small size, center
This is some more text, following the picture, just to see where exactly the picture ends up if there is text before and after.
This time, the result isn't too bad, except perhaps for the fact that there is no text to the left or the right of the centered image. In conclusion, centered works best for panorama images, medium or even larger, and at the end of a section.
  |
A sliding panorama
Browsing the SP FAQ, I read about sliding panorama's. Let's play around with that. |
Several pictures on one line
At first, I tried three pictures with, respectively, alignleft, aligncenter and alignright. However, that didn't result in three pictures next to one another, but a diagonal. With a bit of trial and error, and the help of a quite useful article about tables and pictures right here on SP, I'm learning a few things about how to use tables on SP.Tables
This is a basic test, with the simplest of tables to show three pictures side by side.
 |
 |
 |
And some more, this time thumbnails and using HTML instead of the insert image button, resulting in closer packing.
 |
 |
 |
 |
 |
 |
 |
 |
Without tables
After having created several albums, TR's et cetera, I was getting comfortable with HTML. I was using both ways, the [img...] construct as well as tables, and picked up on various details on the way. I had been consulting the w3schools website regularly on how to use HTML and was mostly satisfied with the outcome. But still, occasionally, pictures didn't appear quite where I wanted or expected them, and there were some annoying issues with my pages looking fine in one browser but not in a different one.
After searching for a solution, and a lot of trial and error, I finally found that I could achieve a lot by using the <div> tag.
A simple example:
Whitbourn valley
Königstal
Ehnbach Canyon
Gurglertal
Imbabura trailhead
Along the Taipoiti
Pululahua
Near Huila Khota
Rucu Pichincha
Barranco de Masca
West of Fanes
Rumiñahui
Craigieburn Forest
South of Scharnitz
Footer
Sometimes I noticed that the ad at the bottom of a page is too close to my liking. As soon as there is at least one picture attached, the site automatically adds an Image section, and that solves the problem, but without it, it doesn't always look quite look right. Hence this bit, to create some clear separation, including a line marking the end of my stuff.
Medium size, center
THE END
The HTML code for the separation and the line was
<BR clear=all>
<p align=center><font size=15>THE END</font></p>
<hr><!-- A horizontal line. -->
Boxed text tests
How can I get a boxed text?
This is the caption
Considering that the [img...] construct gives a boxed image, basically, I want the same with text, or even with content in general. How do I do that? I'm thinking about tables, frames or iframes. Let's first have a look at the HTML that will be generated by inserting an image to the right hand side.
This is a bit of boxed text.
This is a bit of boxed text, centered in the box. The box itself is right aligned and has a thin border. The background is yellow.
Some more boxes
This is a bit of boxed content. The box itself is center aligned and has a thin border. The background is light grey.
And another one, this time the background is azure, and in addition to text, it also has a picture:
Thumb, left
Thumb, left
A row of boxes with pictures and text
To create a nice looking row, I've learned that a table can produce this. An alternative might be to use frames.
Let's try a table first.
 |
 |
A slightly different approach: a table without border, but with a box in each cell.
|
|
Collage
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
The First Section
And this is text that should appear to the left of it all!
Positioning an image with text below
This is some text before ....
And this is some text after the first try ...
Seracs on Piz Palü east
And some more text after the second ...
Embedded route
Another one
And an improved one
Same, but no margins, no padding
Going up by the northern approach route, down by the southern.
For the original version of this trail, see Everytrail Track 1189844.
Test
And another
6:19
6:25
6:38
6:39
6:40
6:44
6:48
6:50
References
 |
| previous |
|
|
| previous | next |
Embedded map
A section with nothing but HTML
Images
 |