Webchat Layout Problems

HTML & CSS
1

I’m trying to make the layout for a room-based chat web app. This is what I have right now:

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

I’m really new to css and web design, so I experimented with a lot of things. Some fixes only works under certain circumstances (like there is no overlapping for the first and second line, but the third or greater line overlaps because height:20px remains static).

Other problems:
The text only wraps when it hits the edge, not the sidebar.

When a line wraps, it overlaps the next and doesn’t move the next ones down.

I think the problem is because I used position:absolute, but I had to so that the header, footer, siderbar, etc would stay in place.

I would really appreciate it if you tell me how I should fix it. Thanks

2

Hi gladoscc. Welcome to SitePoint. :slight_smile:

Forget about position: absolute for page layout. It’s a dog. Start with something like this:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>

<style type="text/css">
*{margin:0px;padding:0px;}
div#header {
 height:30px;
 background-color:olive;
 font-family:Arial;
 font-size:15px;
 color:white;
}
  
div#left {
 width:70%;
 float: left;
}

div#right{float: right; width:30%;}

div#bottom{}

.chatLine{
  width:100%;
}

.chatName{
  width:100px;
  font-family:Arial;
  background-color:#E0FFFF;
  text-align:right;
}

.chatMsg{
  font-family:Arial;
}
    
input#msgForm{
  font-size:15px;
}
</style>	
</head>


<body>
<div id="header">Webchat Layout</div>
<div id="wrapper">
  <div id="left">
    <div class="chatLine">
        <div class="chatName">John&nbsp;&nbsp; </div>
        <div class="chatMsg">I am very hungry.</div>
    </div>
    <div class="chatLine">
        <div class="chatName">Steve&nbsp;&nbsp; </div>
        <div class="chatMsg">Why don't you eat some pineapple pizza? I like pineapple pizza, do you?</div>
    </div>
  </div>
  <div id="right">Sidebar. Yay!</div>
</div>

  <div id="bottom">
  <form>
  <input id="msgForm" type="text" size="100"/>
  </form>
  </div>
</body>

</html>

If you must have a footer at the bottom, it can be done, but it’s not very practical for the web.

3

Here is the fiddle link for how i would write the code, its pretty much the same as what ralph has as far as the floats and such but i added some extra CSS to clear the floats and align the chat content correctly when shrunk down.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

4

Thanks!

One thing is that the chat input box has to be at the bottom, so I believe I need to use position:absolute.

I don’t know how to make the sidebar a preset amount. I can’t change the left content to width:100% - (sidebar width).

I tried settings margins. That worked until I’m resizing the window - the sidebar gets pushed out.

So, I tried javascript…

window.onresize = function(event) {
	alert("hmm");
    document.getElementById("left").style.width = screen.wdith - 140;
}

I managed to crash firefox by doing that :blush:

Fixed the wdith typo, didn’t work. Hmm.

Then I realized, I need to get the size of the current window, not the screen!

document.getElementById("left").style.width = window.innerWidth - 140;

So, currently: http://glados.cc/chat/layout.html

At first I thought the javascript approach won’t work because the CSS will reset the width. Now I know that the CSS sets the styles when the page is being rendered and doesn’t do anything after, so I can use javascript to change things :slight_smile:

Again, thanks for your help! If I didn’t get a email notifying that there was new replies I probably would have given up on CSS.

By the way: if you see

	if(window.innerWidth < 600){
		document.getElementById("right").style.display = none;
	}

I’d like to hide the sidebar if the width of the window is less than 600 pixels to conserve space. As I haven’t set left to absolute that should give some more space. However the code isn’t working, and I don’t know why?

When I use css to directly set display:none, only the content isn’t displayed. I’m not using position:absolute for left or right, so why does it happen?

From http://www.w3schools.com/cssref/pr_class_display.asp:

none The element will generate no box at all

But when I set css to display:none it still takes up space.

Next next step (the way harder step): actually building the chat and the ajax for receiving new messages. (:

5

Visit the update jsFiddle link below, i have updated the code so the chat box expands to 100% and so the input box is aligned to the bottom of the page. Currently its using CSS3 media queries to adjust the page when it gets to 600px wide but its just an example for you to reference.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)