I'm making a chat app using node.js and socket.io for my assignment and I almost have the appearance down.
It should look something like this https://gyazo.com/51238f68bbbeb53b2bf19932dd2c13e1
Right now, I have this (style sheet below). https://gyazo.com/da2a5c1c386c0842c3dc43267679ab37
The three key things I just need right now are
1. Having it fully resizeable and keep a relative shape, as in it's okay for it to be wide but the elements relative to each other should be same.
2. Having the space between the message area on the left and the list of users and text "currently online" like in the example image.
3. Having the div right of the message area (including "currently online") be exact same height as the message area.
4. Having the text and submit div's combined be same width as every other div.
I'm not quite sure how to do it and really need your guy's help. Thank you.
Html
<body>
<div id="wrapper">
<!-- title of app -->
<div id = "title">
<h2>Seng 513 Chat</h2>
</div>
<!--username-->
<div id="usernameIndicator">
</div>
<!--chat messages and online users-->
<div id ="main">
<div id="messageArea">
<ul id="messages"></ul>
</div>
<div id ="currentOnline">
<p>Currently Online</p>
</div>
<div id ="usernames">
</div>
<div style="clear: both;"></div>
</div>
<!--chat and message bar-->
<div id ="messageBarArea">
<form action ="">
<input id="m" autocomplete="off"/><button>Send</button>
</form>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/client.js"></script>
</body>
Stylesheet
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px; padding:0px;.
}
#wrapper{
background-color:#dbd7d6;
padding: 10px 30px 0px 30px;
margin:auto;
}
#title {
background-color:#4286f4;
text-align:center;
}
#usernameIndicator h2
{
color:blue;
}
#main
{
background-color:#8ae2a0;
}
#messageArea{
width:70%;
height:100%;
background-color:#e2d48a;
float:left;
overflow:auto;
padding-right:20px;
}
#messages{
}
#currentOnline{
height:5%;
}
#usernames{
/*width:25%;*/
height:95%;
background-color:#d1bd57;
margin-left:50px;
}
#messagebarArea{
width:100%;
}
#form{
width:100%;
}
form input {
width:80%;
margin-top:20px;
margin-bottom:20px;
}
form button {
width:10%;
}
via Vincent
No comments:
Post a Comment