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
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?
View
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
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
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 this
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 the
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
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 ch...@chrisrockwell.comwrote:
If absolute positioning is an option, a simple, clean
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/pen/Ffjul
What browser are you viewing in? It works for me in ff,chrome,ie10
On Tue, Oct 1, 2013 at 10:14 AM, MiB digital.disc...@gmail.com wrote:
1 okt 2013 15.10 Chris Rockwell:
If absolute positioning is an option, a simple, clean way is:
.centeredElement {
position: absolute;
margin:
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
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 digital.disc...@gmail.com 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 digital.disc...@gmail.com wrote:
1 okt 2013 kl. 16.16 skrev Chris Rockwell:
What browser are you viewing in? It works for me in
On Tue, Oct 1, 2013 at 5:25 AM, Karl DeSaulniers k...@designdrumm.com 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
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 the rules
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:
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 digital.disc...@gmail.com wrote:
1 okt 2013 15.10 Chris Rockwell:
If absolute positioning is an option, a simple, clean way is:
.centeredElement {
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 auto
On Tue, Oct 1, 2013 at 1:38 PM, MiB digital.disc...@gmail.com 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
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,
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]
On Tue, Oct 1, 2013 at 1:56 PM, MiB digital.disc...@gmail.com 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
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 tom...@gmail.com wrote:
On Tue, Oct 1, 2013 at 1:56 PM, MiB digital.disc...@gmail.com wrote:
1 oct 2013 19.42 Tom Livingston:
This is a viable
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
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 ch...@chrisrockwell.comwrote:
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 p.tay...@rhul.ac.uk
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 p.tay...@rhul.ac.uk wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2
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 declarations
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:
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
Wouldn't the first div width = 30em, and the second div width = 20em?
DIV id=i1 class=c1 c2.../DIV C2 overrides C1
DIV id=i2 class=c2 c1.../DIV C1 overrides C2
Greg Gamble
SBCTC - Olympia | Information Services
-Original Message-
From: css-d-boun...@lists.css-discuss.org
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. div class=c1
c2 === div style=width:20em;width30em) which is not the case. The
engine decides which style to map based on the cascading order, and only
those
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
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.c1 is more
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell ch...@chrisrockwell.com 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:
Sorry...
correction:
.c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston tom...@gmail.com wrote:
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
That is why it works that way, yes.
The engine sees two
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 tom...@gmail.com wrote:
Sorry...
correction:
.c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 4:15 PM, Tom
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 ch...@chrisrockwell.comwrote:
That trumps .c2 or .c1 because it's more specific,
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
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 only the
Makes sense when I see it in action ... thanks.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en
head
title
CSS Cascade
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:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en
head
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 k...@mountain-mall.com 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:
!DOCTYPE
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
Le 2 oct. 2013 à 08:07, Karl Snyder k...@mountain-mall.com a écrit :
.c2 {background-color: green;}
.c1 {background-color: yellow;}
/style
/head
body
div id=i1 class=c1, c2C1 then C2/div
div id=i2 class=c2, c1C2 then C1/div
The 'class' attribute takes a space separated list of values:
Le 2 oct. 2013 à 08:56, Rick Gordon li...@rickgordon.com a écrit :
In answer to my previous message:
But if that's the case, this variant would not show red text for both:
…
style type=text/css
body { color:blue; }
.c2 {background-color:green;
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,
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
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 ksessi...@bepress.com 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
51 matches
Mail list logo
