[AMBER-Developers] Centering, justifying, widths

From: Josh Berryman <the.real.josh.berryman.gmail.com>
Date: Mon, 10 Mar 2014 10:49:55 +0100

>> I did this
>>on the tutorial index page by putting the entire page into a table. This
is
>>not terrible, but is there a better way?

I don't have a big opinion on text width and left-justify versus centering.
 But the way to have a good site is to achieve such things in a way that
keeps individual pages tidy, consistent and small. So instead of setting
width & centering by encapsulating individual pages in a table, something
more like these attributes

        max-width: 60em;
        margin: 0 auto;
}

that I have added to the body{} element in amber.css would seem to be more
appropriate. I am not an expert web programmer (have a look at my own
website if you don't believe me) but this stuff seems axiomatic.

The hazard of this approach is that we are still using one css file for
(almost) all of amber_web, so changes will propagate to many pages that
will then change their appearance. This is the flip side of having a
consistent look, there is no way around it.

Josh





On 10 March 2014 02:57, David A Case <case.biomaps.rutgers.edu> wrote:

> On Sun, Mar 09, 2014, Kevin Hauser wrote:
> >
> > As to the colors, please oh please don't mix red and green or use red and
> > green to represent different types of information - I and a not
> > insignificant portion of guys are r/g colorblind (almost 5-8%).
> >
> > How to pallette, if you want to get fancy:
> >
> http://blog.mollietaylor.com/2012/10/color-blindness-and-palette-choice.html
>
> Thanks for your comments. I've updated the global "amber.css" file to use
> colors from the above site; for tutorial 1, I removed the red/green color
> distinction between input and output files. After playing with things for
> a
> while, it seemed easiest to read if we just don't bother with that
> distinction.
> (I did leave the "color:" tags there, and just made the colors all black.
> So it should be straightforward to try other combinations.)
>
> I'm no graphics person of css wizard...other are welcome to pitch in.
>
> For example: the figure and caption divisions should probably be centered;
> I thought you could to this by setting both margin-left and margin-right to
> "auto" in the amber.css file, but that didn't seem to work for me.
>
> Second example: some things don't work well with a really wide screen,
> and we would want to limit the width to something smaller (in the range of
> 800 to 1200 pixels), and then center in the browser window. I did this
> on the tutorial index page by putting the entire page into a table. This
> is
> not terrible, but is there a better way?
>
> ...thx...dac
>
> _______________________________________________
> AMBER-Developers mailing list
> AMBER-Developers.ambermd.org
> http://lists.ambermd.org/mailman/listinfo/amber-developers
>
_______________________________________________
AMBER-Developers mailing list
AMBER-Developers.ambermd.org
http://lists.ambermd.org/mailman/listinfo/amber-developers
Received on Mon Mar 10 2014 - 03:00:02 PDT
Custom Search