Re: [WSG] A hand with text wrapping around images in CSS?
Lea can you tell me how you do that exactly? Code it? Thanks, John Lea de Groot wrote: On 06/02/2006, at 5:30 PM, John S. Britsios wrote: I would like to ask here, if there is a possibility making my texts wrap around the bottom of my images here http://www.webnauts.net/redesign/test.html, without becoming rubbish when resizing the page. We've discussed this one before (a long time ago - I remember because last time it was me who asked :)) and concluded that it can only be done by including the IMG element in the HTML and floating it. If anyone has thought up something since I would love to hear it, as I go for this effect all the time. :( Lea ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A hand with text wrapping around images in CSS?
Nice site John... At 06:30 PM 6/02/2006, you wrote: Hi everyone, I would like to ask here, if there is a possibility making my texts wrap around the bottom of my images here http://www.webnauts.net/redesign/test.html, without becoming rubbish when resizing the page. Thanks in advance for your kind help. Best wishes and regards, John ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Best Regards Ray Cauchi Manager/Lead Developer ( T W E E K ! ) PO Box 15 Wentworth Falls NSW Australia 2782 | p:+61 2 4757 1600 | f: +61 2 4757 3808 | m: 0414 270 400 | e: [EMAIL PROTECTED] | w: http://www.tweek.com.au
Re: [WSG] A hand with text wrapping around images in CSS?
Actually, when I examine your css more closely - you are already doing this, although you havent applied a width to make the float valid... Apologies for being nitpicky here but a width does not need to be applied to images that are floated as they already have intrinsic width. A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). http://www.w3.org/TR/CSS2/visuren.html#floats In HTML, the following elements are examples of replaced elements: IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements. Thanks Russ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A hand with text wrapping around images in CSS?
Lea,
I did that but it still doesn't work. See example here:
http://www.webnauts.net/redesign/testing.html
Thanks,
John
Lea de Groot wrote:
On 06/02/2006, at 6:56 PM, John S. Britsios wrote:
Lea can you tell me how you do that exactly? Code it?
Sure!
looks at page
Oh, you're almost there.
eg.
html:
h2Usability Testing/h2
pimg class=left src=images/usability.jpg alt= /span
class=fettUsability/span is the measure of the quality of a
user's experience when interacting with a product.../p
Add CSS:
p img.left {
float: left;
width: 100px; /* whatever the width of the image is */
margin: 0 0 0.5em 0.5em; /* I like to put a little padding on the
image, for white space */
}
Actually, when I examine your css more closely - you are already
doing this, although you havent applied a width to make the float
valid...
HIH!
Lea
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] A hand with text wrapping around images in CSS?
John S. Britsios wrote:
I did that but it still doesn't work. See example here:
http://www.webnauts.net/redesign/testing.html
Try adding:
.content {overflow: hidden;}
...as you have a case of floats being forced down to line up with
elements in the right column. 'overflow: hidden' will _isolate_ the main
column so that won't happen, but test it well across browser-land to
avoid unwanted side-effects.
The fix is based on 'block formating context'[1] in CSS2.1, where
other stylings for the same effect are listed.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] A hand with text wrapping around images in CSS?
On Feb 6, 2006, at 1:30 AM, John S. Britsios wrote: I would like to ask here, if there is a possibility making my texts wrap around the bottom of my images here http://www.webnauts.net/redesign/test.html, without becoming rubbish when resizing the page. First of all ...start over! 1/ You are trying to float around background images. No can do! 2/ Too see your problem, do this: in your style sheet, place border: thin solid red; in each of your p.icon1, p.icon2, etc. 3/ Do as Lea de Groot said and use the IMG element in the HTML and float left. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A hand with text wrapping around images in CSS?
I think the problem is fixed: http://www.webnauts.net/redesign/
Do you something wrong there? If not, everything is fine.
Thanks a lot for your help.
John
Gunlaug Sørtun wrote:
John S. Britsios wrote:
I did that but it still doesn't work. See example here:
http://www.webnauts.net/redesign/testing.html
Try adding:
.content {overflow: hidden;}
...as you have a case of floats being forced down to line up with
elements in the right column. 'overflow: hidden' will _isolate_ the main
column so that won't happen, but test it well across browser-land to
avoid unwanted side-effects.
The fix is based on 'block formating context'[1] in CSS2.1, where
other stylings for the same effect are listed.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] A hand with text wrapping around images in CSS?
Hi everyone, I would like to ask here, if there is a possibility making my texts wrap around the bottom of my images here http://www.webnauts.net/redesign/test.html, without becoming rubbish when resizing the page. Thanks in advance for your kind help. Best wishes and regards, John ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A hand with text wrapping around images in CSS?
On 06/02/2006, at 5:30 PM, John S. Britsios wrote: I would like to ask here, if there is a possibility making my texts wrap around the bottom of my images here http://www.webnauts.net/redesign/test.html, without becoming rubbish when resizing the page. We've discussed this one before (a long time ago - I remember because last time it was me who asked :)) and concluded that it can only be done by including the IMG element in the HTML and floating it. If anyone has thought up something since I would love to hear it, as I go for this effect all the time. :( Lea -- Lea de Groot Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
