If I use the code:
-----
<div style="text-align: center;">
<a href="photos.php?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
</a>
<a href="photos.php?img=xx2.jpg">
<img src="xx2.jpg" style="padding: 10px;" />
</a>
</div>
-----
Then the images appear side by side (if they are small enough)
and are centered in the div. If there are more images within
the div than can fit on one line, they go down to the next line
but are still centered within the div. That is how I want it to
appear.
However I run into trouble if I want to add a title/text under
the images:
-----
<div style="text-align: center;">
<a href="photos.php?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
<div>Photo: xx1.jpg</div>
</a>
<a href="photos.php?img=xx2.jpg">
<img src="xx2.jpg" style="padding: 10px;" />
<div>Photo: xx2.jpg</div>
</a>
</div>
-----
With the above code, only one image per line is displayed. The
text is centered under the image, but how do I get the
image/titles side by side again?
--
Troy Piggins ,-O (o- O All your sigs are belong to us. http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTe n4g7OPa3Xs7MIr8p7 9  2494 
In article <20************@usenet.piggo.com>,
Troy Piggins <us*********@piggo.comwrote:
If I use the code:
With the above code, only one image per line is displayed. The
text is centered under the image, but how do I get the
image/titles side by side again?
Try playing with code like this:
<div>
<div><a href="htmlEnlargements/1.html"><img src="thumbs/1.gif"
alt="thumbnail link"></a><p>Caption...</p></div>
<div><a href="htmlEnlargements/2.html"><img src="thumbs/2.jpg"
alt="thumbnail link"></a><p>Caption...</p></div>
</div>
and, for css:
div{
font-size: 85%;
background: #fff;
margin-top: 1%;
margin-left:auto;
margin-right:auto;
width: 90%;
}
div div {
float: left;
width: 192px;
padding: 2px 5px 2px 5px;
text-align: center;
border: 0px #ccc solid;
}
Forget about xhtml, no need, use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
--
dorayme
* dorayme wrote:
In article <20************@usenet.piggo.com>,
Troy Piggins <us*********@piggo.comwrote:
>If I use the code:
>With the above code, only one image per line is displayed. The
text is centered under the image, but how do I get the
image/titles side by side again?
Try playing with code like this:
<div>
<div><a href="htmlEnlargements/1.html"><img src="thumbs/1.gif"
alt="thumbnail link"></a><p>Caption...</p></div>
<div><a href="htmlEnlargements/2.html"><img src="thumbs/2.jpg"
alt="thumbnail link"></a><p>Caption...</p></div>
</div>
I tried this:
-----
<div style="margin: auto;">
<div style="text-align: center; float: left;">
<a href="photos.php?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
<div>Photo: xx1.jpg</div>
</a>
</div>
<div style="text-align: center; float: left;">
<a href="photos.php?img=xx2.jpg">
<img src="xx2.jpg" style="padding: 10px;" />
<div>Photo: xx2.jpg</div>
</a>
</div>
</div>
-----
and it "almost" works. The images and captions are appearing
how/where I want them, but divs/footers etc after the images are
appearing underneath them now. Look at: http://piggo.com/~troy/photos.php?al...-Christmas_Eve
and, for css:
div{
I took it that this works for the outside div?
font-size: 85%;
background: #fff;
margin-top: 1%;
margin-left:auto;
margin-right:auto;
width: 90%;
}
div div {
I don't know if this is a type or not? I took this to be the
inside divs?
float: left;
width: 192px;
padding: 2px 5px 2px 5px;
text-align: center;
border: 0px #ccc solid;
}
Forget about xhtml, no need, use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Is xhtml not the way to go? Not popular? Not supported?
Undesirable? I am new to this, and from some sites I read I
thought it was the way everyone was heading.
--
Troy Piggins ,-O (o- O All your sigs are belong to us. http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTe n4g7OPa3Xs7MIr8p7
Scripsit Troy Piggins:
<div style="text-align: center; float: left;">
<a href="photos.php?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
<div>Photo: xx1.jpg</div>
</a>
</div>
That's invalid markup; an <aelement must not contain a <divelement. But
you can use
<a ...><img ...><br>Photo: ...</a>
and it "almost" works. The images and captions are appearing
how/where I want them, but divs/footers etc after the images are
appearing underneath them now.
I can't see what you mean by that (how do you divide divs with footers, and
what do you mean by "divs" and "footers"?), but the syntax error should be
fixed anyway.
Regarding captioning of images in general, see some alternative approaches: http://www.cs.tut.fi/~jkorpela/www/captions.html
>div{
I took it that this works for the outside div?
What you specify that way applies to _all_ div elements, though it may be
overriden by other rules.
>div div {
I don't know if this is a type or not?
It's a selector.
I took this to be the inside divs?
The selector div div refers to any div element that appears inside another
div element, directly or indirectly. If you have div elements nested just
simply, then yes, it refers to inner divs.
Is xhtml not the way to go?
No.
from some sites I read I
thought it was the way everyone was heading.
If you rely on hearsay in such matters, then c.i.w.a.* groups are generally
a better source of information than most sites. If you don't, hang around
some time especially in c.i.w.a.html and you'll find explanations and
references that allow you to make an informed decision (that is, to _know_
that the answer is, as far as practical WWW authoring now and in the next
few years is considered, "No").
--
Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/
* Jukka K. Korpela wrote:
Scripsit Troy Piggins:
><div style="text-align: center; float: left;">
<a href="photos.php?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
<div>Photo: xx1.jpg</div>
</a>
</div>
That's invalid markup; an <aelement must not contain a <divelement. But
you can use
<a ...><img ...><br>Photo: ...</a>
Ok - fixed that. Aside - the W3C validator didn't seem to bork
at it?
>and it "almost" works. The images and captions are appearing
how/where I want them, but divs/footers etc after the images are
appearing underneath them now.
I can't see what you mean by that (how do you divide divs with footers, and
Sorry, I described that poorly - that's why I provided link to
site to show what is happening.
What I want is the following page: http://piggo.com/~troy/photos.php?album=tangalooma
to be displayed with captions below. What I am getting at the
moment is this: http://piggo.com/~troy/photos-testin...bum=tangalooma
what do you mean by "divs" and "footers"?), but the syntax error should be
fixed anyway.
Regarding captioning of images in general, see some alternative approaches:
http://www.cs.tut.fi/~jkorpela/www/captions.html
Will look at it now.
>>div{
I took it that this works for the outside div?
What you specify that way applies to _all_ div elements, though it may be
overriden by other rules.
>>div div {
I don't know if this is a type or not?
It's a selector.
> I took this to be the inside divs?
The selector div div refers to any div element that appears inside another
div element, directly or indirectly. If you have div elements nested just
simply, then yes, it refers to inner divs.
Ok thanks for clarifying.
>Is xhtml not the way to go?
No.
> from some sites I read I
thought it was the way everyone was heading.
If you rely on hearsay in such matters, then c.i.w.a.* groups are generally
a better source of information than most sites. If you don't, hang around
some time especially in c.i.w.a.html and you'll find explanations and
references that allow you to make an informed decision (that is, to _know_
that the answer is, as far as practical WWW authoring now and in the next
few years is considered, "No").
Thanks for the advice. I am new to this web authoring and
learning every day. I only started php last week. Might lurk
some of those groups you mention.
--
Troy Piggins ,-O (o- O All your sigs are belong to us. http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTe n4g7OPa3Xs7MIr8p7
* Troy Piggins wrote:
* Jukka K. Korpela wrote:
>Scripsit Troy Piggins:
>><div style="text-align: center; float: left;">
<a href="photos.php?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
<div>Photo: xx1.jpg</div>
</a>
</div>
That's invalid markup; an <aelement must not contain a <divelement. But
you can use
<a ...><img ...><br>Photo: ...</a>
Ok - fixed that. Aside - the W3C validator didn't seem to bork
at it?
>>and it "almost" works. The images and captions are appearing
how/where I want them, but divs/footers etc after the images are
appearing underneath them now.
I can't see what you mean by that (how do you divide divs with footers, and
Sorry, I described that poorly - that's why I provided link to
site to show what is happening.
What I want is the following page:
http://piggo.com/~troy/photos.php?album=tangalooma
Sorry - I've changed it a bit - that link should read http://piggo.com/~troy/photos-testin...bum=tangalooma
to be displayed with captions below. What I am getting at the
moment is this:
http://piggo.com/~troy/photos-testin...bum=tangalooma
And this link is displaying a little better - I added a <br />
and seems better.
>what do you mean by "divs" and "footers"?), but the syntax error should be
fixed anyway.
Regarding captioning of images in general, see some alternative approaches:
http://www.cs.tut.fi/~jkorpela/www/captions.html
Will look at it now.
>>>div{
I took it that this works for the outside div?
What you specify that way applies to _all_ div elements, though it may be
overriden by other rules.
>>>div div {
I don't know if this is a type or not?
It's a selector.
>> I took this to be the inside divs?
The selector div div refers to any div element that appears inside another
div element, directly or indirectly. If you have div elements nested just
simply, then yes, it refers to inner divs.
Ok thanks for clarifying.
>>Is xhtml not the way to go?
No.
>> from some sites I read I
thought it was the way everyone was heading.
If you rely on hearsay in such matters, then c.i.w.a.* groups are generally
a better source of information than most sites. If you don't, hang around
some time especially in c.i.w.a.html and you'll find explanations and
references that allow you to make an informed decision (that is, to _know_
that the answer is, as far as practical WWW authoring now and in the next
few years is considered, "No").
Thanks for the advice. I am new to this web authoring and
learning every day. I only started php last week. Might lurk
some of those groups you mention.
--
Troy Piggins ,-O (o- O All your sigs are belong to us. http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTe n4g7OPa3Xs7MIr8p7
Scripsit Troy Piggins:
>That's invalid markup; an <aelement must not contain a <div>
element. But you can use
<a ...><img ...><br>Photo: ...</a>
Ok - fixed that. Aside - the W3C validator didn't seem to bork
at it?
Really? That would be very odd. Are you sure you used the W3C validator?
Your markup has an additional reportable markup error: lack of the alt
attribute in <img>. Surely the validator reports that, unless you have
something odd in your document, like "<!--" that turns some bulk of code
into a comment.
What I want is the following page:
http://piggo.com/~troy/photos.php?album=tangalooma
to be displayed with captions below. What I am getting at the
moment is this:
http://piggo.com/~troy/photos-testin...bum=tangalooma
I still cannot see the difference (testing on IE 7). I'm a bit confused with
the thin dotted lines that separate captions from the corresponding images,
but they seem to appear on both pages and to be what you want.
P.S. In future, please quote only the relevant part(s) of the message you
are commenting on (basically, the parts that you comment on).
--
Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/
* Jukka K. Korpela wrote:
Scripsit Troy Piggins:
>>That's invalid markup; an <aelement must not contain a <div>
element. But you can use
<a ...><img ...><br>Photo: ...</a>
Ok - fixed that. Aside - the W3C validator didn't seem to bork
at it?
Really? That would be very odd. Are you sure you used the W3C validator?
Your markup has an additional reportable markup error: lack of the alt
attribute in <img>. Surely the validator reports that, unless you have
something odd in your document, like "<!--" that turns some bulk of code
into a comment.
To be honest, I've been changing the code so much in the last day
or so, I could've got myself mixed up. Now the page is a little
more stable, I'll do some validating and tidying up.
>What I want is the following page:
[snip]
>>
to be displayed with captions below. What I am getting at the
moment is this:
[snip]
>
I still cannot see the difference (testing on IE 7). I'm a bit confused with
As above, I've been changing the code a lot lately. In hindsight
the whole lot should be separated from publicly viewable stuff.
the thin dotted lines that separate captions from the corresponding images,
but they seem to appear on both pages and to be what you want.
I'm getting there slowly. Thanks for your help in the right
directions.
P.S. In future, please quote only the relevant part(s) of the message you
are commenting on (basically, the parts that you comment on).
Yes, sorry about that.
--
Troy Piggins ,-O (o- O All your sigs are belong to us. http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTe n4g7OPa3Xs7MIr8p7
On 2007-01-09, Troy Piggins <us*********@piggo.comwrote:
[snip]
Then the images appear side by side (if they are small enough)
and are centered in the div. If there are more images within
the div than can fit on one line, they go down to the next line
but are still centered within the div. That is how I want it to
appear.
However I run into trouble if I want to add a title/text under
the images:
[snip]
The exact effect you want is only practically achievable with display:
inline-block, since you want the image-with-captions to be themselves
centered.
But inline-block is not widely supported.
You'd do it like this, but it won't work in Firefox (Opera is OK
though, so is Konqueror and probably Safari):
img
{
display: block;
}
div.image
{
display: inline-block;
text-align: center;
}
...
<div style="text-align: center">
<div class="image">
<img src="foo.png">
Caption
</div>
<div class="image">
<img src="foo.png">
Caption
</div>
<div class="image">
<img src="foo.png">
Caption
</div>
</div>
Without inline-block, the closest you can do is dorayme's suggestion
using floats, but the images will be left-aligned, not centered.
* Ben C wrote:
On 2007-01-09, Troy Piggins <us*********@piggo.comwrote:
[snip]
>Then the images appear side by side (if they are small enough)
and are centered in the div. If there are more images within
the div than can fit on one line, they go down to the next line
but are still centered within the div. That is how I want it to
appear.
However I run into trouble if I want to add a title/text under
the images:
[snip]
The exact effect you want is only practically achievable with display:
inline-block, since you want the image-with-captions to be themselves
centered.
But inline-block is not widely supported.
You'd do it like this, but it won't work in Firefox (Opera is OK
though, so is Konqueror and probably Safari):
:( If it doesn't work in FF (or IE - I tried it), I can't have that.
Thankyou for your advice, though.
[snip code]
>
Without inline-block, the closest you can do is dorayme's suggestion
using floats, but the images will be left-aligned, not centered.
Yeah, I think I'll keep it that way for now.
Thanks again.
--
Troy Piggins ,-O (o- O All your sigs are belong to us. http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTe n4g7OPa3Xs7MIr8p7 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Wilhelm Kutting |
last post by:
Hi i want to use the following layout:
----------------- |
| | | Text line 1
| | | Text line 2
| image.jpg | | ...
| | |
| | |
|
by: Stian Lund |
last post by:
Hello,
I've been struggling with this problem for a while now, so I though I'd
get some input from anyone more skilled with CSS than I am.
I'm actually trying to accomplish two things with this:...
|
by: TheLongshot |
last post by:
I just recently converted a few pages of my application to using master
pages. Problem is, in all of my content pages, the contents are
centered. I can't figure out why. The markup in the...
|
by: Tobi Hammert |
last post by:
i have a page that shows a random picture, centered.
how do i create a layer that stays centered, but always 300 px down
from the top?
to make it clear again: i want to place a text layer,...
|
by: JosAH |
last post by:
Greetings,
the last two article parts described the design and implementation of the
text Processor which spoonfeeds paragraphs of text to the LibraryBuilder.
The latter object organizes, cleans...
|
by: Jeffrey Walton |
last post by:
Hi All,
I have an array of 16x16 bitmaps (60 total). I've tried adding the
array to the ImageList with the Add method, but the TreeView paints as
if no BMP is present.
The problem is the...
|
by: Maxime |
last post by:
Hello,
I want to make a button that automatically resizes according to the
text length and the font size (which can be changed in firefox pretty
easily with the browser).
The button already...
|
by: matheussousuke |
last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails.
The goal is: Make it send the email with the URL...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| | |
