[thelist] [CSS] div width and white-space: nowrap

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