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 7 of 7
  1. #1
    Member
    Join Date
    Jun 2003
    Location
    Madison, WI, USA
    Posts
    30
    Member #
    1590
    Is anybody aware of any tactics to get text to wrap around an image in similar fashion to a "path" in desktop publishing? (In other words, wrap in some manner other than just around the rectangular content box).

    I am thinking, something like using a complex set of coords to define a shape, giving the image itself a lower z-index than everything else, and then having the text display over the image and wrap around the coord-specified shape. (Does any of that make sense?)

    Is any of that possible?
    futureal@rctech.net | R/C Tech

  2.  

  3. #2
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    So you want it to curve? If you want it to curve you can take the image you want it to wrap around.. Cut it up into a few images.. Each one as wide as where the curve is.. So like the first image would be 40 pixels wide.. then 60.. then 80.. then 100 etc.. You would give each image a class like "floatright" .. Add float: right; to the .floatright class, in the stylesheet..

    Then just put text next to it and it should automatically control the look to seem like it's curving around.. If this isn't what you meant, or if this didn't work like I said than just tell me.. I will get the exact code for you..
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  4. #3
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    If I understand correctly, you want something like this?

  5. #4
    Member
    Join Date
    Jun 2003
    Location
    Madison, WI, USA
    Posts
    30
    Member #
    1590
    Yea, that will work nicely, thanks guys.

    However, I tried this method:
    IMG.whatever { float: right; clear: right; }

    And it works in IE, but not in Mozilla. The text flows over the images in Mozilla.

    You can see what I was trying to create here: http://www.rctech.net/reviews/review...futureal.shtml

    I will mess around with it a bit and see if I can figure out what I'm doing wrong.
    futureal@rctech.net | R/C Tech

  6. #5
    Member
    Join Date
    Jun 2003
    Location
    Madison, WI, USA
    Posts
    30
    Member #
    1590
    Actually, the behavior is just downright weird for me in Firefox right now.

    When I load the page the first time, the text is overlaid over the image, but if I do a refresh (F5) it fixes itself. If I do a Ctrl-F5 refresh (which, to my knowledge, bypasses the cache and pulls straight from the server) it goes back to being messed up.

    Any ideas what that could be?
    futureal@rctech.net | R/C Tech

  7. #6
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Text wrap tutorial using CSS.
    http://www.bigbaer.com/css_tutorials....text.wrap.htm

    (I've never actually used it so you'll have to post up how successful it is if you use it.)

  8. #7
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com


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
  •  

Search tags for this page

css word wrap around map

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com