Borderline around non fixed-width images?

Hi!

On my website (http://michaelsremarks.blogspot.com) I use a so called
flickr-badge. That is some sourcecode that takes a picture out of my
flickr-gallery and puts it onto my website.

Now I would like the picture to have a border with a 3px (or so)
padding all around. The problems are:

a. If I do not input a fixed-width, like now 100px, the image is on
another position.
b. If the picture is not landscape-format (which is rather often), I
have more than 3px padding on the right side of the picture!

Just reload the homepage a few times and you see, what I mean.

Is there a solution for this problem?

Thanks, M.

in comp.infosystems.www.authoring.stylesheets, Michael Kalina wrote:

Hi!

On my website (http://michaelsremarks.blogspot.com) I use a so called
flickr-badge. That is some sourcecode that takes a picture out of my
flickr-gallery and puts it onto my website.

Now I would like the picture to have a border with a 3px (or so)
padding all around. The problems are:

a. If I do not input a fixed-width, like now 100px, the image is on
another position.

What do you mean? Where it should be? If in middle of right panel:

a {border:#999 1px solid;dispaly:block;margin:auto;}
img {margin:3px;}

<a><img></a>

b. If the picture is not landscape-format (which is rather often), I
have more than 3px padding on the right side of the picture!

What do you want?

Or maybe, in the middle of fixed box:
a {border:#999 1px solid;dispaly:block;margin:auto;width:100%}
img {margin:3px auto;}

Just reload the homepage a few times and you see, what I mean.

Is there a solution for this problem?

Yes. Problem is that I don't know what you wish.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote

What do you want?

The picture on the sidebar, beneath "Aktuelles Bild" is "produced" by
this code:

<div style="padding:2px;margin:0 45px 0 0;border:solid silver
1px;width:100px">
<script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=65039038@N00&amp;count=1&amp;d isplay=random&amp;name=0&amp;size=thumb&amp;raw=1" ></script>
</div>

Now the problem is that this picture not always is 100px wide. It also
can be only, say, 60px wide, but the CSS always produces a 100px-wide
box, no matter weather the picture is or is not 100px wide.

My question is: How do I have to change the code, so that it works
also with pictures that have another width than 100px?

On 30 Oct 2004 15:55:18 -0700, m.kalina (AT) gmail (DOT) com (Michael Kalina)
wrote:

div style="padding:2px;margin:0 45px 0 0;border:solid silver
1px;width:100px"
script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=65039038@N00&amp;count=1&amp;d isplay=random&amp;name=0&amp;size=thumb&amp;raw=1" ></script
/div

Now the problem is that this picture not always is 100px wide. It also
can be only, say, 60px wide, but the CSS always produces a 100px-wide
box, no matter weather the picture is or is not 100px wide.

My question is: How do I have to change the code, so that it works
also with pictures that have another width than 100px?

<div class="foo">
<script ...></script>
</div>

div.foo {
margin: 0 45px;
width: 100px;
text-align: center;
}
div.foo img {
border: solid silver 1px;
padding: 2px;
}

The border will now be around the image which will be centered in the
100px wide div.

Steve

in comp.infosystems.www.authoring.stylesheets, Michael Kalina wrote:

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote in message news:

What do you want?

The picture on the sidebar, beneath "Aktuelles Bild" is "produced" by
this code:

..foobar {text-align:center;margin-left:-20px;}
..foobar img {padding:3px;border:silver 1px solid;}

Might not work on IE.

<div class="foobar">

script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=65039038@N00&amp;count=1&amp;d isplay=random&amp;name=0&amp;size=thumb&amp;raw=1" ></script
/div

I don't understand at all why are you using that script. I bet you don't
understand the script either. Using some simple server side code would be
much better.

Now the problem is that this picture not always is 100px wide. It also
can be only, say, 60px wide, but the CSS always produces a 100px-wide
box, no matter weather the picture is or is not 100px wide.

That is because you say width:100px;

My question is: How do I have to change the code, so that it works
also with pictures that have another width than 100px?

I am not exatly sure if you need to change that script, but it certainly
would be very good idea, as it writes incorrect and idiotic code.
It writes stuff like
<table cellspacing="0" cellpadding="4" ...>
<tr align="center">
And doesn't do anything at all, exept print urls that it gets from server
side thingy.

What is that script supposed to do? Why are you using it? Why it is
mostly bullshit? Where did you get it?

Have you noticed, that your code is horrible to look at?



--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote

in comp.infosystems.www.authoring.stylesheets, Michael Kalina wrote:
Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote in message news:
div class="foobar"
script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=65039038@N00&amp;count=1&amp;d isplay=random&amp;name=0&amp;size=thumb&amp;raw=1" ></script
/div

I don't understand at all why are you using that script. I bet you don't
understand the script either. Using some simple server side code would be
much better.
What is that script supposed to do? Why are you using it? Why it is
mostly bullshit? Where did you get it?

Have you noticed, that your code is horrible to look at?

Dear Lauri!

Sorry that my code offends your eyes, sorry that I, somebody who tries
to produce validating code, ask such questions in such an elite-group,
where somebody who is not a specialist in stylesheets seems not to be
welcome.

Yes, I have no clue what this javascript does, yes, I do not
understand it. It's a code I got from the flickr-service
(http://flickr.com) to show some random image of my pictures on my
homepage, which is also taken from blogger (http://blogger.com) and
which's code is written by Dan Cederholm (http://www.simplebits.com/),
who seems to be a specialist in this...

Of course, it would be more easy for me to just input the code I got
from flickr, let the thing be working and that's it. A lot of people I
know are doing this. But no, I try to ask in the html- and
stylesheet-group how to produce validating code, because I thing that
this is the least thing I can do to support some standards... Usually
I learn out of the answers I get and the next time I can do a solution
for myself, not asking the experts in the html- or stylesheet-groups.

But what happens? Reading answers that express nothing else than "What
do you want, go away, let us alone?!!!" (especially from you!) is not
funny, not useful and for somebody who really has no clue of
professional coding, it's disappointing.

My word on it...

M.

in comp.infosystems.www.authoring.stylesheets, Michael Kalina wrote:

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote

in comp.infosystems.www.authoring.stylesheets, Michael Kalina wrote:
Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote in message news:
div class="foobar"
script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=65039038@N00&amp;count=1&amp;d isplay=random&amp;name=0&amp;size=thumb&amp;raw=1" ></script
/div

I don't understand at all why are you using that script. I bet you don't
understand the script either. Using some simple server side code would be
much better.
What is that script supposed to do? Why are you using it? Why it is
mostly bullshit? Where did you get it?

Have you noticed, that your code is horrible to look at?

Dear Lauri!

Sorry that my code offends your eyes,

I makes debugging of your site very hard, and you asked help. Offending
my eyes is irrelevant. (Very good sites with easily debuggable code may
hurt my eyes, as I don't like capitalized tags - but that is totally
irrelevant, unless someone asks)

In first reply, I ddin't even look at your code very carefully, because
it was so un readable, and I thought you would know basics of CSS and
HTML. So I didn't know you used some clueless script instead some clueful
script.

sorry that I, somebody who tries
to produce validating code, ask such questions in such an elite-group,
where somebody who is not a specialist in stylesheets seems not to be
welcome.

Don't take it personally. If you take newsgroup messages personally, you
are stupid. (now, if you read that to mean that you would be stupid, you
are stupid. You are not stupid, but the JS you used sure is.)

Yes, I have no clue what this javascript does, yes, I do not
understand it. It's a code I got from the flickr-service
(http://flickr.com) to show some random image of my pictures on my
homepage, which is also taken from blogger (http://blogger.com) and
which's code is written by Dan Cederholm (http://www.simplebits.com/),
who seems to be a specialist in this...

The JS it wrotes it complete bullshit. The random image thing irrelated
to that JS. I was unable to find the script on those

Of course, it would be more easy for me to just input the code I got
from flickr, let the thing be working and that's it. A lot of people I
know are doing this.

Well, what is that code? Is it hard to believe it would be worse than JS
you have now. Or is that JS the code? Do flickr give you options about
code (can you use some other?)

But what happens? Reading answers that express nothing else than "What
do you want, go away, let us alone?!!!"

I never said let us alone. I did ask what do you want, because I didn't
know what you wanted. Is it too hard to get that it is impossible to give
answer if it is not known what you aim.

In the first message, I gave you 2 generic code examples on about how to
do it. You never commented them. In my second post, I give you one ugly
hack, which would allow you to use your horrible JS. If you don't
understand my advice, and can't ask what I mean with it, you better not
give me bullshit.

If your code would have been more sensible, it would be easy to give you
even more different ways to do it. But you are using one cell table with
invalid attributes, which makes styling much harder. The fact that you
did not know you used table layout doesn't take it away.

Validation is just tool, it does not for example get invalid code
generated by JS.

(especially from you!)

I gave you some CSS to make it look somehitng that I *guessed* you want
it to look. You didn't say, if you want you box in center, or image
centered in box, or box left edge in same place, or boxes right edge in
same place, etc, etc.

It is very hard to help you make something look like something, If you
don't know what it should look.

The JS also prints all kinds of stuff that make make using styles very
hard. Which is why neither of 2 different codes I gave you work.

is not
funny, not useful and for somebody who really has no clue of
professional coding, it's disappointing.

I have given you 3 different way to do what I think you want. You have
not understood any of them. So instead actually asking why none of them
work, you ´give me bullshit about me mentioning your invalid code
generated by script you don't understand.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote

in comp.infosystems.www.authoring.stylesheets, Michael Kalina wrote:
Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote

I have given you 3 different way to do what I think you want. You have
not understood any of them. So instead actually asking why none of them
work, you ´give me bullshit about me mentioning your invalid code
generated by script you don't understand.

"Bullshit" seems to be the word that suits your needs.

However, in the meantime I got a solution for what I need. Thanks to
Steve Pugh.

Of course, your advice to make the code look better, is also in the
works, but I cannot - and that's really a pitty - change some parts of
the code as it is being inserted by the provider/hoster, namely
Blogger.

Maybe I'll move to another hoster or just see, how I can get around
it.

Thanks for the help, anyway.

On 2 Nov 2004 00:10:36 -0800, m.kalina (AT) gmail (DOT) com (Michael Kalina)
wrote:

"Bullshit" seems to be the word that suits your needs.

However, in the meantime I got a solution for what I need. Thanks to
Steve Pugh.

Huh?

My solution:

div.foo { margin: 0 45px; width: 100px; text-align: center;}
div.foo img { border: solid silver 1px; padding: 2px; }

Lauri's solution:

..foobar {text-align:center;margin-left:-20px;}
..foobar img {padding:3px;border:silver 1px solid;}

Almost identical. I think you should be more careful.

Steve