[thelist] DIVs / SPANs confusion for boxes

Nan Harbison nan at nanharbison.com
Fri Mar 20 09:38:37 CDT 2009


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 ! 




More information about the thelist mailing list