HTML and CSS Reference
In-Depth Information
</div>
<div id="div4" class="client">
<p id="client4" class="clientName">unassigned</p>
<div id="chat4" class="chat">
</div>
<input type="text" id="input4" class="input" value="" />
<input type="submit" value="Send" onclick="send('4');" />
</div>
</div>
</body>
At the top of the
body
element, there is a
p
element with the value of
@User.Indentity.Name
. This is Razor
syntax that will display the agent's name here. Since the agent will be logged in, the web page already knows
their name.
This page will use a
div
element for each of the chat windows. Inside this there is an empty
div
element that
will contain the messages that are sent back and forth. Inside the outer
div
there is
p
element that will hold the
client's name, which is currently set to “unassigned”. There is also a textbox that is used to enter the message and
a button to send it.
2.
To improve the layout of the form, add the
style
element shown in Listing 13-13
inside the
head
element.
Listing 13-13.
Adding the style element
<style>
body
{
background: #f0f0f0;
width: 900px;
}
.client
{
display: block;
float: left;
width: 400px;
height: 385px;
border: 2px solid #6699cc;
border-radius: 5px;
background-color: white;
}
.chat
{
height: 300px;
font-size: smaller;
line-height: 12px;
overflow-y: scroll;
}
.input
{
width:330px;
}
