lostdreamer
msg:4493822 | 3:03 pm on Sep 11, 2012 (gmt 0) |
Put the main image inside a DIV container (this container will automaticly be the same size as your image) and your caption as well (1 line below)
ie:
<div>
<img src="path/to/image.jpg"><br>
Caption text
</div>
You can use css to center the DIV in the page and set it's width to 70% (set the image on 100% to make it scale to it's parent container)
As long as the DIV has text-align:right; your text should aline with the bottom right corner of the image...
How are you currently scaling your image?
|
lucy24
msg:4493978 | 9:16 pm on Sep 11, 2012 (gmt 0) |
| How are you currently scaling your image? |
|
I got stuck on that one too. Where do you get the screen height without javascript? (Or when you said "java" did you really mean "java"? ;)) Is there a supplementary maximum height to ensure that the image never gets bigger than its real size? Is it your own raw code or one of those proprietary add-ons so only the resized image gets downloaded?
Resizing on the fly is an iffy approach at best. The users who need the most resizing (phones and tablets) are the ones most likely to have constraints on download size. They're also the ones most likely to have a viewport that's taller than it's wide. That's a shame because with an ordinary desktop browser, screen height is a better criterion than width.
|
Johndh
msg:4493990 | 9:49 pm on Sep 11, 2012 (gmt 0) |
Thanks for the replies - I actually have a solution now, given to me on another forum and ive fixed my code to suit. Height rather than width is the main scaling criterion, combined with alignment of the caption. I cant put links on this forum but let me assemble a generic version of the code and Ill show you. And ill post a screen shot to show you how it looks.
John
|
Johndh
msg:4493997 | 10:20 pm on Sep 11, 2012 (gmt 0) |
It worked out very well, with help!.
This is the main body section of the html4 code:
</head>
<body>
<div class="outer">
<h1>Title Title</h1>
<span class="scene">
<span class="photolinks"><a class="photomenu" href="../index.htm">Home</a><a class="photomenu" href="../photos.htm">Photographs</a></span>
<img class="gallery" src="photos/photo10.jpg" alt="">
<span class="photocreditgallery">Caption Caption
</span>
</span>
<div><br>
<a class="photo" href="photo9.htm">Previous</a>
<a class="photo" href="photo11.htm">Next</a>
</div></div>
<div style="display: none">
<img src="photos/photo11.jpg" width = 0 alt="photo">
</div>
</body>
</html>
Here is the relevant css:
.outer {
height:100%;
}
a.photo, a.photomenu{
border:1px solid;
border-color: #666 #444 #444 #666;
background: #222;
font-size:0.8em;
line-height:100%;
font-family:Arial;
text-decoration:none;
padding:2px 12px 2px;
margin:0px;
}
a.photo + a.photo {margin-left:80px;}
img.gallery {
height:70%;
padding-top:34px;
padding-bottom:5px;
}
.scene {
position:relative;
}
.photolinks {
display:block;
position:absolute;
left:0px;
word-spacing:normal;
}
And this is a screen shot, with a window purposfully reduced to about 1/2 of my screen - its all scaling and aligning quite nicely:
[i731.photobucket.com ]
Ive had very good help before on this forum, so Im hoping this may be of use to others
|
|
