HTML: Stop text appearing under image

For everything that's not in any way related to PureBasic. General chat etc...
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

HTML: Stop text appearing under image

Post by BarryG »

Hi, got an off-topic HTML question. See this image below (not mine)... how can I make the text NOT wrap and appear under it, but just continue flowing down in one column like in the "After" image? Just using basic HTML please, as the HTML file will become a CHM file later, which I don't think supports CSS? Anyway, here's the code that I'm currently using to do it:

Code: Select all

<img src="image.png" style="vertical-align:middle"></img> This is a heading [...] text text text text text text text [...] 
Image
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: HTML: Stop text appearing under image

Post by infratec »

A bit oldschool:

Code: Select all

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td valign="top">
     <img src="flare.png">
    </td>    
    <td>
     <table  cellspacing="0" cellpadding="0" width="200">
      <tr>
       <td bgcolor="D6D0C2">
        <h3>This is a heading</h3>
       </td>
      </tr>
      <tr>
       <td bgcolor="C2D4D4">
      fiwjfiowfoiwfiohwofhoh foiwehfoiwe
      wfjwjefjwiojfoiwjfiowjj wfef
      fwjowfjwoejfiwjfoiwfoiww jw3ölgköwrg
      wjgögfwljkle jfljwelf kjwlkj flkwefj
      wfjwfjlwjeflkwejflkjwlf jlkwjeflkw jeergergergegergergereg
      wfkwjfwejflkwejklfjwlefj klwef
      wlefjklwjeflwjeflkj welkfjwjflkf
      wkelfjlwjfklwejwlkjf lkwejflwefj
      weflköwekföwejflwefjl kwejflkwejflkwjef
      lwejflkwejflkwejflkwej flkwejfklwjef
      lwejfljweflkjwefljwelkf jwlefjwlk
      lewnlnfwlenwnwfnwjfe nwjkfjf
      elrkjgnergioe
      öegrjejglkejg
      elgjjheiogoeigghog3hoh3o4gh
      erlgjejgojgjierjgegjoigej     
     </td>
      </tr>
      </table>
    </td>
   </tr>
  </table>
 </body>
</html>
The picture is from PB examples.

With styles:

Code: Select all

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <table border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td style="vertical-align:top;">
     <img src="flare.png">
    </td>    
    <td style="vertical-align:top;width:200px;">
     <h3 style="background-color:#D6D0C2;width:180px;margin:0;">This is a heading</h3>
     <p style="background-color:#C2D4D4;max-wdth:200px;">
      fiwjfiowfoiwfiohwofhoh foiwehfoiwe
      wfjwjefjwiojfoiwjfiowjj wfef
      fwjowfjwoejfiwjfoiwfoiww jw3ölgköwrg
      wjgögfwljkle jfljwelf kjwlkj flkwefj
      wfjwfjlwjeflkwejflkjwlf jlkwjeflkw jeergergergegergergereg
      wfkwjfwejflkwejklfjwlefj klwef
      wlefjklwjeflwjeflkj welkfjwjflkf
      wkelfjlwjfklwejwlkjf lkwejflwefj
      weflköwekföwejflwefjl kwejflkwejflkwjef
      lwejflkwejflkwejflkwej flkwejfklwjef
      lwejfljweflkjwefljwelkf jwlefjwlk
      lewnlnfwlenwnwfnwjfe nwjkfjf
      elrkjgnergioe
      öegrjejglkejg
      elgjjheiogoeigghog3hoh3o4gh
      erlgjejgojgjierjgegjoigej     
     </p>
    </td>
   </tr>
  </table>
 </body>
</html>
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: HTML: Stop text appearing under image

Post by BarryG »

Thanks, infratec. I'll give that a go. It'll be a bit inconvenient, though, because I have a lot of lines that need it. My actual code is more like this:

Code: Select all

<img src="image01.png" style="vertical-align:middle"></img> 01's text text text text text text text [...] <br>
<img src="image02.png" style="vertical-align:middle"></img> 02's text text text text text text text [...] <br>
<img src="image03.png" style="vertical-align:middle"></img> 03's text text text text text text text [...] <br>
[...]
As you can see, I'm doing a list with custom images for the bullet points. Looks like tables is the way to go, but I could've sworn I once knew a way to do it simply as part of the <img> tag with an alignment setting for it. Google isn't showing me the answer, though.
PeDe
Enthusiast
Enthusiast
Posts: 119
Joined: Sun Nov 26, 2017 3:13 pm
Location: Vienna
Contact:

Re: HTML: Stop text appearing under image

Post by PeDe »

You can use StyleSheets and DIVs for example. I use an old software from 2003, 'Help & Manual v3' for my help file. There are examples with StyleSheets and also JavaScript. I use both and it works without problems.

Peter
Post Reply