Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Aug 2004
    Location
    Norway
    Posts
    47
    Member #
    7333
    I have taken my first daring steps into the new world of CSS however, Ive faced a problem:

    I want to insert small boxes (fact boxes etc.) in the text in a way that the text wraps around them. What Ive done so far is that I have inserted the text, applied my css style (external) to the text, and then inserted the boxes using Dreamweaver 'Insert table'-tool. What happens is that the text next to the box moves to the right. Is there a way to wrap the text thus stay in aligning accordance with the rest of the text?

    If you go to this link, you will see my problem.
    http://www.relocationenterprises.com/testingfile.htm

    Im using Dreamweaver.

    Thanks for any help!

  2.  

  3. #2
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Well first of all it appears to be an IE only issue, (explains why it took me/many others so long to realise what your problem was.)

    The method you're currently using is some what abusing tables. Table nesting really slows down a page, but anyway...

    I've sort of managed a short-term messy solution that will make things look okay in IE, but it doesn't appear to work in many other browsers, it depends how compatible you want the site to be?

    On your first pair of <td></td> tags that contain the content/paragraphs define a width, this will ensure the text wraps and doesn't create the uneven edge.

    ie. ...<td valign="top" width="535">...

    Next replace:

    Code:
          <table width="10%" border="0" align="left" cellpadding="0" cellspacing="1" bgcolor="#996666">
            <tr> 
              <td><div align="center"><strong>FACT BOX</strong></div></td>
            </tr>
          </table>
    With:

    Code:
    <div style="text-transform: uppercase; font-weight: bold; float: left; text-align: center; background: darkred;">Fact Box</div>
    ...but instead of placing it in the same place as the previous table, nest it just inside the paragraph. You should adjust colour, size etc to what you require.

    Code:
    ...</tbody>
              </table>
            </div></td>
        </tr>
        <tr> 
          <td valign=top width="535"><!-- instancebegineditable name="text" --> 
            <p class=intri>the history of this country goes back to the imperial regions 
              of kanem and borno, located on the north of the shores of lake chad. 
              at their height around 10 ad, the wealth of these regions was founded 
              on their control of the trans-saharan trade routes. in the 15th century 
              slave trading was introduced along with the entrance of various european 
              nations. at the end of the 19th century, nigeria was invaded and put 
              under british rule until after the second world war. </p>
    
            <p class=text align=justify><div style="text-transform: uppercase; height: 50px; font-weight: bold; float: left; text-align: center; background: darkred;">fact box</div><font 
          face="verdana, arial, helvetica, sans-serif" size=1>since its full independence 
              in 1960, the country has seen numerous governments take office. concerned 
              that ethnic and religious differences within nigeria could split the 
              country apart, the military has always played an important role in maintaining 
              a sense of stability and consistency. </font></p>...
    As I already said the downside is that it only works in Internet Explorer.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com