Re: [css-d] Vertically centreing in Strict HTML 4.01
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Gray aaronngray.li...@gmail.com wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre an img within a page other than boxing it by div's and turning
them into 'display: table' and 'display:table-cell', and aligning them to
center, middle ?
Hi Aaron. Use a table-based layout... well not really :D
.containing_element {
display: table-cell;
vertical-align: middle;
}
vertical-align only works on table cells and other elements that have
display:table-cell. Support is pretty good. It should be IE8+ and
all other major browsers.
I'd also recommend reading about anonymous table objects (
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes ) that can be
created when you use display:table-cell. They can surprise you when
you're trying to line things up.
references:
http://www.quirksmode.org/css/display.html#t06
http://www.w3.org/TR/CSS21/visuren.html#propdef-display
http://www.w3.org/TR/CSS21/tables.html#table-display
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
Many thanks in advance,
Aaron
--
Ghodmode
http://www.ghodmode.com/blog
__
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] Vertically centreing in Strict HTML 4.01
Am 28.12.11 11:39, schrieb Ghodmode:
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Grayaaronngray.li...@gmail.com wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre animg within a page other than boxing it bydiv's and turning
them into 'display: table' and 'display:table-cell', and aligning them to
center, middle ?
Hi Aaron. Use a table-based layout... well not really :D
.containing_element {
display: table-cell;
vertical-align: middle;
}
This is exactly what the OP did *not* want. Aaron was explicitely asking
for a method to vertically and horizontally center an image *without*
the use of /display: table/ or /display: table-cell/.
Here is one way that uses absolute positioning. (You need to know the
images intrinsic width and height for this.)
/* reset implicit margin/padding */
body {
margin: 0;
padding: 0;
}
/* center the image */
/* image dimensions: h: 224px, w: 300px */
img.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -112px; /* half the image height */
margin-left: -150px; /* half the image width */
}
This works by positioning the image halfway across and down the viewport
and then pulling it back by half its intrinsic width/height by using
negative margins.
Implicit values for margin/padding on the body element might place the
image somewhat off center, thus the reset.
hope this helps,
Jørgen
__
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 are the meanings of the arguments of border-image?
On Tue, Dec 27, 2011 at 9:20 AM, Philippe Wittenbergh e...@l-c-n.com wrote: On Dec 27, 2011, at 7:28 AM, Peng Yu wrote: It is not very clear to what exactly the arguments to border-image. I can't promise it's any easier to understand, but here's an article about how to use border-image: http://www.css3files.com/border/ The best way to figure it out is probably through experimentation. Make some guesses and see if they work. http://www.css3.info/preview/border-image/ The Working draft is not clear to me either. Could anybody help me understand what the arguments mean? Thanks! http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri You're looking at a fairly old (and thus really outdated) text there. Here is the latest version: http://www.w3.org/TR/css3-background/#the-border-image (in general, when reading specs it is a good idea to scroll to the top of the document and check that you see the latest version – follow the link 'latest…') Now note that the border-image part of the spec is not well implemented in the release version of various browsers (and require vendor prefixes mostly). It's also just a Candidate Recommendation draft. It hasn't been finalized and may be subject to change at any time. http://www.w3.org/standards/techs/css#drafts http://www.w3.org/2005/10/Process-20051014/tr.html#RecsCR It's not well implemented, but it's available in most browsers: Safari: http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-image Mozilla: https://developer.mozilla.org/en/CSS/border-image Opera just says it supports it and links back to the W3C page: http://www.opera.com/docs/specs/presto29/css/backgroundsborders/ http://www.opera.com/docs/specs/presto29/css/o-vendor/ Google Chrome: I couldn't find any documentation for Google Chrome support. It uses the same rendering engine as Apple's Safari, so most of Apple's documentation should work for Chrome as well, but I'd like to find a Chrome specific reference. Internet Explorer: Microsoft makes a browser, too! But it doesn't support border-image :( That's okay. I don't think anyone uses Microsoft's browser any more anyway ;) http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#border If you really want to try it out with this obscure browser, I found the following: http://stackoverflow.com/questions/3567501/border-image-workaround-for-ie Philippe -- Philippe Wittenbergh http://l-c-n.com/ -- Ghodmode http://www.ghodmode.com/blog __ 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] Understanding the third argument of translate3d
On Tue, Dec 27, 2011 at 1:19 PM, Peng Yu pengyu...@gmail.com wrote:
Hi,
I thought that, among the 3rd google logo or the 4th google logo, one
should slip above the other should slip under the previous log,
because the z values are different. But both of them slip above the
previous logo. I guess that I still don't completely understand the
meaning of the third argument of translate3d. Could anybody help
understand it? Thanks!
I don't think I fully understand it myself yet, but I was able to get
the desired effect by adding the following two rules:
div#-z {
-webkit-transform: translate3d(0, 0, 100px);
}
div#z {
-webkit-transform: translate3d(0, 0, 200px);
}
I don't know if it's a bug or a poor implementation or a feature, but
some things won't animate. It looks like the Z axis is one of them.
So, when you tried to move div#-z back during hover, it didn't happen.
However, with the two rules above, div#-z is above div#y and below
div#z when the page renders.
I guess this effectively means that 3d transforms don't work because
the effect is the same as the regular translate function. I must be
missing some detail.
--
Ghodmode
http://www.ghodmode.com/blog
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
div {
position:relative;
left:200px;
top:200px;
-webkit-transition:2s;
}
div#x:hover {
-webkit-transform:translate3d(100px,0,0);
}
div#y:hover {
-webkit-transform:translate3d(0,100px,0);
}
div#-z:hover {
-webkit-transform:translate3d(0,-100px,-100px);
}
div#z:hover {
-webkit-transform:translate3d(0,-100px,100px);
}
/style
/head
body
div id='x'
px/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='y'
py/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='-z'
p-z/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='z'
p+z/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
/body
/html
--
Regards,
Peng
__
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 are the meanings of the arguments of border-image?
On Dec 28, 2011, at 9:33 PM, Ghodmode wrote: http://www.w3.org/TR/css3-background/#the-border-image (in general, when reading specs it is a good idea to scroll to the top of the document and check that you see the latest version – follow the link 'latest…') Now note that the border-image part of the spec is not well implemented in the release version of various browsers (and require vendor prefixes mostly). It's also just a Candidate Recommendation draft. It hasn't been finalized and may be subject to change at any time. http://www.w3.org/standards/techs/css#drafts http://www.w3.org/2005/10/Process-20051014/tr.html#RecsCR At the CR stage, the document is not expected to change much, save for minor mostly editorial changes. It's not well implemented, but it's available in most browsers: What 'most' browser (all current release versions actually) have implemented is based on an older text (from 2008) and doesn't really match the current spec. this one, actually: http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-border-image Safari: http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-image Wow, that is severely outdated. It is based on a very old draft. (The whole Safari CSS reference on developer.apple.com seems to be in bad shape. It used to be more up-to-date. Weird.) Mozilla: https://developer.mozilla.org/en/CSS/border-image (doesn't load at the moment;) It almost certainly describes the 'old' spec as well and need to be updated to the latest (to match what the future firefox 12 will support). I pointed to using nightly builds for analysing, exploring an testing this property fro a reason. Most release browsers that support 'border-image' do so base on a 2008 text, which is quite limited compare to the present text. Nightly builds of Gecko and WebKit are in the process of implementing the most recent text. And no, it is not really backwards compatible. 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/
Re: [css-d] Vertically centreing in Strict HTML 4.01
On Wed, Dec 28, 2011 at 8:20 PM, Joergen W. Lang joergen_l...@gmx.de wrote:
Am 28.12.11 11:39, schrieb Ghodmode:
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Grayaaronngray.li...@gmail.com
wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre animg within a page other than boxing it bydiv's and turning
them into 'display: table' and 'display:table-cell', and aligning them to
center, middle ?
Hi Aaron. Use a table-based layout... well not really :D
.containing_element {
display: table-cell;
vertical-align: middle;
}
This is exactly what the OP did *not* want. Aaron was explicitely asking for
a method to vertically and horizontally center an image *without* the use of
/display: table/ or /display: table-cell/.
Yes you're absolutely right. I don't know how I missed that. I'm
sorry for my 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/
