Re: [css-d] how to time table on small screens
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 e...@erikvisser.net 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/
Re: [css-d] White line between block content when zoom
Another way to avoid calc would be to use box-sizing: border-box, which
will subtract the border (and padding) from the overall width of each box.
Some people argue you should apply it to everything --
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ -- a view I agree
with.
There is still a chance that the borders may look a bit different because
of rounding differences when using ems. I tend to use pixels for borders
for that reason and change the width with media queries if needed. I use
ems, percents, or ems for pretty much everything else.
Also, there is no content HTML5 element. main seems to be a close
match. This may seem like a nitpick, but as it currently stands, your
content element is using a default display setting of inline -- and that
means whitespace handling will come into play -- that can differ on Chrome
on a Mac versus Chrome on Windows, and inline elements (think span) ignore
width or height settings as well.
Compatibility note: For compatibility with IE8 - 11, you should add main {
display:block; }, or get an HTML5 shim in CSS or JavaScript form.
Chad
On Apr 7, 2015 11:34 AM, John Andrews andrew...@gmail.com wrote:
You can avoid the calc in the section by putting the nav first in the body
floated left as you have, then put the aside floated right as you have,
then take the calc width of the section out and let it fit in between the
left and right portions.
It seems to work for me.
--- John Andrews
(forgot to reply all)
On Tue, Apr 7, 2015 at 4:59 AM, Kristian Dahlgaard krist...@nicedane.dk
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; }
!DOCTYPE html
html xmlns=http://www.w3.org/1999/xhtml;
head
link href=css/style.css rel=stylesheet media=screen /
titleTemplate/title
/head
body
content
header
h1header lorem ipsum/h1
/header
nav
ul
liPræsentation/li
liHTML/li
liCSS/li
liJavaScript/li
/ul
nav lorem ipsum
/nav
section
section lorem ipsum
/section
aside
aside lorem ipsum
codecode 1 lorem ipsum/code
codecode 2 lorem ipsum/code
codecode 3 lorem ipsum/code
codecode 4 lorem ipsum/code
/aside
footer
ul
listrongStudieretning/strongAkademiuddannelse i
IT/li
listrongFag/strongClient-side/li
listrongNavn/strongKristian Dahlgaard/li
listrongVejleder/strongPer Ole Kjeldsen/li
listrongUddannelses institution/strong
Smartlearning/li
/ul
/footer
/content
/body
/html
__
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
Re: [css-d] FOUC on homepage
Hi, FOUC is as good a name as any. The problem is that your slides need to be set to display: none in your CSS. This issue is happening because the JavaScript must load and be parsed before it can set the display to none. This takes just long enough for this flash. CSS, on the other hand, must all be downloaded and parsed before the page will render, pretty much for this exact reason. The JavaScript, which is effectively using inline style tags, will have no problem overriding the display: none. Thanks, Chad On Fri, Mar 20, 2015 at 12:09 PM, J.C. Berry jcharlesbe...@gmail.com wrote: I was reading and realized that may not be the correct terminology... no wonder the comments about an older problem. When I said flash of unstyled content, in my particular case I meant that the homepage banners on these pages http://www.xifin.com http://www.xifin.com/radiology and the video carousels on these as well http://xifin.com/resources/success-stories http://xifin.com/resources/success-stories/Renaissance-RX all show the images before they are laid out correctly. If the page loads slower, it takes longer for the positions to be set correctly and for the animations to start. What do you call this? On Fri, Mar 20, 2015 at 10:36 AM, J.C. Berry jcharlesbe...@gmail.com wrote: Hello all, can you shed any light on how to fix a FOUC on our homepages? http://www.xifin.com http://www.xifin.com/radiology (maybe not bad?) Thanks in advance! -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ 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/
[css-d] CSS3 Validator updated to accept rgba, hsla,etc
Hello, At the risk of tooting my own horn. The bug report I filed a while back about the CSS3 validator not accepting rgba, hsla, and being thrown on box-shadow has been fixed: https://www.w3.org/Bugs/Public/show_bug.cgi?id=11880#c2 The only remaining items on the stylesheet I was testing that produce incorrect errors are transitions and gradient syntax, which are both still in more flux that the color values. Thanks, Chad Lundgren __ 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] Fluid layout cross-browser rendering
On Dec 13, 2011, at 2:25 PM, David Odefey wrote: I was hoping there was a solution that allowed me to keep both my percentage based widths as well as the static width borders. Hi David, While you may or may not need this technique for your current layout, there *is* a property that does what you describe. Depending on how important IE6/IE7 compatibility is, you could use the box-sizing property. Here's a good explanation: http://css-tricks.com/7323-box-sizing/ The nice part is that it even works in IE8. The first time I used box-sizing: border-box, my comment was /* No, YOU do the math */ . Even if you do need IE7/IE6 compatibility, you could do a conditional comment and lower the percentage for those browsers a bit and have it look pretty similar. __ 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/
