Right now the page requires a very wide screen to read easily. Most people will have to scroll left and right all the time, which is quite cumbersome. I reckon most people don't have a 1600 pixels wide screen. Therefore I suggest a bit of tinkering so that it good on smaller screens too. As I presume you know, the cause of the wide page is the table with the three pictures, and it's easy to change that. Three possibilities:
1) Make the pics smaller. By making them, say, 400px wide, the page gets smaller for everyone. This is the easiest fix
2) Make the width of the pics dependent on the width of the window. More precisely, let the width of each pic be 32% or so (the remaining 6% will be for the margins). I've done this myself (in particular, I do this when I have one big picture that I want to resize to the width of the window). For a table with three images it takes a bit of HTML knowledge to do that, so if you're not familiar with that, don't go there.
3) Remove the table altogether and use "floating div" tags around the three images. With each image inside its own separate left floating div, they will only appear besides another when the page is viewed in a window that is big enough to begin with. This also takes a bit of HTML, but since this can be very useful, I'll explain it. First, insert an image in the usual way. Secondly, switch to the editor's HTML mode and insert this tag:
- Code: Select all
<div style="float: left;">...here goes the original code...</div>
After a little cleaning up (such as removing a number of <br> tags), here is a complete HTML fragment that could replace the table with the three images in your page:
- Code: Select all
<br clear="all">
<div style="float: left;">
<div class="image" style="width:500px;" align="center"><a href="/view_object.php?object_id=968781"><img src="/images/medium/968781.jpg" alt="Mohon Peak"></a><br>
<span class="caption">Dividing canyon</span>
</div>
</div>
<div style="float: left;">
<div class="image" style="width:500px;" align="center"><a href="/view_object.php?object_id=968782"><img src="/images/medium/968782.jpg" alt="Mohon Peak"></a><br>
<span class="caption">Goldwater Tank</span>
</div>
</div>
<div style="float: left;">
<div class="image" style="width:500px;" align="center"><a href="/view_object.php?object_id=968783"><img src="/images/medium/968783.jpg" alt="Mohon Peak"></a><br>
<span class="caption">Mohon Peak as seen from near Peak 6406</span>
</div>
</div>
<br clear="all">
If you're not afraid of tinkering some more, you can play around with other style elements in addition to the float, such as margins or borders.
Posted: Thu Feb 27, 2014 7:16 pm