Anybody know how to center text under an image and keep it "attached" to that image for different resolutions?<!--content-->I think one way of doing this will be<br />
<br />
<p align="center"><br />
now put your image here and <br><br />
and put text here it will always be centered.<br />
</p><br />
<br />
Cheers<br />
<br />
Khalid<!--content-->Thanks Khalid but I need to do it without a <BR> because in some resolutions I have two or more pics next to eachother. In lower resolutions they tend to stack up on top of eachother but that's ok because it keeps away the horizontal scroll (i hate that!).<br />
<br />
Any other ideas?<br />
<br />
Thanks,<br />
<br />
Steve<!--content--><div style="text-align: center; float: left; width: 250px;"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.gif" width="250px" alt="Image Desc"><br />
Some text goes here<br />
</div><!--content-->Thanks nkaisare, but that's not working either, it pulls the small gallery thumbnails up from below into the space where the larger two thumbs are for Gallery 1 and Gallery 2<br />
<br />
Maybe it'll help if you see the code for the thumbs I need to put text under?:<br />
<br />
<h1>Gallery One</h1><br />
<h2>In which Boy Meets Girl; Boy Loves Girl; Boy Marries Girl...</h2><br />
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"javascript
opupPic('../vegas032.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas032a.jpg' alt='Gallery One'></a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"testgall004.html" onclick="javascriptopupPic('../vegas140.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas140a.jpg' alt='Gallery Two'></a><br />
<p><br />
<h5>Click the pictures above to change galleries</h5><br />
<hr><p><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascriptopupPic('../vegas001.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../thumbs/vegas001.jpg'></a><br />
<br />
The last line is repeated about 50 times (one for each small thumb in the gallery). I know I'm not using the "best" code to line all this out. I really am new at this...I added in the <h5> line because I noticed people didn't seem to recognize the top two thumbs as being links to the separate galleries. Now I really want to put Gallery One and Gallery Two, sorta small, like <h5> size under each of the top two thumbs and I need them to be flexible for different resolutions.<br />
<br />
Oh! This is already online...duh, you can see here what the page looks like now: <!-- m --><a class="postlink" href="http://www.hensyel.com/pics/gall001/testgall003.html">http://www.hensyel.com/pics/gall001/testgall003.html</a><!-- m --><br />
<br />
If you're in a low resolution you'll also notice a small alignment problem because of the relative sizes of the large top thumbs...I'm working on that, as it is now they're the same height, so in higher resolutions they line up well ;-)<br />
<br />
Thanks again for helping...I really appreciate it and will be more than happy to throw up props on my Updates page (even a link to your homepage) when I get this all sorted out!<!--content-->ooops, I just noticed the code I pasted into that last post isn't what's currently online, it's from the local file I'm working on today...Here's the currently online part:<br />
<br />
<CENTER><br />
<h1>Phillip and Lynda Hensyel</h1><br />
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"javascriptopupPic('../vegas032.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas032a.jpg' alt='Gallery One'></a></A><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"testgall004.html" onclick="javascriptopupPic('../vegas140.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas140a.jpg' alt='Gallery Two'></a><p><br />
<!--<p align="justify">--><br />
<h1>Gallery One</h1><hr><br />
<h2>In which Boy Meets Girl; Boy Loves Girl; Boy Marries Girl...</h2><P><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascriptopupPic('../vegas001.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../thumbs/vegas001.jpg'></a><!--content-->shensyel,<br />
<br />
I realize this isn't exactly what you're asking for, but a really simple answer that will work EVERY TIME would be to edit the images themselves. Add your text to the image, either on top of the graphic, or underneath like a caption.<br />
<br />
Aronya1<!--content-->Originally posted by Aronya1 <br />
shensyel,<br />
Add your text to the image, either on top of the graphic, or underneath like a caption.<br />
Aronya1 <br />
<br />
Initially, this didn't sound necessary to me. But pondering it more, I think there are fine residual benefits. When you move these photos to another "gallery" the captions will follow with no additional effort. Also, with your numbered naming, you could just write a script loop to load all the pictures. I've started something similar for our family (a wedding, too). A rought cut is attached.<!--content-->
<br />
<p align="center"><br />
now put your image here and <br><br />
and put text here it will always be centered.<br />
</p><br />
<br />
Cheers<br />
<br />
Khalid<!--content-->Thanks Khalid but I need to do it without a <BR> because in some resolutions I have two or more pics next to eachother. In lower resolutions they tend to stack up on top of eachother but that's ok because it keeps away the horizontal scroll (i hate that!).<br />
<br />
Any other ideas?<br />
<br />
Thanks,<br />
<br />
Steve<!--content--><div style="text-align: center; float: left; width: 250px;"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.gif" width="250px" alt="Image Desc"><br />
Some text goes here<br />
</div><!--content-->Thanks nkaisare, but that's not working either, it pulls the small gallery thumbnails up from below into the space where the larger two thumbs are for Gallery 1 and Gallery 2<br />
<br />
Maybe it'll help if you see the code for the thumbs I need to put text under?:<br />
<br />
<h1>Gallery One</h1><br />
<h2>In which Boy Meets Girl; Boy Loves Girl; Boy Marries Girl...</h2><br />
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"javascript
opupPic('../vegas032.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas032a.jpg' alt='Gallery One'></a><br /><a href=http://www.webdeveloper.com/forum/archive/index.php/"testgall004.html" onclick="javascript
opupPic('../vegas140.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas140a.jpg' alt='Gallery Two'></a><br /><p><br />
<h5>Click the pictures above to change galleries</h5><br />
<hr><p><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
opupPic('../vegas001.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../thumbs/vegas001.jpg'></a><br /><br />
The last line is repeated about 50 times (one for each small thumb in the gallery). I know I'm not using the "best" code to line all this out. I really am new at this...I added in the <h5> line because I noticed people didn't seem to recognize the top two thumbs as being links to the separate galleries. Now I really want to put Gallery One and Gallery Two, sorta small, like <h5> size under each of the top two thumbs and I need them to be flexible for different resolutions.<br />
<br />
Oh! This is already online...duh, you can see here what the page looks like now: <!-- m --><a class="postlink" href="http://www.hensyel.com/pics/gall001/testgall003.html">http://www.hensyel.com/pics/gall001/testgall003.html</a><!-- m --><br />
<br />
If you're in a low resolution you'll also notice a small alignment problem because of the relative sizes of the large top thumbs...I'm working on that, as it is now they're the same height, so in higher resolutions they line up well ;-)<br />
<br />
Thanks again for helping...I really appreciate it and will be more than happy to throw up props on my Updates page (even a link to your homepage) when I get this all sorted out!<!--content-->ooops, I just noticed the code I pasted into that last post isn't what's currently online, it's from the local file I'm working on today...Here's the currently online part:<br />
<br />
<CENTER><br />
<h1>Phillip and Lynda Hensyel</h1><br />
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"javascript
opupPic('../vegas032.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas032a.jpg' alt='Gallery One'></a></A><br /><a href=http://www.webdeveloper.com/forum/archive/index.php/"testgall004.html" onclick="javascript
opupPic('../vegas140.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../vegas140a.jpg' alt='Gallery Two'></a><p><br /><!--<p align="justify">--><br />
<h1>Gallery One</h1><hr><br />
<h2>In which Boy Meets Girl; Boy Loves Girl; Boy Marries Girl...</h2><P><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
opupPic('../vegas001.jpg')"><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/../thumbs/vegas001.jpg'></a><!--content-->shensyel,<br /><br />
I realize this isn't exactly what you're asking for, but a really simple answer that will work EVERY TIME would be to edit the images themselves. Add your text to the image, either on top of the graphic, or underneath like a caption.<br />
<br />
Aronya1<!--content-->Originally posted by Aronya1 <br />
shensyel,<br />
Add your text to the image, either on top of the graphic, or underneath like a caption.<br />
Aronya1 <br />
<br />
Initially, this didn't sound necessary to me. But pondering it more, I think there are fine residual benefits. When you move these photos to another "gallery" the captions will follow with no additional effort. Also, with your numbered naming, you could just write a script loop to load all the pictures. I've started something similar for our family (a wedding, too). A rought cut is attached.<!--content-->