[thelist] DIVs / SPANs confusion for boxes

Stefan Schwarzer st.schwarzer at geois.de
Fri Mar 20 09:52:22 CDT 2009


Seems to got it working (at least in Safari, Mac) like this:

                 <div style="float: left; font-size: 150%; font-color:  
#efefef; background: #fff; font-family: arial-black, sans-serif;  
border: 1px solid #666; align: center; width: 100%">
                 	<div style="margin: 4.8%; width: 40%; float: left">
	                	<div style="margin: 0.5em; border-bottom: 1px solid  
#aaa;">
     	            		<div style="margin-bottom: -0.8em">{$min}</div>
         	        		<div style="font-size: 60%; font-family: arial,  
sans-serif; margin-bottom: 0.4em">
             	    			<br />minimum
                 			</div>
                 		</div>
     	            	<div style="margin: 0.5em; margin-top: 0.8em;  
border-bottom: 1px solid #aaa">
         	        		{$max}
             	    		<span style="font-size: 60%; font-family: arial,  
sans-serif">
                 				<br />maximum
                 			</span>
	                	</div>
     	            	<div style="margin: 0.5em; margin-top: 0.8em;  
border-bottom: 1px solid #aaa">
         	        		{$no}
             	    		<span style="font-size: 60%; font-family: arial,  
sans-serif">
                 				<br />no countries
                 			</span>
	                	</div>
	                </div>
                 	<div style="margin: 4.8%; width: 40%; float: left">
	                	<div style="margin: 0.5em; border-bottom: 1px solid  
#aaa;">
     	            		{$avg}
         	        		<span style="font-size: 60%; font-family: arial,  
sans-serif">
             	    			<br />average
                 			</span>
                 		</div>
     	            	<div style="margin: 0.5em; margin-top: 0.8em;  
border-bottom: 1px solid #aaa">
         	        		{$stdv}
             	    		<span style="font-size: 60%; font-family: arial,  
sans-serif">
                 				<br />st dev
                 			</span>
	                	</div>
     	            	<div style="margin: 0.5em; margin-top: 0.8em;  
border-bottom: 1px solid #aaa">
         	        		{$sum}
             	    		<span style="font-size: 60%; font-family: arial,  
sans-serif">
                 				<br />sum
                 			</span>
	                	</div>
	                </div>
                 </div>

Stef

On Mar 20, 2009, at 3:38 PM, Nan Harbison wrote:

> Is this design not working in ALL browsers, or is it browser specific?
> Nan
>
> -----Original Message-----
> From: thelist-bounces at lists.evolt.org
> [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Stefan Schwarzer
> Sent: Friday, March 20, 2009 10:06 AM
> To: thelist at lists.evolt.org
> Subject: [thelist] DIVs / SPANs confusion for boxes
>
> Hi there,
>
> gush, shouldn't be that complicated,no? And surely isn't... but I  
> just don't
> get it.
>
> I would like to have this here:
>
>
> ---------------------------------------
> |    -------------     -------------     |
> |    |              |     |              |     |
> |    |   box     |     |   box     |     |
> |    |      1      |     |      2      |     |
> |    |              |     |              |     |
> |    -------------     -------------     |
> --------------------------------------
>
> In the boxes I have something like this:
>
> ---------------------
> |   8475              |
> |   minimum       |
> |   ---------------   |
> |                         |
> |   194856          |
> |   maximum       |
> |   ---------------   |
> ---------------------
>
> I've come up with something like this:
>
>                 <div style="float: left; font-size: 150%; font-color:
> #aaa; font-style: bold; background: #efefef; font-family: arial, sans-
> serif; border: 1px solid #666; align: center">
>                 	<div style="margin: 0.5em; border: 1px solid #0a0">
> 	                	<div style="margin: 0.5em; border-bottom:
> 1px solid #aaa;">
>     		            		{$min}
>         	        		<span style="font-size: 60%">
>             		    			<br />minimum
>                 			</span>
>                 		</div>
>     	            		<div style="margin: 0.5em; margin-top:
> 0.8em;
> border-bottom: 1px solid #aaa">
>         	        		{$max}
>             	    			<span style="font-size: 60%">
>                 				<br />maximum
> 	                		</span>
> 	                	</div>
> 	                </div>
>                 	<div style="margin: 0.5em; width: 40%; border: 1px
> solid #a00">
> 	                	<div style="margin: 0.5em; border-bottom:
> 1px solid #aaa">
>     	            			{$min}
>         	        		<font style="font-size: 60%">
>             	    				<br />average
>                 			</font>
>                 		</div>
> 	                	<br />
>     	            	<div style="margin: 0.5em; margin-top: 0.8em;
> border-bottom: 1px solid #aaa">
>         	        		{$max}
> 	            	    		<span style="font-size: 60%">
>                 				<br />median
>                 			</span>
> 	                	</div>
> 	                </div>
>                 </div>
>
>
> But it doesn't do what it should do....
>
> Can anyone point to me a better strategy?
>
> Thanks a lot!
>
> Stef
>
>  ____________________________________________________________________
>
>   Lean Back and Relax - Enjoy some Nature Photography
>   http://photoblog.la-famille-schwarzer.de
>
>   Appetite for Global Data? UNEP GEO Data Portal:
>   http://geodata.grid.unep.ch
>   ____________________________________________________________________
>
>
>
>
>
>
> -- 
>
> * * 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 !
>
> -- 
>
> * * 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 !
>




More information about the thelist mailing list