Images on Corners of a Div?

[Firas D.]

http://www.firasd.org/scrapbook/poet...vercheevy.html

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

[Neal]

On Wed, 04 Feb 2004 01:58:14 -0500, Firas D. <fd********@firasd.org> wrote:

http://www.firasd.org/scrapbook/poet...vercheevy.html

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

I don't know how to do that, if it is possible. But I can tell you that
Miniver Cheevy was published in 1910 so it is public domain.

(Anything before 1923 is public domain, and some items after are as well
if they were never renewed. I believe starting in 2013 works will again
enter the public domain one year at a time. All this presupposes the
current legal cases against the Sonny Bono Act will not succeed, of
course.)

[e n | c k m a]

> This is probably wishful thinking, but it's worth a shot.. is there a

way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

Not as far as I know - a lot of people have tried... and succeeded to some
degree but it's not really well supported.

There is a mozilla-specific CSS style [i forget what it is now maybe someone
else knows] that creates rounded edges on borders.

Nickos.

[Neal]

On Wed, 04 Feb 2004 08:14:45 GMT, e n | c k m a <bo*@marley.com> wrote:

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

Not as far as I know - a lot of people have tried... and succeeded to
some
degree but it's not really well supported.

There is a mozilla-specific CSS style [i forget what it is now maybe
someone
else knows] that creates rounded edges on borders.

I did see one page where they had before and after stuff, it was a fixed
width div and the top border (including the corners) was one wide GIF, the
bottom the same, and each line had a before and after border too. Of
course, this has its own set of problems...

[Chris Morris]

"e n | c k m a" <bo*@marley.com> writes:

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

Not as far as I know - a lot of people have tried... and succeeded to some
degree but it's not really well supported.

There is a mozilla-specific CSS style [i forget what it is now maybe someone
else knows] that creates rounded edges on borders.

..rounded {
\-moz-border-radius: 2em;
}

Also \-moz-border-radius-topright, etc.

Cautions:
Put it in an @import stylesheet or older browsers will complain
Put the style in a separate style block or a few browsers (Opera 6,
IIRC) will ignore the whole style block - so
..main {
padding: 1em;
\-moz-border-radius: 0.5em;
}
is not as good as
..main {
padding: 1em;
}
..main {
\-moz-border-radius: 0.5em;
}

--
Chris

[Neal]

On Wed, 04 Feb 2004 01:58:14 -0500, Firas D. <fd********@firasd.org> wrote:

http://www.firasd.org/scrapbook/poet...vercheevy.html

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

Read this: http://www.alistapart.com/articles/customcorners/

[Karl Smith]

Neal <ne*****@spamrcn.com> wrote:

I don't know how to do that, if it is possible. But I can tell you that
Miniver Cheevy was published in 1910 so it is public domain.

(Anything before 1923 is public domain, and some items after are as well
if they were never renewed. I believe starting in 2013 works will again
enter the public domain one year at a time. All this presupposes the
current legal cases against the Sonny Bono Act will not succeed, of
course.)

It also presupposes something much more fundamental, namely that the
entire population of planet Earth is governed by the laws of the
United States of America.

[Karl Smith]

"Firas D." <fd********@firasd.org> wrote:

http://www.firasd.org/scrapbook/poet...vercheevy.html

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

You got two options:
[1] Wait ten years until CSS3 is widely deployed:
[2] Wrap it in four DIVs:-
<div class="content one">
<div class="content two">
<div class="content three">
<div class="content four">
and use the classes .one .two etc. to put background images in the
corners. This ugly markup is marginally better than using a table
which would require 9 cells just to place the 4 corners.

Now let's talk about XML. Here's how the page begins, complete with
the fuzzy dice and all:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

And here's how it continues:

<div class="content">
<center>
<b>Miniver Cheevy</b><br>
<tt>Edwin Arlington Robinson</tt>
</center>
<p>
Miniver Cheevy, child of scorn,<br>
&nbsp;&nbsp;&nbsp;Grew lean while he assailed the seasons<br>
He wept that he was ever born,<br>
&nbsp;&nbsp;&nbsp;And he had reasons.
<p>

I thoroughly approve of using simple paragraphs and line breaks (the
trendies would have you marking that up with a lot of <li>...</li>
because you know, "A poem is a list of lines," "A gallery is a list of
images," "A navigation bar is a list of links"...), but since it is
fad-compliant XHTML, one <p> should </p> before the next <p> opens.

(Those <br>s look too normal to be fashionable, too.)

[Neal]

On 4 Feb 2004 05:06:47 -0800, Karl Smith <go************@kjsmith.com>
wrote:

Neal <ne*****@spamrcn.com> wrote:

I don't know how to do that, if it is possible. But I can tell you that
Miniver Cheevy was published in 1910 so it is public domain.

(Anything before 1923 is public domain, and some items after are as well
if they were never renewed. I believe starting in 2013 works will again
enter the public domain one year at a time. All this presupposes the
current legal cases against the Sonny Bono Act will not succeed, of
course.)

It also presupposes something much more fundamental, namely that the
entire population of planet Earth is governed by the laws of the
United States of America.

I suppose so. Though the purpose of this change in US law was to bring us
closer to the international standard. One would assume that this means in
most of the world similar dates would apply.

Of course, I am not a copyright lawyer, we all know that, and my advice
is, as always, worth the price.

[Steve Fulton]

Firas D. wrote:

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

Wait for CSS3! <g>

3.4 The Border Image properties
http://www.w3.org/TR/2002/WD-css3-bo...e-border-image

--
Steve

If you can spend a perfectly useless afternoon in a perfectly useless manner,
you have learned how to live. -Lin Yutang

[Firas D.]

Karl Smith wrote:

"Firas D." <fd********@firasd.org> wrote: I thoroughly approve of using simple paragraphs and line breaks (the
trendies would have you marking that up with a lot of <li>...</li>
because you know, "A poem is a list of lines," "A gallery is a list of
images," "A navigation bar is a list of links"...), but since it is
fad-compliant XHTML, one <p> should </p> before the next <p> opens.

(Those <br>s look too normal to be fashionable, too.)

Wow, duly noted :)

To be honest, I have no problem admitting that I'm all caught up in a
fad. I'll just act like the MIME type problem doesn't exist. That page
was just still being worked on, the other pages (linked from the home
page) are all compliant :)

[Karl Smith]

Chris Morris <c.********@durham.ac.uk> wrote:

.rounded {
\-moz-border-radius: 2em;
}
Is there a reason for the backslash, or is it just a myth like:
<style...><!--// //--></style>
If the hyphen needs to be escaped, why not:
\-moz\-border\-radius: 2em
Put the style in a separate style block or a few browsers (Opera 6,
IIRC) will ignore the whole style block - so
.main {
padding: 1em;
\-moz-border-radius: 0.5em;
}
is not as good as
.main {
padding: 1em;
}
.main {
\-moz-border-radius: 0.5em;
}

The online CSS "validator" rejects the entire declaration block if it
contains -moz-border-radius. Does that imply Opera 6 is the only
browser that correctly parses CSS, or that they share a similar bug?
(Or is it because I didn't include the backslash?)

[Harlan Messinger]

"Firas D." <fd********@firasd.org> wrote in message
news:bv************@ID-214165.news.uni-berlin.de...

http://www.firasd.org/scrapbook/poet...vercheevy.html

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

See the non-copyright-busting version at http://gavelcade.com/poetry.html.
It involves these styles:

.upperLeft { position: absolute; top: -12px; left: -12px; }
.upperRight { position: absolute; top: -12px; right: -12px; }
.lowerLeft { position: absolute; bottom: -12px; left: -12px; }
.lowerRight { position: absolute; bottom: -12px; right: -12px; }

these divs nested inside the content div:

<div class="upperLeft"><img src="images/help.gif" width="24" height="24"
alt=""></div>
<div class="upperRight"><img src="images/help.gif" width="24" height="24"
alt=""></div>
<div class="lowerLeft"><img src="images/help.gif" width="24" height="24"
alt=""></div>
<div class="lowerRight"><img src="images/help.gif" width="24" height="24"
alt=""></div>

and adding "position: relative;" to the style for div.content. Note: works
in Mozilla, Firebird, Opera, not in IE6.

[Harlan Messinger]

"Karl Smith" <go************@kjsmith.com> wrote in message
news:3d************************@posting.google.com ...

<p>

I thoroughly approve of using simple paragraphs and line breaks (the
trendies would have you marking that up with a lot of <li>...</li>
because you know, "A poem is a list of lines," "A gallery is a list of
images," "A navigation bar is a list of links"...),

A document is a list of document elements.

[Roger Musson]

On Wed, 04 Feb 2004 01:58:14 -0500, "Firas D." <fd********@firasd.org>
wrote:

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

See http://fedora.redhat.com/

They use floated corner images.

--
Roger

[Peter Foti]

"Firas D." <fd********@firasd.org> wrote in message
news:bv************@ID-214165.news.uni-berlin.de...

http://www.firasd.org/scrapbook/poet...vercheevy.html

This is probably wishful thinking, but it's worth a shot.. is there a
way to put four different images on the corners of the bordered div? To
make it look framed, kinda?

<div class="topleft">
<div class="bottomleft">
<div class="topright">
<div class="bottomright">
<div class="content">
Your content goes here!
</div>
</div>
</div>
</div>
</div>

And use these styles (note, I have given the images names to match the
locations... yours may differ):

..topleft { background: url(topleft.gif) top left no-repeat; }
..bottomleft { background: url(bottomleft.gif) bottom left no-repeat; }
..topright { background: url(topright.gif) top right no-repeat; }
..bottomright { background: url(bottomright.gif) bottom right no-repeat; }

Note, background images do not print by default (at least in IE... not sure
about other UAs). So these corner images would not be included in printed
versions of the page without the user configuring the browser to print
background images.

Regards,
Peter Foti

[Chris Morris]

go************@kjsmith.com (Karl Smith) writes:

Chris Morris <c.********@durham.ac.uk> wrote:

.rounded {
\-moz-border-radius: 2em;
}
Is there a reason for the backslash, or is it just a myth like:
<style...><!--// //--></style>

Aside: Hardly a myth, it's just unnecessary in any browser under about
7 years old.
If the hyphen needs to be escaped, why not:
\-moz\-border\-radius: 2em
Some browsers dislike an unescaped '-' *at the start* of a property name.

I can't remember which ones immediately, nor can I remember the
reason. Both are probably in the archive, though.
The online CSS "validator" rejects the entire declaration block if it
contains -moz-border-radius. Does that imply Opera 6 is the only
browser that correctly parses CSS, or that they share a similar bug?
(Or is it because I didn't include the backslash?)

Putting the backslash in may help.

However, the CSS checker will still reject as not meeting the
CSS1/CSS2 spec any stylesheet that contains \-moz-border-radius.
Unsurprisingly, because it's not in the spec. If you want to use
\-moz-border-radius you'll have to accept that your stylesheets won't
match the CSS2 spec. Which isn't that much of a big deal, you can
still use the checker to check the rest of your syntax.

--
Chris

[Brian]

Karl Smith wrote:

Neal <ne*****@spamrcn.com> wrote:

(Anything before 1923 is public domain, and some items after are as well
if they were never renewed. I believe starting in 2013 works will again
enter the public domain one year at a time. All this presupposes the
current legal cases against the Sonny Bono Act will not succeed, of
course.)

It also presupposes something much more fundamental, namely that the
entire population of planet Earth is governed by the laws of the
United States of America.

According to George W. Bush, the planet *is* governed by the United
States of America. :-p

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Karl Smith]

"Harlan Messinger" <h.*********@comcast.net> wrote:

"Karl Smith" <go************@kjsmith.com> wrote:

I thoroughly approve of using simple paragraphs and line breaks (the
trendies would have you marking that up with a lot of <li>...</li>
because you know, "A poem is a list of lines," "A gallery is a list of
images," "A navigation bar is a list of links"...),

A document is a list of document elements.

Only in the world of Mosaic based browsers. In grown-up browsers a
document is a *tree* of elements.

[Harlan Messinger]

go************@kjsmith.com (Karl Smith) wrote:

"Harlan Messinger" <h.*********@comcast.net> wrote:

"Karl Smith" <go************@kjsmith.com> wrote:

>
> I thoroughly approve of using simple paragraphs and line breaks (the
> trendies would have you marking that up with a lot of <li>...</li>
> because you know, "A poem is a list of lines," "A gallery is a list of
> images," "A navigation bar is a list of links"...),

A document is a list of document elements.

Only in the world of Mosaic based browsers. In grown-up browsers a
document is a *tree* of elements.

A tree is a hierarchy of nested lists.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Peter Foti]

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:F0jUb.227239$na.365211@attbi_s04...

Karl Smith wrote:

Neal <ne*****@spamrcn.com> wrote:

(Anything before 1923 is public domain, and some items after are as well
if they were never renewed. I believe starting in 2013 works will again
enter the public domain one year at a time. All this presupposes the
current legal cases against the Sonny Bono Act will not succeed, of
course.)

It also presupposes something much more fundamental, namely that the
entire population of planet Earth is governed by the laws of the
United States of America.

According to George W. Bush, the planet *is* governed by the United
States of America. :-p

Not just *this* planet... Mars as well. ;)

Regards,
Peter Foti

[Firas D.]

Peter Foti wrote:

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:F0jUb.227239$na.365211@attbi_s04...

According to George W. Bush, the planet *is* governed by the United
States of America. :-p

Not just *this* planet... Mars as well. ;)

Regards,
Peter Foti

For Bush, "the universe" = America + minor outlying lands.

[Firas D.]

Chris Morris wrote:

go************@kjsmith.com (Karl Smith) writes:

Chris Morris <c.********@durham.ac.uk> wrote:

.rounded {
\-moz-border-radius: 2em;

Looks nice :) thanks.
However, the CSS checker will still reject as not meeting the
CSS1/CSS2 spec any stylesheet that contains \-moz-border-radius.
Unsurprisingly, because it's not in the spec.

I wonder why Mozilla would do such a thing.. it's weird. Aren't
propriety extensions the reason for the mid-90s HTML mess in the first
place?

[Steve Fulton]

Firas D. wrote:

Chris Morris <c.********@durham.ac.uk> wrote:

.rounded {
\-moz-border-radius: 2em;

I wonder why Mozilla would do such a thing.. it's weird. Aren't
propriety extensions the reason for the mid-90s HTML mess in the first
place?

They did it for XUL. There is no reason not to add proprietary extensions for
proprietary use; the problem comes when authors try to use these extensions in
a WWW context.

--
Steve

In matters of conscience, the law of majority has no place. -Mahatma Ghandhi

[Karl Smith]

Harlan Messinger <hm*******************@comcast.net> wrote in message news:<en********************************@4ax.com>. ..

go************@kjsmith.com (Karl Smith) wrote:

"Harlan Messinger" <h.*********@comcast.net> wrote:

"Karl Smith" <go************@kjsmith.com> wrote:
>
> I thoroughly approve of using simple paragraphs and line breaks (the
> trendies would have you marking that up with a lot of <li>...</li>
> because you know, "A poem is a list of lines," "A gallery is a list of
> images," "A navigation bar is a list of links"...),

A document is a list of document elements.

Only in the world of Mosaic based browsers. In grown-up browsers a
document is a *tree* of elements.

A tree is a hierarchy of nested lists.

Here's something I found tonight. Quotation (containing a list):

Robin Williams (of Web design fame, not comedy fame) likes to point
out that there are four primary elements to good page layout.
- Contrast
- Repetition
- Alignment
- Position

Unfortunately, try as she might, she cannot think of a single acronym
to tie them together.

http://academ.hvcc.edu/~kantopet/pag...+design+basics