Re: [WSG] Re: Image float and text wrap
Hey Russyes i do... and here it is... http://www.healthpoint.com.au/new/default.php I seem to have all the side bits sorted out ( I should note that this is my first attempt at a css only site ... actually my first styly sheet...so you may find some crashing blunders in there as i am just feeling my way along here!!!) The bit i am talking about is the large image of mum and kid... if i dont have enough content in that area...content changes every month... it all sits up at the top and then i have this massive space under it. I hate that. The other thing is when i dont have enough content to fill the section the next header eg beauty slides up into the top section.. i hate that too!!! This is going to apply to all the lower sections too as there will be images in each department. Well that got that little lot off my chest. any help at all would be hugely appreciated as i am all tuckered out here!!! Cheers Jackie - Original Message - From: "russ weakley" <[EMAIL PROTECTED]> To: "Web Standards Group" <[EMAIL PROTECTED]> Sent: Thursday, November 20, 2003 9:15 AM Subject: Re: [WSG] Re: Image float and text wrap > Hi Jackie, > > As with Michael the other day, welcome to the list! > Have you got a URL so we can see it in action? > > > > > Re: Image float etc > > > > Have finally found time to sit and read all the emails that come through > > from you guys and lo and behold you answered the question that had been > > driving me mad about image float and text wrap so thank you all for that. > > > > Now i have another question. > > > > If i dont have enough text to "fill" the space taken by the image is there > > any way i can get the text to align itself horizontally to the image so > > that theres not a pile of space under the content before the next lot of > > content comes in. (does that make sense?) > > > > Jackie > > > > > > * > The discussion list for http://webstandardsgroup.org/ > * > > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Re: Image float and text wrap
Hi Jackie, As with Michael the other day, welcome to the list! Have you got a URL so we can see it in action? > > Re: Image float etc > > Have finally found time to sit and read all the emails that come through > from you guys and lo and behold you answered the question that had been > driving me mad about image float and text wrap so thank you all for that. > > Now i have another question. > > If i dont have enough text to "fill" the space taken by the image is there > any way i can get the text to align itself horizontally to the image so > that theres not a pile of space under the content before the next lot of > content comes in. (does that make sense?) > > Jackie > > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Re: Image float and text wrap
Re: Image float etc Have finally found time to sit and read all the emails that come through from you guys and lo and behold you answered the question that had been driving me mad about image float and text wrap so thank you all for that. Now i have another question. If i dont have enough text to "fill" the space taken by the image is there any way i can get the text to align itself horizontally to the image so that theres not a pile of space under the content before the next lot of content comes in. (does that make sense?) Jackie - Original Message - From: "Ben Bishop" <[EMAIL PROTECTED]> To: <[EMAIL PROTECTED]> Sent: Thursday, November 13, 2003 10:44 AM Subject: RE: [WSG] Re: Image float and text wrap > > Hi Miles, > > There are several ways of accomplishing this. Here are three different ways > I've done: > > content (multiple block elements) floated right, image floated left. > http://www.mxdu.com/ > > image (accommodates variable width) floated left, content floated left - > inline styles. > http://www.brendansisson.com/ > > image floated left, content floated left. > http://www.leyland.com.au/ > > > All use "clear" to stop things going whack when there's insufficient > content. > > Cheers, > > Ben > > > -Original Message- > Subject: [WSG] Re: Image float and text wrap > > Can this be achieved without using tables? > > * > The discussion list for http://webstandardsgroup.org/ > * > > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] RE: Image float and text wrap
Thanks, but this caused the text next to the image to align to the bottom of the
image. Is there any way to make it align the the top?
p.s. I'm having a hard time keeping up with everyone's suggestions, but thanks muchly
all the same! I'll try them all :D
-Original Message-
From: Irapuan Martinez [mailto:[EMAIL PROTECTED]
Sent: Thursday, November 13, 2003 11:35 AM
To: [EMAIL PROTECTED]
Subject: [WSG] RE: Image float and text wrap
At 11:09 13/11/2003 +1030, Miles Tillinger wrote:
>The reason I wanted to do it was because the image and the text both
>linked to the same URL with an tag each (in separate cells of a
>table). I wanted to combine them so they were both wrapped in the one
>tag, but when the tag is wrapped around both div's clicking the image
>doesn't open the URL. So the solution defeats its own purpose :( Any ideas?
Try:
div#megatron {
position: relative;
margin-left: 100px;
}
div#megatron img {
position: absolute;
top: 0;
left: 0;
}
..
All your base are belong ...
>> Irapuan Martinez .>__
http://www.hypergraph.com.br
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Re: Image float and text wrap
too many divs!
text text text ...
a p{width:200px;margin-left:120px;}
a img{float:left}
just keep it simple, and add a descendent selector if this is just for
one section of your page
(...)
All your base are belong ...
I don't test the script. Configure this according your necessity ;)
>> Irapuan Martinez .>__
http://www.hypergraph.com.br
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Re: Image float and text wrap [Virus checkedAU]
This email is to be read subject to the disclaimer below.
Hi Miles,
You might need to use a span instead of a div and redefine it to be block
level using display: block. I haven't tested this but as far as I can
remember the HTML spec does not allow block level elements inside an anchor
() tag.
Cheers,
Mark Lynch
Development Manager - Business Innovation Online
Ernst & Young - Australia
http://www.eyware.com/
http://www.eyonline.com/
Direct: +612 9248 4038
Fax: +612 9248 4073
Mobile: +61 421 050 695
"Miles Tillinger"
<[EMAIL PROTECTED] To: <[EMAIL PROTECTED]>
onau.edu.au>cc:
Subject: RE: [WSG] Re: Image float
and text wrap [Virus checkedAU]
13/11/2003 11:39 AM
Please respond to
wsg
Thanks, that achieves the effect I'm after,
but
The reason I wanted to do it was because the image and the text both linked
to the same URL with an tag each (in separate cells of a table). I
wanted to combine them so they were both wrapped in the one tag, but
when the tag is wrapped around both div's clicking the image doesn't
open the URL.
So the solution defeats its own purpose :( Any ideas?
-Original Message-
From: James Ellis [mailto:[EMAIL PROTECTED]
Sent: Thursday, November 13, 2003 10:52 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Re: Image float and text wrap
Miles :
Put your text in in a block set its margin-left to x pixels (.eg 170)
should be wider than the image (.eg 160).. The margin will run from
the left of the containing block.
This will work for fixed width images.
Cheers
James
Miles Tillinger wrote:
>Oops, my fingers slipped onto the send shortcut... so, as I was saying:
>
>
> - text text text
> | | text text text
> | | text text text
> | | text text text
> | image| text text text
> | | text text text
> | | text text text
> | | text text text
> - text text text
> text text text
> text text text
> text text text
> text text text
> text text text
> text text text
>
>Can this be achieved without using tables?
>
>Regards,
>
>Miles
>*
>The discussion list for http://webstandardsgroup.org/
>
>
>
>
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
NOTICE - This communication contains information which is confidential and
the copyright of Ernst & Young or a third party.
If you are not the intended recipient of this communication please delete
and destroy all copies and telephone Ernst & Young on 1800 655 717
immediately. If you are the intended recipient of this communication you
should not copy, disclose or distribute this communication without the
authority of Ernst & Young.
Any views expressed in this Communication are those of the individual
sender, except where the sender specifically states them to be the views of
Ernst & Young.
Except as required at law, Ernst & Young does not represent, warrant and/or
guarantee that the integrity of this communication has been maintained nor
that the communication is free of errors, virus, interception or
interference.
Liability limited by the Accountants Scheme, approved under the
Professional Standards Act 1994 (NSW)
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Re: Image float and text wrap [Virus checkedAU]
This email is to be read subject to the disclaimer below.
Miles,
Try using something like Eric Meyer's absolutely positioned image trick:
http://www.meyerweb.com/eric/css/edge/popups/demo.html and
http://www.meyerweb.com/eric/css/edge/popups/demo2.html -- these use
absolute positioning to take a or an image out of the normal
document flow and position it somewhere else. You could use this trick to
move your image to the left of the content and the hover effect should
still work.
HTH,
Vik
--
Viktor Radnai
Web Developer
Business Innovation Online
Ernst & Young Australia
http://www.eyware.com/
http://www.eyonline.com/
Direct: +612 9248 4361
Fax: +612 9248 4073
Mobile: +61408 662 546
"Miles Tillinger"
<[EMAIL PROTECTED] To: <[EMAIL PROTECTED]>
onau.edu.au>cc:
Subject: RE: [WSG] Re: Image float
and text wrap [Virus checkedAU]
13/11/2003 11:39 AM
Please respond to
wsg
Thanks, that achieves the effect I'm after,
but
The reason I wanted to do it was because the image and the text both linked
to the same URL with an tag each (in separate cells of a table). I
wanted to combine them so they were both wrapped in the one tag, but
when the tag is wrapped around both div's clicking the image doesn't
open the URL.
So the solution defeats its own purpose :( Any ideas?
-Original Message-
From: James Ellis [mailto:[EMAIL PROTECTED]
Sent: Thursday, November 13, 2003 10:52 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Re: Image float and text wrap
Miles :
Put your text in in a block set its margin-left to x pixels (.eg 170)
should be wider than the image (.eg 160).. The margin will run from
the left of the containing block.
This will work for fixed width images.
Cheers
James
Miles Tillinger wrote:
>Oops, my fingers slipped onto the send shortcut... so, as I was saying:
>
>
> - text text text
> | | text text text
> | | text text text
> | | text text text
> | image| text text text
> | | text text text
> | | text text text
> | | text text text
> - text text text
> text text text
> text text text
> text text text
> text text text
> text text text
> text text text
>
>Can this be achieved without using tables?
>
>Regards,
>
>Miles
>*
>The discussion list for http://webstandardsgroup.org/
>
>
>
>
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
NOTICE - This communication contains information which is confidential and
the copyright of Ernst & Young or a third party.
If you are not the intended recipient of this communication please delete
and destroy all copies and telephone Ernst & Young on 1800 655 717
immediately. If you are the intended recipient of this communication you
should not copy, disclose or distribute this communication without the
authority of Ernst & Young.
Any views expressed in this Communication are those of the individual
sender, except where the sender specifically states them to be the views of
Ernst & Young.
Except as required at law, Ernst & Young does not represent, warrant and/or
guarantee that the integrity of this commu
[WSG] RE: Image float and text wrap
At 11:09 13/11/2003 +1030, Miles Tillinger wrote:
The reason I wanted to do it was because the image and the text both
linked to the same URL with an tag each (in separate cells of a
table). I wanted to combine them so they were both wrapped in the one
tag, but when the tag is wrapped around both div's clicking the image
doesn't open the URL. So the solution defeats its own purpose :( Any ideas?
Try:
div#megatron {
position: relative;
margin-left: 100px;
}
div#megatron img {
position: absolute;
top: 0;
left: 0;
}
...
All your base are belong ...
>> Irapuan Martinez .>__
http://www.hypergraph.com.br
*
The discussion list for http://webstandardsgroup.org/
*
[WSG] Re: Image float and text wrap
At 10:25 13/11/2003 +1030, Miles Tillinger wrote: I want to have an image with text on the right, but when the text goes beyond the bottom of the image I don't want it wrap, but rather to keep the consistent margin: Try this: (...) All your base are belong ... I don't test the script. Configure this according your necessity ;) >> Irapuan Martinez .>__ http://www.hypergraph.com.br * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Re: Image float and text wrap
Hi Miles, There are several ways of accomplishing this. Here are three different ways I've done: content (multiple block elements) floated right, image floated left. http://www.mxdu.com/ image (accommodates variable width) floated left, content floated left - inline styles. http://www.brendansisson.com/ image floated left, content floated left. http://www.leyland.com.au/ All use "clear" to stop things going whack when there's insufficient content. Cheers, Ben -Original Message----- Subject: [WSG] Re: Image float and text wrap Can this be achieved without using tables? * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Re: Image float and text wrap
Thanks, that achieves the effect I'm after, but The reason I wanted to do it was because the image and the text both linked to the same URL with an tag each (in separate cells of a table). I wanted to combine them so they were both wrapped in the one tag, but when the tag is wrapped around both div's clicking the image doesn't open the URL. So the solution defeats its own purpose :( Any ideas? -Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Thursday, November 13, 2003 10:52 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Re: Image float and text wrap Miles : Put your text in in a block set its margin-left to x pixels (.eg 170) should be wider than the image (.eg 160).. The margin will run from the left of the containing block. This will work for fixed width images. Cheers James Miles Tillinger wrote: >Oops, my fingers slipped onto the send shortcut... so, as I was saying: > > > - text text text > | | text text text > | | text text text > | | text text text > | image| text text text > | | text text text > | | text text text > | | text text text > - text text text > text text text > text text text > text text text > text text text > text text text > text text text > >Can this be achieved without using tables? > >Regards, > >Miles >* >The discussion list for http://webstandardsgroup.org/ > > > > * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Re: Image float and text wrap
Miles : Put your text in in a block set its margin-left to x pixels (.eg 170) should be wider than the image (.eg 160).. The margin will run from the left of the containing block. This will work for fixed width images. Cheers James Miles Tillinger wrote: Oops, my fingers slipped onto the send shortcut... so, as I was saying: - text text text | | text text text | | text text text | | text text text | image| text text text | | text text text | | text text text | | text text text - text text text text text text text text text text text text text text text text text text text text text Can this be achieved without using tables? Regards, Miles * The discussion list for http://webstandardsgroup.org/ * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Re: Image float and text wrap
Use a margin-left on the text that is the size of the image and then float the image to the left? So its like content between here Tim Hill Computer Associates Graphic Artist tel: +612 9937 0792 fax: +612 9937 0546 [EMAIL PROTECTED] -Original Message- From: Miles Tillinger [mailto:[EMAIL PROTECTED] Sent: Thursday, November 13, 2003 10:59 AM To: Web Standards Group (E-mail) Subject: [WSG] Re: Image float and text wrap Oops, my fingers slipped onto the send shortcut... so, as I was saying: - text text text | | text text text | | text text text | | text text text | image| text text text | | text text text | | text text text | | text text text - text text text text text text text text text text text text text text text text text text text text text Can this be achieved without using tables? Regards, Miles * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
[WSG] Re: Image float and text wrap
Oops, my fingers slipped onto the send shortcut... so, as I was saying: - text text text | | text text text | | text text text | | text text text | image| text text text | | text text text | | text text text | | text text text - text text text text text text text text text text text text text text text text text text text text text Can this be achieved without using tables? Regards, Miles * The discussion list for http://webstandardsgroup.org/ *
