Prev: IE 7 -- extraneous bottom scrollbar....
Next: Vertically aligning form elements?
From: Dave Rado on 8 Apr 2008 17:37
Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Dave
From: dorayme on 8 Apr 2008 18:01
In article
<21512612-112b-4cf6-a33c-fb4e1f4d16a3(a)e10g2000prf.googlegroups.com>,
Dave Rado <dave.rado(a)dsl.pipex.com> wrote:

> Hi
>
> I've created a banner with a drop-shadow using a div - there's a mock-
> up at http://tinyurl.com/6n7czu . The only problem is that the way
> I've done it, I have to specify the width of the div - if I don't, it
> renders with a width of 100%. Is there any way of making the width fit
> the text it encloses (plus padding), and so that it expand
> automatically if you add more text?
>

Try changing your css to:

..BannerWidth1 {width: 11em;}

(quick fix)

--
dorayme
From: Dave Rado on 8 Apr 2008 19:51
Hi dorayme

On 8 Apr, 23:01, dorayme <doraymeRidT...(a)optusnet.com.au> wrote:

> Try changing your css to:
>
> .BannerWidth1 {width: 11em;}
>
> (quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

Dave
From: dorayme on 8 Apr 2008 20:10
In article
<eaf7cd38-cdb8-4e7a-b5c9-bf7255887d51(a)w5g2000prd.googlegroups.com>,
Dave Rado <dave.rado(a)dsl.pipex.com> wrote:

> Hi dorayme
>
> On 8 Apr, 23:01, dorayme <doraymeRidT...(a)optusnet.com.au> wrote:
>
> > Try changing your css to:
> >
> > .BannerWidth1 {width: 11em;}
> >
> > (quick fix)
>
> No, I probably didn't explain what I'm trying to achieve very well.
> I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
> has a width of 11em, and I've added some more text within the banner
> (I've added the word "more"); but the width of the banner hasn't
> increased, and the text has been forced to wrap onto a second line,
> which I don't want to happen. What I want is for the banner's width to
> be slightly wider than the width of the widest line of text within it
> (so no unnecessary wrapping, but also no unnecessary white space), up
> to a maximum width of 100%, regardless of how much text is within it.
> Is that possible?
>

I widthed to suit your previous text. You have made the text more now
and of course it must wrap. So, I would think, you must increase the
width of the banner to more than 11em. The point of em widthing (which
is a unit suited to characters) is that as the characters get bigger or
smaller (think user font-size settings), so too does the box that is so
widthed.

--
dorayme
From: Dave Rado on 8 Apr 2008 20:55
Hi dorayme

On 9 Apr, 01:10, dorayme <doraymeRidT...(a)optusnet.com.au> wrote:

> You have made the text more now
> and of course it must wrap.

But tables do allow one to do what I'm trying to do. I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

The only problem with using a table in place of the DocBanner div is
that I can't see any way to apply a drop-shadow to it. Is there no
possible way to combine the two techniques, so as to get the benefits
of the table's dynamic width, while still having a drop-shadow?

Dave
 |  Next  |  Last
Pages: 1 2 3 4 5 6
Prev: IE 7 -- extraneous bottom scrollbar....
Next: Vertically aligning form elements?