Lining Text With Images

coastercraverjim · #1 (**permalink**) Jan 4th, 2006, 00:02

Hey, I'm new here and to the codes. I've been working with it for about a month now so sorry in advance for my noobishness.

As you can see in the picture, there are quite a few things wrong with the page disregarding visual appeal. First off, the area that says "Voyage" is shifted down a few lines. Also, with the photos on the right, the photos line up like I want them too, but the text doesn't. I want the text to wrap around the image, not the vertical divider. What code can fix these problems?

Code: Select all

<html>
 <head>
  <style type="text/css">
   A:link {text-decoration: none; color:FFFFFF}
   A:visited {text-decoration: none; color:FFFFFF} 
   A:hover {text-decoration: none; color:CCCCCC}
  </style>
  <title>Coaster Cravers ::Home::</title>
  </style>
  <title>Coaster Cravers ::Home::</title>
  <style type="text/css">
  <!--
    p {
      text-indent: 2.0em;
    }
  -->
  </style>
 </head>
  <body bgcolor="333333" text="FFFFFF">
   
   <center><table border="1" width="85%" bgcolor="000033">
    <tr>
     <td><font face="eurostile" size="1">

  <br>

   <center><table border="1" bgcolor="660000">
    <tr>
     <td><img src="http://img399.imageshack.us/img399/9852/ccsitebanner9dp.jpg">
     </td>
    </tr>
    <tr>
     <td><center><font face="eurostile"><a href="cc-home.html">Home</a> | <a href="cc-database.html">Database</a> | <a href="cc-forum.html">Forums 
      </a> | <a href="cc-magazine.html">Magazine</a> | <a href="cc-photogallery.html">Photo Gallery</a> | <a href="cc-povvideos.html">POV Videos</a> |
      <a href="cc-musicvideos.html">Music Videos</a></font></center>
     </td>
    </tr>
   </table>
   </center>
 
   <br>
    
   <table align="right" vspace="10" hspace="20" border="1" width="79%" bgcolor="660000">
    <tr>
     <td>
      <table valign="top" align="left" hspace="15" vspace="10" border="1" width="95%" bgcolor="000033">
       <tr>
        <td>
         <center><font face="eurostile" size="5">Voyage</font></center><br>
         <img border="0" hspace="5" vspace="1" width="183" height="114" align="left" 
          src="http://www.negative-g.com/HolidayWorld/HW2006/Construction/12-31-2005/HW-12-31-2005-Voyage-3.jpg">
          <p><font face="times new roman" size="3">Not much work has been done over Christmas but progress was still visible. The third hill received 
           bundles of wood that will eventually become track and the final hill, of the coaster, coming out of the 7th tunnel was built. After this 
           hill, you will dive into the 8th and final tunnel. The final brake run is also rising from the ground. The coaster opens May 6th.</p></font>
        <hr width="95%">
         <center><font face="eurostile" size="5">Goliath</font></center><br>
         <img border="0" hspace="5" vspace="1" width="262" height="104" align="left" src="http://sfog.parktrips.com/december_photos/dec162005_2.jpg">
         <p><font face="times new roman" size="3">Six Flags Over Georgia's B&M hyper coaster has been topped along with several other sections rising. 
          The turn after the first drop has been completed along with the 2nd hill. The 3rd hill has the pull-up finished but not the drop down. The 
          valley between the 2nd and 3rd hill is over water and in need of about 5 sections to be complete. After the 3rd hill is a hill up into a 270*
          helix.</p></font>
        <hr width="95%">
         <center><font face="eurostile" size="5">Patriot</font></center><br>
         <img border="0" hspace="5" vspace="1" width="181" height="137" align="left" src="http://www.johnnyupsidedown.com/new06/pa60a.jpg">   
         <p><font face="times new roman" size="3">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 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 text text text text text text text text text
           text text text text</p></font>
        </td>
        <td bgcolor="660000" width="2"></td>
        <td>
         <center><font face="eurostile" size="5">Tatsu</font></center><br>
         <img border="0" hspace="5" vspace="1" width="184" height="138" align="right" src="http://www.themeparkreview.com/sfmmnew06/sfmm1221_01.jpg">   
         <p><font face="times new roman" size="3">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 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 text text text text text text text text text
           text text text text</p></font>
        <hr width="95%">
         <center><font face="eurostile" size="5">El Toro</font></center><br>
         <img border="0" hspace="5" vspace="1" width="177" height="133" align="right" 
          src="http://www.coastersims.com/files/norestraint/155/STA70026.JPG">   
         <p><font face="times new roman" size="3">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 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 text text text text text text text text text
           text text text text</p></font>
        <hr width="95%">
         <center><font face="eurostile" size="5">Black Mamba</font></center><br>
         <img border="0" hspace="10" vspace="10" width="178" height="133" align="right" 
          src="http://members.lycos.nl/pjotr/Fotos/Jeroen/phland/051224PhBM10.JPG">   
         <p><font face="times new roman" size="3">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 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 text text text text text text text text text
           text text text text</p></font>
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>

   <table hspace="18" vspace="10" border="1" width="15%" bgcolor="660000">
    <tr>
     <td>
      <img width="150" height="50" src="http://img244.imageshack.us/img244/4006/coastersheader4vi.jpg">
      <a href="cc-database.html">Database</a>
      <br>
      <a href="cc-construction.html">Construction</a>
      <br>
      <a href="cc-announcements.html">Announcements</a>
      <br>
      <a href="cc-market.html">Market</a>
      <br>
      <a href="cc-terminology.html">Terminology</a>
      <br>
      <a href="cc-element1.html">Elements</a>
     </td>
    </tr>
   </table>

   <table hspace="18" vspace="10" border="1" width="15%" bgcolor="660000">
    <tr>
     <td>
      <img width="150" height="50" src="http://img404.imageshack.us/img404/9731/communityheader0db.jpg">
      <a href="cc-forum.html">Forum</a>
      <br>
      <a href="cc-reviews.html">Reviews</a>
      <br>
      <a href="cc-polls.html">Polls</a>
      <br>
      <a href="cc-top10.html">Top 10</a>
      <br>
      <a href="cc-nlcontest.html">NL Contest</a>
      <br>
      <a href="cc-photocontest.html">Photo Contest</a>
     </td>
    </tr>
   </table>
 
   <table hspace="18" vspace="10" border="1" width="15%" bgcolor="660000">
    <tr>
     <td>
      <img width="150" height="50" src="http://img404.imageshack.us/img404/7719/multimediaheader6qe.jpg">
      <a href="cc-photogallery.html">Photo Gallery</a>
      <br>
      <a href="cc-povvideos.html">POV Videos</a>
      <br>
      <a href="cc-musicvideos.html">Music Videos</a>
      <br>
      <a href="cc-magazine.html">Magazine</a>
      <br>
      <a href="cc-wallpapers.html">Wallpapers</a>
     </td>
    </tr>
   </table>

   <table hspace="18" vspace="10" border="1" width="15%" bgcolor="660000">
    <tr>
     <td>
      <img width="150" height="50" src="http://img431.imageshack.us/img431/5720/randomimageheader0ot.jpg">
     </td>
    </tr>
   </table>
   </table>
      <font size="2" align="center">Content &copy Coaster Cravers 2006.</font><br>
      <font size="2" align="center">Our site is not in any way endorsed by Six Flags, Cedar Fair, the Walt Disney
      Company, Universal Studios, Paramount Parks, Busch Entertainment, or any other theme park company.</font><br>
      <font size="2" align="center">Please remember, this site is still and always under construction.</font>
 </body>
</html>

benbramz · #2 (**permalink**) Jan 4th, 2006, 00:18

are you on about your site? as we have no link to see...

lol

coastercraverjim · #3 (**permalink**) Jan 4th, 2006, 00:22

Haha, well I don't have hosting yet. I figured it would be best to get hosting after its built instead of spending money on nothing.

benbramz · #4 (**permalink**) Jan 4th, 2006, 00:23

lol test on free hosting, allways works

if not a url maybe a screenshot?

coastercraverjim · #5 (**permalink**) Jan 4th, 2006, 00:26

Well the screenshot is there for me in the first post. I'm on Firefox so I don't know if that would affect anything.

For the best of both worlds, www.geocities.com/coastercraverjim

Though you can't really make out the text, you can see the problems still.

jpmitchell · #6 (**permalink**) Jan 4th, 2006, 23:43

Looks like you fixed these problems.. Let us know if you need anything else.

Keep up the good work.

coastercraverjim · #7 (**permalink**) Jan 5th, 2006, 00:16

Haha, well I actually didn't. The top left box is still shifted down and the text with the pictures on the right isn't lined up right next to it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
The Best way to display Images and text	thewebkid	Website Planning	7	Nov 19th, 2007 13:56
Text over images	Aaron1988	Web Page Design	5	Mar 25th, 2007 23:12
Lining Up	csa	Web Page Design	4	Mar 9th, 2006 16:30
Two columns of text next to images	csa	Web Page Design	6	Nov 27th, 2005 17:21
Images behind text	therussian	Flash & Multimedia Forum	2	Aug 21st, 2003 15:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Lining Text With Images