[thelist] [CSS] div width and white-space: nowrap
jakub angelis
jangelis at biomed.cas.cz
Thu Apr 1 02:20:38 CST 2004
hi,
i think, i'd do it this way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Title</title>
<style type="text/css">
div#errorBox {
float: left;
border: 1px solid #FF0033;
margin-top: 10px;
margin-bottom: 10px;
}
div#errorBox h5 {
color: #FFFFFF;
background-color: #FF0033;
margin: 0px;
padding: 4px;
}
div#errorBox p {
margin: 0;
padding: 4px;
white-space: nowrap;
}
</style></head>
<body>
<div id="errorBox">
<h5>Error</h5>
<p>
There was a problem with the login details for User ID 'fsad'.
</p>
</div>
</body></html>
jakub angelis
Mark M wrote:
>Ya must a' missed it in an earlier post:
>
>http://users.tpg.com.au/adslkm7b/list/
>
>
>
>>Do you want it to be 100% of the errorBox div width, or 100% of the window
>>width? Any chance of a mockup of what you're trying to achieve? It's a bit
>>hard
>>(for me at least - no coffee yet :D) to visualise.
>>
>>
>
>I want it to be 100% of the errorBox div width
>
>(As stated in a previous post, I managed to do it with a repeating background image)
>
>But feel free to have a look, and see if there is a better way.
>
>Regards,
>
>Mark
>
>------------------------------------------------------------------
>mark at safefrombees.com
>ICQ: 3094740
>Safe From Bees
>[ www.safefrombees.com ]
>
>
>Quoting Tim Beadle <tsb at wigner.ioppublishing.com>:
>
>
>
>>On Thu, Apr 01, 2004 at 12:20:44PM +1000, Mark M wrote:
>>
>>
>>><div id="errorBox">
>>><h5 id="errorHeader">Error</h5>
>>><div id="errorInnerBox">
>>>There was a problem with the login details for User ID 'fsad'.
>>><br/>
>>></div>
>>></div>
>>>
>>>CSS:
>>>
>>>div#errorBox {
>>> border: 1px solid #FF0033;
>>> width: 10%;
>>> margin-top: 10px;
>>> margin-bottom: 10px;
>>>}
>>>
>>>
>>>h5#errorHeader {
>>> color: #FFFFFF;
>>> width: 100%;
>>> background-color: #FF0033;
>>> margin: 0px;
>>> padding: 4px;
>>> display: run-in;
>>>}
>>>
>>>div#errorInnerBox {
>>> padding: 4px;
>>> white-space: nowrap;
>>>}
>>>
>>>The problem is - the h5 element's width is wrapped to the 10% mark, whereas
>>>
>>>
>>the rest of the
>>
>>
>>>div stretches out.
>>>
>>>Any help how I can make it so that the h5 is 100% wide like it's supposed
>>>
>>>
>>to be?
>>
>>
>>
>
>
>
>><tip author="Tim Beadle" type="Use Descendant Selectors in CSS">
>>Rather than applying div IDs all over the place, just use them on major
>>sections, then use CSS descendant selectors to style the divs' descendants.
>>
>>E.g.
>><div id="errorBox">
>><h5>Title</h5>
>><p>Description</p>
>></div>
>>
>>#errorBox { /* styles for div */ }
>>#errorBox h5 { /* styles for title */ }
>>#errorBox p { /* styles for description */ }
>></tip>
>>
>>--
>>"Internet Explorer is like a box of chocolates. You never know what you're
>>gonna get." -- Sjors
>>--
>>* * Please support the community that supports you. * *
>>http://evolt.org/help_support_evolt/
>>
>>For unsubscribe and other options, including the Tip Harvester
>>and archives of thelist go to: http://lists.evolt.org
>>Workers of the Web, evolt !
>>
>>
>>
>>
>>
--
s pozdravem
jakub angelis
More information about the thelist
mailing list