Member Avatar for aaava

Hello:

I've been trying for weeks (yes, it's embarrassing) to create a dhtml popup window w/min, max and close buttons in a title bar.

I can do this fine w/a table, but I hate tables, and want to accomplish the same thing w/non-table css.

Here is a rough image of what I want to accomplish:

----------------------------------
|        Title           -  +  x |
----------------------------------
|                                |
|                                |
|                                |
|                                |
|                                |
----------------------------------

Where the title is centered in the *whole* width of the title bar, and there are 3 images (icons 16x16) in the upper-right corner of the title bar.

I cannot seem to get the above working in multiple browsers. What works in FF 3.5 and IE8 doesn't work in IE7. What works in IE 7 doesn't work in FF3.0!! Ack.

Could someone show me the pristine css that would accomplish what I want to do? It would really help me understand what I'm doing wrong (believe me, I have PAGES of css and html that doesn't work).

Thanks all.

  • 2 Contributors
  • 1 Reply
  • 72 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for ko ko

There is a guy asked last few hours like your question.
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<title>Popup Box</title>
<style type="text/css">
body {
background: #EEE; font: normal 11pt/100% Arial, Verdana, Helvetica, Sans-serif; 

color: #1b1b1b }

/*---- popup box -----*/
#popup {
/*-- Set your popup box width and height.. I set it 220px width and 178px 

height ---*/
width: 220px; height: 178px; background: #cfcfcf; position: relative; margin: 

1.3em auto 0 2.7em }
/*---- title ----*/

#title {
background: #727272; /* If you want to set the height */
height: 22px; /*--- Set the vertical alignment of child ----*/ line-height: 

22px }
#title h3 {
color: #FFF; font-weight: normal; /*-- You want the text to center --*/ 

text-align: center }

/* set button on right corner of title bar ---*/
#title .button {
position: absolute; /* top and right corner */ right: 0; top: 0; /* Need width 

and height, you have 3 buttons with 16px width and height, so you need 16px 

width and height*/ width: 54px; height: 18px; /* I set more width and height 

for button */  }
#title .button img {
/* three buttons next to each */ float: right; margin-right: 2px; /*Don't 

forget the wrapper is 54px width, so you cann't give margin more than 2px */ }
/** This is what you want **/
</style>
</head>   
<body>
<div id="popup">
	<div id="title">
		<h3>Title</h3><span class="button"><img src="/" border="0" 

title="Minimize" alt="x" /><img src="/" border="0" title="Maximize" alt="+" 

/><img src="/" border="0" title="Close" alt="-" /></span>
	</div>
	<div id="content">
		<p>Pop-up Message.</p>
	</div>
</div>
</body>
</html>

Good luck..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.