Re: [css-d] Responsive grid layout with graphics and scaling
Karl, I am using Linux Mint 16 with Firefox. My screen is big to bigger depending on the system I am using. I just checked using a narrow Firefox window down to the minimum. I also use chrome from time to time. I tend to avoid Windows and prefer Linux. I use LXLE, Mint, and currently Knoppix because I am helping a blind man learn how to use a computer. --- John Andrews On Jul 6, 2016 10:24 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: > Thanks John. Your the second one to mention the justify text. > I may have to look into that, but I really don't like align left. > Either space between words or on the side of the whole paragraph. > Personally I like the text to make columns. > > May I ask what OS or device/browser you were using? As well as screen size? > Thank you for the compliment. Appreciate your feedback. > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > > > On Jul 6, 2016, at 8:03 PM, John Andrews <andrew...@gmail.com> wrote: > > > > Hovering on links in (I think ) Services did not bring up more text. > > Nothing. > > > > I notice that on narrow views the justified text sometimes gets very wide > > spacing and looks funny. > > > > Otherwise a beautiful site. > > > > --- John Andrews > > > > > > --- John Andrews > > > > On Wed, Jul 6, 2016 at 5:23 AM, Karl DeSaulniers <k...@designdrumm.com> > > wrote: > > > >> Hello Tom, > >> As well as everyone else. Can I invite you to take a look at a new > website > >> of mine? > >> Please let me know if it breaks for you? Should be fully responsive "as > >> in" you can shrink the window and it responds. > >> TIA > >> > >> http://tunkeysolutionsinc.com > >> > >> @Tom — if you take a look at the images on this site, you will see how I > >> implemented what you're requesting I believe as well as the code pen > below. > >> > >> Best, > >> > >> Karl DeSaulniers > >> Design Drumm > >> http://designdrumm.com > >> > >> > >> > >> > >>> On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers <k...@designdrumm.com> > >> wrote: > >>> > >>> Hey Tom, > >>> I had this in my codepen. Made a few adjustments to taylor to your > needs > >> (hopefully). > >>> I "think" this is what you're going for. The :nth-child stuff is just > >> for demo purposes. > >>> This also doesn't use flex. You will have to season to taste though and > >> make it work for you. > >>> > >>> http://codepen.io/designdrumm/pen/BzRrKg > >>> > >>> Best, > >>> > >>> Karl DeSaulniers > >>> Design Drumm > >>> http://designdrumm.com > >>> > >>> > >>> > >>> > >>> On Jul 1, 2016, at 12:44 PM, Tom Livingston <tom...@gmail.com> wrote: > >>> > >>>> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell < > ch...@chrisrockwell.com > >>> > >>>> wrote: > >>>> > >>>>> Hi Tom, > >>>>> > >>>>> OK, I think they should scale, by default, at the same time also. > I'm > >>>>> apparently pretty dense this week but are you finding otherwise? > >> Consider > >>>>> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior? > >>>>> > >>>> > >>>> > >>>> This is great, yes. However, will it work without flex? Sorry, don't > >> have > >>>> time to play with it right now... > >>>> > >>>> > >>>> > >>>> > >>>> -- > >>>> > >>>> Tom Livingston | Senior Front End Developer | Media Logic | > >>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > >>>> > >>>> > >>>> #663399 > >>>> __ > >>>> 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] Responsive grid layout with graphics and scaling
Hovering on links in (I think ) Services did not bring up more text. Nothing. I notice that on narrow views the justified text sometimes gets very wide spacing and looks funny. Otherwise a beautiful site. --- John Andrews --- John Andrews On Wed, Jul 6, 2016 at 5:23 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > Hello Tom, > As well as everyone else. Can I invite you to take a look at a new website > of mine? > Please let me know if it breaks for you? Should be fully responsive "as > in" you can shrink the window and it responds. > TIA > > http://tunkeysolutionsinc.com > > @Tom — if you take a look at the images on this site, you will see how I > implemented what you're requesting I believe as well as the code pen below. > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > > > On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers <k...@designdrumm.com> > wrote: > > > > Hey Tom, > > I had this in my codepen. Made a few adjustments to taylor to your needs > (hopefully). > > I "think" this is what you're going for. The :nth-child stuff is just > for demo purposes. > > This also doesn't use flex. You will have to season to taste though and > make it work for you. > > > > http://codepen.io/designdrumm/pen/BzRrKg > > > > Best, > > > > Karl DeSaulniers > > Design Drumm > > http://designdrumm.com > > > > > > > > > > On Jul 1, 2016, at 12:44 PM, Tom Livingston <tom...@gmail.com> wrote: > > > >> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell <ch...@chrisrockwell.com > > > >> wrote: > >> > >>> Hi Tom, > >>> > >>> OK, I think they should scale, by default, at the same time also. I'm > >>> apparently pretty dense this week but are you finding otherwise? > Consider > >>> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior? > >>> > >> > >> > >> This is great, yes. However, will it work without flex? Sorry, don't > have > >> time to play with it right now... > >> > >> > >> > >> > >> -- > >> > >> Tom Livingston | Senior Front End Developer | Media Logic | > >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > >> > >> > >> #663399 > >> __ > >> 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-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] New website
You might clear your cache and then run the site. That way everything has to load fresh. I read them all, rarely comment. Learning. --- John Andrews --- John Andrews On Sun, Mar 27, 2016 at 3:47 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > Thanks for your opinion Philip. What is this radical overhaul and > simplification you see necessary? After all, it's just a portfolio website. > > Best, > Karl > > Sent from losPhone > > > On Mar 27, 2016, at 10:23 AM, Philip Taylor <p.tay...@rhul.ac.uk> wrote: > > > > > > > > Karl DeSaulniers wrote: > > > >> Yes, I sent another message with that in it. > >> Must not have posted. Here you go. > >> Thanks for asking. :) > >> > >> http://designdrumm.com > > > > Sorry, Karl, I would never /ever/ have the patience to wait for such a > > site to load. "Minifying" (etc.,) may help, but a radical overhaul and > > massive simplification is really needed, IMHO. > > > > Philip Taylor > > __ > > 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-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] New website
Problems with my HTC Android phone. Will give details later. Busy now. On Feb 29, 2016 4:22 PM, "Karl DeSaulniers"wrote: > Yes, I sent another message with that in it. > Must not have posted. Here you go. > Thanks for asking. :) > > http://designdrumm.com > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > On Feb 29, 2016, at 5:37 PM, Chris Williams wrote: > > > Link? > > > > > > > > > > On 2/29/16, 2:32 PM, "css-d-boun...@lists.css-discuss.org on behalf of > Karl DeSaulniers" k...@designdrumm.com> wrote: > > > >> Hello all, > >> Got another website. This time it's my own portfolio website. It is an > infinite loop horizontal scrolling responsive website. > >> > >> If you all don't mind taking a look at it and let me know if it breaks > for you, I would really appreciate any feedback. Good or bad. Hopefully all > good. (: )) > >> > >> Best, > >> Karl > >> __ > >> 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-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] Block out Background image with mask !
Try a gif image with black and transparent instead of a png image. Gifs can have a transparent background. On Fri, May 22, 2015 at 2:57 PM, Crest Christopher crestchristop...@gmail.com wrote: I want to make a background-image within a pesudo-element; where as, where the image is black, the background image stops. background-image:url(acme.png); mask-image:url(maskout.png) alpha; __ 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/ -- -- John Andrews __ 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
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 [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] FOUC on homepage
In trying to learn CSS I just came across this term a few months ago in Charles Wyke-Smith's Stylin' With CSS. On page 241 (2nd ed) he says you need a link to the style page in the head of the page to prevent this from happening. He says if a link tag or a script tag (used to associate JavaScript with your page) is present in the head of the page, your page won't trigger a FOUC. He says to check with http://bluerobot.com/web/css/fouc.asp. On Fri, Mar 20, 2015 at 1:50 PM, Ryan Reese sportsdude.re...@gmail.com wrote: Sorry, you did a double negative. I misunderstood. AFAIK this problem no longer exists but there are still articles on this which give solutions. I suggest you google some. On Fri, Mar 20, 2015 at 1:46 PM, J.C. Berry jcharlesbe...@gmail.com wrote: I was not aware Reese that this problem no longer exists in web dev...? I have read on various fixes, but I think this is peculiar to my specific case. On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese sportsdude.re...@gmail.com wrote: Flash Of Unstyled Content. Man I haven't heard about that in years. Have you tried Googling for solutions? I'm bombarded by hundreds of links all describing methods that can help. On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: I would be more inclined to try to help if you glossed FOUC rather than requiring me (and perhaps others) to research it for myself (theirselves). Philip Taylor J.C. Berry 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! __ 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/ -- Ryan Reese -- 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. -- Ryan Reese __ 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] Safari-OS X Lion - srcset attribute
My old Power PC Mac shows yellow. Linux Mint 17.1 shows yellow. On Wed, Feb 25, 2015 at 8:57 PM, Tom Livingston tom...@gmail.com wrote: Possibly not desired but I'm not at my Mac... iOS 8.1.3 Safari shows green img On Wed, Feb 25, 2015 at 8:52 PM Philippe Wittenbergh e...@l-c-n.com wrote: Is anyone out there still running OS X 10.7 Lion? Or has it running in a VM. What is the colour of the image in this test case? http://dev.l-c-n.com/_temp/srcset1.html (I’m not sure what changes came to the Safari rendering engine in the latest (last) update…) Oh, and if someone could check with OS X 10.8 + Safari, that would be nice. TIA, Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ 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-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] Background-Image overrides background color
Try making the background color the last item in the list. On Sat, Jan 10, 2015 at 11:59 PM, Crest Christopher crestchristop...@gmail.com wrote: The background image should sit on-top of the background color, instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Christopher __ 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] Styling a menu
Thanks, too. I think I can use this. Sitting on the sidelines, learning. --- John Andrews On Wed, Oct 15, 2014 at 4:45 PM, Peredur pere...@peredur.net wrote: El 15/10/14 a las #4, David Laakso escribió: Peter, One way to do that is to put the nav after the footer in the markup. And then absolute position the nav into a block [article] of padding. Once you get to the media queries, the amount of padding needed can be tweaked-- less needed at desktop, and more needed at mobile. A fast and dirty example without media queries: http://ccstudi.com/school.html Best, David Laakso Thanks David. I'll take a look and play around with that solution tomorrow. I confess to being just a wee bit tired at the moment and I think I need to have my wits about me for this. I'll let you know how I get on. Peter -- *Peter Bradley* peredur.net http://www.peredur.net __ 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/