Solved

Setting up a chat list in HTML

Posted on 2009-07-06
12
166 Views
Last Modified: 2012-05-07
Hello,

I'm trying to set up a display using HTML and CSS that will render a chat discussion in the standard chat format. By this I mean that it is essentially a list of messages. Each message has two parts: a username and a message. The username will always stay in the top left of each message area and the message will always be floated left just to the right of the username. So it will look like this:

Jack: Did you see the race today?

However, it's important also that the message wraps down in such a way that keeps the username in the exact same spot but extends the message area down to accommodate the two-line message.

Jack: Did you see the Le Mans race
          today? I heard that it was really
          great.
Jim: No I didn't.

I've preliminarily come up with an idea of how to do this, but I'm not sure how to format it properly or if it's the most logical or render-friendly. Essentially, I'm currently using an unordered list with list items for each username-message pair and using the float property to line them up. This is not really working very well. I'm a relative novice at CSS, so any help would be greatly appreciated. The relevant code is attached.
<div class="maincontent">
	<div id="blobarea">
		<ul class="chatlist">
			<li class="chatlistitem">
				<div class="username">Jim:</div>
				<div class="message">Stuff happens all the time.</div>
			</li>
			<li class="chatlistitem">
				<div class="username">Jack:</div>
				<div class="message">Oh really.</div>
			</li>
		</ul>
	</div>
</div>
 
 
<style type="text/css">
.chatlist {
list-style-type: none;
max-width: 100px;
}
 
.username {
float: left;
font-size: 14px;
font-weight: bold;
}
 
.message {
float: left;
font-size: 14px;
}
</style>

Open in new window

0
Comment
Question by:hockeyragazzo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 8

Expert Comment

by:lharrispv
ID: 24788755
make each one a different div and float them both left.  Make the name div with a specified height and the other div with height:auto;  You might also want to put them in a container box but I am not sure if this is needed or not.

Now with that said.  Why not just use one of the already millions of premade chat packages on the market?  Most are free.
0
 
LVL 12

Expert Comment

by:kevin_u
ID: 24788761
This style might work better in more browsers.
<style type="text/css">
.chatlist {
list-style-type: none;
max-width: 100px;
}
 
.username {
display: inline;
font-size: 14px;
font-weight: bold;
width: 50px;
text-align: right;
}
 
.message {
display: inline;
font-size: 14px;
}
</style>

Open in new window

0
 
LVL 2

Author Comment

by:hockeyragazzo
ID: 24788782
Thanks for the help...could you point me in the direction of some of these chat packages?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:lharrispv
ID: 24788803
Sure no problem :-)

On google enter  "free chat programs for websites"
 
I got over 31 million hits when I did it :-)

Results 1 - 10 of about 31,200,000 for free chat programs for websites

Also check with your website hosting provider.  Many companies like (lunarPages etc) have stuff they give you for fee and they support it as well.
0
 
LVL 2

Author Comment

by:hockeyragazzo
ID: 24788940
Thanks...nothing I saw on Google really works for what I'm trying to accomplish. I used your suggestions and I'm quite close to what I was trying to do, but it's not quite there. Essentially, I don't want the message text to wrap underneath the username text...I want each line to begin at the same point. This is what it currently looks like:
chat.PNG
0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24788984
let me see the css and html you created?  I will play here.
0
 
LVL 2

Author Comment

by:hockeyragazzo
ID: 24788993
Here you go:
<div class="maincontent">
			<div id="blobarea">
				<ul class="chatlist">
					<li class="chatlistitem">
						<div class="username">Jack:</div>
						<div class="message">Stuff happens all the time. Especially when you're least expecting it to happen.</div>
					</li>
					<li class="chatlistitem">
						<div class="username">Jim:</div>
						<div class="message">Oh really.</div>
					</li>
				</ul>
			</div>
		</div>
 
 
 
.chatlist {
list-style-type: none;
max-width: 200px;
}
 
.username {
height:16px;
display: inline;
font-size: 14px;
font-weight: bold;
width: 50px;
}
 
.message {
height: auto;
display: inline;
font-size: 14px;
}

Open in new window

0
 
LVL 8

Accepted Solution

by:
lharrispv earned 500 total points
ID: 24789103
here ya go:

<html>
<head>
<style>
.chatlist {
list-style-type: none;
max-width: 200px;

}

.chatlist li{
    width:200px;
 }
 
.username {
position:absolute;
height:16px;
float:left
font-size: 14px;
font-weight: bold;
width: 50px;
left:0px;
}
 
.message {
height: auto;
float:left;
font-size: 14px;
left:60px;
}
</style>

</head>
<body>



<div class="maincontent">
                  <div id="blobarea">
                        <ul class="chatlist">
                              <li class="chatlistitem">
                                    <div class="username">Jack:</div>
                                    <div class="message">Stuff happens all the time. Especially when you're least expecting it to happen.</div>
                              </li>
                              <li class="chatlistitem">
                                    <div class="username">Jim:</div>
                                    <div class="message">Oh really.</div>
                              </li>
                        </ul>
                  </div>
            </div>
       
        </body>
 </html>
0
 
LVL 2

Author Comment

by:hockeyragazzo
ID: 24789162
Thanks again. This looks like it's almost achieving the right result, but it's still got a bit of a problem. On browsers that aren't IE, the usernames are stacking on top of each other.
0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24789224
take the float:left; out of the .message class
0
 
LVL 2

Author Comment

by:hockeyragazzo
ID: 24789234
CSS is so bizarre. I have no idea why that should work, but it did. Thanks a lot...you've been a great help.
0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24789274
np glad I could help.  and yes.  That is why I wanted to play here :-)
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question