Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > img overflowed by text

Reply
Thread Tools

img overflowed by text

 
 
Rafal 'Raf256' Maj
Guest
Posts: n/a
 
      11-19-2003

Hi,
I want to have an image, overflowed by text (using XHTML,CSS) problem is
that when I use align="left", then the image was breaking out of <div> in
with it was (div is a border). AsciiArt example of what I want to achive :


1) I have a text in <div style="border: 1px">

---div------div------div----
| 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 |
---div------div------div----


2) Then I add an image to begin of it :

---div------div------div----
| ***** |
| *img* |
| ***** text text text text |
| text text text text text |
| text text text text text |
---div------div------div----


3) Then I add align="left" so that text will be all over image:

---div------div------div----
| ***** text text text text |
| *img* text text text text |
| ***** text text text text |
| text text text text text |
| text text text text text |
---div------div------div----

4) Problem is, that, when image is too long (height) then it's breaking out
of <div>, instead of making <div> longer (higher) - at leaste under Mozilla
1.5 the result looks like :

---div------div------div----
| ***** text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
--* *-----div------div----
* *
*****

5) when what I want to have is :

---div------div------div----
| ***** text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * |
| * * |
| * * |
--*****-----div------div----




--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
GG-1175498 ____| ]____,
Rafal 'Raf256' Maj X-( * )
Rafal(at)Raf256(dot)com ,"----------"
 
Reply With Quote
 
 
 
 
William Tasso
Guest
Posts: n/a
 
      11-19-2003
Rafal 'Raf256' Maj wrote:
> I want to have an image, overflowed by text (using XHTML,CSS)
> ...


Have you considered CSS background-image:

--
William Tasso - http://WilliamTasso.com


 
Reply With Quote
 
 
 
 
Rafal 'Raf256' Maj
Guest
Posts: n/a
 
      11-19-2003
http://www.velocityreviews.com/forums/(E-Mail Removed) news:bpelfg$1n6uvb$(E-Mail Removed)-berlin.de

> Have you considered CSS background-image:


Make an <div> with defined width and height and background image? It has
few disadvantages (no alt, no title, no easy download, no image google
indexing)... but maybe its a good workaround for now... how can I make an
text floating around <div> ?

222222222222222222222222222
211111 text text text text2
21 1 text text text text2
21img1 text text text text2
21 1 text text text text2
211111 text text text text2
222222222222222222222222222

1 - div #1
2 - div #2

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
GG-1175498 ____| ]____,
Rafal 'Raf256' Maj X-( * )
Rafal(at)Raf256(dot)com ,"----------"
 
Reply With Quote
 
Rafal 'Raf256' Maj
Guest
Posts: n/a
 
      11-19-2003
(E-Mail Removed) news:Xns943827E5E5E38raf256com@213.180.128.20

> how can
> I make an text floating around <div> ?


better example of what I ment:

2222222222222222222222222222
211111 text text text text 2
21 1 text text text text 2
21img1 text text text text 2
21 1 text text text text 2
211111 text text text text 2
2 text text text text text 2
2 text text text text text 2
2 text text text text text 2
2 text text text text text 2
2222222222222222222222222222



--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
GG-1175498 ____| ]____,
Rafal 'Raf256' Maj X-( * )
Rafal(at)Raf256(dot)com ,"----------"
 
Reply With Quote
 
Eric Bohlman
Guest
Posts: n/a
 
      11-19-2003
"Rafal 'Raf256' Maj" <(E-Mail Removed)> wrote in
news:Xns943825DFB6AB7raf256com@213.180.128.20:

>
> Hi,
> I want to have an image, overflowed by text (using XHTML,CSS) problem
> is that when I use align="left", then the image was breaking out of
> <div> in with it was (div is a border). AsciiArt example of what I
> want to achive :
>
>
> 1) I have a text in <div style="border: 1px">
>
> ---div------div------div----
>| 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 |
> ---div------div------div----
>
>
> 2) Then I add an image to begin of it :
>
> ---div------div------div----
>| ***** |
>| *img* |
>| ***** text text text text |
>| text text text text text |
>| text text text text text |
> ---div------div------div----
>
>
> 3) Then I add align="left" so that text will be all over image:
>
> ---div------div------div----
>| ***** text text text text |
>| *img* text text text text |
>| ***** text text text text |
>| text text text text text |
>| text text text text text |
> ---div------div------div----


You actually want to give the image a "float:left" property in your CSS,
rather than using the deprecated "align" attribute in your HTML.

>
> 4) Problem is, that, when image is too long (height) then it's
> breaking out of <div>, instead of making <div> longer (higher) - at
> leaste under Mozilla 1.5 the result looks like :
>
> ---div------div------div----
>| ***** text text text text |
>| * * text text text text |
>| * * text text text text |
>| * * text text text text |
>| * * text text text text |
> --* *-----div------div----
> * *
> *****


Yes, by default a floated element can break out of its container. This is
actually desirable in most cases, just not in yours (think of an image
inset into the first of several paragraphs. If it couldn't break out of
the first paragraph, the subsequent paragraphs couldn't flow around it.

>
> 5) when what I want to have is :
>
> ---div------div------div----
>| ***** text text text text |
>| * * text text text text |
>| * * text text text text |
>| * * text text text text |
>| * * text text text text |
>| * * |
>| * * |
>| * * |
> --*****-----div------div----


You accomplish this by making the last element of your <div> be a block
element (typically a <div> that contains nothing but a non-breaking-space)
which has the "clear:left" CSS property set. That forces the <div> to be
tall enough to contain the image.
 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      11-19-2003
On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <(E-Mail Removed)> wrote:

: 4) Problem is, that, when image is too long (height) then it's breaking out
: of <div>, instead of making <div> longer (higher) - at leaste under Mozilla
: 1.5 the result looks like :
:
: ---div------div------div----
: | ***** text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: --* *-----div------div----
: * *
: *****
:
: 5) when what I want to have is :
:
: ---div------div------div----
: | ***** text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * |
: | * * |
: | * * |
: --*****-----div------div----
:


At the end of your text, state
<br clear="all">

Sid

 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-19-2003

"Sid Ismail" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <(E-Mail Removed)> wrote:


> At the end of your text, state
> <br clear="all">


Deprecated Sid Did you mean <br style="clear: both;"> ?

Cheers
Richard.


 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      11-19-2003
On Wed, 19 Nov 2003 10:26:04 GMT, "rf" <(E-Mail Removed)> wrote:

: "Sid Ismail" <(E-Mail Removed)> wrote in message
: news:(E-Mail Removed)...
: > On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <(E-Mail Removed)> wrote:
:
: > At the end of your text, state
: > <br clear="all">
:
: Deprecated Sid Did you mean <br style="clear: both;"> ?


Align=left is also deprecated. He either uses that BR in a deprecated
environment (as a quick fix) or changes to float:left in CSS, then to use
the CSS equivalent.

Sid

 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-19-2003

"Sid Ismail" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...
> On Wed, 19 Nov 2003 10:26:04 GMT, "rf" <(E-Mail Removed)> wrote:
>
> : "Sid Ismail" <(E-Mail Removed)> wrote in message
> : news:(E-Mail Removed)...
> : > On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <(E-Mail Removed)>

wrote:
> :
> : > At the end of your text, state
> : > <br clear="all">
> :
> : Deprecated Sid Did you mean <br style="clear: both;"> ?
>
>
> Align=left is also deprecated. He either uses that BR in a deprecated
> environment (as a quick fix) or changes to float:left in CSS, then to use
> the CSS equivalent.


Sorry Sid. Didn't spot that in the OP (seems to be using some sort of
encoding that makes the text miniscule in my newsreader). You are correct,
as I always expect

Cheers
Richard.


 
Reply With Quote
 
Bertilo Wennergren
Guest
Posts: n/a
 
      11-19-2003
Rafal 'Raf256' Maj wrote:

> Make an <div> with defined width and height and background image? It has
> few disadvantages (no alt, no title, no easy download, no image google
> indexing)... but maybe its a good workaround for now... how can I make an
> text floating around <div> ?


The main disadvantage is much worse: The "div" contains text, so you can
never know what "width" and "height" is necessary for the text.

> 222222222222222222222222222
> 211111 text text text text2
> 21 1 text text text text2
> 21img1 text text text text2
> 21 1 text text text text2
> 211111 text text text text2
> 222222222222222222222222222


Some people will see that with another font, or with another font size
(perhaps much larger), or both. And the text might spill out of the "div".

--
Bertilo Wennergren <(E-Mail Removed)> <http://www.bertilow.com>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
why dosent buffer gets overflowed raashid bhatt C Programming 11 08-26-2008 04:06 AM
ASP.NET "XSL processor stack has overflowed." Prabu ASP .Net 1 03-05-2007 08:23 AM
Detecting line wrap and adding "..." to overflowed words Jason HTML 3 10-14-2006 11:11 AM
Detecting line wrap and adding "..." to overflowed words Jason Javascript 5 10-13-2006 09:44 PM
how to download img from html img tag news.austin.rr.com ASP .Net 2 04-27-2005 06:25 PM



Advertisments