Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Best method for image bordered div?

Reply
Thread Tools

Best method for image bordered div?

 
 
dorayme
Guest
Posts: n/a
 
      01-08-2009
In article
<(E-Mail Removed)>,
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
....
> > > The borders are why I posted the thread, that's what I really
> > > needed some advice with or a good tutorial on.

> >
> > I am sorry, have not had time to examine your code properly. One thing I
> > have on line about borders is, I notice:
> >
> > <http://netweaver.com.au/alt/fancyBorders/twoCol_fancyBorders.html>
> >
> > If this does not help I will have to take a closer look at yours or else
> > call Nick Coughlin in from whatever he is doing...
> >
> > --
> > dorayme

>
> Ah, it took me a while but now I see what you did there. That's a
> really simple and practical technique, just let the background repeat
> as necessary and use the inner content to appropriately define the
> border by hiding the repeats. I think I'm seeing how I might be able
> to adapt this to my own layout. I'm experimenting right now and will
> check back soon, thanks a lot!


I notice I had an inappropriate fallback color for the background - it
was a left over from experiments - and I mention to remind you to attend
to this for a serious use in a real webpage. If the background image is
not available, *sometimes* it is better to fall back to the "natural"
colour so no border at all appears... You will see what I mean if you
experiment a bit. Temporarily munge the name of your background image
slightly so you can test what look you want in case of failure.

--
dorayme
 
Reply With Quote
 
 
 
 
midori0x@yahoo.com
Guest
Posts: n/a
 
      01-09-2009
On Jan 8, 1:27 pm, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed)>, (E-Mail Removed) wrote:
>
> ...
>
>
>
> > > > The borders are why I posted the thread, that's what I really
> > > > needed some advice with or a good tutorial on.

>
> > > I am sorry, have not had time to examine your code properly. One thing I
> > > have on line about borders is, I notice:

>
> > > <http://netweaver.com.au/alt/fancyBorders/twoCol_fancyBorders.html>

>
> > > If this does not help I will have to take a closer look at yours or else
> > > call Nick Coughlin in from whatever he is doing...

>
> > > --
> > > dorayme

>
> > Ah, it took me a while but now I see what you did there. That's a
> > really simple and practical technique, just let the background repeat
> > as necessary and use the inner content to appropriately define the
> > border by hiding the repeats. I think I'm seeing how I might be able
> > to adapt this to my own layout. I'm experimenting right now and will
> > check back soon, thanks a lot!

>
> I notice I had an inappropriate fallback color for the background - it
> was a left over from experiments - and I mention to remind you to attend
> to this for a serious use in a real webpage. If the background image is
> not available, *sometimes* it is better to fall back to the "natural"
> colour so no border at all appears... You will see what I mean if you
> experiment a bit. Temporarily munge the name of your background image
> slightly so you can test what look you want in case of failure.
>
> --
> dorayme


Oh do you mean using the three letter color code instead of the six
character alpha-numeric color code? I always use six character method,
but if that's not what you meant please fill me in.
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      01-09-2009
In article
<(E-Mail Removed)>,
(E-Mail Removed) wrote:

> On Jan 8, 1:27 pm, dorayme <(E-Mail Removed)> wrote:

....
> > If the background image is
> > not available, *sometimes* it is better to fall back to the "natural"
> > colour so no border at all appears... You will see what I mean if you
> > experiment a bit. Temporarily munge the name of your background image
> > slightly so you can test what look you want in case of failure.
> >

....
> Oh do you mean using the three letter color code instead of the six
> character alpha-numeric color code? I always use six character method,
> but if that's not what you meant please fill me in.


3 is just shorthand for 6, no I meant think about what colour you want
as fallback, that is all... it might not look good... so test it in your
page with the background image simulated to be missing.

--
dorayme
 
Reply With Quote
 
midori0x@yahoo.com
Guest
Posts: n/a
 
      01-09-2009
On Jan 8, 5:32 pm, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed)>,
>
>
>
> (E-Mail Removed) wrote:
> > On Jan 8, 1:27 pm, dorayme <(E-Mail Removed)> wrote:

> ...
> > > If the background image is
> > > not available, *sometimes* it is better to fall back to the "natural"
> > > colour so no border at all appears... You will see what I mean if you
> > > experiment a bit. Temporarily munge the name of your background image
> > > slightly so you can test what look you want in case of failure.

>
> ...
> > Oh do you mean using the three letter color code instead of the six
> > character alpha-numeric color code? I always use six character method,
> > but if that's not what you meant please fill me in.

>
> 3 is just shorthand for 6, no I meant think about what colour you want
> as fallback, that is all... it might not look good... so test it in your
> page with the background image simulated to be missing.
>
> --
> dorayme


Oh I see, I defined a color for the parent div that holds everything
so hopefully that won't be a problem.
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-09-2009
"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article
> <(E-Mail Removed)>,
>> > > > > > (E-Mail Removed) wrote:
>> > > > > > > http://www.tssarcade.com/test.html

>
> If this does not help I will have to take a closer look at yours or else
> call Nick Coughlin in from whatever he is doing...


You can try to use one of the various skinning techniques to create a box
effect rather than trying to use border images:
http://nrkn.com/skinning/

I have been meaning to play with doing it via border images myself but
haven't had a chance yet, but the link above outlines various ways of
achieving what you are trying to do and their pros and cons.

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-09-2009
In article <gk6o4o$2cs$(E-Mail Removed)>,
"Nik Coughlin" <(E-Mail Removed)> wrote:

> "dorayme" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > In article
> > <(E-Mail Removed)>,
> >> > > > > > (E-Mail Removed) wrote:
> >> > > > > > > http://www.tssarcade.com/test.html

> >
> > If this does not help I will have to take a closer look at yours or else
> > call Nick Coughlin in from whatever he is doing...

>
> You can try to use one of the various skinning techniques to create a box
> effect rather than trying to use border images:
> http://nrkn.com/skinning/
>
> I have been meaning to play with doing it via border images myself but
> haven't had a chance yet, but the link above outlines various ways of
> achieving what you are trying to do and their pros and cons.


Thanks for helping OP. I have posted the usual cheque to you...

--
dorayme
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-09-2009
"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <gk6o4o$2cs$(E-Mail Removed)>,
> "Nik Coughlin" <(E-Mail Removed)> wrote:
>
>> "dorayme" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>> > In article
>> > <(E-Mail Removed)>,
>> >> > > > > > (E-Mail Removed) wrote:
>> >> > > > > > > http://www.tssarcade.com/test.html
>> >
>> > If this does not help I will have to take a closer look at yours or
>> > else
>> > call Nick Coughlin in from whatever he is doing...

>>
>> You can try to use one of the various skinning techniques to create a box
>> effect rather than trying to use border images:
>> http://nrkn.com/skinning/
>>
>> I have been meaning to play with doing it via border images myself but
>> haven't had a chance yet, but the link above outlines various ways of
>> achieving what you are trying to do and their pros and cons.

>
> Thanks for helping OP. I have posted the usual cheque to you...


Last one bounced. I'm sending the goons round. Sleep with one eye open!

 
Reply With Quote
 
midori0x@yahoo.com
Guest
Posts: n/a
 
      01-09-2009
On Jan 8, 10:41 pm, "Nik Coughlin" <(E-Mail Removed)> wrote:
> "dorayme" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed)...
>
>
>
> > In article <gk6o4o$(E-Mail Removed)>,
> > "Nik Coughlin" <(E-Mail Removed)> wrote:

>
> >> "dorayme" <(E-Mail Removed)> wrote in message
> >>news:(E-Mail Removed)...
> >> > In article
> >> > <(E-Mail Removed)>,
> >> >> > > > > > (E-Mail Removed) wrote:
> >> >> > > > > > >http://www.tssarcade.com/test.html

>
> >> > If this does not help I will have to take a closer look at yours or
> >> > else
> >> > call Nick Coughlin in from whatever he is doing...

>
> >> You can try to use one of the various skinning techniques to create a box
> >> effect rather than trying to use border images:
> >>http://nrkn.com/skinning/

>
> >> I have been meaning to play with doing it via border images myself but
> >> haven't had a chance yet, but the link above outlines various ways of
> >> achieving what you are trying to do and their pros and cons.

>
> > Thanks for helping OP. I have posted the usual cheque to you...

>
> Last one bounced. I'm sending the goons round. Sleep with one eye open!


Thanks guys! I can't wait to see if I can get one of these techniques
integrated into the site.
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-09-2009
<(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Jan 8, 10:41 pm, "Nik Coughlin" <(E-Mail Removed)> wrote:
>> "dorayme" <(E-Mail Removed)> wrote in message
>>
>> news:(E-Mail Removed)...
>>
>>
>>
>> > In article <gk6o4o$(E-Mail Removed)>,
>> > "Nik Coughlin" <(E-Mail Removed)> wrote:

>>
>> >> "dorayme" <(E-Mail Removed)> wrote in message
>> >>news:(E-Mail Removed)...
>> >> > In article
>> >> > <(E-Mail Removed)>,
>> >> >> > > > > > (E-Mail Removed) wrote:
>> >> >> > > > > > >http://www.tssarcade.com/test.html

>>
>> >>http://nrkn.com/skinning/

>
> Thanks guys! I can't wait to see if I can get one of these techniques
> integrated into the site.


Nesting is probably best for what you are trying to do


 
Reply With Quote
 
midori0x@yahoo.com
Guest
Posts: n/a
 
      01-09-2009
On Jan 9, 12:52 pm, "Nik Coughlin" <(E-Mail Removed)> wrote:
> <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed)...
>
>
>
> > On Jan 8, 10:41 pm, "Nik Coughlin" <(E-Mail Removed)> wrote:
> >> "dorayme" <(E-Mail Removed)> wrote in message

>
> >>news:(E-Mail Removed)...

>
> >> > In article <gk6o4o$(E-Mail Removed)>,
> >> > "Nik Coughlin" <(E-Mail Removed)> wrote:

>
> >> >> "dorayme" <(E-Mail Removed)> wrote in message
> >> >>news:(E-Mail Removed)...
> >> >> > In article
> >> >> > <(E-Mail Removed)>,
> >> >> >> > > > > > (E-Mail Removed) wrote:
> >> >> >> > > > > > >http://www.tssarcade.com/test.html

>
> >> >>http://nrkn.com/skinning/

>
> > Thanks guys! I can't wait to see if I can get one of these techniques
> > integrated into the site.

>
> Nesting is probably best for what you are trying to do


Yes, that's the section I was reading now. I was faintly piecing
together exactly what you did by going over each little line in
firebug.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Extract a bordered, skewed rectangle from an image Paul Hemans Python 2 05-09-2010 12:03 PM
Image bordered div Vol. II toxee HTML 6 01-26-2009 05:38 PM
method def in method vs method def in block Kyung won Cheon Ruby 0 11-21-2008 08:48 AM
Bordered Gtk Label Martin DeMello Ruby 1 07-07-2005 11:25 AM
Best Image -- Image Size vs Compression john chapman Digital Photography 5 08-09-2004 01:21 PM



Advertisments