Surrounding link with liquid graphic

My neighbour the architect told me what he wanted something that looked
like :
http://www.troppoarchitects.com.au/

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

http://www.queenslandarchitect.com/ is all I have managed so far.

All I can think of so far is to do a graphics of two lines making up two
adjacent sides of a box. Make them longer than the text can ever expand
to. Put them in as a background image in the list.

But then I seem to need a container div to hold the other two sides of
the box.

Can anyone point me to an idea for doing this?

--
http://www.ericlindsay.com

You could just make a graphic in photoshop with the stylized frame and
a background that matches the color of your site. You can reuse the
frame for all of your images you want to use it on and then save them
out individually. If you want it to work on any background, you could
also make it a transparent GIF or PNG (need to add code to make the PNG
work though: http://koivi.com/ie-png-transparency/ ). The images on the
site you referenced were "sliced" and the actual background color and
graphics are in the graphics making it appear that they were using
custom frames. We use the PNG route quite a bit and with the code
referenced in the link above (there are other ways to do it also) you
can use your border graphics on any BG color or graphic. The best part
about PNG-24 Alpha transparency is that you can have partial
tranparencies i.e. soft drop shadows, glares etc. and everything behind
it will shine through. Rounded edges also remain clean. Transparent
GIFs can get very choppy around the edges especially on rounded corner.

Hope this helps.

On Dec 29 2006, 2:00 am, Eric Lindsay <NOwebmasterS... (AT) ericlindsay (DOT) com>
wrote:

My neighbour the architect told me what he wanted something that looked
like :http://www.troppoarchitects.com.au/

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

http://www.queenslandarchitect.com/is all I have managed so far.

All I can think of so far is to do a graphics of two lines making up two
adjacent sides of a box. Make them longer than the text can ever expand
to. Put them in as a background image in the list.

But then I seem to need a container div to hold the other two sides of
the box.

Can anyone point me to an idea for doing this?

--http://www.ericlindsay.com

Eric Lindsay wrote:

My neighbour the architect told me what he wanted something that looked
like :
http://www.troppoarchitects.com.au/

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

http://www.queenslandarchitect.com/ is all I have managed so far.

All I can think of so far is to do a graphics of two lines making up two
adjacent sides of a box. Make them longer than the text can ever expand
to. Put them in as a background image in the list.

But then I seem to need a container div to hold the other two sides of
the box.

Can anyone point me to an idea for doing this?

I think you're using something like

<li><a>Link</a></li>

Then if you have a large enough GIFs with transparency on them you can
use something like:

li { background: URL(botright.gif) bottom right no-repeat;}
a { background: URL(topleft.gif) top left no-repeat; width:100% }

and the backgrounds will sit one on top of the other and expand to the
text.



Saul
www.notanant.com
Communities of websites

In article <1169248822.097050.212790 (AT) a75g2000cwd (DOT) googlegroups.com>,
sd (AT) dobney (DOT) com wrote:

Eric Lindsay wrote:

My neighbour the architect told me what he wanted something that looked
like :
http://www.troppoarchitects.com.au/

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

http://www.queenslandarchitect.com/ is all I have managed so far.

All I can think of so far is to do a graphics of two lines making up two
adjacent sides of a box. Make them longer than the text can ever expand
to. Put them in as a background image in the list.

But then I seem to need a container div to hold the other two sides of
the box.

Can anyone point me to an idea for doing this?

I think you're using something like

li><a>Link</a></li

Yes. Just didn't think of giving the link itself a background graphic (I
don't normally use graphics in web pages).

Then if you have a large enough GIFs with transparency on them you can
use something like:

li { background: URL(botright.gif) bottom right no-repeat;}
a { background: URL(topleft.gif) top left no-repeat; width:100% }

and the backgrounds will sit one on top of the other and expand to the
text.

Many thanks for that. It sounds like it will do what I am hoping for. I
seem to recall something about some browsers not handling background
images on elements, but I guess I will find out when I test it. Thanks.

--
http://www.ericlindsay.com

Eric Lindsay wrote:

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

Those are just images, the boxes; they are positioned to match the

background. Select "View Image" for one of them to see what was done. The
links are a typical image swap on rollover.
The whole thing was done with DreamWeaver, image slicing, and absolute
positioning.
What do you mean by "expandable graphic in a liquid design"?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

In article <WZqdndfw68MiuS7YnZ2dnUVZ_rWnnZ2d (AT) giganews (DOT) com>,
Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote:

Eric Lindsay wrote:

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

Those are just images, the boxes; they are positioned to match the
background. Select "View Image" for one of them to see what was done. The
links are a typical image swap on rollover.

I looked at how the site he liked did their work. However the result was
invalid, and didn't handle wildly different window and text sizes very
well. I would not have been happy doing it that way.

The whole thing was done with DreamWeaver, image slicing, and absolute
positioning.

What do you mean by "expandable graphic in a liquid design"?

Perhaps I am using the terms incorrectly. By liquid design I mean I
would prefer the entire page to be able to move freely to accommodate
very wide display windows (30 inch 2500 pixel displays), or very narrow
displays (cell phone or PDA), although it would look better at more
common display sizes. So apart from the photo dimensions, there are no
pixel measurements. There are no absolute positions in the page.

By expandable graphic, I mean that the although the link contains text
within a graphic, if the user expands or contracts their text size (for
instance, due to poor eyesight), then the containing graphic should also
expand to accommodate the new text size.

This is something I have been finding difficult to do well. Luckily
people in this news group have made many helpful suggestions I am
following up. I just about have it working on modern browsers, but still
have some problems with IE5-6 bugs.

--
http://www.ericlindsay.com