Bordered window

[justsomeguy]

I've been trying a little bit to come up with a decent-looking box that I can use as a generic resizable window. I already have the code to drag the window around and resize it, but the way it looks makes it look like it might not be obvious that you can do either. So I'm looking for something that has a title bar type of thing and 3d-looking borders. I've tried making a series of 3 or 4 nested divs, where each div is a pixel or two smaller then the outer div, so the various background colors are supposed to get a 3d or embossed look. Browsers don't show that very well with the different box models though. So, I'm looking for a way to render something that looks pretty close to this:Since it needs to be resizable the borders can't be a static image. Has anyone seen anything that looks similar that will look the same in all browsers? I don't care about the Windows XP look very much, I'm not worried about things like rounded corners or gradient backgrounds as long as the borders look good.

[aspnetguy]

I usually use Ext for such things. Maybe this will atleast give you some ideas http://extjs.com/deploy/dev/examples/window/hello.html

[Jonas]

I've been trying a little bit to come up with a decent-looking box that I can use as a generic resizable window. I already have the code to drag the window around and resize it, but the way it looks makes it look like it might not be obvious that you can do either. So I'm looking for something that has a title bar type of thing and 3d-looking borders. I've tried making a series of 3 or 4 nested divs, where each div is a pixel or two smaller then the outer div, so the various background colors are supposed to get a 3d or embossed look. Browsers don't show that very well with the different box models though. So, I'm looking for a way to render something that looks pretty close to this:Since it needs to be resizable the borders can't be a static image. Has anyone seen anything that looks similar that will look the same in all browsers? I don't care about the Windows XP look very much, I'm not worried about things like rounded corners or gradient backgrounds as long as the borders look good.

Hmm, could this possibly be achieved with tables? I know it's not "good procedure", but I'm thinking along these lines:[ corner cell, fixed height + width ][ Cell with fixed height, relative (%?) width according to entire table width ][ like first cell ][ main cell, both dynamic height and width, with colspan="3" so it will fill the rest, with the border plain css ]This way, you should be able to use a spacer image in the top middle cell that fills the space horizontally as the main cell stretches. Also the top table row (3 cells) would have fixed height, so vertical modification of the table would affect the bottom table row only.Does something like that make sense? I don't have time to play around with it now personally, because I'm very busy with exams, but at least it's an idea to consider.

[justsomeguy]

Yeah that makes sense, I've done plenty of that before. So in that case I would use images for the borders. Is there a way that anyone can think where this could be accomplished without images? Right now I'm using this code, I have Javascript creating the elements so that's why the capitalization is like that and the className attribute is there.

.float_box {  background-color: #F0F0F0;  border: 3px double #A0A0A0;  color: #000000;  font-family: "Calibri", "Verdana", sans-serif;  font-size: 10px;  display: block;  position: absolute;  clear: both;  padding: 5px;}<DIV className="float_box" class="float_box" id="dd_players" style="width: 300px; height: 300px; left: 468px; top: 138px; z-index: 6; cursor: default">  <DIV style="display: block; text-align: right">	<A href="javascript:remove_box('dd_players')">close [x]</A>  </DIV>  <H3>Players</H3>  <DIV id="_dd_players_content" style="width: 100%; height: 270px; overflow-x: auto; overflow-y: auto">	New Player Name: 	<INPUT class="standard_input" className="standard_input" id="new_player_name" maxlength="255">	<INPUT type="submit" class="standard_button" className="standard_button" value="Add Player" style="margin-left: 5px">	<HR>	<DIV style="margin-bottom: 5px">	  Existing Players:	</DIV>	<DIV id="edit_player_list"></DIV>  </DIV></DIV>

So that creates a little box with just a normal double border, not real obvious that it's resizable.That Ext is pretty damn impressive. I was wanting to create everything myself (I've already gotten most of it finished), but the effects they've been able to do there make it pretty hard to justify not using it, their resize code is better then mine also. It will probably be better to try and use Ext for the windowing.

[Jonas]

Yeah that makes sense, I've done plenty of that before. So in that case I would use images for the borders. Is there a way that anyone can think where this could be accomplished without images? Right now I'm using this code, I have Javascript creating the elements so that's why the capitalization is like that and the className attribute is there.[/b]Should be able to do it without images using one of Stu's techniques (CSS only):http://www.cssplay.co.uk/boxes/snazzy2.htmlhttp://www.cssplay.co.uk/boxes/krazy.htmlhttp://www.cssplay.co.uk/boxes/chunky.htmlhttp://www.cssplay.co.uk/boxes/curves.htmlhttp://www.cssplay.co.uk/boxes/three_cornered.htmlhttp://www.cssplay.co.uk/boxes/four_cornered.htmlhttp://www.cssplay.co.uk/boxes/snazzy.htmlThese techniques use colouring of <b> or <li> elements in some way...

[justsomeguy]

Yeah that's sort of more what I was originally thinking, some of those can probably be expanded to make the borders a little thicker and more well-defined. That might work better into the model I've got, but that Ext is tempting.That's some serious targeted advertising displaying a Domino's pizza ad on the CSSPlay website.

[aspnetguy]

I've been watching Ext for a while. It is built on top of YUI by Jack Slocum. It is crazy some of the layouts and effects he has created. The best thing is that all of the components are integrable (ie can drag and drop between components).If you are looking to impress Ext is definatley the way to go.

[Jonas]

Also a very cool javascript drag-and-drop++ library here:http://walterzorn.com/http://walterzorn.com/dragdrop/dragdrop_e.htmnotice down on the page, under the header:Resize Instead of Drag?Holding shift will let you resize the object your clicking by dragging the mouse around. Not holding shift will move the entire object.

[aspnetguy]

But will that be obviously apparent to the user? Things like this, IMO, should function just like similar things they are used to (ie. Windows dialogs). Chances are if you have to explain to the user how it works they aren't going to use.

[Jonas]

But will that be obviously apparent to the user? Things like this, IMO, should function just like similar things they are used to (ie. Windows dialogs). Chances are if you have to explain to the user how it works they aren't going to use.

Well, it shouldn't be so difficult to change it to convention, should it? You just change the code that checks for pressed shift-button and remove that, so that you just resize by mouse click and pull. And then the drag-and-drop can be applied to another layer perhaps, with .top and .left on both layers matching at all time the top layer, so if you move it the other below will follow.I'm not saying it's better or the same as Ext. I was just pointing out a great javascript library, sort of while-on-the-topic you know...