www.webdeveloper.com
Results 1 to 5 of 5

Thread: I could've sworn

  1. #1
    Join Date
    Feb 2003
    Location
    Ohio
    Posts
    136

    I could've sworn

    I hit the reply button... Darn it...
    My CSS isn't working right. I want the photos to be on the left and the text to be on the right and below it. Does that make sense? I basically want to text wrap...
    Attached Files Attached Files

  2. #2
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    <p class="this"><img src="img.gif" alt="Image description">This text runs to the right of the image and then wraps below it if its too long. For this you will need to float the image. Provide borders to the image to keep the text clear off the right and bottom edges.</p>

    And your CSS:
    p.this img {float: left; margin: 10px}

    NOTE
    -----
    1. The paragraph will NOT flow to the bottom edge of image if there isn't enough text content. This may be important if you are using a background for p.this.

    2. Use clear:left for the content that follows this paragraph. As before, clear-ing is not required if paragraph flows more than the height of the image.

  3. #3
    Join Date
    Feb 2003
    Location
    Ohio
    Posts
    136
    Thank you for the fast reply. I changed it, but it still isn't working. Am I not putting it in correctly???
    Attached Files Attached Files

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Sgal, there are a bunch of errors in your HTML. First of all, you have the image and text in two table cells. The two table cells will ALWAYS be displayed side-by-side like this:
    Code:
    -------------
    |   |       |
    |   |       |
    |   |       |
    -------------
    This is part of your code: (first table row in your nested table, just below the image map):
    <TD align="left"><A href="www.ohiowholesale.com"><p class="this">
    This is incorrect. You cannot nest <p> a block level element within <a>.

    ... border=0></a></td>
    Note that you had this <p> within a <td> (which I've underlined in previous comment). Adding this </td> automatically ends the paragraph. So technically your paragraph has ended here. Hence it is VERY IMPORTANT to nest your elements correctly.
    <p><b><a>...</b></a></p> is NOT OK
    <p><b><a>...</a></b></p> is OK.

    <tr><td><p>Ohio Wholesale, Inc...
    Note that this is in the adjecant table cell. This will not work as you intend.

    WHAT TO DO?
    ----------------
    Get rid of the nested table. Instead, use the following:
    <p class="this"><img...>Ohio Wholesale, Inc. is known throughout the giftware industry as providing the LOOK, the QUALITY, and the PRICE of great wholesale products. If you haven't already, do yourself (and your customers) a favor by registering with this company.</p>
    <p class="this"><!-- Repeat as many times as desired -->

    What about the CSS?
    p.this img {float: left; margin: 10px}
    p.this {font-size: 10pt; font-family: Georgia,serif; clear: left}

    Notes:
    1. You need to add clear:left to any other <p> that will appear below the <p> with floated image. Else the new para will also be displayed besides the image if the text (of the "original" para) spans height less than image height.
    2. If things don't appear to be spaced enough, add margin-top style.
    3. Using pt for screen medium is a bad idea. It will work for you though. I dont want to add that info in this tread... it'll just get complicated.

  5. #5
    Join Date
    Feb 2003
    Location
    Ohio
    Posts
    136
    Thank you for your speedy reply. I'm going to make those changes, 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