Width of DIV as regards to contents

Discussion in 'HTML' started by Rob Martin, Oct 1, 2003.

  1. Rob Martin

    Rob Martin Guest

    Hi crew

    (Obviously) new at divs... I'm testing a div area out that will eventually
    be a DHML mouseover popup (just an option if supported, the page will still
    work when clicking on the mouseover link). The div takes up the entire width
    of the screen; I realise you can add 'width' etc - but this is specific.
    Anyone know how to make the width of the div as long as the widest contents?
    (I suppose that doesnt make sense with wrapping on a small screen, but you
    can see what I'm getting at). Is the best way to allow what I think would be
    the max width in characters?

    Cheers
    Rob


    <head>
    <style type="text/css">
    ..pu {
    background: #DDF2F7;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: #0058B0;
    }
    ..pu a {
    font-size: 0.8em;
    text-decoration: none;
    background: transparent;
    }
    ..pu a:hover {
    text-decoration: underline;
    font-weight: bold;
    }
    ..pu ul {
    list-style-type: none;
    margin-left: 0px;
    margin-top: 0px;
    }
    </style>
    </head>
    <body>
    <div class="pu">
    <ul>
    <li><a href="*">Order Made 23/5/2003</a></li>
    <li><a href="*">Notice of Hearing</a></li>
    <li><a href="*">Application</a></li>
    </ul>
    </div>
    </body>
     
    Rob Martin, Oct 1, 2003
    #1
    1. Advertising

  2. Rob Martin

    brucie Guest

    In post <Niseb.131154$>
    Rob Martin said...

    > The div takes up the entire width of the screen; I realise you can add
    > 'width' etc - but this is specific. Anyone know how to make the width of
    > the div as long as the widest contents?


    add width:20ex; to the .pu class. may need to make larger to
    compensate for paddings.


    > padding-top: 10px;
    > padding-bottom: 10px;
    > padding-left: 5px;
    > padding-right: 5px;


    padding: 10px 5px;

    > border-style: solid;
    > border-width: 3px;
    > border-color: #0058B0;


    border:1px solid #0058B0;

    > font-size: 0.8em;


    use %. IE has a bug with ems. you also need to think if its such a
    good idea making the font 20% smaller than the size the visitor
    prefers.

    > text-decoration: none;


    if removing underlines it must be made clear in some other way that
    the text is a link such as grouped in an area that is obviously a
    menu. different colors are not enough.

    > .pu a:hover {
    > font-weight: bold;


    don't change the font on hover. it may cause the page to jump around
    to redraw or text to be cut off making it unreadable. use some other
    effect.


    --
    01/October/2003 02:12:04 pm
     
    brucie, Oct 1, 2003
    #2
    1. Advertising

  3. Rob Martin

    Rob Martin Guest

    "brucie" <-html.org> wrote in message
    news:...
    > In post <Niseb.131154$>
    > Rob Martin said...
    >
    > > The div takes up the entire width of the screen; I realise you can add
    > > 'width' etc - but this is specific. Anyone know how to make the width of
    > > the div as long as the widest contents?

    >
    > add width:20ex; to the .pu class. may need to make larger to
    > compensate for paddings.
    >


    Thanks.

    > > font-size: 0.8em;

    >
    > use %. IE has a bug with ems. you also need to think if its such a
    > good idea making the font 20% smaller than the size the visitor
    > prefers.


    Ahh yes, remember that from a while ago on this NG, Thanks for the advice.
    Especially for the size comment - I'll leave it std.

    >
    > > text-decoration: none;

    >
    > if removing underlines it must be made clear in some other way that
    > the text is a link such as grouped in an area that is obviously a
    > menu. different colors are not enough.


    Indeed. Just playing at the mo really, but thats to be considered. When
    visible, will be against a tribunal application and this will show relevant
    available documents; I thought even without underlines this may be obvious
    for them. But on reflection, best to leave links as they are...

    >
    > > .pu a:hover {
    > > font-weight: bold;

    >
    > don't change the font on hover. it may cause the page to jump around
    > to redraw or text to be cut off making it unreadable. use some other
    > effect.
    >


    That's true- especially if in a border area, might go over it or have to
    redraw. Righto !

    Thanks for the response
    Cheers
    Rob
     
    Rob Martin, Oct 1, 2003
    #3
  4. Rob Martin

    Mark Parnell Guest

    Sometime around Wed, 01 Oct 2003 04:31:28 GMT, Rob Martin is reported to
    have stated:
    >
    > "brucie" <-html.org> wrote in message
    > news:...
    >> don't change the font on hover. it may cause the page to jump around
    >> to redraw or text to be cut off making it unreadable. use some other
    >> effect.

    >
    > That's true- especially if in a border area, might go over it or have to
    > redraw. Righto !


    Saw a site once that did that - and the link happened to be on the end of a
    line of text, so when you hovered over it, it jumped to the next line,
    which meant you were no longer hovering over it.....you can imagine the
    result. The page just sat there jumping around non-stop until you moved
    your mouse away from the link.

    Lots of fun. :)

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Oct 1, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    807
    Bruce Barker
    Oct 10, 2005
  2. Some One
    Replies:
    5
    Views:
    823
    Toby A Inkster
    Aug 9, 2003
  3. Jean-Fran?ois Lacrampe

    <div> automatic width according to their contents?

    Jean-Fran?ois Lacrampe, Jun 24, 2004, in forum: HTML
    Replies:
    5
    Views:
    19,428
    suyashxp
    Oct 29, 2009
  4. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    541
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  5. Steve Richter
    Replies:
    2
    Views:
    7,954
    Steve Richter
    Jun 15, 2007
Loading...

Share This Page