Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Peter G.
Peter G.
Courses Plus Student 5,806 Points

Web-Comic Page.

Hello everybody. So i wanna build a web-page but I don't know how to build one part of the page. I want build the web-page, so that when some-one submits a short 200 word story, it appears on the body of the page, but in a speech bubble (like in comic books). I have no idea how to do this. And really would love to help, I've stuck on this for two days. :( Thank you

6 Answers

James Barnett
James Barnett
39,199 Points

That's what a textarea is for, put it inside of div styled with some CSS and get this.

Imgur

demo: http://codepen.io/jamesbarnett/pen/GmFjB

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Not 100% sure what you are going for. Do you want to make a CSS speech bubble, something like this from css tricks

Imgur

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}
Peter G.
PLUS
Peter G.
Courses Plus Student 5,806 Points
Peter G.
Peter G.
Courses Plus Student 5,806 Points

Wow! That's so much cooler than what I had in mind. :) What would you use to make it some that when person writes their story they, it appears on the body. I've been trying Javascript. but with no luck. Is it even possible to do that without JS?

James Gill
PLUS
James Gill
Courses Plus Student 34,936 Points
James Gill
James Gill
Courses Plus Student 34,936 Points

Peter, I think your question's too broad--there are a ton of ways to do that, and they depend on how the site's designed, how the user input's being gathered, etc.. The most basic answer is--you can style the output using CSS. How the output gets created is up to you, and how it gets displayed is up to you.

Peter G.
Peter G.
Courses Plus Student 5,806 Points

So then it would be possible to create a way for content to appear on the web-page instantly, without the use of JS?

Peter G.
PLUS
Peter G.
Courses Plus Student 5,806 Points
Peter G.
Peter G.
Courses Plus Student 5,806 Points

Hey James. I looked at w3c and found something similar. It uses: HTML: <p class="bubble">This is no a speech bubble</p> CSS: p.bubble { border-style: solide; width: 20%; background-color: red; margin: 30px auto 0 auto; } The big difference is that it lacks the little arrow on the side, like in Comic books.

Peter G.
PLUS
Peter G.
Courses Plus Student 5,806 Points
Peter G.
Peter G.
Courses Plus Student 5,806 Points

Hey James! So i've worked on the page a bit. How do I make comments written by a user in a textarea comment tags appear on the page in a <p> tag in html without using JS? Thank you.

James Barnett
James Barnett
39,199 Points

Not sure I'm following, post what you've got so far in codepen so I can see what you mean.