[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