Re: [css-d] CSS Grid: Can I flow content around blocks?
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?
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/
Re: [css-d] An Example of Gradients for a Curtain
@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
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/
Re: [css-d] New to the list and a question..
Also, http://new.thetoyz.com/navcode.abc Wow! 636 Errors, 576 warning(s) http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fnew.thetoyz.com%2F Yeah, that's kind of a huge number, but don't be too discouraged. I haven't looked at your code, but often the validator will find something off, (like a malformed doctype or something), and then simply declare every single item on the page as an error. With an error rate that high I would look for something like that, and maybe fixing 636 errors and 576 warnings will finish your day well ;) 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] How to set equal widths on an unknown number of items?
I have an interesting CSS challenge. I am making a set of tabs that will go across the top of a web page, but they're going to be used in a CMS so I don't know how many tabs there will be. I would like to have all of the tabs be of equal width, and fill their container. If I knew how many tabs to expect I could set widths as percentages, but since I don't know how many tabs to expect I can't really do that. So is there a pure-CSS way, (as opposed to having the CMS calculate widths and set them inline), that we all know of to get this done? John __ css-discuss [cs...@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] 100% height challenges...
Hi, I get the list in digest format so I hope this goes to the right place. Rolf wrote: I've been building this layout concept for a project that does everything I want it to... almost. The basic markup is where I want it to be, but I'm having one issue. You can view it here: http://tinyurl.com/25r3pq The layout is done via css, and there's a little javascript to open and close the left panel. There are some IE hacks in the css that will get moved to conditional comments. I've played with the YUI reset.css and fonts.css in this layout, but the main layout css is embedded in the head. To get the layout to fill the screen vertically, I've used percentage heights. This is okay, but ideally I'd prefer to set the height of at least the div#top in something more fixed... ems would be fine. But I can't figure out how to do that while getting everything else to work as it is now (left and right scrolling independently, footer sitting politely at the bottom). Is it possible without knowing the exact window height ? I'm not entirely sure this will work, especially in IE6, but, if you set #app_container to: position: absoulute; top: 0; right: 0; left: 0; bottom: 0; you may be able to have a full-height effect without having to explicitly declare a height on every element. It's a stretch, but maybe it'll work. John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
