Professional Web Applications Themes

Text Wrap with CSS and DIVs - Macromedia Dynamic HTML

I am working on this site at work for one of our clients. The problem lies within the bottom area where the architectural images are placed. That entire area is one graphic placed into the cell using CSS. I tried to format the text within this same style but it was pushing the height of the cell down. I then placed the text in a div tag and formatted it with CSS. This worked out fine. Here are my issues: 1- I need the text to clear the left side of the architectural images. Is there a way to do ...

Sponsored Links
  1. #1

    Default Text Wrap with CSS and DIVs

    I am working on this site at work for one of our clients. The problem lies
    within the bottom area where the architectural images are placed. That entire
    area is one graphic placed into the cell using CSS. I tried to format the text
    within this same style but it was pushing the height of the cell down. I then
    placed the text in a div tag and formatted it with CSS. This worked out fine.

    Here are my issues:
    1- I need the text to clear the left side of the architectural images. Is
    there a way to do this within Dreamweaver?

    2- If someone were to bump up the text size (with a Mac you can do this within
    your web browser when you push Apple +) it flows outside of the div tag box. Is
    it possible to fix or lock the size of the div so that it doesn't expand in
    height or width and tell the overflow to pop in a scroll bar only when
    necessary?

    Here is the link to the page. Hopefully everything I said made sense. I'm
    still kinda new to all of this.

    http://glenmoregardenvillas.com/test/aboutus.html

    Sponsored Links
    pixelchick80 Guest

  2. #2

    Default Re: Text Wrap with CSS and DIVs

    Change the width of the class .text to - width: 380px. It isn't only Mac
    [Q]If someone were to bump up the text size (with a Mac you can do this within
    your web browser when you push Apple +) it flows outside of the div tag box. Is
    it possible to fix or lock the size of the div so that it doesn't expand in
    height or width and tell the overflow to pop in a scroll bar only when
    necessary?[/Q]

    First, anyone using any modern browser (Mac or Windows) other than IE can
    alter the browser text size - you may as well accommodate everyone, including
    IE .
    You should not FORCE people to use one text size on their browser ...it is
    considered rude for people with visual impairments who set their browser text
    larger. It is the web coder's job to try to accommodate as many visitors as
    possible - including those with disabilities.
    Try these changes - we set the body font-size to 75%. Then use 1em for the
    text size. To make the text size slightly larger, just adjust the em size -
    1.1em or 1.2em or smaller .95em or .9em or .85em this gives you near absolute
    control over the "BASE" font size for that class or ID (div).

    Next I made the margin using short hand, instead of margin-left, margin-right,
    etc. For short cut, margin and padding is always in the order - top, right,
    bottom, left and you don't need to specify 0px - just 0 is fine.

    Put these changes in you css and see how it looks. And while viewing In IE
    play with the browser text size adjustment, go to - view, text size, larger:

    .text {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1em;
    line-height: 130%;
    color: #555;
    width: 380px;
    margin: 10px 0 0 15px;
    display: block;
    }
    body {
    background-color: #5D4F3C;
    font-size:75%
    }

    There are a few very easy techniques to make the graphic "flexible", as well,
    by chopping it into three smaller graphics - logo, left-photos and footer,

    With a few quick commands in css, they can be positioned to always be where
    you want each section no matter how wide or long the page gets.






    DaveBlues Guest

  3. #3

    Default Re: Text Wrap with CSS and DIVs

    I knew that you could enlarge the text on a PC as well. I just wanted to make
    sure that what I was saying was making sense. I am aware of legibility issues
    when it comes to visual impairments. That's why I want to correct the problem.

    I used your suggestions, but the div that holds the text is still increasing
    in height when I enlarge the test in the browser. It keeps pushing the bottom
    of the table down and the text then overlaps "The Developers" and the logos at
    the bottom. Is there a way to keep it from doing this by adding a scroll bar
    that will only pop up if the text is enlarged? Is it possible to set a fixed
    size to the div that will not alter in the browser? Or am I going about this
    all wrong?

    Here is a new link:
    http://glenmoregardenvillas.com/test/aboutus.html

    Thanks for your help with this. I really appreciate it.

    pixelchick80 Guest

  4. #4

    Default Re: Text Wrap with CSS and DIVs

    Good. Splitting the graphic is the key to your "elastic" layout (by "elastic" I
    mean allowing text to be resized without breaking fixed containers, as opposed
    to all "liquid" layout - text and containers).

    But you have to split ALL graphics and use them individually.

    To show what I mean, I just slapped this together quickly with photoshop and
    DW 8 (hand coded, though - DW 8 doesn't have the css tricks here).

    http://www.bluesmandeluxe.com/dbrimlow/tests/glenmore/test.html

    This is 100% table-less, fully elastic (worked in IE's "Larget" setting,
    jscript free, cross browser, web standards, disabilities accessible compliant
    and search engine friendly semantic markup. (I wish I could get my own web
    pages so together)

    You could remove every graphic and the site would still be easy to understand
    and follow. People who are blind and use voice readers can easily surf the
    page, people who can't use a mouse or have to use a keyboard can follow the
    navigation.

    The only thing I didn't do was create little 2px wide, 20px high graphics for
    the navbar list items to emulate, but optimize the bulky buttons you used (I
    just used background color and borders instead).

    In FF click on view/page source to see the code. right click over a graphic
    and select view background image to see how I split the images.


    DaveBlues Guest

  5. #5

    Default Re: Text Wrap with CSS and DIVs

    Thanks for showing me that. I am still learning about web design. I know just
    enough to be dangerous! I have a lot to learn still.

    I have actually gotten all of the pages set up with html text and everything
    is working great except one thing, which I have submitted in a new post. I
    don't know if you could help with this one:

    I have drop down menus created in Dreamweaver on every page of the site. The
    home page features an swf video. The features and floorplans drop down menus
    will not work when they fall over this video. This only happens in IE (version
    6) They work on every other page. Any suggestions?

    Here's the link.
    http://glenmoregardenvillas.com/test/index2.html

    After I'm done with this site, I'm hoping that I can get further into building
    sites strictly with CSS.

    Thanks again for all of your help.

    pixelchick80 Guest

  6. #6

    Default Re: Text Wrap with CSS and DIVs

    I fixed it.

    Thanks again for your help with the other stuff.



    pixelchick80 Guest

Similar Threads

  1. Text wrap adding a ghost Wrap???
    By barbarapress@adobeforums.com in forum Adobe Indesign Macintosh
    Replies: 7
    Last Post: July 6th, 09:24 PM
  2. Text wrap in CS
    By grfx303@adobeforums.com in forum Adobe Illustrator Windows
    Replies: 1
    Last Post: April 13th, 09:06 AM
  3. Text Wrap around an image pasted into a text box
    By Jerry_Mayeroff@adobeforums.com in forum Adobe Indesign Windows
    Replies: 0
    Last Post: April 1st, 05:42 PM
  4. Text::Wrap::wrap difference
    By Art in forum PERL Miscellaneous
    Replies: 2
    Last Post: September 25th, 06:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139