homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Scaleable image with caption - question
Johndh




msg:4492826
 11:47 pm on Sep 8, 2012 (gmt 0)

Here's a question on images and caption scaling and alignment that has me beat.

i have some pages which each displays one centered photo - as in a gallery but i put each on its own page. These photos are to be scaled to 70% of the screen height. With that I find that they fit well in lots of different screen sizes and windows, with main title above and links to next and previous pages below. Ive gat all that working fine - people with big screens get a nice big image and those with small screens can still see it all.

But I want the caption to be below the image, with its end aligned with the lower right corner. How can I make that alignment work? its easy if I know the pixel size of the image, but with the image scaling according to height (with width in proportion)I cant figure out a way to tie the alignment of the caption to the width of the image. Ive tried putting them both in a table or div, but i then seem to lose the ability to scale the image properly.

I'm using html4 with CSS. Id prefer not to need java.

cheers and thanks for any insights

John

 

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved