Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ways to expand image with text in it?

    Hi, i've recently been trying to build a website for a friend and it's been going well, minus one thing.
    I have text inside of an image and when I have too much text, the text automatically goes outside of that image. I'd like for the image to stretch with the text so I don't have this problem anymore. Here is an example picture:

    Imageshack hosted Test image

    If I put too much text in the paragraph under "Synopsys" the text just flows right over the image rather than the image getting longer. Is there any way to do this? I'm guessing i'll have to cut the image up into a few divs?

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    yeah, but the image is not telling us how you have built that page.

    We need to see some code. A link would be even better.

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't have that page built yet... i'm building this website from images given to me. I do have a similar page built which i can give as an example:
    members page
    It's not complete and the coding is ugly right now, but hopefully it provides a good enough example. If I expand " Eric Edwards
    President & Co-Founder " to say something with more characters, such as " Eric Edwards, Mike Jones, Manny Para, & others President & Co-Founder & Members" it'll flow out of the image.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by chowyo123 View Post
    I do have a similar page built which i can give as an example:
    members page
    It's not complete and the coding is ugly right now, but hopefully it provides a good enough example. If I expand " Eric Edwards
    President & Co-Founder " to say something with more characters, such as " Eric Edwards, Mike Jones, Manny Para, & others President & Co-Founder & Members" it'll flow out of the image.
    Currently you have one background image to make up the box: http://www.woottracking.com/everchanging/member.png. For now, don't worry about that horizontal rule in the middle. You can implement it as a border on one of the elements inside the box.

    Within CSS 2.1 you can neither stretch a background image nor specify multiple background images for a single element.

    To get what you want you will need extra markup. I'm not really sure what's best, but you have a number of options. One option could be to use three nested divs with one background image in each.
    Code:
    #one {
      background-image: url(sides_and_middle_800x1.png);
      background-repeat: repeat-y;
      width: 800px;
    }
    #two {
      background-image: url(top_800x10.png);
      background-repeat: no-repeat;
      width: 800px;
    }
    #three {
      background-image: url(bottom_800x10.png);
      background-position: bottom;
      background-repeat: no-repeat;
      width: 800px;
    }
    Code:
    <div id="one">
      <div id="two">
        <div id="three">
          [content]
        </div>
      </div>
    </div>
    The approximate image dimensions are indicated in the filename.

  • #5
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sweet man, I was actually trying out something very similar to that, except instead of 3 images I had 4, but 3 works out tons better. Works like a charm on a test page I did. Thanks!


  •  

    Posting Permissions

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