Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Width of DIV as regards to contents

Reply
Thread Tools

Width of DIV as regards to contents

 
 
Rob Martin
Guest
Posts: n/a
 
      10-01-2003
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>


 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      10-01-2003
In post <Niseb.131154$(E-Mail Removed)>
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
 
Reply With Quote
 
 
 
 
Rob Martin
Guest
Posts: n/a
 
      10-01-2003

"brucie" <(E-Mail Removed)-html.org> wrote in message
news:(E-Mail Removed)...
> In post <Niseb.131154$(E-Mail Removed)>
> 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


 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      10-01-2003
Sometime around Wed, 01 Oct 2003 04:31:28 GMT, Rob Martin is reported to
have stated:
>
> "brucie" <(E-Mail Removed)-html.org> wrote in message
> news:(E-Mail Removed)...
>> 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
 
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
<div> automatic width according to their contents? Jean-Fran?ois Lacrampe HTML 5 10-29-2009 01:31 PM
set div width to remaining width of the browser Steve Richter ASP .Net 2 06-15-2007 06:40 PM
how to: div width = browser.width? =?Utf-8?B?cm9kY2hhcg==?= ASP .Net 3 10-30-2006 05:43 AM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
Creating a CSS class to use in DIV to affect all contents of the DIV??? Some One HTML 5 08-09-2003 03:12 PM



Advertisments