/    Sign up×
Community /Pin to ProfileBookmark

Spanning 1 Pixel Wide Or 1 Pixel Tall Graphic Dynamically – Images Around A Text Area

Copy linkTweet thisAlerts:
Dec 18.2014

I want to design a forum for my website. I’m pretty good with PHP, and just Okay with CSS. I haven’t been using CSS for long.

I want to make comic book style balloons for the forum where the point of the balloon will point to the avatar that is posting.

I get that each post will be a table that has five columns and three rows.

First column will have the avatar and a fixed with.

Second column will be blank except one row will hold the png image of the balloon point that points to the avatar.

Third column will have a rounded upper left corner of the balloon and the bottom left rounded corner of the balloon (png image) and the left side image*.

The Fourth column will have the top image of the balloon, the text entry area and the bottom image of the balloon.

And lastly the Fifth column will have the upper right corner of the balloon and the bottom right rounded corner of the balloon and the right side image*.

The side images above that I marked with asterisks have to dynamically change size if the text area grows greater than the default height. I might have the default be 5 rows of text. I am pretty sure that since different browsers use different widths that I want to do most of my widths and heights in percentages therefore the top and bottom graphics will need to be dynamic as well.

I think there is a way to draw these graphics as 1 pixel in height or 1 pixel in width and using CSS tell them to dynamically change but I do not know the code for this. This is my question. Can you please post an example of the code for this?

I know it’s probably very simple and I get the whole concept, just need the snippet for the sides, top and bottom images and I can get the rest.

Thank you very much.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulDec 18.2014 — I'm not sure what you mean when you talk about graphics being drawn 1 pixel high or wide? Anyway, there is a better solution that does not rely on splitting your graphic of the balloon into separate pieces: [url=http://www.w3schools.com/cssref/pr_background-image.asp]css background image[/url]. So instead of having 8 images around the text area, use:

  • - One div to enclose the whole speech bubble, with the image of a bubble in the background.


  • - Set the margins of the div to reduce the text area to be inside the bubble.


    • E.g.

    [code=html]
    <style>
    .speech {
    width:20%;
    height:160px;
    margin: 40px 25%;
    }

    </style>
    <body>

    <div class="speech">
    <!-- this is where the text box is put -->
    </div>

    </body>
    [/code]

    Note: This is just the concept. I haven't tested this code...
    Copy linkTweet thisAlerts:
    @jedaisoulDec 18.2014 — On second thoughts, there may be no need for a div. Try using the background of the textarea:
    [code=html]
    <textarea class="speech">
    type here
    </textarea>
    [/code]

    I think that will work, but the same caveat as above...
    Copy linkTweet thisAlerts:
    @zunebuggyauthorDec 21.2014 — This is fine for rectangle areas of text, but it does not allow for balloon style graphic that I want to include on my site. Having a rounded rectangle graphic as a background graphic inside of a rectangle area is not what I am going for. For one thing when you start typing on it the text does not not stay inside the balloon graphic neatly. It looks very messy and not very professional. I found an example one time of making the graphic above the text area a 1 px wide by whatever px height and there was a CSS graphic command that just span this graphic by the % of your text area width dynamically.
    Copy linkTweet thisAlerts:
    @zunebuggyauthorDec 21.2014 — It "stretched" the 1px wide image (or repeated it dynamically) by whatever width the text area was, is a better explanation.
    Copy linkTweet thisAlerts:
    @tracknutDec 21.2014 — There are various tutorials online if you google "css text bubble". Maybe one of them will suit?

    Here's an example: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
    ×

    Success!

    Help @zunebuggy spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...