Re: [css-d] Floating images - understanding the details
--- On Fri, 8/20/10, Gail Issen gis...@sbcglobal.net wrote: The way I remember the order is that they sound like TROUBLE ... TRBL ... Top Right Bottom Left. I just remember it as clockwise, starting from the top. This works completely obviously for 4 values, and pretty obviously for 2 (top/bottom and left/right 'mirror' each other). For 3 (which is by far the hardest to remember), you just need to bear in mind that it's more common to have differing top/bottom values than it is left/right, so the repeated value is, instinctively, the left/right one. 1 value isn't a problem :) Those spec-writers actually did things pretty logically when they were drafting CSS! - Bobby __ 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] Floating images - understanding the details
Climis, Tim wrote:
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
Currently the width does nothing (please see below for reason).
[...]
Padding is like margin, except that it's inside the border (so background
colors apply to it), and it doesn't collapse. So, if you had a border around
your image, but you wanted some space between the image and the border, use
padding. Or if you wanted a margin, but you wanted it to be green, you could
use padding for that too. Or if you wanted the margins to not overlap on
adjoining elements, you can use padding for that as well. Or if you need an
inside margin and an outside margin, padding is the inside, and margin is the
outside. (see below)
This is the current CSS.
.floatL {
float:left;
margin: 0 1 em 1em;
padding: 0.25em;
}
Since IMG are inline elements, then any margin or width values will
not be used. For the margin and width values to work, one must make
the IMG display as a block element.
.floatL {
float:left;
margin: 0 1 em 1em;
padding: 0.25em;
display: block;
}
To see what the margin and padding values are actually doing, play
around with this CSS.
.floatL {
float:left;
display: block; /* width and margin values are used */
border: 5px solid blue;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Floating images - understanding the details
--- On Wed, 8/18/10, Wesley Acheson wesley.ache...@gmail.com wrote: No-one spotted the deliberate mistake? ;) 4 values: are Top, bottom, left and right. should be 4 values: are top, right, bottom, left - Bobby __ 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] Floating images - understanding the details
--- On Wed, 8/18/10, Keith Purtell keithpurt...@keithpurtell.com wrote: First, I don't understand width. Second, I especially don't understand how he has illustrated margin. Third, the padding. Why is it necessary and how is it affecting the the flow of text around my images? I don't think anyone's mentioned Firebug yet, which must be a first! It's a Firefox plugin which is excellent as a debugging tool, a design tool, and a training tool for those new to CSS. Firebug will (to some extent) answer your 3 questions - and many more - by providing visual feedback, in your browser, of how various styles affect the design. http://getfirebug.com/ I recommend it as an absolute must for any web design work. - Bobby __ 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] Floating images - understanding the details
On Thursday, August 19, 2010 6:51:28 am Bobby Jack wrote: --- On Wed, 8/18/10, Keith Purtell keithpurt...@keithpurtell.com wrote: First, I don't understand width. Second, I especially don't understand how he has illustrated margin. Third, the padding. Why is it necessary and how is it affecting the the flow of text around my images? I don't think anyone's mentioned Firebug yet, which must be a first! It's a Firefox plugin which is excellent as a debugging tool, a design tool, and a training tool for those new to CSS. Firebug will (to some extent) answer your 3 questions - and many more - by providing visual feedback, in your browser, of how various styles affect the design. http://getfirebug.com/ I recommend it as an absolute must for any web design work. there's also the Webkit developer console, which is included in Chrome and Safari, and prvides the same functionality (but isn't an add-on), and the deveolper toolbar in IE8, but I can't remember if that's an add-on or not. ---Tim __ 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] Floating images - understanding the details
On Thu, Aug 19, 2010 at 3:47 AM, Alan Gresley a...@css-class.com wrote:
Since IMG are inline elements, then any margin or width values will
not be used. For the margin and width values to work, one must make
the IMG display as a block element.
.floatL {
float:left;
margin: 0 1 em 1em;
padding: 0.25em;
display: block;
}
Actually display: block; is not necessary for images to correctly have
width, margin and padding applied to them. Here is my test page I threw
together to be sure:
http://extranets.beaconfire.us/test/imgfloat.html
Using this CSS: img {width: 100px; float: left; margin-right: 40px;
padding-bottom: 40px;}
All styles are applied correctly without display: block; in all browsers.
Note, the actual width of the image is 267px.
-Tim
--
-
tim.arn...@gmail.com
__
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] Floating images - understanding the details
Alan Gresley wrote:
.floatL {
float:left;
margin: 0 1 em 1em;
padding: 0.25em;
display: block;
}
I should remind myself. Floating an element causes it to display as a
block. Also width and margin values are used.
Lucky me, I didn't need Philippe to remind me this time.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Floating images - understanding the details
On Thu, Aug 19, 2010 at 9:39 AM, Alan Gresley a...@css-class.com wrote: I should remind myself. Floating an element causes it to display as a block. Also width and margin values are used. Lucky me, I didn't need Philippe to remind me this time. -- Alan http://css-class.com/ I'm not so sure that it causes it to display as block so much as makes the styles noticeable when they might not otherwise be. On the same test page, the second image has no float and all rules are still applied. I changed the margin from right to left to make it more apparent. Cheers, Tim - tim.arn...@gmail.com __ 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] Floating images - understanding the details
Hi Alan,
Alan Gresley wrote:
.floatL {
float:left;
margin: 0 1 em 1em;
padding: 0.25em;
display: block;
}
I should remind myself. Floating an element causes it to display as a
block. Also width and margin values are used.
Yes, floats get computed as display:block, but also images are not inline
elements they are *replaced elements* hence they can get all the styling
(margin, padding, width/height).
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Floating images - understanding the details
On Aug 19, 2010, at 10:39 PM, Alan Gresley wrote: I should remind myself. Floating an element causes it to display as a block. Also width and margin values are used. Lucky me, I didn't need Philippe to remind me this time. he's hibernating under canicular temperatures and overflowing rivers... and forgot everything. On Aug 19, 2010, at 10:33 PM, Tim Arnold wrote: Actually display: block; is not necessary for images to correctly have width, margin and padding applied to them. Or any floated block, for the matter. Floats are always 'display: block' (except when they are not, but that is rather a lone case - table). So sez Alan, above. And the CSS 2.1 spec http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo And btw, width, height, margin, padding always apply to images (inline replaced elements). Padding and margin may not affect the layout – (in-)line boxes or block boxes level. But it is there nonetheless. /back to summer hibernation Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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] Floating images - understanding the details
Tim Arnold wrote: On Thu, Aug 19, 2010 at 9:39 AM, Alan Gresley a...@css-class.com wrote: I should remind myself. Floating an element causes it to display as a block. Also width and margin values are used. Lucky me, I didn't need Philippe to remind me this time. -- Alan http://css-class.com/ I'm not so sure that it causes it to display as block so much as makes the styles noticeable when they might not otherwise be. On the same test page, the second image has no float and all rules are still applied. I changed the margin from right to left to make it more apparent. Cheers, Tim - tim.arn...@gmail.com It's in the spec [1]. The computed value for float is set to block which causes an element to generate a block box [2]. I am completely wrong about IMG when it is display inline. A margin, width or height is applied since an IMG is a inline replaced element. I also wrong about inline non replaced elements. Width and height are not applied but horizontal margin values that are not auto are used. 1. http://www.w3.org/TR/CSS21/visuren.html#float-position 2. http://www.w3.org/TR/CSS21/visuren.html#propdef-display -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] Floating images - understanding the details
Bobby, Embarrassed to admit this, but Firebug was one of three Firefox add-ons that were suggested; all have been installed but I've been too busy to try them out! - Keith Purtell On 8/19/2010 5:51 AM, Bobby Jack wrote: I don't think anyone's mentioned Firebug yet, which must be a first! It's a Firefox plugin which is excellent as a debugging tool, a design tool, and a training tool for those new to CSS. Firebug will (to some extent) answer your 3 questions - and many more - by providing visual feedback, in your browser, of how various styles affect the design. http://getfirebug.com/ I recommend it as an absolute must for any web design work. - Bobby __ 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] Floating images - understanding the details
OK, I'm taking a break. I need to re-read everything you all sent me, and I need to finish Eric's book. Then, I'll revise the page and style sheet. Thanks a million! - Keith Purtell __ 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/
[css-d] Floating images - understanding the details
Making progress. As you kindly recommended, my images now use a float
property for both left and right. Here's the glitch. In order to provide
white space for text that flows around each one, I lifted the following
code directly from Eric Meyer's book:
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
Finally, I need the images to indent 140 pixels like the text. Easy?
I will include the same caveat I have repeated before: If I am depending
on you folks too much and not relying on my own brain power, simply
refer me to the correct section in my bible; Cascading Style Sheets,
The Definitive Guide
http://www.keithpurtell.com/kthings/a_body_vance_divs.htm
--
- Keith Purtell
__
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] Floating images - understanding the details
I'm absolutely no guru here (not anywhere), and I'm sure you will get
better replies.
Still:
2010/8/18 Keith Purtell keithpurt...@keithpurtell.com
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
To know what it's doing, you need to tell where it is been applied.
What is the *selector* part of your code line?
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Not sure why we specify units on some cases and others don't, but
by having margin: 1 1em 1em; It's a shortcut way to declare margin
properties. In your case it's the same as:
margin-top: 1; (the first '1' that appears on the shortcut version)
margin-right: 1em; (the first '1em' that appears on the shortcut version)
margin-left:1em; (again, the first '1em' that appears on the shortcut version)
margin-bottom: 1em; (the second '1em' that appears on the shortcut version).
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
I believe the box-model could provide you same answers to that ;)
http://www.w3.org/TR/CSS2/box.html
- Keith Purtell
Regards,
Márcio
__
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] Floating images - understanding the details
On Wed, Aug 18, 2010 at 3:26 PM, Keith Purtell
keithpurt...@keithpurtell.com wrote:
Making progress. As you kindly recommended, my images now use a float
property for both left and right. Here's the glitch. In order to provide
white space for text that flows around each one, I lifted the following
code directly from Eric Meyer's book:
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
Its a scalable width that will scale up or down if the user changes
the font size.
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Dunno really. What I do know is.
1 value: represents all four sides;
2 values: The top and the bottom is represented by the first value.
Left and right represented by the second value.
3 values: The first value is top. Second value is left and right and
the final value is bottom.
4 values: are Top, bottom, left and right.
see also http://www.w3schools.com/css/css_margin.asp
With this in mind it looks like a top margin of 1 without a unit which
doesn't makes sense to me. The subsequent 1em 1em represents
left-right and bottom of 1. I believe that certain browsers may take
this as a pixel magin.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
The padding is the area inside the border (if it exists). So if you
had a border arround the image it would have 0.25em background arround
the image. Try this with either a background-color or a border to see
the effect, Margin is the area outside. So basically your text would
start a quater of a charachter to the right of the image (if there was
no margin).
Finally, I need the images to indent 140 pixels like the text. Easy?
The margin is usually used to indent in this way so you may have
something like margin: 0 1em 1em 140px
Dunno really if this is what you wanted. You should try playing with
margin + padding sometimes.
__
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] Floating images - understanding the details
On Wed, Aug 18, 2010 at 4:08 PM, Wesley Acheson wesley.ache...@gmail.com wrote: Dunno really if this is what you wanted. You should try playing with margin + padding sometimes. The diagram on this page helps too http://www.w3schools.com/css/css_boxmodel.asp __ 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] Floating images - understanding the details
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
The width is the width of whatever element you're applying the CSS to. Could
be the image, but as Marcio pointed out, you didn't include the selector, so we
don't know.
Second, I especially don't understand how he has illustrated margin.
Why do '1' and '1em' and '1em' follow each other that way, and what
are they accomplishing.
That's not valid CSS. All non-zero measures need to have a unit. So I'm not
sure what
margin: 1 1em 1em would do exactly. But in general, it applies a margin of 1
(whatever that means) to the top margin, 1em to the right (and left) margin,
and 1em to the bottom.
margin: 1em; applies 1em to the top (and the bottom, and the right, and the
left)
margin: 1em 2em; applies 1em to the top (and the bottom), and 2em to the
right (and the left).
margin: 1em 2em 3em; applies 1em to the top, 2em to the right (and the left),
and 3em to the bottom.
margin: 1em 2em 3em 4em; applies 1em to the top, 2em to the right, 3em to the
bottom, and 4em to the left.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
Padding is like margin, except that it's inside the border (so background
colors apply to it), and it doesn't collapse. So, if you had a border around
your image, but you wanted some space between the image and the border, use
padding. Or if you wanted a margin, but you wanted it to be green, you could
use padding for that too. Or if you wanted the margins to not overlap on
adjoining elements, you can use padding for that as well. Or if you need an
inside margin and an outside margin, padding is the inside, and margin is the
outside. (see below)
Finally, I need the images to indent 140 pixels like the text. Easy?
Depends on your HTML. If all your images are in a container, you could put a
padding-left: 140px on that, and it would do the trick. There are also other
ways to do it. A link would help.
---Tim
__
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] Floating images - understanding the details
On Wed, Aug 18, 2010 at 8:26 AM, Keith Purtell keithpurt...@keithpurtell.com wrote: Finally, I need the images to indent 140 pixels like the text. Easy? Not trying to assume, but based on your link, it looks like you may be wanting ALL content in the cream colored area to be 140px from the left, thus reserving the brown column for other stuff. In this case, rather than putting margins or padding on each and every element type that might show up in that content area (paragraphs, images, lists, etc. ) I think a more streamlined approach would be to put a wrapper div around all that content and use a margin-left: 140px; to shift that whole div over. Then everything inside that div comes along for the ride. div id=mainContent img src=something.jpg class=floatL / pparagraph of interesting stuff/p pparagraph of interesting stuff/p pparagraph of interesting stuff/p more content of various types /div __ 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/
