CSS - Help Building A Dhtml Window
I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window.
You'll find my attempt below. The first one is before adding close and resize elements. It seems an ok starting point. The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line. The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window. Anyone got some ideas as to how I deal with this? Am I approaching it wrong? Code: <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>New Document</title> <style type="text/css"> html, body { margin: 0px; } .window { background: gray; position: absolute; border: 1px solid black; top: 20px; left: 20px; } .ex2 { left: 300px; } .topBar { position: relative; color: white; margin: 2px; } .ex2 .topBar { background: none; } .closeButton { width: 16px; height: 16px; background: red; } .window .content { width: 200px; height: 200px; background: white; overflow: auto; } .bottomBar { position: relative; } .ex2 .bottomBar { background: none; } .resizeHandle { background-color: green; height: 16px; width: 20px; } </style> </head> <body> <div class='window'> <div class='topBar'> Title </div> <div class='content'> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> </div> <div class='bottomBar'> </div> </div> <div class='window ex2'> <div class='topBar'> Title <div class='closeButton'> </div> </div> <div class='content'> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> Content goes here<br> </div> <div class='bottomBar'><div class='resizeHandle'> </div></div> </div> </body> </html> Similar TutorialsI'm running into a problem with an interface that I'm developing. Basically it's a collapsible treeview using DHTML and the display property to 'open' and 'close' tables. I need to have several of these tables side by side but without overflowing horizontally so that the user has to scroll horizontally. The best way I've found was to float the elements so that any overflowing tables would be wrapped. Example: [] [] [] [] [] [] [] [] [] [] [] [] However, a problem arised when I 'open' and 'closed' the tables repeatedly (three times or more). The other tables started to wrap immediately after the first table (the one I was opening and closing). So that all the tables lined up in a single column eventually and not flowing as they should've been. Example: [] [] [] [] [] Upon refreshing the page, everything flows as it should. Please let me know if I'm unclear in my description. i want to be able to have a site that has a table with some info, and a button next to it.. when the button is clicked on, a CSS pop-over opens and allows the person to type text, and submit... i can deal with the submit and php and such... i just need to know how to make the DHTML/CSS work for me. right now i have a page that has an iFrame and three tabs, when you click on each tab, it loads a different page into the iFrame. this is done as the data on the rest of the page is randomly generated via PHP.... so i cant have a refresh on the entire page... is there a way to hide all three sections of info the tab calls up in a "display:none" div? and then bring it up upon the tab being clicked? thanks. hi there! well i have been working on how xoops cms ( http://www.xoops.org ) and sothink dhtml menu (Sothink Dhtml Menu ) can be made to work, i have been successful to some extent. the issue When i use the sothink dhtml menu on mywebsite: my Website the submenu width is all over the place. ok here is what i got so far 1) my website: http://ayubians.com/thesite/index.php with default theme, of sev_zero style css file : Sev_zero Style.css 2) Scroll down mywebsite and on left side you will see a block called themes. Change the theme to 7dana-jane a new look website will appear: with working DHTML menu style css is: 7dana-Jane Style.css I want to use this menu with : sev_zero theme kindly tell me which what changes do i need to bring in my sev_zero theme to make the dhtml menu work! Regards billyvision P.S::: If you intend to try this on your own xoops website: please put the following codes: in head of ur theme html document add: Code: <script type="text/javascript" language="JavaScript1.2" src="http://www.ayubians.com/tasveer/stm31.js"></script> where as in body of ur theme html add: Code: <script type="text/javascript" language="JavaScript1.2"> <!-- stm_bm(["menu0283",430,"http://www.ayubians.com/tasveer","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this); stm_bp("p0",[0,4,0,0,2,3,0,7,100,"",-2,"",-2,50,0,0,"#999999","#FFFFF7","",3,1,1,"#000000"]); stm_ai("p0i0",[0,"Menu Item 2","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFF7",0,"#B5BED6",0,"","",3,3,1,1,"#FFFFF7","#000000","#000000","#000000","8pt Verdana","8pt Verdana",0,0]); stm_aix("p0i1","p0i0",[0,"Menu Item 3","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7]); stm_bpx("p1","p0",[1,4]); stm_aix("p1i0","p0i0",[]); stm_aix("p1i1","p0i0",[0,"Menu Item 1"]); stm_aix("p1i2","p0i1",[]); stm_bpx("p2","p0",[1,2,0,0,2,3,0,0]); stm_aix("p2i0","p1i1",[]); stm_aix("p2i1","p0i0",[]); stm_aix("p2i2","p0i0",[0,"Menu Item 4"]); stm_aix("p2i3","p0i0",[0,"Menu Item 3"]); stm_ep(); stm_aix("p1i3","p2i2",[]); stm_ep(); stm_aix("p0i2","p1i1",[]); stm_aix("p0i3","p2i2",[]); stm_aix("p0i4","p0i1",[0,"Menu Item 5"]); stm_bpx("p3","p1",[]); stm_aix("p3i0","p0i0",[]); stm_ai("p3i1",[6,1,"#000000","",-1,-1,0]); stm_aix("p3i2","p0i1",[0,"Menu Item 1"]); stm_bpx("p4","p2",[]); stm_aix("p4i0","p0i0",[]); stm_aix("p4i1","p0i0",[0,"Menu Item 1","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#fffff7",0,"#66ffcc",0,"","",3,3,2,5,"#00cc33 #0099ff #00ff99 #00ccff","#00ff99 #00ccff #00cc33 #0099ff"]); stm_aix("p4i2","p3i1",[]); stm_aix("p4i3","p2i3",[]); stm_ep(); stm_ep(); stm_ep(); stm_em(); //--> </script> Other resources: Sev-Zero theme http://www.xoops.org/modules/library/viewcat.php?list=S&start=10 7dana-Jane theme: http://www.7dana.com/download/pafiledb.php?action=file&id=33 Your help in this regard will be highly appreciated billyvision I have a problem with a tooltip i'm trying to make look decent in both browsers, IE and firefox. it looks beautiful in firefox the way i have it. but in IE it stick the image way above the tooltip and the padding is a bit funky. Code: <img src="eq2icons/"<?=$icon?>" class="itemicon" width="42" height="42"><table class="ttb" width="350" cellspacing="0" cellpadding="0"><tr bgcolor='#FFDE2E'><td colspan=2><span class=quality><?=$itemname?></span></td></tr><tr><td width=88%><?=$text1?></td><td width=12%></td></tr><tr><td colspan=2><?=$text2?></td></tr><tr><td colspan=2><?=$text3?></td></tr><tr><td colspan=2><?=$text4?></td></tr><tr><td colspan=2><?=$text5?></td></tr><tr><td colspan=2><?=$text6?></td></tr><tr><td colspan=2><?=$text7?></td></tr><tr><td colspan=2><?=$text8?></td></tr><tr><td colspan=2><?=$text9?></td></tr><tr><td colspan=2><?=$text10?></td></tr></table> CSS: Code: span.quality { color: #000000; font-weight: bold; padding: 2px;} span.quality1 { color: #FFCC00; font-weight: bold;} span.quality2 { color: #21E626; font-weight: bold;} table.ttb { background-color: #282828; color: #FFFFFF; margin: 0px; padding: 1px; border-bottom: 1px solid #FFF; border-right: 1px solid #FFF; border-top: 1px solid #FFF; border-left: 1px solid #FFF; font-size: 11px; } table.ttb a:link { color: #8888FF; } table.ttb a:visited { color: #7777EE; } table.ttb tr { padding: 3px; } table.ttb h6 { font-size: 10px; } .itemicon{ float: right; padding: 2px; margin-top: 12px; } Here the site in question. (yes, i'm sorry i do require a signup to view the data to track and eliminate scrapers/data miners. Free signup though) http://www.eq2archives.com The tooltip is currently shown if you go to "quests by zone" then choose a zone and choose a quest with an item reward. ill post a few shots in IE and Mozilla thanks in advance =) I have a problem in IE when dynamically adding elements through the DOM, the problem is basically: if i add a element(a div btw), with document.createElement and use setAttribute("class", "my_CSS_classname") to apply styling, the styling doesnt get applied when viewing it in IE6 (it works fine in firefox). Does IE force you to style dynamic elements though the .style proberty or wah? I have a website were the dhtml menu is driven from a seperate file. I have applied a style sheet to my page. The only problem is the style sheet is applied to my dhtml menu which i dont want. Any suggestions greatly appreciated. Hi, I spend many hours on the net to fix this problem, hope you can help me. I made a site with 3 frames; header, menu and main. In the menu I made a table (width and height 100%), with rows with one cell each. In each cell is a link. With some links I want to choose between more pages. So I found a nice dhtml menu, witch looks like http://dhtml-menu.com/examples/dhtml-menu-ex2.html. Everything works fine, ecxept the position of the submenus. Here is some HTML: <table><tr><td> <a href="#" target="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime();" onMouseOut="startTime();">Name</a> </td></tr></talbe> ... <div id='layer1'> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name</a><br> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name2</a><br> </div> And here is some CSS: #layer1, #layer2, #layer3, #layer4 { position: absolute; z-index : 90; visibility : hidden; width : 150pt; left: 10pt } #layer1 { top : 0pt } Questions: 1 is it possible to position the submenu exactly next (or under or above)to the corresponding main menu item, I think it should be with relative positioning. 2 since I use frames and the menu takes the left frame, is it possible to position this submenu on the right side of the main menu item, i.e. on top of the main frame, or in the main frame. 3 I read a lot about this and many people say that a page like this should be made using tables (or CSS-P?), instead of frames. If I have to or want to change it, does that mean that I have to write a table structure in every page and when I want to change a menu item, I have tot change that in every page? Hope some can help me! Hi everybody, I'm trying to build a layout. There is one piece in the center, a company logo and address. Things are supposed to branch off of it, and you click on them you know, and then that makes it work. I got the thing centered very nicely using absolute positioning and negative margins, but I'm having trouble adding in the little branches. How do you do that without them overlapping the centered thing and moving all around based on resolution? Can it be done? I'm thinking about doing it with an imagemap or Flash instead, but I'd prefer just square CSS. We want the centered thing to recenter itself based on the resolution, and we'd like these things to always be so far from there, but I don't know how to do that. Doesn't work with absolute positioning and I'm not sure if it does with relative (I've not been able to get it to). I made a little drawing of what it should look like. Please see http://tinypic.com/55nsl0 . Thank you, your assistance is deeply appreciated. I am trying to build a menu that will load content either on the right of it or the left. I have looked for a tutorial on how to do this but am having no luck with the search engines. Here is a picture of what I would like to do. If anyone can assist me with this it would be very helpful. Or maybe even point me in the direction of a source. Thank you! I am trying to build a table in which the center scrolls both ways but the columns and rows around the edges stay put - have a look at the page below using IE6 to see what I mean: (URL address blocked: See forum rules) This is working exactly as I want it to in IE6, my problem is that I can't get it to work right in IE7 - the horizontal scrolling is not working properly. By re-instating the commented out code on line 81 I can get it to sort of work, but I don't want to have to specify the width like this as the table contents are going to be dynamic and there is no way of knowing how wide they will be. This is for use on a company intranet where all the users have IE6 or IE7, hence I am not concerned with other browsers or earlier versions of IE. Any help getting this working would be much appreciated... P Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? Hi, I am using html and css to design a website. My problem is that when I resize the web browser, all of the elements reposition themselves accordingly. Is there some to keep them all fixed in position? Thanks! First of all I apologize if this is a stupid question, I am 1st year student. For the project I had to make an IT store type website. My problem is I have two div's in the container which i have positioned to be fixed at the top left of the page outside the container, this is so the user can see these div's at all times. When I make the window smaller it shrinks to the container and the div's in question appear on top of the content. I have tried styling the body with margins, padding and min-width. All I want is the page to remain the same when I re-size the window. I hope this is enough info for someone to understand my problem, i have included the css from the parent div's any help would be greatly appreciated. * { margin: 0; padding: 0; } * html #container { height: 100%; } html { height:100% !important; background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url(../images/header/Home.jpg); background-origin: padding-box; background-position: center; background-repeat: no-repeat; background-size: cover; } body { height:100% !important; } #outer { width: 100%; height: 100%; } #container { min-height: 100%; width:940px; padding: 8px 10px; background: #000; margin:0 auto; text-align:left; font-size: 100%; overflow: hidden; } * html #container { height: 100%; } Hello, I have a menu to the right and the main content is on the left. When I resize the window the content drops below the menu. Is there anyway to stop this from happening? [Do you need to see code?] Cheers Hello; Could anyone tell me how to addjust my result to the top(10% away from the top)? please. I try to use margin-top:10%, but it does not work. Please go to my website http://www.businessfind101.com/ and type the sentence with "MySql YourSql" into search function, you will see the result in the button, i have not idea to move them up. and my code as following; Code: php session_start(); $aString=$_REQUEST["SText"]; $_SESSION["aString"]=$aString; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> table.display{margin-top:10%} </style> <body> <?php $con = mysql_connect("localhost", "#*$!","1#*$!"); if (! $con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("#*$!x", $con); $result = mysql_query("select * from Customer2"); // was it a success if (!$result) die ("Error processing request - check your query"); // process results $nrecs = mysql_num_rows($result); /* Use tab and newline as tokenizing characters as well */ $tok = strtok($aString, " "); while ($tok!== false) { $len=strlen($tok); $len=$len/2+1; $tok=substr($tok,0,$len); $b="tu"; $myresult=mysql_query("SELECT * FROM Customer2 WHERE MATCH (Topic,Des) AGAINST ('$tok*' IN BOOLEAN MODE);"); while($row=mysql_fetch_array($myresult)){ echo "<br>"; echo "<br>"; echo " "; $Cid=$row['Cid']; echo " "; $row['Count']=$row['Count']+1; $Count=$row['Count']; mysql_query("update Customer2 set Count='$Count' where Cid='$Cid'"); } $tok = strtok(" "); } $result = mysql_query("select * from Customer2"); echo "<table border=0 width=50% class='display' bgcolor='ccffff'>"; //i will display result on the screen while ($row=mysql_fetch_array($result)){ if($row['Count'] >0){ echo "<tr><td>"; echo $row['Des']; echo "</td><td>"; echo $row['Count']; echo "</td> </tr>"; } } $f=0; mysql_query("update Customer2 set Count='$f'"); echo "</table>"; mysql_close($con); ?> </body> </html> I know how to do html or java for an alert pop-up window. But, I don't know how to do that in CSS format. I'm trying to add the alert pop-up window IN my myspace layout which is CSS coded already. I just need the CSS code for it. Can anyone help? this is my code PHP Code: <?php // XML file $file = "http://www.wired.com/news/feeds/rss2/0,2610,12,00.xml"; // set up some variables for use by the parser $currentTag = ""; $flag = ""; $count = 0; // this is an associative array of channel data with keys ("title", //"link", //"description") $channel = array(); // this is an array of arrays, with each array element representing an //<item> // each outer array element is itself an associative array // with keys ("title", "link", "description") $items = array(); // opening tag handler function elementBegin($parser, $name, $attributes) { global $currentTag, $flag; $currentTag = $name; // set flag if entering <channel> or <item> block if ($name == "ITEM") { $flag = 1; } else if ($name == "CHANNEL") { $flag = 2; } } // closing tag handler function elementEnd($parser, $name) { global $currentTag, $flag, $count; $currentTag = ""; // set flag if exiting <channel> or <item> block if ($name == "ITEM") { $count++; $flag = 0; } else if ($name == "CHANNEL") { $flag = 0; } } // character data handler function characterData($parser, $data) { global $currentTag, $flag, $items, $count, $channel; $data = trim(htmlspecialchars($data)); if ($currentTag == "TITLE" || $currentTag == "LINK" || $currentTag == "DESCRIPTION") { // add data to $channels[] or $items[] array if ($flag == 1) { $items[$count][strtolower($currentTag)] .= $data; } else if ($flag == 2) { $channel[strtolower($currentTag)] .= $data; } } } // create parser $xp = xml_parser_create(); // set element handler xml_set_element_handler($xp, "elementBegin", "elementEnd"); xml_set_character_data_handler($xp, "characterData"); xml_parser_set_option($xp, XML_OPTION_CASE_FOLDING, TRUE); xml_parser_set_option($xp, XML_OPTION_SKIP_WHITE, TRUE); // read XML file if (!($fp = fopen($file, "r"))) { die("Could not read $file"); } // parse data while ($xml = fread($fp, 4096)) { if (!xml_parse($xp, $xml, feof($fp))) { die("XML parser error: " . xml_error_string(xml_get_error_code($xp))); } } // destroy parser xml_parser_free($xp); // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> this is the part that generates what parts of the RSS you see, and the links... PHP Code: // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> How can I get the links displayed to pop in a new window, much like this... PHP Code: <a href="http://www.google.com/" target="_new"> This will pop in a new window(RAPP) ... basically, make the headers(which are links), to do _new window hey all, hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance. I'm creating a site that works fine in FF. However, in IE, if I resize the window, the content doesn't move until I refresh the page. When I refresh the page, everything is centered again, but dragging IE to a new size, keeps everything in the same spot. Is there a fix for this? Unfortunately, I don't have the site posted, but may be able to throw it up somewhere if needed. Thanks. Edit: Nevermind. Had the body set to a certain width. Took that out and it works. |