| Author |
border around images!
|
|
| Oliver 2004-11-21, 11:18 pm |
| Hello i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.
I tried it in CSS.
I did the following:
<div class="img_class">
<img src="./images/img1.jpg" border="0" alt="img1" />
</div>
And in my css i have:
..img_class {
border: 1px solid #999999;
}
It doesn't work 100% as i want it, as the distance to the image from the
bottom border is off. There is some empty space. Even adding margin:0px;
and padding:0px; didn't help.
Anyone a solution for this?
Cheers
| |
| Steve Pugh 2004-11-21, 11:18 pm |
| On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <oliver_summa@web.de>
wrote:
>Hello i want to get a nice border around images, but not just with the
>simple <img src"....." border="1"> tag.
>I tried it in CSS.
>I did the following:
>
><div class="img_class">
><img src="./images/img1.jpg" border="0" alt="img1" />
></div>
That's a very poor alt attribute. Try something that will actually
serve as an alternative to the image for those users who can't see it.
>And in my css i have:
>
>.img_class {
> border: 1px solid #999999;
> }
>
>It doesn't work 100% as i want it, as the distance to the image from the
>bottom border is off. There is some empty space. Even adding margin:0px;
>and padding:0px; didn't help.
>
>Anyone a solution for this?
Why are you specifying a border on the div and not on the image
itself?
<img src="./images/img1.jpg" class="foo" alt="something sensible" />
..foo { border: 1px solid #999999; }
Steve
| |
|
|
| Harlan Messinger 2004-11-21, 11:18 pm |
|
"Oliver" <oliver_summa@web.de> wrote in message
news:cna7pc$s89$05$1@news.t-online.com...
> Hello i want to get a nice border around images, but not just with the
> simple <img src"....." border="1"> tag.
> I tried it in CSS.
> I did the following:
>
> <div class="img_class">
> <img src="./images/img1.jpg" border="0" alt="img1" />
If you want to do it in CSS, why are you undermining yourself by doing it in
HTML as well--and with a contradictory value? Get rid of the border
attribute.
> </div>
>
> And in my css i have:
>
> .img_class {
> border: 1px solid #999999;
> }
>
> It doesn't work 100% as i want it, as the distance to the image from the
> bottom border is off.
Are you sure there isn't a band of white (or transparency) at the bottom of
the image?
There is some empty space. Even adding margin:0px;
> and padding:0px; didn't help.
Margin is outside the border, so that wouldn't help.
| |
| Harlan Messinger 2004-11-21, 11:18 pm |
|
"Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote in message
news:um3md.6712$Mg.1177@twister.nyroc.rr.com...
> Oliver wrote:
>
>
>
> I use this, and it looks ok.
>
> .imgborder {
> border-top: 3px outset #d0d0d0;
> border-left: 3px outset #d0d0d0;
> border-right: 3px outset #a9a9a9;
> border-bottom: 3px outset #a9a9a9;
> }
>
> Sometimes I use this - looks like a picture frame:
>
> img.inframe {
> border: inset 0.35em #999;
> }
Shouldn't it be 0.35em inset #999; ? I thought order of attribute values was
signficant with compound properties.
| |
| Harlan Messinger 2004-11-21, 11:18 pm |
|
"Michael Winter" <M.Winter@blueyonder.co.invalid> wrote in message
news:opshiiimapx13kvk@atlantis...
> On Mon, 15 Nov 2004 10:04:29 -0500, Harlan Messinger
> <h.messinger@comcast.net> wrote:
>
>
> [snip]
>
>
> It depends entirely on the syntax specified for the property. See
> <URL:http://www.w3.org/TR/REC-CSS2/about.html#q6>.
>
> In this case
>
> 'border-top', 'border-right', 'border-bottom', 'border-left'
>
> Value: [ <'border-top-width'> || <'border-style'> || <color> ]
> | inherit
>
> because the values (except inherit) are separated by double bars (||),
> they may appear in any order.
Thanks. The delimiter specifics had escaped me. That's good, one less thing
(the order) to memorize!
| |
| Michael Fesser 2004-11-21, 11:18 pm |
| .oO(Harlan Messinger)
>"Michael Winter" <M.Winter@blueyonder.co.invalid> wrote
>
>
>Thanks. The delimiter specifics had escaped me. That's good, one less thing
>(the order) to memorize!
Yep, in this case. But there are cases (the 'font' shorthand property
for example) where the order is important.
Micha
| |
| Oliver 2004-11-21, 11:18 pm |
| Beauregard T. Shagnasty schrieb:
> Oliver wrote:
>
>
>
>
>
> I use this, and it looks ok.
>
> .imgborder {
> border-top: 3px outset #d0d0d0;
> border-left: 3px outset #d0d0d0;
> border-right: 3px outset #a9a9a9;
> border-bottom: 3px outset #a9a9a9;
> }
>
> Sometimes I use this - looks like a picture frame:
>
> img.inframe {
> border: inset 0.35em #999;
> }
>
Hi,
i've never seen inset or outset. Which CSS Version ist that?
| |
| Oliver 2004-11-21, 11:18 pm |
| Steve Pugh schrieb:
> On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <oliver_summa@web.de>
> wrote:
>
>
>
>
> That's a very poor alt attribute. Try something that will actually
> serve as an alternative to the image for those users who can't see it.
>
That's not the real Alt Attribute, just typed in quickly something so u
see what i mean. :)
>
>
>
> Why are you specifying a border on the div and not on the image
> itself?
>
> <img src="./images/img1.jpg" class="foo" alt="something sensible" />
>
> .foo { border: 1px solid #999999; }
>
I didn't know i can apply it straight to the image, but thanks. It did
do the trick. Cheers
| |
| Harlan Messinger 2004-11-21, 11:18 pm |
|
"Oliver" <oliver_summa@web.de> wrote in message
news:cnb5uv$92c$04$1@news.t-online.com...
> Hi,
> i've never seen inset or outset. Which CSS Version ist that?
CSS 1.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |