[css-d] CSS must be called in the head?

[John J]

And nowhere else, correct? I'm referring to external CSS

Thank you.
__
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] CSS Grid: Can I flow content around blocks?

[John Beales]

Thanks for pointing me to the docs, I hadn't looked there, (my bad, I know).

I wondered about the figure + p option, but it's imperfect, because
sometimes the first p will be short, (content is coming from a CMS). It's
better than nothing, but I might go and re-think my strategy for this part
of the document.

There's a codepen here: https://codepen.io/johnbeales/pen/yzNmqm

On Sat, Sep 16, 2017 at 4:55 AM Philippe Wittenbergh <ph...@l-c-n.com>
wrote:

>
> > On Sep 16, 2017, at 3:05 AM, John Beales <j...@johnbeales.com> wrote:
> >
> > On the blog I'm coding each post is a container with a 12-column grid.
> Most
> > of the things that appear in each post, (paragraphs, blockquotes, etc),
> > span 8 columns: 3 - 10. However, I want to be able to pull them out to
> the
> > left or right - say a  that spans columns 2-4, and have the
> > following paragraphs flow around it, similar to if I had no grid, and
> > floated a  to the left or right, maybe giving it a bit of
> negative
> > margin to pull it out of the content area.
> >
> > Is this possible? I had thought that setting a float on the 
> (which
> > is a direct child of the grid container, as are the  tags and so on),
> > would do the job, but it's not. The  following the  ends up
> > below the .
>
> The float property does not apply to grid-items (your  in this
> case). see:
> https://drafts.csswg.org/css-grid/#grid-containers
>
> Maybe something like this will work (hard to say, can you provide a URL or
> a test case?)
>
> figure { grid-column: 2 / 4; }
>
> figure + p { grid-column: 5 / 10; }
>
> Philippe
> --
> Philippe Wittenbergh
> https://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-d] CSS Grid: Can I flow content around blocks?

[John Beales]

Hi List!

I'm diving into the CSS grid, and there's something I thought I could do,
but I'm having trouble.

On the blog I'm coding each post is a container with a 12-column grid. Most
of the things that appear in each post, (paragraphs, blockquotes, etc),
span 8 columns: 3 - 10. However, I want to be able to pull them out to the
left or right - say a  that spans columns 2-4, and have the
following paragraphs flow around it, similar to if I had no grid, and
floated a  to the left or right, maybe giving it a bit of negative
margin to pull it out of the content area.

Is this possible? I had thought that setting a float on the  (which
is a direct child of the grid container, as are the  tags and so on),
would do the job, but it's not. The  following the  ends up
below the .

Thanks!

- John
__
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] list of all the CSS properties?

[Dean, John]

CSS discuss group,

I'm near the end stages of writing a book on HTML, CSS, and JavaScript, and I'm 
reviewing all the URLs in my book. Unfortunately, the link I used for showing 
all the CSS properties is now quite a bit different than what it was several 
months ago. When I wrote my CSS chapter, I said "The W3C's official CSS 
properties reference is at https://www.w3.org/TR/CSS/#properties. That link 
used to take me to a nice table with all the properties with their associated 
default values and their associated inheritability status.

But now, that link takes me to "section 4.4. Property Index" in the "CSS 
Snapshot 2017" page. And that section lists things like align-content and 
box-decoration-break, which I don't think are CSS properties (?). So do you 
know of the best URL for a complete list of CSS properties so I can refer to it 
in my book?

If I use the wiki page at 
https://www.w3.org/community/webed/wiki/CSS/Properties (which is organized 
quite nicely) instead of the above URL, can I count on that URL persisting for 
a long time (my first edition should run about 4 years)?

Thanks,
john

John Dean, Ph.D.
Associate Professor of Computer Science
Chair of Computer Science and Information Systems
Park University - Parkville Campus
Computer Science and Information Systems
8700 NW River Park Drive
Parkville, MO  64152
816-584-6422 (Office)
john.d...@park.edu<mailto:john.d...@park.edu>

This e-mail message and any attached files are confidential and are intended 
solely for the use of the addressee(s) named above.  If you are not the 
intended recipient or person responsible for delivering this confidential 
communication to the intended recipient, you have received this communication 
in error, and any review, use, dissemination, forwarding, printing, copying, or 
other distribution of this e-mail message and any attached files is strictly 
prohibited.  If you have received this confidential communication in error, 
please notify the sender immediately by reply e-mail message and permanently 
delete the original message.  Thank you.



__
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] An Example of Gradients for a Curtain

[John Beales]

@Eric: That's exactly it. I was also able to turn up the similar part
of your Colors, Backgrounds, & Gradients book from 2015, (maybe it's a
pre-release section of your upcoming book?).

Do you remember if there's a formula for figuring out the color stops
to use in the gradients, or is sampling a photo of a curtain the best
way? I'd like to be able to change the color of the curtain easily in
a Sass mixin.

@Rainer: That last one is pretty great. I'm going to see if I can
combine the motion in it with the lack of extra HTML from Eric's
circadients. I'm not sure if it's possible, bit if it is, I'll figure
it out ;)

Thanks everyone!

On Fri, Mar 17, 2017 at 2:47 PM, Eric A. Meyer <e...@meyerweb.com> wrote:
>
>
> Sent from my iPhone
>
> On Mar 17, 2017, at 13:16, John Beales <j...@johnbeales.com> wrote:
>
> I remember seeing some demos a couple of years back of using CSS
> gradients to make a curtain/drape, but my Google skills aren't turning
> up anything, so I'm hoping the list's collective memory and/or
> bookmarks will help.
>
>
> You might be thinking of http://meyerweb.com/eric/css/tests/circadients.html
> (almost five years old now!).
>
__
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] An Example of Gradients for a Curtain

[John Beales]

I remember seeing some demos a couple of years back of using CSS
gradients to make a curtain/drape, but my Google skills aren't turning
up anything, so I'm hoping the list's collective memory and/or
bookmarks will help.

Does anyone here have or know of any great purely CSS curtain demos,
(as in, something that looks like a curtain or drape, not the
"curtains" design pattern where stuff slides away to reveal something
else at a lower z-index)?

Thanks,

John
__
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] Developing on an iPad? [OT]

[John J]

Can anyone here who develops on an iPad kindly share how this is done?

Thank you,
J
__
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] animated gif has scrollbars

[John J]

No, but I still had iframe code in there..

On Nov 11, 2016 2:27 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote:

> overflow:hidden; didn't work?
>
> Best,
> Karl
>
> Sent from losPhone
>
> > On Nov 11, 2016, at 1:03 PM, John J <cr8...@gmail.com> wrote:
> >
> > I placed an animated gif on a web page; the dimensions of the gif do not
> > exceed the capacity of the containing div, yet I have scrollbars.  Link
> > below.
> >
> > Is there a best practice for defeating scrollbars? Do we automatically
> get
> > scrollbars with placed media unless we spec otherwise?
> >
> > Thank you!
> >
> > http://john-a-johnson.com/rokr.php
> > __
> > 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] animated gif has scrollbars

[John J]

D'oh!

I used iframe for an earlier experiment..didn't think to get rid of that.
Thank you, Tom!

J

On Fri, Nov 11, 2016 at 11:18 AM, Tom Livingston <tom...@gmail.com> wrote:

> On Fri, Nov 11, 2016 at 2:03 PM, John J <cr8...@gmail.com> wrote:
> > I placed an animated gif on a web page; the dimensions of the gif do not
> > exceed the capacity of the containing div, yet I have scrollbars.  Link
> > below.
> >
> > Is there a best practice for defeating scrollbars? Do we automatically
> get
> > scrollbars with placed media unless we spec otherwise?
> >
> > Thank you!
> >
> > http://john-a-johnson.com/rokr.php
>
>
> I'm seeing that as an iframe which could be the source of your
> scrollbars. In latest Mac Chrome, I don't see any scrollbars.
>
>
> --
>
> 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-d] animated gif has scrollbars

[John J]

I placed an animated gif on a web page; the dimensions of the gif do not
exceed the capacity of the containing div, yet I have scrollbars.  Link
below.

Is there a best practice for defeating scrollbars? Do we automatically get
scrollbars with placed media unless we spec otherwise?

Thank you!

http://john-a-johnson.com/rokr.php
__
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] What causes the space at bottom of squares?

[John J]

Thank you!

On Sep 22, 2016 4:27 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote:

> Because inline does not honor height. you need inline-block or block to do
> that
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com <http://designdrumm.com/>
>
>
>
>
> > On Sep 22, 2016, at 6:25 PM, John J <cr8...@gmail.com> wrote:
> >
> > Yeah..that sounds good. Easy enough to make that change. Why does the
> space happen in the first place? Why does images being inline cause it?
> >
> >
> > On Sep 22, 2016 12:30 PM, "Karl DeSaulniers" <k...@designdrumm.com
> <mailto:k...@designdrumm.com>> wrote:
> > I would add a class to images that you need a special style for
> > instead of declaring the same style for all images
> > if not all images should display the same.
> >
> > Just my 2¢
> >
> > :)
> >
> > Best,
> >
> > Karl DeSaulniers
> > Design Drumm
> > http://designdrumm.com <http://designdrumm.com/>
> >
> >
> >
> >
> > > On Sep 22, 2016, at 11:22 AM, Tom Livingston <tom...@gmail.com
> <mailto:tom...@gmail.com>> wrote:
> > >
> > > I would handle this on a case-by-case basis. But it's up to you.
> > >
> > > If you make a global style, you may need to "undo" it when you don't
> > > want them to be block. On the other hand, if you handle it
> > > case-by-case, you may find yourself making images block frequently.
> > >
> > > Glad I could help.
> > >
> > > On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com  cr8...@gmail.com>> wrote:
> > >> ^^ OK..doing that  does work; so  that when I need images to be
> inline, I'll
> > >> have to handle it with stylesheets?  Is this a best practice, to
> declare
> > >> images as block up in the area where we have our other resets?
> > >>
> > >> Thank you, Tom
> > >>
> > >> On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com  cr8...@gmail.com>> wrote:
> > >>>
> > >>> Are you saying to do this to my initial img tag so that this is
> universal?
> > >>>
> > >>> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com
> <mailto:tom...@gmail.com>> wrote:
> > >>>>
> > >>>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com  cr8...@gmail.com>> wrote:
> > >>>>> I have 6 image tiles; 2 rows of 3 at desktop size. Each square has
> a
> > >>>>> background color, and an image placed inside.
> > >>>>>
> > >>>>> Each of these "tiles" shows through the background color of about
> 3-4
> > >>>>> pixels. I can not see what's allowing this. I have my styles for
> the
> > >>>>> tiles
> > >>>>> set at max-width:30%; height:auto;
> > >>>>>
> > >>>>> Can anyone see what the source of this unwanted space is?
> > >>>>>
> > >>>>> Thank you!
> > >>>>>
> > >>>>
> > >>>>
> > >>>> Images are inline elements. If you add a display:block; rule to your
> > >>>> images, you can remove this gap.
> > >>>>
> > >>>>
> > >>>> --
> > >>>>
> > >>>> Tom Livingston | Senior Front End Developer | Media Logic |
> > >>>> ph: 518.456.3015x231  | fx: 518.456.4279
>  | medialogic.com <http://medialogic.com/>
> > >>>>
> > >>>>
> > >>>> #663399
> > >>>> 
> __
> > >>>> css-discuss [css-d@lists.css-discuss.org <mailto:cs...@lists.css-
> discuss.org>]
> > >>>> http://www.css-discuss.org/mailman/listinfo/css-d <
> http://www.css-discuss.org/mailman/listinfo/css-d>
> > >>>> List wiki/FAQ -- http://css-discuss.incutio.com/ <
> http://css-discuss.incutio.com/>
> > >>>> List policies -- http://css-discuss.org/policies.html <
> http://css-discuss.org/policies.html>
> > >>>> Supported by evolt.org <http://evolt.org/> --
> http://www.evolt.org/help_support_evolt/ <http://www.evolt.org/help_
> support_evolt/>
> > >>>
> > >>>
> > >>
> 

Re: [css-d] What causes the space at bottom of squares?

[John J]

Yeah..that sounds good. Easy enough to make that change. Why does the space
happen in the first place? Why does images being inline cause it?

On Sep 22, 2016 12:30 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote:

> I would add a class to images that you need a special style for
> instead of declaring the same style for all images
> if not all images should display the same.
>
> Just my 2¢
>
> :)
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Sep 22, 2016, at 11:22 AM, Tom Livingston <tom...@gmail.com> wrote:
> >
> > I would handle this on a case-by-case basis. But it's up to you.
> >
> > If you make a global style, you may need to "undo" it when you don't
> > want them to be block. On the other hand, if you handle it
> > case-by-case, you may find yourself making images block frequently.
> >
> > Glad I could help.
> >
> > On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com> wrote:
> >> ^^ OK..doing that  does work; so  that when I need images to be inline,
> I'll
> >> have to handle it with stylesheets?  Is this a best practice, to declare
> >> images as block up in the area where we have our other resets?
> >>
> >> Thank you, Tom
> >>
> >> On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote:
> >>>
> >>> Are you saying to do this to my initial img tag so that this is
> universal?
> >>>
> >>> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com>
> wrote:
> >>>>
> >>>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote:
> >>>>> I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
> >>>>> background color, and an image placed inside.
> >>>>>
> >>>>> Each of these "tiles" shows through the background color of about 3-4
> >>>>> pixels. I can not see what's allowing this. I have my styles for the
> >>>>> tiles
> >>>>> set at max-width:30%; height:auto;
> >>>>>
> >>>>> Can anyone see what the source of this unwanted space is?
> >>>>>
> >>>>> Thank you!
> >>>>>
> >>>>
> >>>>
> >>>> Images are inline elements. If you add a display:block; rule to your
> >>>> images, you can remove this gap.
> >>>>
> >>>>
> >>>> --
> >>>>
> >>>> 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/
> >>>
> >>>
> >>
> >
> >
> >
> > --
> >
> > 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/

Re: [css-d] What causes the space at bottom of squares?

[John J]

^^ OK..doing that  does work; so  that when I need images to be inline,
I'll have to handle it with stylesheets?  Is this a best practice, to
declare images as block up in the area where we have our other resets?

Thank you, Tom

On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote:

> Are you saying to do this to my initial img tag so that this is universal?
>
> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> wrote:
>
>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote:
>> > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
>> > background color, and an image placed inside.
>> >
>> > Each of these "tiles" shows through the background color of about 3-4
>> > pixels. I can not see what's allowing this. I have my styles for the
>> tiles
>> > set at max-width:30%; height:auto;
>> >
>> > Can anyone see what the source of this unwanted space is?
>> >
>> > Thank you!
>> >
>>
>>
>> Images are inline elements. If you add a display:block; rule to your
>> images, you can remove this gap.
>>
>>
>> --
>>
>> 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/

Re: [css-d] What causes the space at bottom of squares?

[John J]

OK..thank you..good to keep in mind!

On Thu, Sep 22, 2016 at 9:22 AM, Tom Livingston <tom...@gmail.com> wrote:

> I would handle this on a case-by-case basis. But it's up to you.
>
> If you make a global style, you may need to "undo" it when you don't
> want them to be block. On the other hand, if you handle it
> case-by-case, you may find yourself making images block frequently.
>
> Glad I could help.
>
> On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com> wrote:
> > ^^ OK..doing that  does work; so  that when I need images to be inline,
> I'll
> > have to handle it with stylesheets?  Is this a best practice, to declare
> > images as block up in the area where we have our other resets?
> >
> > Thank you, Tom
> >
> > On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote:
> >>
> >> Are you saying to do this to my initial img tag so that this is
> universal?
> >>
> >> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com>
> wrote:
> >>>
> >>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote:
> >>> > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
> >>> > background color, and an image placed inside.
> >>> >
> >>> > Each of these "tiles" shows through the background color of about 3-4
> >>> > pixels. I can not see what's allowing this. I have my styles for the
> >>> > tiles
> >>> > set at max-width:30%; height:auto;
> >>> >
> >>> > Can anyone see what the source of this unwanted space is?
> >>> >
> >>> > Thank you!
> >>> >
> >>>
> >>>
> >>> Images are inline elements. If you add a display:block; rule to your
> >>> images, you can remove this gap.
> >>>
> >>>
> >>> --
> >>>
> >>> 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/
> >>
> >>
> >
>
>
>
> --
>
> 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/

Re: [css-d] What causes the space at bottom of squares?

[John J]

Are you saying to do this to my initial img tag so that this is universal?

On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> wrote:

> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote:
> > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
> > background color, and an image placed inside.
> >
> > Each of these "tiles" shows through the background color of about 3-4
> > pixels. I can not see what's allowing this. I have my styles for the
> tiles
> > set at max-width:30%; height:auto;
> >
> > Can anyone see what the source of this unwanted space is?
> >
> > Thank you!
> >
>
>
> Images are inline elements. If you add a display:block; rule to your
> images, you can remove this gap.
>
>
> --
>
> 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-d] What causes the space at bottom of squares?

[John J]

I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a
background color, and an image placed inside.

Each of these "tiles" shows through the background color of about 3-4
pixels. I can not see what's allowing this. I have my styles for the tiles
set at max-width:30%; height:auto;

Can anyone see what the source of this unwanted space is?

Thank you!


Tiles can be seen at:

http://john-a-johnson.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-d] Bullets: Block + inline?

[John J]

I have a possible need for bullets at the mobile media break to be arranged
in columns of maybe 3 or 4 bullets each; at Desktop, each set of bullets
will be vertical (Block)

Is there a way to have the chunks of bullets be block within their "chunks"
but have the chunks be arranged horizontally? (inline?)

Is this more snarly than it's worth?

Thank you!
__
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] a:hover state in different browsers

[John J]

At the link below, I'm having trouble getting the hover state to look the
same across browsers. On hover, there  should be a red line under the
hovered-over item as wide as the thin gray line below it, as thick as that
line is.

The thickness seems to match, but the positioning is off, browser to
browser.

Safari and Firefox show the hover-state line a bit too low; Chrome Canary
shows it exactly where it needs to be.

Am I working against myself, trying to do something that's too tricky by
trying to get a hover element to line up with, basically the bottom of the
header which is 3 parents up from the nav?

Thank you for any clues!

John


http://john-a-johnson.com/contact.php
__
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] default border property?

[John J]

Can anyone shed light on the concept of the setting of default border
properties? I may be suffering the effects of this on some elements which
ought to be following  the same css, but which seem not to be; differing
border code might be the reason.

Thank you!

J
__
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] Forms: textarea vs input

[John J]

I hope this is CSS enough for this list..I have a form in which my CSS must
be different for textarea than for the name, email, phone #, etc fields, to
be the same width, and to have the same type attributes.

I have no clue why; seems very trial-and-errorish to get a uniform look,
ie, all fields same width. Perhaps this is a matter of html more than
CSS...I am sorry if this is the case.

Thank you,

John
__
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] is use of rem bad?

[John J]

​Holy Cow!  I went to the validator link below, threw in the same URL,
expanded the triangle (already was at CSS3) and got no ( 0 ) errors!

what makes this really amazing is that my chair time for coding has fallen
WAY off...get maybe couple hours/week...been a year or two since I did it
every day, diligently..

I wish I could remember what I did which produced 154 rem-based errors, but
they appear to be non-existent.

Thank you​



> The default configuration of the CSS validator should handle the `rem`
> unit without any problems (other wise, make sure “CSS Level 3” is selected
> under the “more options” disclosure triangle thingie).
> http://jigsaw.w3.org/css-validator/
> On Wed, Jul 20, 2016 at 7:01 PM, Philippe Wittenbergh <e...@l-c-n.com>
> wrote:
> > On Jul 21, 2016, at 2:05 AM, John J <cr8...@gmail.com> wrote:
> >
> > Working on my code, I decided to see what they CSS validator had to say
> > about it, and it threw out 154 errors, most of which were about rem as my
> > value of measure for things like padding, type, borders, margin.
> >
> > I am using rem on advice of a developer who said that a certain pinhead,
> > un-named browser needs it; other browsers can use/deal with it too.
> >
> > Yet the validator threw a hissy..Should I abandon all efforts to support
> > arcane versions of this browser, and stick only with em?
> The default configuration of the CSS validator should handle the `rem`
> unit without any problems (other wise, make sure “CSS Level 3” is selected
> under the “more options” disclosure triangle thingie).
> http://jigsaw.w3.org/css-validator/
> I use rem units all the time for everything and more without trouble. All
> modern browsers handle this unit correctly. If you need support for IE 8 –
> which doesn’t support the `rem` unit, then what Tom says…
> (and note to Karl: no, just blindly replacing `rem` with `em` is _not_ the
> way to go. The computed value of something specified with the rem unit is
> based on the computed value of the font-size as set on the root element.
> For the `em unit` it is based on the font-size of the element itself.)
>
> 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-d] is use of rem bad?

[John J]

Working on my code, I decided to see what they CSS validator had to say
about it, and it threw out 154 errors, most of which were about rem as my
value of measure for things like padding, type, borders, margin.

I am using rem on advice of a developer who said that a certain pinhead,
un-named browser needs it; other browsers can use/deal with it too.

Yet the validator threw a hissy..Should I abandon all efforts to support
arcane versions of this browser, and stick only with em?

Thank you!

John
__
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

[John Andrews]

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/
> >>>
> >>> __

[css-d] media queries following prior rules

[John J]

At the link below, the name, email, subject fields don't appear to be
obeying rules governing width as in the previous media breaks..

at 360 and 320, those fields exceed the width of  their parent, rather than
respecting padding set prior..maybe I'm missing something..if I have my
rules set up correctly, the css should behave a certain way until told
differently in the next media query, right?

Thank you for any insight about this!

John

http://john-a-johnson.com/contact.php
__
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

[John Andrews]

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] contact form tutorial

[John J]

HTML, CSS, and a wee bit of php and javascript.

I canJ understand the parts..I've built one before as part of a class, but
it was awhile ago.

Thank you!



On Tue, Apr 12, 2016 at 7:12 AM, Greg Gamble <ggam...@sbctc.edu> wrote:

> What language are you using or have available?
>
>
> Greg
>
> -Original Message-
> From: org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John J
> Sent: Monday, April 11, 2016 4:29 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] contact form tutorial
>
> I have my actual form built in html/css. Can anyone point me to a good
> tutorial for beginners for the functional stuff? The validating/sending of
> the mail?
>
> Sorry, I realize this is OT..
>
> Thank you!
>
> John
> __
> 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] contact form tutorial

[John J]

Thank you, Karl!
On Apr 11, 2016 5:37 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote:

> Google..
>
> sendmail php
>
> GL,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Apr 11, 2016, at 6:28 PM, John J <cr8...@gmail.com> wrote:
>
> > I have my actual form built in html/css. Can anyone point me to a good
> > tutorial for beginners for the functional stuff? The validating/sending
> of
> > the mail?
> >
> > Sorry, I realize this is OT..
> >
> > Thank you!
> >
> > John
> > __
> > 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-d] contact form tutorial

[John J]

I have my actual form built in html/css. Can anyone point me to a good
tutorial for beginners for the functional stuff? The validating/sending of
the mail?

Sorry, I realize this is OT..

Thank you!

John
__
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] coding "violators"

[John J]

I will try your code, Karl..thank you!

John

On Mon, Mar 28, 2016 at 4:20 PM, Karl DeSaulniers <k...@designdrumm.com>
wrote:

> Hey John,
> Here is a code I use for oval picture frames.
> Might work for your situation.
>
> .oval_picture_frame {
> background-color: rgb(255,255,255);
> margin: 0 auto 5%;
> padding: 0;
> text-align: center;
> float: inherit;
> -webkit-border-radius: 49%;
> -moz-border-radius: 49%;
> -khtml-border-radius: 49%;
> -o-border-radius: 49%;
> border-radius: 49%;
> vertical-align: middle;
> overflow: hidden;
> display: inline-block;
> zoom: 1;
> }
>
> Works on most browsers I have tested on.
> Old IE choked on the apex but you can make a IE fall back if you really
> want.
> Let me know if you run across a browser that chews it up and spits it out.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Mar 28, 2016, at 5:55 PM, John J <cr8...@gmail.com> wrote:
>
> > Yes, that's right..I can see having various classes, and that these would
> > change in media queries as needed. I think background-image would work
> for
> > rectangular treatments of images...will have to play with this..thank you
> > for the idea!
> >
> > J
> >
> > On Mon, Mar 28, 2016 at 3:28 PM, Chris Rockwell <ch...@chrisrockwell.com
> >
> > wrote:
> >
> >> What are the different scenarios in which this would be used?  Is the
> >> assumption that you need to move the text so that it fits right on
> >> different images correct?  Can you use background-image for this, and
> then
> >> position the text within the container?
> >>
> >> On Mon, Mar 28, 2016 at 5:00 PM John J <cr8...@gmail.com> wrote:
> >>
> >>> I'm using "violator" in the sense of one element that "violates" the
> space
> >>> of another..
> >>>
> >>> hoping to code an item that looks like the graphic in the link
> below..so
> >>> far, I have the image floating here or there, but not succeeding
> getting a
> >>> text hunk to be part of it.
> >>>
> >>> Thank you for any clues!
> >>>
> >>> John
> >>>
> >>> http://coffeeonmars.com/screenshots/violator.jpg
> >>> __
> >>> 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] coding "violators"

[John J]

Yes, that's right..I can see having various classes, and that these would
change in media queries as needed. I think background-image would work for
rectangular treatments of images...will have to play with this..thank you
for the idea!

J

On Mon, Mar 28, 2016 at 3:28 PM, Chris Rockwell <ch...@chrisrockwell.com>
wrote:

> What are the different scenarios in which this would be used?  Is the
> assumption that you need to move the text so that it fits right on
> different images correct?  Can you use background-image for this, and then
> position the text within the container?
>
> On Mon, Mar 28, 2016 at 5:00 PM John J <cr8...@gmail.com> wrote:
>
>> I'm using "violator" in the sense of one element that "violates" the space
>> of another..
>>
>> hoping to code an item that looks like the graphic in the link below..so
>> far, I have the image floating here or there, but not succeeding getting a
>> text hunk to be part of it.
>>
>> Thank you for any clues!
>>
>> John
>>
>> http://coffeeonmars.com/screenshots/violator.jpg
>> __
>> 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] coding "violators"

[John J]

I'm using "violator" in the sense of one element that "violates" the space
of another..

hoping to code an item that looks like the graphic in the link below..so
far, I have the image floating here or there, but not succeeding getting a
text hunk to be part of it.

Thank you for any clues!

John

http://coffeeonmars.com/screenshots/violator.jpg
__
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

[John Andrews]

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] why image won't scale?

[John J]

well that remedied the scaling problem, and adjusting max-width on the img
enabled the image to be to the right of the text, but what's the correct
way to get the image to occupy the same position as float:right; did,
without messing up the flexible image property?

Thank you!

John

On Mon, Mar 7, 2016 at 1:33 PM, Karl DeSaulniers <k...@designdrumm.com>
wrote:

> check your float.
> float will make images be wrapped by text.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
> On Mar 7, 2016, at 3:12 PM, John J <cr8...@gmail.com> wrote:
>
> > to my eye, I am applying the same reasoning to the image as to the text
> > hunk to the left of it, yet the text behaves correctly; the image wants
> to
> > break to the next line, and when viewport 400px wide or so, THEN the
> image
> > scales..I simply don't get it..
> >
> > On Mon, Mar 7, 2016 at 12:20 PM, Chris Williams <ch...@clwill.com>
> wrote:
> >
> >> The issue is not with the style of the img, it's with the styling on the
> >> div that includes it.  It needs a width spec too.
> >>
> >> On 3/7/16, 11:52 AM, "css-d-boun...@lists.css-discuss.org on behalf of
> >> John J" <css-d-boun...@lists.css-discuss.org on behalf of
> >> cr8...@gmail.com> wrote:
> >>
> >>> that's what I'm noticing, too...I can't tell if it's my media queries
> >>> moving to next break before my img has a chance to scale. I notice the
> >>> text
> >>> chunk does scale; I don't see why the image doesn't scale to the
> extent it
> >>> can ‹ before the media query kicks in for the next size..
> >>>
> >>> On Mon, Mar 7, 2016 at 11:35 AM, Rod Castello <rodcastel...@gmail.com>
> >>> wrote:
> >>>
> >>>> It scales for me when the viewport falls below 400px in width. It
> falls
> >>>> below the left copy block and starts to scale.
> >>>>
> >>>>
> >>>> On Mon, Mar 7, 2016 at 10:34 AM, John J <cr8...@gmail.com> wrote:
> >>>>
> >>>>> Sorry...that first email I sent accidentally..I meant to include a
> >>>>> link..it
> >>>>> is:
> >>>>>
> >>>>> john-a-johnson.com
> >>>>>
> >>>>>
> >>>>> I have it now on the container, but I've experimented with it on the
> >>>>> img
> >>>>> and doesn't seem to work..I know it's a dumb mistake on my part..I'm
> >>>>> just
> >>>>> not seeing it..
> >>>>>
> >>>>> thank you
> >>>>>
> >>>>> On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com>
> >>>>> wrote:
> >>>>>
> >>>>>> A link is best. However, is the css applied to the image itself, or
> a
> >>>>>> container?
> >>>>>>
> >>>>>> On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
> >>>>>>
> >>>>>>> I have an image which I want to scale when the viewport changes in
> >>>>> size.
> >>>>>>>
> >>>>>>> The css I have applied to image is:
> >>>>>>>
> >>>>>>> .image-right{
> >>>>>>> float:right;
> >>>>>>>max-width: 100%;
> >>>>>>>height: auto;
> >>>>>>> }
> >>>>>>>
> >>>>>
> __
> >>>>>>> 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/
> >>>>>>>
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>>> --
> >>>>>>
> >>>>>> Tom Livingston | Senior Front End Developer | Media Logic |
> >>>>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>>>>>
> >>>>>>
> >>>>>> #663399
> >>>>>>
&

Re: [css-d] why image won't scale?

[John J]

to my eye, I am applying the same reasoning to the image as to the text
hunk to the left of it, yet the text behaves correctly; the image wants to
break to the next line, and when viewport 400px wide or so, THEN the image
scales..I simply don't get it..

On Mon, Mar 7, 2016 at 12:20 PM, Chris Williams <ch...@clwill.com> wrote:

> The issue is not with the style of the img, it's with the styling on the
> div that includes it.  It needs a width spec too.
>
> On 3/7/16, 11:52 AM, "css-d-boun...@lists.css-discuss.org on behalf of
> John J" <css-d-boun...@lists.css-discuss.org on behalf of
> cr8...@gmail.com> wrote:
>
> >that's what I'm noticing, too...I can't tell if it's my media queries
> >moving to next break before my img has a chance to scale. I notice the
> >text
> >chunk does scale; I don't see why the image doesn't scale to the extent it
> >can ‹ before the media query kicks in for the next size..
> >
> >On Mon, Mar 7, 2016 at 11:35 AM, Rod Castello <rodcastel...@gmail.com>
> >wrote:
> >
> >> It scales for me when the viewport falls below 400px in width. It falls
> >> below the left copy block and starts to scale.
> >>
> >>
> >> On Mon, Mar 7, 2016 at 10:34 AM, John J <cr8...@gmail.com> wrote:
> >>
> >>> Sorry...that first email I sent accidentally..I meant to include a
> >>> link..it
> >>> is:
> >>>
> >>> john-a-johnson.com
> >>>
> >>>
> >>> I have it now on the container, but I've experimented with it on the
> >>>img
> >>> and doesn't seem to work..I know it's a dumb mistake on my part..I'm
> >>>just
> >>> not seeing it..
> >>>
> >>> thank you
> >>>
> >>> On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com>
> >>>wrote:
> >>>
> >>> > A link is best. However, is the css applied to the image itself, or a
> >>> > container?
> >>> >
> >>> > On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
> >>> >
> >>> >> I have an image which I want to scale when the viewport changes in
> >>> size.
> >>> >>
> >>> >> The css I have applied to image is:
> >>> >>
> >>> >> .image-right{
> >>> >> float:right;
> >>> >> max-width: 100%;
> >>> >> height: auto;
> >>> >> }
> >>> >>
> >>>__
> >>> >> 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/
> >>> >>
> >>> >
> >>> >
> >>> >
> >>> > --
> >>> >
> >>> > 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] why image won't scale?

[John J]

that's what I'm noticing, too...I can't tell if it's my media queries
moving to next break before my img has a chance to scale. I notice the text
chunk does scale; I don't see why the image doesn't scale to the extent it
can — before the media query kicks in for the next size..

On Mon, Mar 7, 2016 at 11:35 AM, Rod Castello <rodcastel...@gmail.com>
wrote:

> It scales for me when the viewport falls below 400px in width. It falls
> below the left copy block and starts to scale.
>
>
> On Mon, Mar 7, 2016 at 10:34 AM, John J <cr8...@gmail.com> wrote:
>
>> Sorry...that first email I sent accidentally..I meant to include a
>> link..it
>> is:
>>
>> john-a-johnson.com
>>
>>
>> I have it now on the container, but I've experimented with it on the img
>> and doesn't seem to work..I know it's a dumb mistake on my part..I'm just
>> not seeing it..
>>
>> thank you
>>
>> On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com> wrote:
>>
>> > A link is best. However, is the css applied to the image itself, or a
>> > container?
>> >
>> > On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
>> >
>> >> I have an image which I want to scale when the viewport changes in
>> size.
>> >>
>> >> The css I have applied to image is:
>> >>
>> >> .image-right{
>> >> float:right;
>> >> max-width: 100%;
>> >> height: auto;
>> >> }
>> >> __
>> >> 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/
>> >>
>> >
>> >
>> >
>> > --
>> >
>> > 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/

Re: [css-d] why image won't scale?

[John J]

Sorry...that first email I sent accidentally..I meant to include a link..it
is:

john-a-johnson.com


I have it now on the container, but I've experimented with it on the img
and doesn't seem to work..I know it's a dumb mistake on my part..I'm just
not seeing it..

thank you

On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com> wrote:

> A link is best. However, is the css applied to the image itself, or a
> container?
>
> On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
>
>> I have an image which I want to scale when the viewport changes in size.
>>
>> The css I have applied to image is:
>>
>> .image-right{
>> float:right;
>> max-width: 100%;
>> height: auto;
>> }
>> __
>> 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/
>>
>
>
>
> --
>
> 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-d] Image won't scale

[John J]

I have the css below applied to an image at:  john-a-johnson.com yet the
image won't scale when view port resizes..can anyone point out what I'm
doing wrong?

Thank you!

John


.image-right{
float:right;
max-width: 100%;
height: auto;
}
__
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] why image won't scale?

[John J]

I have an image which I want to scale when the viewport changes in size.

The css I have applied to image is:

.image-right{
float:right;
max-width: 100%;
height: auto;
}
__
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

[John Andrews]

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/

[css-d] Hiding desktop header menu on phones?

[John J]

I have my "waffle" menu div hiding until viewport reaches max-width:
42.5rem, using display:none; in the desktop CSS, then using display:inline;
at 42.5rem

Is it adequate correct to apply same thing in reverse to just the header
nav ul? Or must I apply it also to all the children?

Something tells me that if the parent is hidden, the children are also
hidden (cascade) but I would like to make sure.

thank you,

John
__
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] Why doesn't header menu move as viewport resizes?

[John J]

At the link below, I have a simple header nav inside my header and my
intention is to have the page be flexible as well as responsive..haven't
done the media breaks yet.

Why doesn't the header menu move to the left right away as the viewport
gets narrower? Eventually it moves, but "portfolio" is cut off..I don't
ssee what's at work here..thank you for any clues!

John

http://www.coffeeonmars.com/newJJ/
__
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] Best technique for: Any number of columns, plus fixed margin, in a responsive parent container

[John D]

If you are running it in Bootstrap (you said cutting edge technology) then 
it is pretty simple.  I would do something like this:



   
   1
   
   
   
   2
   
   
   
   3
   
   
   
   4
   
   
   


And to test this out, create a blank HTML5 page and use this code at the 
head of it:











Bootstrap 101 Template
Untitled 1
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css; 
rel="stylesheet" type="text/css">



If you add more columns then all you need is to change the numbers 3 to 
something else as long as the total comes to 12,  Bootstrap works in grid of 
12 and I have used 4 columns so each grid is 3. but you get the idea.




/* Quoted Message Follows: */
-Original Message- 
From: Micky Hulse

Sent: Thursday, January 21, 2016 12:06 AM
To: CSS-Discuss
Subject: [css-d] Best technique for: Any number of columns, plus fixed 
margin, in a responsive parent container


Hi!

Just curious what techniques you use when you want to have a container
with any number of child columns that have fixed-width margins, only
on the inside of columns.

For example, I would like to create a 4 column module (pseudo-markup 
follows):









… and later have the ability to throw-in a 5th or 6th column, without
having to adjust CSS.










Additionally, I would like to have margins (not padding or
faux-margins), of any unit (i.e., px, em, % ...), controlling the
column gutters (only on inside, not outermost column edges).

Optimally, this technique would be responsive-friendly, js-free and
clean/simple to implement.

Out of all the techniques out there (I'm assuming) to do such a thing,
which is your favorite? Can you provide example code?

I'm open to seeing cutting-edge techniques as well as oldschool ones. :)


__
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] What tools help to make a good looking site like ianmurdock.com (with very proper and up to date css)

[John Griessen]

ianmurdock.com

He's gone, so can't ask him anymore.

It's a fast responding, non-database driven blog entry type of thing,
with helpful seeming parts like:






Is that a result of some tools, or just careful hand work?
Multiple pages have the same looking format and some common parts like:


Menu
Skip to content
			http://ianmurdock.com;>Home
href="http://ianmurdock.com/about;>About
href="http://ianmurdock.com/blog;>Blog



Does that seem like a particular FOSS tool, or someone's particular scripts 
generated it?

John Griesse
__
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] What tools help to make a good looking site like ianmurdock.com (with very proper and up to date css)

[John D]

Just in case you guys are not aware of it but Ian Murdock passed away on 
28th December 2015 aged 42.  He was the founder of Debian.


My apologies for the noise but we all use Linux of some kind in our web 
servers.

.

-Original Message- 
From: Chris Williams

Sent: Friday, January 08, 2016 1:22 AM
To: CSS-Discuss
Subject: Re: [css-d] What tools help to make a good looking site like 
ianmurdock.com (with very proper and up to date css)


This is just a simple Wordpress blog.  Looks like it's just using the 
default theme as well.





On 1/7/16, 4:51 PM, "css-d-boun...@lists.css-discuss.org on behalf of John 
Griessen" <css-d-boun...@lists.css-discuss.org on behalf of 
j...@ecosensory.com> wrote:



ianmurdock.com

He's gone, so can't ask him anymore.

It's a fast responding, non-database driven blog entry type of thing,
with helpful seeming parts like:






Is that a result of some tools, or just careful hand work?
Multiple pages have the same looking format and some common parts like:


Menu
Skip to 
content
class="nav-menu">http://ianmurdock.com;>Home

href="http://ianmurdock.com/about;>About

href="http://ianmurdock.com/blog;>Blog


Does that seem like a particular FOSS tool, or someone's particular scripts 
generated it?


John Griesse
__
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] [ADMIN] Hello, my friends, hello

[John Griessen]

On 01/04/2016 03:33 PM, chuckmil...@new.rr.com wrote:

Do those resources have to be found? Should that be discussed?


There are two volunteers, me and D'Arcy J.M. Cain.  He can offer higher 
reliability.
Neither is interested in spamming.  So, there's not much to discuss about that.

CSS questions coming up from me in a few weeks...
__
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] [ADMIN] Hello, my friends, hello

[John Griessen]

On 01/04/2016 10:30 AM, D'Arcy J.M. Cain wrote:

How does everyone like that option?


OK if no ads inserted, no selling of my email address.
That's how I will handle it if hosted as  cs...@lists.cibolo.us

John Griessen
__
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] [ADMIN] Hello, my friends, hello

[John D]

If the forum is nicely laid out with good readable fonts then I don't mind 
but the link posted is not my cup of tea.  Fonts are too small and very 
difficult to read.


Microsoft Forums or Adobe Forums are fine because the display is clean and 
readable.  i like to skim through the text and only read carefully if the 
topic is interesting.  At present I am spending a lot of time reading and 
researching into Bootstrap, its CSS and classes and how best to utilise 
them.





-Original Message- 
From: Cheryl D Wise

Sent: Monday, January 04, 2016 6:12 PM
To: 'John Griessen' ; css-d@lists.css-discuss.org
Subject: Re: [css-d] [ADMIN] Hello, my friends, hello

FWIW, I rarely post since I'm mostly retired now but I do read what's
posted. I wouldn't do so with a forum.

Cheryl D Wise
http://wiserways.com
http://by-expression.com
http://cheryldwise.com


-Original Message-
From: On Behalf Of John Griessen

Do you think it is best that list members switch to forums like this one?
https://csscreator.com/forums/start-here/how  with ads for mail order brides
in the margins?

What others are there that are good?


__
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] [ADMIN] Hello, my friends, hello

[John D]

-Original Message- 
From: Dean Mah

Sent: Monday, January 04, 2016 10:49 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] [ADMIN] Hello, my friends, hello

Hello,

evolt.org has been the host of the css-d list for some time now.
Unfortunately, evolt.org has fallen by the wayside and most of the sysadmin
team has moved away from being active members of the Web community so no
one was monitoring the list closely.

As the css-d community is deciding on the best path forward, please feel
free to e-mail me directly if you are having issues with the list.

<--- My Reply Follows >

Dean,

Do people have to pay to evolt.org to have a discussion list like this one?

Just asking because if Eric is busy to manage this list then somebody else 
can takeover the running of this.  I am sure there are so many volunteers 
ready to take that responsibility.



__
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] [ADMIN] Hello, my friends, hello

[John Griessen]

On 01/04/2016 07:30 AM, Erik Visser wrote:

none of us really noticed until this month.


I noticed.  I was busy with other things.  I'm going to have questions for the 
list members soon.  Please keep it on.

If you still think it is time to pull the plug, I'll serve up the list on my 
mailman server.
I might not do all the setup necessary to use lists.css-discuss.org as the 
domain.  It would be super easy to
restart the list as:  cs...@lists.cibolo.us though...

John Griessen
--
Ecosensory  1218 W 39th St.  Austin TX 78756
__
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] [ADMIN] Hello, my friends, hello

[John Griessen]

Op 23-12-15 om 21:35 schreef Eric A. Meyer:

I'm leaning toward option 1. January 24, 2016, will be the 14th anniversary of 
the list.  That leaves a month to either settle on
a different course of action, or else to plan a shutdown.


Do you think it is best that list members switch to forums like this one?
https://csscreator.com/forums/start-here/how  with ads for mail order brides in 
the margins?

What others are there that are good?

John Griessen
__
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] [ADMIN] Hello, my friends, hello

[John D]

> On the other hand, CSS and HTML are like salt and pepper, bert and ernie, 
> bread and butter. They seem to be the keys to each other’s locks, or perhaps 
> together they form a whole technology, and within that perspective, I can see 
> a list embracing both technologies as a focus.
> 

Despite what people might think, Bootstrap is pure CSS and the code works out 
of the box for today's hunger for responsive websites.

JS is optional extra as is glyphicons fonts and we don't need to discuss here 
if it is considered outside the scope of this forum. 


  
__
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] [ADMIN] Hello, my friends, hello

[John D]

The way I see it is that we should expand this list to make it more appealing 
to Web designers and creators.  To do this we could allow discussion on matters 
such as:

HTML
CSS
Javascript
jquery
Bootstrap styles
glyphicons
And anything else relevant to Web designs and web sites.


There is another newsgroup for webDesigns but It is too retrictive and 
moderator doesn't allow my questions or answers so I gave up.  Also, there 
aren't anything suitable forums or newsgroups for Bootstraps so perhaps we coud 
be the first to get started before somebody else gets into it.


  
__
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] [ADMIN] Hello, my friends, hello

[John D]

-Original Message- 
From: Angela French

Sent: Wednesday, December 23, 2015 10:23 PM
To: Eric A. Meyer ; CSS-D Discuss
Subject: Re: [css-d] [ADMIN] Hello, my friends, hello

I missed it.  I posted a few times over the last few months but didn't know 
what the issue was.  I have always appreciated the vast experience of the 
people on this list.  More than once someone helped me out of a pickle.  In 
addition, I would often read threads that didn't necessarily have any 
connection to a current issue I was fretting over, but the subject line 
caught my attention as something worth reading.  This list has definitely 
contributed to my cSS knowledge over the years.  I hope it keeps going.


Angela French
WA State Board for Community and Technical Colleges



Me too.  I posted a message to ask about it on 12th of December but the 
email bounced or it wasn't delivered.  I then thought I will try to contact 
Tom Livingstone to ask him if he knows anything but I didn't because I 
thought he is a very busy man and I can't trouble him for this.



__
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] [ADMIN] Hello, my friends, hello

[John D]

Hi, everyone,

   So apparently the list software died back in October, and none of us 
really noticed until this month.  Or, if people noticed, nobody mentioned 
it until this month.


I did noticed it but my messages weren't reaching to anybody.

I thought that somebody posted some spam messages using my email and so you 
decided to remove me from the list.  I tried to login but my password wasn't 
accepted.  So this made me think that this is it.  I have become a 
persona-non-grata and I have been unsubscribed.


I have recently stared learning "Bootstrap Essentials" and so this list is 
ideal for it especially when it comes to css aspects.






1. Shut down the list.  To all good things, etc.  This obviously 
abandons those who still prize having a mailing list, but that number 
seems very small.  Almost all the discussion in the months leading up to 
the hiatus was conducted between a small number of subscribers.  Of 
course, a new list could be started by someone else.


Continue with the list but enlist the help of volunteer from this list so 
that two of you can manage it efficiently.




2. Hand the list off to someone else, to guide as they see fit.


I guess enlisting the help of a volunteer or volunteers is the best way 
forward.


People here can vote for somebody to volunteer so that we have somebody 
elected by users.


Anyway me thinks so.


__
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] [ADMIN] Hello, my friends, hello

[John D]

-Original Message- 
From: Greg Gamble

Sent: Wednesday, December 23, 2015 10:22 PM
To: CSS-D Discuss
Subject: Re: [css-d] [ADMIN] Hello, my friends, hello

I've been hoping for a return of the list.  I've tried sending a few 
posts, but thought I was locked out for some reason ... glad to know it 
was only a software issue.



Maybe keep it going for a while, and see if it picks up??




Me too.  I thought I have been banned from the list through no fault of 
mine.


__
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] Rules for making content hidden and visually hidden

[John D]

I guess it all depends on in which contents you are trying to use but a 
simple code such as:


.mystyle {
   display: hidden;
}

Will hide the block which has a class called mystyle .  when you want to 
unhide it, you just need to comment it out like this:


.mystyle {
  /* display: hidden; */
}




-Original Message- 
From: Rick Lecoat

Sent: Monday, August 03, 2015 9:14 AM
To: CSS-D list
Subject: [css-d] Rules for making content hidden and visually hidden

For the last few years I've been using a bunch of content visibility rules, 
which I think I originally extracted from Andy Clarke's 320-and-up 
framework. I'm wondering if the methods that they use are still considered 
best practice for achieving the desired goals, and whether anyone has better 
rulesets that I could update them with (I've googled, but the results have 
not been conclusive). A particular reason for addressing this now is that 
two of the classes use !important declarations. I'm increasingly moving to a 
modular, SASS-based CSS structure and I'm not comfortable having !important 
so early on in the specificity cascade.


Here are the rules I'm using (I'm showing them as classes for simplicity, 
but in fact they are SASS mixins and get applied in a variety of ways):


/* hide from visual and speaking browsers */
.hidden {
   display : none !important;
   visibility : hidden;
   }

/* hidden but available to speaking browsers */
.visuallyhidden {
   overflow : hidden;
   position : absolute;
   clip : rect(0 0 0 0);
   height : 1px;
   width : 1px !important;
   margin : -1px;
   padding : 0;
   border : 0;
   }

As you can see each contains an !important declaration, which means that I 
need to include a similar declaration in my css whenever I want to 'turn 
off' either of the above rules. My two 'reversal' rules are currently as 
follows:


.unhidden {
   display : block !important;
   visibility : visible;
   }

.visuallyhiddenoff {
   overflow : visible;
   position : static;
   clip : none;
   height : auto;
   width : auto !important;
   margin : 0;
   padding : 0;
   border : 0;
   }

Negating the .visuallyhidden rule, in particular, feels cumbersome -- too 
many rules to 'undo' and I worry that it has too many opportunities to end 
up with an unintended result. With this in mind, I'd like to know if anyone 
has:


a) an improvement on the .hidden rule, ideally getting rid of the !important 
declaration but remaining robust;

b) a less verbose/complex rule for making something visuallyhidden;
or
c) confirmation that these are the best rules and that I should leave them 
alone.



__
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] Rules for making content hidden and visually hidden

[John D]

-Original Message- 
From: Tom Livingston

Sent: Tuesday, August 04, 2015 2:07 AM
To: John D
Cc: Rick Lecoat ; CSS-D list
Subject: Re: [css-d] Rules for making content hidden and visually hidden

I believe you mean display:none;


Oh yes.  Old age creeping up and late night here in London.  Summer holidays 
so no rush to go to bed



__
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] Sprite repeat-x?

[John D]

Only the background image can be repeated x or y.  Look for:

background-repeat: repeat-x;
background-repeat: repeat-y;


Good luck.





-Original Message- 
From: J.C. Berry 
Sent: Tuesday, July 21, 2015 4:18 PM 
To: CSS-D 
Subject: [css-d] Sprite repeat-x? 


Hello all, this may be silly but I wanted to know, can a sprite image be
repeated x or y?


__
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] Sprite repeat-x?

[John D]

-Original Message- 
From: David Hucklesby

Sent: Tuesday, July 21, 2015 5:22 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Sprite repeat-x?

On 7/21/15 8:46 AM, John D wrote:

Only the background image can be repeated x or y.  Look for:

background-repeat: repeat-x;
background-repeat: repeat-y;


-Original Message- From: J.C. Berry Sent: Tuesday, July 21, 2015 
4:18 PM

To: CSS-D Subject: [css-d] Sprite repeat-x?
Hello all, this may be silly but I wanted to know, can a sprite image be
repeated x or y?




I think the poster means can an individual (background-image) sprite be
repeated? I think not.




Probably you are correct in this in which case this is above my pay-grade to 
provide a solution.


Sorry for the misunderstanding.


__
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] Sidebar height with list filter

[John D]

It could be that you want equal height columns so that whichever column 
expands, other column expands simultaneously.  Please confirm if this is 
what you are asking about.







-Original Message- 
From: J.C. Berry

Sent: Wednesday, July 01, 2015 2:35 AM
To: Tom Livingston
Cc: CSS-D ; Philippe Wittenbergh
Subject: Re: [css-d] Sidebar height with list filter

thanks guys, but I think I have to clarify my issue. The sidebar content is
always the same; it has the checkbox filters. But the right area divs wrap
down to the left below the sidebar when a lot of them show. The footer
clears fine.


__
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 !

[John Andrews]

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/

[css-d] Controlling image tiles

[John Johnson]

At the link below, I’m showing arrangements of image “tiles” for desktop and 
for mobile..I have classes for the first two and the 3rd on desktop, so that 
they space out evenly, horizontally.

When it gets to mobile, I’d like them to float left/right in two columns. Short 
of assigning separate classes for each column, I can’t think of a way to 
control them the way I want to with media queries..

any ideas?

Thank you!

John


http://coffeeonmars.com/screenshots/tiles.png 
http://coffeeonmars.com/screenshots/tiles.png
__
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

[John Andrews]

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] easy horizontal distribution of divs

[John]

 On Mar 23, 2015, at 6:05 PM, Jon Reece jon.re...@gmail.com wrote:
 
 The CSS3 Flexible Box layout mode indeed provides a method which could be a
 solution to your problem - the justify-content ​property with a value of
 space-between.
 
 Stand-alone demo:
 http://codepen.io/jreece/pen/dPaGKb?editors=110 
 http://codepen.io/jreece/pen/dPaGKb?editors=110


That is pretty elegant…if I’m looking at things correctly, I need not mess up 
my entire WP theme, as long as there is a parent and child relationship, and 
said “parent” can simply be inside my content area…so the flex relationship 
would cascade downward from THAT parent…

this de-snarkifies one of the snarkier layout problems..thank you!

John
__
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] easy horizontal distribution of divs

[John]

 On Mar 23, 2015, at 5:03 PM, Karl DeSaulniers k...@designdrumm.com wrote:
 
 You mean something like this?
 
 http://designdrumm.com/inline-elements.html 
 http://designdrumm.com/inline-elements.html
 
 Salt to taste.

Yeah, kinda..except there’s horizontal space in between first and second and 
second and 3rd div, and that space is not nec. the same as the parent r/l 
padding of 20px.

I did it the more tedious way (for now) by giving the 3rd div a slightly 
different set of CSS, and therefore it’s child elements as well. It works, but 
it feels needlessly complicated.

I’m to understand that flexbox might afford an elegant solution but this is for 
a WordPress theme and I’m worried if I start tinkering with the parents on 
every page that things will go, sproinggg!  ..as opposed to make local divs for 
this purpose…

Thank you,

John
__
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] easy horizontal distribution of divs

[John]

in the image below, the blue-green divs are all same size and need to both 
horizontally distribute and respect the padding on right and left sides.

Is there a straightforward css to handle this? I can do it if I give the first 
2 some margin-right, and give the 3rd one its own div name but this gets 
needlessly complex fairly quickly.

Thanks for any insights!

John

coffeeonmars.com/screenshots/horiz-dist.png 
http://coffeeonmars.com/screenshots/horiz-dist.png
__
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

[John Andrews]

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] horizontally aligning icons

[John]

 On Mar 16, 2015, at 5:41 PM, Ryan Reese sportsdude.re...@gmail.com wrote:
 
 Text-align:center is a fine way to center list items.  Noone will scorn you 
 or your centering method. I assume that the list items are inline-block? 
 inline?
 
 http://codepen.io/ryanreese09/pen/ZYmaxa 
 http://codepen.io/ryanreese09/pen/ZYmaxa
 
 That's the optimal way to center in this scenario. Obviously there are more 
 than one ways to center items but it just depends on your situation. You can 
 breathe easy. Text-align:center; is the easiest way to center 
 inline/inline-block elements.

OK..thanks..heh..that answers and soothes my concern..thank you for that 
codepen, too.

J
__
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] horizontally aligning icons

[John]

is it ok to use 

text-align:center;

on a ul where the list items are NOT text, but icons instead?

Yeah, it works, but does this disrespect semantics, and therefore, invite 
problems or scorn?

Thank you!

John
__
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] horizontally aligning icons

[John]

 On Mar 16, 2015, at 5:36 PM, Ryan Reese sportsdude.re...@gmail.com wrote:
 
 Semantics is purely in the HTML. Get the right HTML element for the job and 
 you are all set.
 
 CSS does the presentation. It has no effect on the semantics of your webpage. 
 Get the correct HTML for semantics. CSS for style and presentation.

Thank you, Ryan..I do get what HTML does and what CSS is for, but my question 
is: tho using  a class specifying text-align:center; may work functionally, is 
it a correct method to center non-text list items?

John
__
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

[John Andrews]

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/

[css-d] coding critique?

[John]

Is it within the bounds of this list’s mission to request coding critiques, or 
is that too broad; is the list meant to help with specific problems/questions?

and if not, are there places where one can get a critique of one’s coding?

Thank you!

John
__
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] correct way to code in a toggle menu?

[John]

Is what I have below an acceptable way to code desktop nav and mobile toggle 
nav? at DT sizes, media queries would hide #toggle-menu; at mobile sizes, they 
hide #nav-main

I think I’d want to put that toggle-menu code inside the nav tag, but I can’t 
see how to make the toggle menu icon display when I’m hiding the nav-main..

Am I looking at this wrong?

Thank you!

John


nav id=nav-main
ul
lia href=#Item/a/li
lia href=#Item/a/li
lia href=#Item/a/li
lia href=#Item/a/li
lia href=#Item/a/li
/ul
/nav

div id=toggle-menu
img src=image/waffle.png /
/div
__
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] Helvetica Light

[John D]

I have a client who wishes to have body copy as Helvetica Light. I'm on 
a pc and have Helvetica LT Std. The following font-weights produce the 
following results:


Anything between 100-500/Lighter appears as normal. 600 and 700 appears 
as bold and 900 appears as Black.


How does one target Light? Thank you for your time and guidance.

|body{
   font-family:  Helvetica, Arial,sans-serif;  
   font-weight:  200;

}


How about using font-weight: lighter;

body{
   font-family:  Helvetica,Arial,sans-serif;
   font-weight: lighter;
}

You also need to remove the opening quotation marks before Helvetica.


__
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] Element style not allowed as child of element div in this context.

[John]

Hello;

I got this error while running my contact page through the validator. The 
contact form works fine, but I don’t know what this error means. Validator 
cites line 230, yet the style.css is called on line 13!

My rookie experience tells me there could be some nearby un-closed tag or 
similar problem which causes errors below as is so often the case.

Can anyone tell me if Element style not allowed as child of element div in this 
context points me to something? There are no divs in the document head, if I’m 
reading this correctly.

Thank you!

John

Here’s a pastebin of the page in question:

http://pastebin.com/B9zSx0ew http://pastebin.com/B9zSx0ew
__
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 Design Question

[John]

 On Jan 10, 2015, at 10:05 AM, Chick Newman ch...@newmanveterinary.com wrote:
 
 What I'd like to know is whether this query will apply to all devices whose 
 maximum  viewports are smaller than 600 px, e,g, if it  is only 380 px. If 
 not, does that mean I have to set up a max-width property specific for every 
 hand-held device on the planet? Is there a way to specifiy all devices whose 
 viewports are smaller than 600px?

It looks like your query will handle 600px and smaller, yes. But to my 
experience, the more important question than “one size fits all” is what 
actually happens when you get to 320px? Do things make sense visually, or is an 
additional set of rules necessary to ensure a good User experience at 320, or 
at any other size that’s likely to be encountered?

There are charts out there which offer granular detail on what looks like every 
web-capable gizmo on earth, and there are other spots, like Chris Coyer’s CSS 
tricks which offer some *recommended* media queries, which likely handle all 
the viewport sizes, but I think like any good soup, you need to taste it 
yourself, and add salt if needed.

J
__
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

[John Andrews]

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/

[css-d] vendor prefix for box-sizing: border-box; ?

[John]

I’m seeing contradictory information on this..some allude to vendor prefixes 
for this, others say no longer needed.

What are the best-practice thoughts on this?

Thank you!

John
__
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] LESS CSS

[John]

A bit off-topic; any good current resources for LESS issues anyone can share?

Thank you!

John
__
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] Position discrepancy, browser to browser

[John]

The search field at the top right at http://www.coffeeonmars.com/contact/  
should right-align, or butt up against the  padding-right of the parent, which 
is 1.25rem. This roughly corresponds to the right edge of the “in” icon in the 
header nav.

In Mac FireFox, and on one of my Macs, the search box right-aligns correctly. 
On another Mac, FF shows it pushed in a bit to the left, and in Chrome and 
Opera it appears to be pushed in a bit leftward. Using Firebug in FF, I don’t 
see a reason for this to be happening, so, my guess is a difference in how 
browsers are interpreting my CSS.

Would someone be able to help me see what’s at work in this problem?

thank you,

John
__
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] Position discrepancy, browser to browser

[John]

On Nov 10, 2014, at 12:42 PM, Tom Livingston tom...@gmail.com wrote:

 Does the FF that displays correctly have a different font-size
 setting - either default or scaled up? That's the only thing I can see
 that might be different. Since nothing seems to be telling the input
 to be 100% wide, or float right, etc. of the aside, it seems to be
 doing what I would expect - and that would be to NOT line up with the
 right edge of the 'in' icon.

OK, that was very helpful in getting me on the trail to what I think is a fix. 
that input has an id of “s” which isn’t as descriptive as I’d like but, there 
it is. 

Previously, I had a problem with it jutting too far to the right, so I gave it 
a max-width of 8rem, and that seemed to fix that, but I then noticed it was 
inconsistent among browsers. I am fairly sure I tried this before, but  width 
100% float right works now, correctly, in all 4 browsers I had.

3rd time’s the charm, perhaps, but thank you for touching on the area that 
needed attention, Tom!

John
__
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] Position discrepancy, browser to browser

[John]

On Nov 10, 2014, at 1:07 PM, John j...@coffeeonmars.com wrote:

 I am fairly sure I tried this before, but  width 100% float right works now, 
 correctly, in all 4 browsers I had.
 
 3rd time’s the charm, perhaps, but thank you for touching on the area that 
 needed attention, Tom!


Actually, I know what happened, and this burns me more often than I’d 
like….there’s another instance or two of #s in my media queries, and most 
likely, I adjusted, say, the tablet instance while hoping to see a change in 
desktop…

hope this helps someone..

John
__
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] Position discrepancy, browser to browser

[John]

On Nov 10, 2014, at 1:59 PM, Tom Livingston tom...@gmail.com wrote:

 Well, unless you override #s in your desktop MQ, you would see a
 change on desktop if you changed tablet MQ... provided you're building
 mobile-first...


Ha..no, I’m going the other way…  Next outing, will be mobile first.

Thank you!

J
__
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] Position discrepancy, browser to browser

[John]

On Nov 10, 2014, at 2:01 PM, Tom Livingston tom...@gmail.com wrote:

 Well, I guess that's not always true, depending on your MQs, huh?!
 
 I tend to use only min-width MQs for the most part.

Yeah, most true and these variable strategies are a bit for me to keep track 
of, tho with experience, it will be old hat..

I am going desktop down and my mq’s are  x-width and less. I suppose as long as 
you can keep it straight and with a consistent method, bob’s yer uncle, but I 
have really burned myself wrenching on code in one area, thinking I was in 
another.

I could really use a code editor that would let me have a different background 
for each section..I don’t know if this is a thing people want or use, but I 
think it would help one keep things straight on the code side.

J
__
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] sticky footer position in IE - bottom of window instead ofpage

[John D]

-Original Message- 
From: Debbie Campbell

Sent: Saturday, November 08, 2014 12:59 AM
To: CSS-Discuss
Subject: [css-d] sticky footer position in IE - bottom of window instead 
ofpage


Having a problem with IE here...

http://www.boissonconsulting.com/resources/

I'm using this sticky footer method (after trying several others):

http://mystrd.at/modern-clean-css-sticky-footer/

It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is
initially at the bottom of the window instead of the page, and stays in
the same position when the page is scrolled. Please help and thank you
in advance for looking.



You need to add the three lines to your #footer css code as follows:

#footer {
   float: right;
   height: 35px;
   padding: 0;
   width: 973px;
/* Add these three lines to this code */
   position: absolute;
   left: 0;
   bottom: 0;
}

Good luck.


__
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] why is hover area so large (tall) ?z`

[John]

At the link below, the header nav has a huge “hover” area, meaning that the 
hover state shows even when you hover beneath the a tags. I’m just not seeing 
why this is happening..can anyone help me to see?

Thank you,

John


http://coffeeonmars.com/suncalc-proto/
__
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] why is hover area so large (tall) ?

[John]

On Nov 4, 2014, at 3:47 PM, Philippe Wittenbergh e...@l-c-n.com wrote:

 You have this in your stylesheet for your submenus:
 
 #main_nav ul li ul { ;
 /* snip */
 /* visibility:hidden; */
 display:hidden; /*  what is this ? */
 opacity:0;
 }
 
 The submenu is invisible due to the opacity being set to `0` but fully 
 present… This expands the hover area of the parent li. I guess you want to 
 say 'display: none', but I’m not in your head and won’t venture that far…

Philippe; your suggestion fixed the issue, and I thank you…I do not see the 
relationship between the nav ul li ul display and the “sensitive area” of ul 
li:hover ulisn’t the hover applied to the top-level items in the ul? 

Maybe the issue is that I am accustomed to seeing the hover area limited to the 
item having :hover applied to it (plus whatever padding) but this situation was 
the entire child ul behaving as though IT had :hover applied to it.

I hope I’m making some sense of my confusion here…channeling Yogi Berra..

John
__
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] why is hover area so large (tall) ?

[John]

On Nov 4, 2014, at 4:39 PM, Tom Livingston tom...@gmail.com wrote:

 I'm not able to look right now but based on Philippe's reply it sounds like 
 you had a ul inside an li.

I did/do, yes.

 The li has :hover styles applied. Since the ul was not visible but still 
 present (because there is no such thing as display:hidden;) the li was 
 actually as tall as its content - which included the invisible ul. 

Thank you..makes perfect sense, and those menus which had fewer items, had a 
shorter “hoverable area” than menus with more items..

I thank you both for helping me to see what was happening..

John
__
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] Wild Design or Restrict myself ?

[John D]

From: Crest Christopher Sent: Sunday, November 02, 2014 12:59 AM To: 
CSS-Discuss Subject: [css-d] Wild Design or Restrict myself ?


I have one concern when designing a responsive site, should I, as 
primarily a designer but unlike many designers not restricted to design 
and know how to code, be wild with my design, or is there restrictions I 
should set on myself when designing ?


Restrict yourself to using the W3C standards for both - the HTML and CSS. 
Apart from this restrictions, you can do almost anything you feel like as 
long as the site is navigate-able and the information is easily available.





__
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 HTML5/CSS3 Only Template Resource

[John D]

Best bet is to start with bootstrap:

http://getbootstrap.com/






-Original Message- 
From: Elli Vizcaino 
Sent: Thursday, October 30, 2014 5:17 PM 
To: CSS-D 
Subject: [css-d] Responsive HTML5/CSS3 Only Template Resource 


Hi CSS Discuss,

I'm wondering if anyone knows of a site where I can find free
responsive HTML5/CSS3 layout templates that are just code only, so I
can theme them with my own design? My Google search just keeps turning
up pre-designed responsive themes. Really hoping to find white label
layouts.



__
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] Float problems

[John]

 at this link http://www.coffeeonmars.com/category/illustration/, the image of 
the carburetors is being pushed downward; my goal is to have it top-aligned 
with the two little paragraphs.  both that text and that picture are contained 
in the same container div which has overflow:hidden;  So I’m not getting why 
the image doesn’t behave according to..what I’m imagining..

maybe my imagining is wrong?  :-)

Thank you!

John
__
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] Float problems

[John]

On Oct 20, 2014, at 5:50 PM, Tom Livingston tom...@gmail.com wrote:

 Actually, in Chrome dev tools, i see .sample-summary div wrapping only
 the two little paragraphs. And the p wrapping the imgs is 100%
 width;

Here is with that p with a red line around it..

the container div which I thought was containing text (left) and picture (meant 
to be to the right) does span 100%  but that image isn’t havin’ it..

John
__
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] Float problems

[John]

On Oct 20, 2014, at 5:55 PM, John j...@coffeeonmars.com wrote:

 Here is with that p with a red line around it..
 
 the container div which I thought was containing text (left) and picture 
 (meant to be to the right) does span 100%  but that image isn’t havin’ it..
 
 John


This is the link I failed to include:   
http://www.coffeeonmars.com/category/illustration/
__
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] Float problems

[John]

On Oct 20, 2014, at 6:03 PM, Tom Livingston tom...@gmail.com wrote:

 .sample-summary is 100% width, and is holding the images down. In
 Chrome dev tools, I was able to add a style to  .sample-summary as so:
 
 width: 30%; Float:left;
 
 and to the child ps, width: 100%;
 
 The images then came up to the top of the green div.


Sorry, I am really confused..I believe the results of your experiments, but 
here is my own css..sample-summary already has 30% width, and both are 
contained by sample-and-text…maybe my eyes aren’t seeing it right?

.sample-and-text{
border:1px solid green;
overflow:hidden;
}
#content-left .sample-summary p{
border:1px solid red;
/* float:left; */
margin:1em 0 2em 0;
width:30%;
}


and my markup:

div class=sample-and-text
div class=sample-summary
p
paragraph 1
/p

p
paragraph 2
/p
/div

picture
/div
__
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] Float problems

[John]

On Oct 20, 2014, at 6:15 PM, Tom Livingston tom...@gmail.com wrote:
 
 
 That style says that the ps INSIDE .sample-summary are 30% wide.
 
 and the markup I see in Chrome dev tools is:
 
 div class=sample-summary
 p/p
 p/p
 /div
 p [img] /p
 
 This is what is rendered...not the source. Maybe a miss-placed close
 tag somewhere?

No…I had tags closed, but I wasn’t correctly “seeing” my use of the descendent 
selector. I was so focused on making sure my p text behaved right, I completely 
ignored the containing div itself!  

You helped me to see it..and I just was not seeing it.  Good learning, this 
problem…


Thank you, Tom!
__
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

[John Andrews]

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/

Re: [css-d] (no subject)

[John E. Cavanaugh]

Help! I am not subscribed - these emails started coming at random - how do I 
unsubscribe?

John E. Cavanaugh MD.

There's always a wrong way to do the right thing ... Cavanaugh's Law

 On Oct 7, 2014, at 8:23, Barney Carroll barney.carr...@gmail.com wrote:
 
 IE and Mozilla have now committed to supporting -webkit- prefixed
 properties.
 
 The obvious problem is that the W3C is too slow and cumbersome for many
 people's desires and expectations of the web. IE6 came with a suite of
 incredibly powerful functionality that the rest of browser-land is only now
 catching up to (filter: anyone?). The problem then was that some of the
 earliest webapps were designed specifically for IE, back when there was no
 conceivable way of forking the code to achieve similar functionality in
 other browsers. VML was submitted 2 years before SVG started taking
 shape. IE6's lofty goals were almost reinstated in the HTML5 in the
 broadest sense that the W3 tried to make a PR splash about (embedded
 multimedia, file-system API, seamless vector graphics in HTML, CSS3
 transforms  filters). But once again, people have come to expect awesome
 stuff that the W3C is too slow to ratify to a universal consensus.
 
 So the responsibility (which, I agree, ultimately rests on website authors)
 comes down to managing expectations. It's tough to say no, especially when
 there's a lot of money in it and many people in the trade of web
 development are inclined to exploratory hacking anyway. It's becoming
 increasingly more difficult to tell people you can't, in good conscience,
 serve up code relying on unratified specifications, when implementation of
 such functionality is ubiquitous (and you know how to do it). A few years
 ago web development studios started finding the willpower to tell clients
 they wouldn't commit to like-for-like experiences in legacy Internet
 Explorer versions, and for a while standards-compliance seemed to be that
 bit more tenable – but recently I've come across numerous situations where
 people will say they only care about Chrome  iOS support.
 
 As regards the 'reasonableness' of these various expectations, I think W3C
 compliant validity is at its most applicable when it comes to web sites
 consisting of many documents: you want these documents to be consistent
 with each-other and marked up to universal standards for reasons of
 posterity  universal access. For my part, what I've been working on for
 the better part of the last year would be more accurately described as web
 apps: there's a single HTML document and it acts more as a wrapper for
 dynamic functionality. The term 'document' barely applies, and the
 use-cases are so esoteric and business-critical that the client will
 happily use a specific browser version in order to guarantee expected
 behaviour.
 
 Regards,
 Barney Carroll
 
 barney.carr...@gmail.com
 +44 7429 177278
 
 barneycarroll.com
 
 On 7 October 2014 13:53, Philip Taylor p.tay...@rhul.ac.uk wrote:
 
 
 
 Barney Carroll wrote:
 
 I'm wondering how differently my career might have worked out if all
 those times IE came up I'd just told the client to get onto Bill Gates
 about it.
 
 If /every/ W3C-compliant web site had carried that text, the world might
 now be a very different (and much better) place ...  I love Windows (7),
 completely fail to understand the masochistic appeal of *X, but nonetheless
 deeply wish that Mr Gates (and Mr Google, and all the rest of the Big Boys)
 cared more about complying to standards and less about seeking to define
 them.  This guy identifies many of the problems in a nuthell :
 
 http://www.sitepoint.com/w3c-css-webkit-prefix-crisis/
 
 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/

Re: [css-d] mystery vertical space

[John]

On Sep 26, 2014, at 3:38 PM, Jon Reece jon.re...@gmail.com wrote:

 ​Since images (img) are inline elements by default, the user agent adds
 space under them to account for descenders* so that if the image appears in
 line with text, it is vertically aligned along the baseline. To prevent
 this from happening, change the display to block:
 
 .textwidget  img { display: block; }

Jon; 

That did the trick..the 6 “mystery pixels” gone now!  Thank you for  that tip 
and the explanation I’m going to keep mentally handy for future situations like 
this..there are a few other images that could probably benefit from that as 
well.

Cheers!

John
__
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] iPad-specific issues?

[John]

At this link,  http://coffeeonmars.com/screenshots/ipadproblem.jpg is a screen 
capture taken on a Retina iPad. The red arrows point to thin gaps above and 
below my nav bar. The orange arrow points to the linked in icon poking a bit 
below the nav area which contains it.

I do not see either problem on my android phone or on my Macs. Any idea as to 
what is causing it? The nav and icon are set to be 32px high and that’s what 
they show in Firebug..

Thank you for any clues!

John
__
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] mystery vertical space

[John]

At this link:  http://www.coffeeonmars.com/ I have an image just under the 
header nav which spans my wrapper. to achieve this, I placed a call for the 
image after the nav, but before my #middle content area, as #middle has right 
and left padding.

The image is in there, but there’s a space beneath it which I have tried 
mightily to find and eliminate. I’m having zero luck. This image is placed 
there by a text widget in WordPress..I’ve tried calling it by its widget id, 
and next looking for a descendant selector way of grabbing it that doesn’t 
break other things.

I’d appreciate any insight as to this issue..thank you in advance!

John
__
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/