473,695 Members | 2,368 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

centered images ok, but adding text/titles throws it out

If I use the code:

-----
<div style="text-align: center;">

<a href="photos.ph p?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
</a>

<a href="photos.ph p?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.ph p?img=xx1.jpg">
<img src="xx1.jpg" style="padding: 10px;" />
<div>Photo: xx1.jpg</div>
</a>

<a href="photos.ph p?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://v3sw5HPUhw5ln4p r6OSck1ma9u6LwX m5l6Di2e6t5MGSR b8OTen4g7OPa3Xs 7MIr8p7
Jan 9 '07 #1
9 2517
In article <20************ @usenet.piggo.c om>,
Troy Piggins <us*********@pi ggo.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="htmlEnlar gements/1.html"><img src="thumbs/1.gif"
alt="thumbnail link"></a><p>Caption... </p></div>

<div><a href="htmlEnlar gements/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
Jan 9 '07 #2
* dorayme wrote:
In article <20************ @usenet.piggo.c om>,
Troy Piggins <us*********@pi ggo.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="htmlEnlar gements/1.html"><img src="thumbs/1.gif"
alt="thumbnail link"></a><p>Caption... </p></div>

<div><a href="htmlEnlar gements/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.ph p?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.ph p?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://v3sw5HPUhw5ln4p r6OSck1ma9u6LwX m5l6Di2e6t5MGSR b8OTen4g7OPa3Xs 7MIr8p7
Jan 9 '07 #3
Scripsit Troy Piggins:
<div style="text-align: center; float: left;">
<a href="photos.ph p?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/

Jan 9 '07 #4
* Jukka K. Korpela wrote:
Scripsit Troy Piggins:
><div style="text-align: center; float: left;">
<a href="photos.ph p?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://v3sw5HPUhw5ln4p r6OSck1ma9u6LwX m5l6Di2e6t5MGSR b8OTen4g7OPa3Xs 7MIr8p7
Jan 9 '07 #5
* Troy Piggins wrote:
* Jukka K. Korpela wrote:
>Scripsit Troy Piggins:
>><div style="text-align: center; float: left;">
<a href="photos.ph p?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://v3sw5HPUhw5ln4p r6OSck1ma9u6LwX m5l6Di2e6t5MGSR b8OTen4g7OPa3Xs 7MIr8p7
Jan 9 '07 #6
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/

Jan 9 '07 #7
* 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://v3sw5HPUhw5ln4p r6OSck1ma9u6LwX m5l6Di2e6t5MGSR b8OTen4g7OPa3Xs 7MIr8p7
Jan 9 '07 #8
On 2007-01-09, Troy Piggins <us*********@pi ggo.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.
Jan 12 '07 #9
* Ben C wrote:
On 2007-01-09, Troy Piggins <us*********@pi ggo.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://v3sw5HPUhw5ln4p r6OSck1ma9u6LwX m5l6Di2e6t5MGSR b8OTen4g7OPa3Xs 7MIr8p7
Jan 12 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
1862
by: Wilhelm Kutting | last post by:
Hi i want to use the following layout: ----------------- | | | | Text line 1 | | | Text line 2 | image.jpg | | ... | | | | | |
17
2266
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: 1. Create a floated image with text around, with a caption centered underneath. Image size can be varied but the caption needs to have a fixed size to make it break correctly I think. I also need the image to resize automatically when the...
7
2011
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 content page seems to ignore any attempts to manually align right. So what's the deal?
3
2454
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, x=centered, y=300. is it even possible, or do layers have get absolute positions?
0
4080
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 up and stores the text being fed to it. Finally the LibrayBuilder is able to produce a Library which is the topic of this part of the article. Introduction
1
2902
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 method does not 'break out' the bitmaps. If I specify Index 0, I get an unexpected result (horizontal compressing of the file).
1
5634
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 works for resizing horizontally, the problem is when I enlarge the text using firefox, the text doesnt stay aligned with the button. If the text is larger, the text is not centered vertically in the button.
5
13361
matheussousuke
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 http://mghospedagem.com/images/controlpanel.jpg instead of http://mghospedagem.comhttp://mghospedagem.com/images/controlpanel.jpg As u see, there's the website URL before the image URL.
0
8647
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
1
8864
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6506
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5842
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4351
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4592
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3024
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2288
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1986
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.