[kwlug-disc] CSS help

Richard Weait richard at weait.com
Sun Mar 14 23:52:26 EDT 2010


On Sun, Mar 14, 2010 at 8:07 PM, Chris Frey <cdfrey at foursquare.net> wrote:
> Hi folks,
>
> I'm sure I'm making an elementary error, but I don't see it. :-)
> I'm trying to get a layout like this:
>
>    +-------------------------------------------+
>    | Entry Title                          Date |
>    +-------------------------------------------+
>    | Body text                                 |
>    +-------------------------------------------+
>
> Here's my test case:
>
>        http://pages.netdirect.ca/~cdfrey/test.html
>
> As you can see, it's not quite working.  The header is there, but only
> due to the padding I've given it.  The two divs inside the header
> do not seem to be "inside" the header div.
>
> The CSS is embedded in the .html above.

I've done this.  It was a bear.  Horizontal bar charts. They scale
nicely when you change font size with ctrl-+. All css.

Tougher to copy and paste, by way easier to read like this.

<div class="split">                                 # .split {width:
48em;}                     # set the total width
  <div class="left">400nm</div>              # .left {float: left;
text-align: left;}      # left align stuff
  <div class="right">1400nm</div>          # .right {float: right;
text-align: right;} # right align stuff
  <div class="spacer">log scale</div>      # .spacer {text-align:
center;}            # and center the rest.
</div>

Example:
See the header on the coatings chart with left, center and right
justified headings.
http://www.computeroptics.com/coat-sel.html

This is from a css reference called the seven-ten split, based on the
bowling term.
http://realworldstyle.com/split.html

Best regards,
Richard.



More information about the kwlug-disc_kwlug.org mailing list