www.webdeveloper.com
Results 1 to 3 of 3

Thread: Placing images and wrapping text

  1. #1
    Join Date
    Jun 2005
    Posts
    2

    Question Placing images and wrapping text

    ABSOLUTE beginner with CSS positioning. Using an external style sheet.
    I have managed absolute positioning of images to make a line of buttons down the side of a site, with body text and a text margin set to keep body text away from the buttons.
    But this is what foxes me.
    I am tryng to create classes for an external style sheet that will allow me to put images into some body text, with the text wrapping around the image either to the left or to the right, and without missing any lines from top to bottom of the image.

    I have created the classes
    img.left
    { border: 0px solid ;
    padding: 2px;
    height: auto;
    width: auto;
    float:left;}

    img.right
    { border: 0px solid ;
    padding: 2px;
    height: auto;
    width: auto;
    float:right;}

    img.both
    { border: 0px solid ;
    padding: 2px;
    height: auto;
    width: auto;
    float:both;}

    and html like this:

    body text here<img class="right" alt="description"
    title="description" src="path/image.gif">body text continuing here.

    the right and left classes wrap properly all down one side of the image with the image on one side of the page or the other - but the "both" class puts the image in the middle of the page horizontally but the text line above the image is continuous, and then there is a gap for the height of the image and only the line at the bottom of the image wraps both sides, leaving clear space between the lines of text at the top of the image and the bottom.(IE and Firefox)

    Can anyone give me a way of writing the CSS class that will complete my trio of left, right, and both sides text wrapped images? Many thanks.

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,176
    "Both" is not a valid value for the float attribute. Only "left", "right", or "none" are valid (along with "inherit"). http://www.w3.org/TR/CSS21/visuren.html#propdef-float
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Jun 2005
    Posts
    2
    thanks. I see now I misread my crib sheet - both is a value for Clear.
    But - is it possible to use css to position an image in the middle of a body of text and get the text to wrap both sides properly?
    Many thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles