Can anyone help me? I am looking to create a DIV that is centered horizontally
and vertically in the window and inside this div I have images and text and the
like. I want the images and the text to stay inside this div. How can I go
about this?
Karl DeSaulniers
Design Drumm
http://designdrumm
1 okt 2013 11.25 Karl DeSaulniers:
> Can anyone help me? I am looking to create a DIV that is centered
> horizontally and vertically in the window and inside this div I have images
> and text and the like. I want the images and the text to stay inside this
> div. How can I go about this?
Vie
Great example! Thank you.
I'm a little dizzy now though. :)
I have usually done my centering with top: 50% left: 50% and negative margins
on one div.
Is this not a standard way of accomplishing this? I noticed you used 3 divs for
centering.
Is this because of the animation?
Best,
Karl DeSaulni
What is using a # before a property called? Like this line in your code.
What are you doing here? Sorry for any elementary questions,
I'm more a javascript coder trying to wrap my head around this css stuff and
all its rules, pseudos and tricks.
.center2 {
#left: 50%;
}
TIA,
Best,
Karl DeSau
1 oct 2013 12.09 Karl DeSaulniers:
> Great example! Thank you.
> I'm a little dizzy now though. :)
>
> I have usually done my centering with top: 50% left: 50% and negative margins
> on one div.
> Is this not a standard way of accomplishing this? I noticed you used 3 divs
> for centering.
> Is
1 okt 2013 kl. 12.29 skrev Karl DeSaulniers:
> What is using a # before a property called? Like this line in your code.
> What are you doing here? Sorry for any elementary questions,
It's fallback css for browsers that don't acknowledge display:table. There are
many levels to understand with
1 okt 2013 13.24 Karl DeSaulniers:
> Last question for now. In your resizing box example,
> how would you get the text to scale with box, as well as,
> say an image and another div with an image in it?
>
> Is there a css way to do this besides zoom like a scale or transformMatrix or
> is zoom
If absolute positioning is an option, a simple, clean way is:
.centeredElement {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 300px;
width: 300px;
}
http://codepen.io/chrisrockwell/pen/Ffjul
On Tue, Oct 1, 2013 at 8:39 AM, MiB wrote:
>
> 1
Can anyone cite the publisher of the position:absolute method? I know that
it was recently published, but I can't find it in any of my bookmarks or
via google.
On Tue, Oct 1, 2013 at 9:10 AM, Chris Rockwell wrote:
> If absolute positioning is an option, a simple, clean way is:
>
> .centeredElem
1 okt 2013 15.10 Chris Rockwell:
> If absolute positioning is an option, a simple, clean way is:
>
> .centeredElement {
> position: absolute;
> margin: 0 auto;
> left: 0;
> right: 0;
> top: 0;
> bottom: 0;
> height: 300px;
> width: 300px;
> }
>
> http://codepen.io/chrisrockwell/
What browser are you viewing in? It works for me in ff,chrome,ie10
On Tue, Oct 1, 2013 at 10:14 AM, MiB wrote:
>
> 1 okt 2013 15.10 Chris Rockwell:
>
> > If absolute positioning is an option, a simple, clean way is:
> >
> > .centeredElement {
> > position: absolute;
> > margin: 0 auto;
> >
1 okt 2013 kl. 16.16 skrev Chris Rockwell:
> What browser are you viewing in? It works for me in ff,chrome,ie10
It fails in Chrome.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
L
What version? It's fine in 29.0.1547.76 m and 32.0.1657.2 canary Aura
On Tue, Oct 1, 2013 at 10:18 AM, MiB wrote:
>
> 1 okt 2013 kl. 16.16 skrev Chris Rockwell:
>
> > What browser are you viewing in? It works for me in ff,chrome,ie10
> It fails in Chrome.
>
1 okt 2013 kl. 16.22 skrev Chris Rockwell:
> What version? It's fine in 29.0.1547.76 m and 32.0.1657.2 canary Aura
Chrome 29.0.1547.65 on Mac. Height isn't respected. Also, what happens if
height is an unknown and the box needs to accommodate different content?
On 10/1/13 7:22 AM, Chris Rockwell wrote:
What version? It's fine in 29.0.1547.76 m and 32.0.1657.2 canary Aura
On Tue, Oct 1, 2013 at 10:18 AM, MiB wrote:
1 okt 2013 kl. 16.16 skrev Chris Rockwell:
What browser are you viewing in? It works for me in ff,chrome,ie10
It fails in Chrome.
On Tue, Oct 1, 2013 at 5:25 AM, Karl DeSaulniers wrote:
> Can anyone help me? I am looking to create a DIV that is centered
> horizontally and vertically in the window and inside this div I have images
> and text and the like. I want the images and the text to stay inside this
> div. How can I
1 okt 2013 15.10 Chris Rockwell:
> If absolute positioning is an option, a simple, clean way is:
>
> .centeredElement {
> position: absolute;
> margin: 0 auto;
> left: 0;
> right: 0;
> top: 0;
> bottom: 0;
> height: 300px;
> width: 300px;
> }
Ok, so now I tried this with only t
I see, I did type "margin: 0 auto" in the email. David pointed this out,
but when I checked I **only** checked the pen, I didn't go back in the
email to double check. It should be:
.centeredElement {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 30
Did you try David Hucklesby's solution of changing the margin to
margin: auto; instead of margin: 0 auto; ?
On Tue, Oct 1, 2013 at 1:29 PM, MiB wrote:
>
> 1 okt 2013 15.10 Chris Rockwell:
>
>> If absolute positioning is an option, a simple, clean way is:
>>
>> .centeredElement {
>> position: ab
1 okt 2013 19.33 Chris Rockwell:
> I see, I did type "margin: 0 auto" in the email. David pointed this out, but
> when I checked I **only** checked the pen, I didn't go back in the email to
> double check. It should be:
Yes, thanks this helped. I guess I missed that part as I always have 0
On Tue, Oct 1, 2013 at 1:38 PM, MiB wrote:
(snip)
> This is still only of value when the height is known beforehand so is of
> limited value. What you normally want is rules that always center content
> vertically regardless of the actual height that needs to vary with content.
> __
I agree, but to this day I've never had a use case for this, other than
playing around :). I updated the pen so that it does accept height: auto
if display is table, which resolves it. In Chrome on windows it works;
before end of day I wanted to test it on other browsers though
On Tue, Oct 1, 2
1 oct 2013 19.42 Tom Livingston:
> This is a viable solution under the right circumstances.
And just what did I just say?
The solutions I linked to are worse, are they?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.cs
On Tue, Oct 1, 2013 at 1:56 PM, MiB wrote:
>
> 1 oct 2013 19.42 Tom Livingston:
>
>> This is a viable solution under the right circumstances.
> And just what did I just say?
>
> The solutions I linked to are worse, are they?
I don't believe I even eluded to any such thing. I was reiterating
you
Soon we'll be using flex box which, in my opinion, is the only non-hackish
way of doing it.
On Tue, Oct 1, 2013 at 2:00 PM, Tom Livingston wrote:
> On Tue, Oct 1, 2013 at 1:56 PM, MiB wrote:
> >
> > 1 oct 2013 19.42 Tom Livingston:
> >
> >> This is a viable solution under the right circumstanc
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
...
...
What widths do i1 and i2 have, and why ? Answers by reference
to the relevant W3C specification(s), please, not by experiment
or guesswork !
Philip Taylor
__
How you assign them in the class attribute has no bearing.
On Tue, Oct 1, 2013 at 2:45 PM, Chris Rockwell wrote:
> http://www.w3.org/TR/CSS2/cascade.html#cascading-order
>
> In your example, width is 30em;
>
>
> On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor wrote:
>
>> Consider :
>>
>>
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor wrote:
> Consider :
>
> .c1 {width: 20em}
> .c2 {width: 30em}
>
> ...
> ...
>
> What widths do i1 and i2 have, and why ? Answers
Chris Rockwell wrote:
> http://www.w3.org/TR/CSS2/cascade.html#cascading-order
>
> In your example, width is 30em;
> How you assign them in the class attribute has no bearing.
OK, so in particular you are referencing this part, I assume :
> Finally, sort by order specified: if two declaratio
I tend to agree. Since .c2 is defined after .c1 it takes precendence
over the first declaration. AFAIK the order in which the classes are
defined within the attribute do not influence.
Far more than anyone could ever ask for is here:
http://stackoverflow.com/questions/15670631/does-the-order-o
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
On Tue, Oct 1, 2013 at 2
Wouldn't the first div width = 30em, and the second div width = 20em?
... C2 overrides C1
... C1 overrides C2
Greg Gamble
SBCTC - Olympia | Information Services
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chr
Greg - I can see how you might think that, but you are thinking along the
lines of directly mapping the class to the declaration (e.g. === ) which is not the case. The
engine decides which style to map based on the cascading order, and only
those styles are applied. I hope that helps and I haven
This is a great clarification and something that would've stumped me
completely if ever encountered.
Thanks,
Mike
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
Sent: Tuesday, October 01, 2013 12:01 PM
Chris Rockwell wrote:
> That is why it works that way, yes.
>
> The engine sees two widths, both with the same weight, origin and
> specificity; the last one to be declared will win.
>
> If instead, you did:
>
> div.c1 {width:20em}
> .c2 {width:30em}
>
> The width would be 20em, because div.
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell wrote:
> That is why it works that way, yes.
>
> The engine sees two widths, both with the same weight, origin and
> specificity; the last one to be declared will win.
>
> If instead, you did:
>
> div.c1 {width:20em
Sorry...
correction:
.c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston wrote:
> What about:
>
> c2.c1{width: 20px}
>
> ?
>
> On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell
> wrote:
>> That is why it works that way, yes.
>>
>> The engine sees two widths, both with the same
That trumps .c2 or .c1 because it's more specific, but the cascade order
would still apply:
.c2.c1 {width:20px}
.c1.c2 {width:30px}
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston wrote:
> Sorry...
>
> correction:
>
> .c2.c1{width: 20px}
>
> ?
>
> On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston
I guess I should be more specific:
.c2.c1 {width: 100px}
.c1 {width: 50px;}
.c2 {width: 10px;}
Width will be 100px as specificity is more important than cascade.
On Tue, Oct 1, 2013 at 4:21 PM, Chris Rockwell wrote:
> That trumps .c2 or .c1 because it's more specific, but the cascade order
> w
At 20:17 +0100 on 10/01/2013, Philip Taylor wrote about Re: [css-d]
Two classes, two conflicting rules, which wins :
Chris Rockwell wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will wi
>
>
> So you are saying that in a 'class="c2 c1"' case, it scans the CSS defs,
> sees .c1 and applies it, keeps going and sees .c2 which overrides the c1
> width?
>
That's how I would explain it, but I'm not certain how the browsers
actually compile it. I would **guess** that it is compiled and on
Makes sense when I see it in action ... thanks.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; lang="en">
CSS Cascade
body { color: blue; }
Seems to make a difference in Chrome if you add a comma between the classes
(see div id line below), otherwise both lines are yellow:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; lang="en">
CSS Cascade
body { color: blue; }
.c2 {background-color: green
Is the comma valid there? I've never seen that before.
Sent from my iPhone
> On Oct 1, 2013, at 7:07 PM, "Karl Snyder" wrote:
>
> Seems to make a difference in Chrome if you add a comma between the classes
> (see div id line below), otherwise both lines are yellow:
>
> "http://www.w3.org/TR/
Not sure, I do not use it in my code, but without it I got 2
lines of yellow in Chrome, Firefox and Explorer. Not sure why I get 2 line of
yellow.
303-499-5799 (Offi
Le 2 oct. 2013 à 08:07, "Karl Snyder" a écrit :
> .c2 {background-color: green;}
> .c1 {background-color: yellow;}
>
>
>
> C1 then C2
> C2 then C1
The 'class' attribute takes a space separated list of values:
http://www.w3.org/TR/html5/dom.html#classes
(same in an html 4 document as well).
Le 2 oct. 2013 à 08:56, Rick Gordon a écrit :
In answer to my previous message:
> But if that's the case, this variant would not show red text for both:
>
> …
>
> body { color:blue; }
> .c2 {background-color:green; color:red;}
> .c1 {background-
I've come across some really strange behavior when trying to mix multiple
font-sizes within a single block element. I've built an example page here:
http://kage23.com/line-height.html
Basically, it seems like I'm getting an extra pixel of height and I can't
track down how or why. In my example, t
On 2013-10-01 18:06 (GMT-0700) Kyle Sessions composed:
http://kage23.com/line-height.html
...
I've been banging my head against this for a while now. I would greatly
appreciate any thoughts or suggestions!
I have no solution, just a suggestion, in case you're not familiar with the
differenc
I'm going to have to think more about this when I'm more awake (6 week old
at home, give me a break:D) but my initial instinct was to remove the units
from the line height (based on your font size and desired line-height, the
resulting line-height would be "1.5") as there is plenty of documentation
Le 2 oct. 2013 à 10:06, Kyle Sessions a écrit :
> I've come across some really strange behavior when trying to mix multiple
> font-sizes within a single block element. I've built an example page here:
>
> http://kage23.com/line-height.html
>
> Basically, it seems like I'm getting an extra pixe
51 matches
Mail list logo
