Re: [css-d] how to time table on small screens
Hi Erik, i recommend the CSS Tricks's method too. We are using it in our internal sites and it works fine on several devices. Best Ludwig On Wed, May 27, 2015 at 5:47 AM, Chad Lundgren wrote: > Hi Eric, > > I like CSS Tricks's method of dealing with this issue: > > https://css-tricks.com/responsive-data-tables/ > > Thanks, > > Chad > > > On Tue, May 26, 2015 at 9:30 PM, Erik Visser wrote: > > > Hi all, > > > > On the site i'am reworking for smaller screens there is a time table: > > > > http://www.utrechtsyogacentrum.nl/yoga_lesrooster.php > > > > Off course there is room to shrink this table some more. But is this the > > way to go? > > > > What are your experiences / advice on how to present such a table on > > smaller screens. > > > > Any examples? > > > > Thanks, Erik > > __ > > css-discuss [css-d@lists.css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Ludwig Bekic A-1030 Wien, Wedlgasse 3/23 Mail: lbe...@gmail.com Web: www.gelberTraktor.at Mobile: +43 676 9173757 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] White line between block content when zoom
Hi Kristian, i never used calc() but i think browsers will render your
boxes unpredictable if you mix borders-widths of em and widths in %. I
assume that zooming then causes each browser to round widths differently.
Best
Ludwig
On Tue, Apr 7, 2015 at 10:59 AM, Kristian Dahlgaard
wrote:
> I'm having an issue with Chrome, which does not line up the 2 boxes
> 'section' and 'aside'.
> If I zoom my browser window, the space between the 2 boxes gets larger or
> disappears and the line up perfectly like 'nav' and 'section.
>
> I've tried to use px instead of em, but that does not change the result.
>
> Any ideas what is happening and how this can be fixed?
>
> body { font-family: Verdana,Arial,sans-serif; }
>
> div#content {
> width: 90%;
> margin:2em auto;
> background-color: #00ff21; }
>
> header {
> background-color: #ffd800;
> border: solid black 0.1em; }
>
> header h1 {
> text-align: center;
> font-size: 3em;}
>
> section {
> background-color: #ffd800;
> border: solid black 0.1em;
> width: calc(40% - 0.6em);
> float: left;
> padding: 0.2em 0.2em 0.2em 0.2em;
> margin:0; }
>
>
> nav {
> background-color: #ffd800;
> border: solid black 0.1em;
> width: calc(20% - 0.6em);
> float: left;
> padding: 0.2em 0.2em 0.2em 0.2em;
> margin:0; }
>
> nav ul{
> padding-left:0; }
> nav ul li{
> list-style-type:none; }
>
> aside {
> background-color: #ffd800;
> border: solid black 0.1em;
> width: calc(40% - 0.6em);
> float: right;
> padding: 0.2em 0.2em 0.2em 0.2em;
> margin:0;}
>
> code {
> background-color: #ffd800;
> border: solid black 0.1em;
> width: auto;
> display: block;
> margin: 1em;
> padding: 0.2em; }
>
> footer {
> clear: both;
> border: solid black 0.1em;
> text-align:center; }
>
> footer ul li{
> display:inline;
> font-size:0.6em;
> padding:0 1.5em 0 1.5em; }
>
>
>
>
> http://www.w3.org/1999/xhtml";>
>
>
> Template
>
>
>
>
> header lorem ipsum
>
>
>
>
> Præsentation
> HTML
> CSS
> JavaScript
>
> nav lorem ipsum
>
>
>
> section lorem ipsum
>
>
>
> aside lorem ipsum
> code 1 lorem ipsum
> code 2 lorem ipsum
> code 3 lorem ipsum
> code 4 lorem ipsum
>
>
>
> StudieretningAkademiuddannelse i
> IT
> FagClient-side
> NavnKristian Dahlgaard
> VejlederPer Ole Kjeldsen
> Uddannelses institution
> Smartlearning
>
>
>
>
>
>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Ludwig Bekic
A-1030 Wien, Wedlgasse 3/23
Mail: lbe...@gmail.com
Web: www.gelberTraktor.at
Mobile: +43 676 9173757
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
