Search Results

Search found 42998 results on 1720 pages for 'html input'.

Page 198/1720 | < Previous Page | 194 195 196 197 198 199 200 201 202 203 204 205  | Next Page >

  • How can I center XHTML content with CSS?

    - by drea
    so I recently converted a website of mine from a table content format to a div content format. Table format Version: Table version of the website: here. Table version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } .logo{ width:301px; height:151px; background:url(images/logo.png); text-indent:-9999px; border:none; cursor:pointer; } .logo:hover { opacity:0.9; } .signin{ width:69px; height:30px; background:url(images/signin.png); text-indent:-9999px; border:none; cursor:pointer; } .signin:hover { opacity:0.9; } .register{ width:79px; height:30px; background:url(images/register.png); text-indent:-9999px; border:none; cursor:pointer; } .register:hover { opacity:0.9; } .Contact_Us{ width:53px; height:9px; background:url(images/Contact_Us.png); text-indent:-9999px; border:none; cursor:pointer; } .Contact_Us:hover { opacity:0.9; } .Code_of_Conduct{ width:84px; height:9px; background:url(images/Code_of_Conduct.png); text-indent:-9999px; border:none; cursor:pointer; } .Code_of_Conduct:hover { opacity:0.9; } .Privacy_Policy{ width:65px; height:12px; background:url(images/Privacy_Policy.png); text-indent:-9999px; border:none; cursor:pointer; } .Privacy_Policy:hover { opacity:0.9; } .Copyright{ width:149px; height:9px; background:url(images/Copyright.png); text-indent:-9999px; border:none; cursor:pointer; } .Copyright:hover { opacity:0.9; } .slideshow{ width:301px; height:151px; background: url(slideshow.png), url(minecraft.png), url(tf2.png), url(CSS.png), url(GM.png), url(aos.png), url(CSGO.png), url(voip.png), text-indent:-9999px; border:none; cursor:pointer; } .slideshow:hover { opacity:0.9; } Table version source: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png"> <title>Welcome to XodusEN</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> <meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. " > <meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> <!--[if IE]> <script type="text/javascript"> window.location = "http://www.xodusen.com/ie/"; </script> <![endif]--> </head> <body bgcolor="#d7d7d7"> <table id="Table_01" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="18"> <img src="images/index_01.png" width="1020" height="9" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="9" alt=""></td> </tr> <tr> <td colspan="11" rowspan="2"> <img src="images/index_02.png" width="826" height="252" alt=""></td> <td> <a id="signin" class="signin" href="http://s.xodusen.com/VrtqYm"> <img src="images/signin.png" width="69" height="30" border="0" alt=""></a> <td rowspan="6"> <img src="images/index_04.png" width="3" height="643" alt=""></td> <td colspan="3"> <a id="register" class="register" href="http://s.xodusen.com/WW3rpZ"> <img src="images/Register.png" width="79" height="30" border="0" alt=""></a> <td colspan="2" rowspan="6"> <img src="images/index_06.png" width="43" height="643" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="30" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/index_07.png" width="69" height="613" alt=""></td> <td colspan="3" rowspan="5"> <img src="images/index_08.png" width="79" height="613" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="222" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/index_09.png" width="385" height="53" alt=""></td> <td> <img src="images/index_10.png" width="250" height="53" alt=""></td> <td colspan="5"> <img src="images/index_11.png" width="191" height="53" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="53" alt=""></td> </tr> <tr> <td colspan="4" rowspan="3"> <img src="images/index_09-13.png" width="360" height="338" alt=""></td> <td colspan="3"> <a id="logo" class="logo" href="http://www.xodusen.com/community"> <img src="images/logo.png" alt=""></a> </td> <td colspan="4" rowspan="3"> <img src="images/index_11-15.png" width="165" height="338" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="151" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_09-16.png" width="25" height="187" alt=""></td> <td> <img src="images/index_16.png" width="250" height="46" alt=""></td> <td rowspan="2"> <img src="images/index_11-18.png" width="26" height="187" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="46" alt=""></td> </tr> <tr> <td> <img src="images/index_12.png" width="250" height="141" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="141" alt=""></td> </tr> <tr> <td rowspan="7"> <img src="images/index_13.png" width="27" height="548" alt=""></td> <td colspan="16" id="slideshow" class="slideshow"> <a href="http://www.xodusen.com/community"><img src="images/slideshow.png" width="960" height="305" alt=""></a> <a href="http://www.xodusen.com/mcurl"><img src="images/minecraft.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.194:27015"><img src="images/tf2.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.195:27015"><img src="images/CSS.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.197:27015"><img src="images/GM.png" width="960" height="305" alt=""></a> <a href="aos://3267131722:32887"><img src="images/aos.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.196:27015"><img src="images/CSGO.png" width="960" height="305" alt=""></a></td> <td rowspan="7"> <img src="images/index_15.png" width="33" height="548" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="305" alt=""></td> </tr> <tr> <td colspan="16"> <img src="images/index_16-23.png" width="960" height="155" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="155" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/index_17.png" width="38" height="88" alt=""></td> <td rowspan="2"> <a id="Copyright" class="Copyright" href="http://www.xodusen.com/community"> <img src="images/Copyright.png" width="149" height="9" border="0" alt=""></a></td> <td colspan="14"> <img src="images/index_25.png" width="773" height="5" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="5" rowspan="4"> <img src="images/index_20.png" width="527" height="83" alt=""></td> <td rowspan="3"> <a id="Privacy_Policy" class="Privacy_Policy" href="http://s.xodusen.com/VhGEkH"> <img src="images/Privacy_Policy.png" width="65" height="12" border="0" alt=""></a></td> <td rowspan="4"> <img src="images/index_28.png" width="8" height="83" alt=""></td> <td colspan="3" rowspan="2"> <a id="Code_of_Conduct" class="Code_of_Conduct" href="http://s.xodusen.com/Tf5Gz7"> <img src="images/Code_of_Conduct.png" width="84" height="9" border="0" alt=""></a></td> <td rowspan="4"> <img src="images/index_30.png" width="6" height="83" alt=""></td> <td rowspan="2"> <a id="Contact_Us" class="Contact_Us" href="http://s.xodusen.com/T5EYsG"> <img src="images/Contact_Us.png" width="53" height="9" border="0" alt=""></a></td> <td colspan="2" rowspan="4"> <img src="images/index_26.png" width="30" height="83" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/index_27.png" width="149" height="79" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="3" rowspan="2"> <img src="images/index_28-35.png" width="84" height="74" alt=""></td> <td rowspan="2"> <img src="images/index_29.png" width="53" height="74" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td> <img src="images/index_30-37.png" width="65" height="71" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="71" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="27" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="38" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="149" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="146" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="250" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="26" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="80" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="65" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="8" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="69" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="3" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="6" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="53" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="20" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="33" height="1" alt=""></td> <td></td> </tr> </table> </body> </html> Div format Version: Div version of the website: here. Div version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } #Table_01 { position:absolute; left:0px; top:0px; width:1020px; height:1200px; } #index-01_ { position:absolute; left:0px; top:0px; width:1020px; height:9px; } #index-02_ { position:absolute; left:0px; top:9px; width:826px; height:305px; } #Signin_ { position:absolute; left:826px; top:9px; width:69px; height:30px; } #index-04_ { position:absolute; left:895px; top:9px; width:3px; height:643px; } #Register_ { position:absolute; left:898px; top:9px; width:79px; height:30px; } #index-06_ { position:absolute; left:977px; top:9px; width:43px; height:643px; } #index-07_ { position:absolute; left:826px; top:39px; width:69px; height:613px; } #index-08_ { position:absolute; left:898px; top:39px; width:79px; height:613px; } #index-09_ { position:absolute; left:0px; top:314px; width:360px; height:338px; } #Logo_ { position:absolute; left:360px; top:314px; width:301px; height:151px; } #index-11_ { position:absolute; left:661px; top:314px; width:165px; height:338px; } #index-12_ { position:absolute; left:360px; top:465px; width:301px; height:187px; } #index-13_ { position:absolute; left:0px; top:652px; width:27px; height:548px; } #Slideshow_ { position:absolute; left:27px; top:652px; width:960px; height:305px; } #index-15_ { position:absolute; left:987px; top:652px; width:33px; height:548px; } #index-16_ { position:absolute; left:27px; top:957px; width:960px; height:155px; } #index-17_ { position:absolute; left:27px; top:1112px; width:39px; height:88px; } #Copyright_ { position:absolute; left:66px; top:1112px; width:148px; height:13px; } #index-19_ { position:absolute; left:214px; top:1112px; width:773px; height:5px; } #index-20_ { position:absolute; left:214px; top:1117px; width:526px; height:83px; } #Privacy-Policy_ { position:absolute; left:740px; top:1117px; width:68px; height:23px; } #index-22_ { position:absolute; left:808px; top:1117px; width:6px; height:83px; } #Code-of-Conduct_ { position:absolute; left:814px; top:1117px; width:84px; height:23px; } #index-24_ { position:absolute; left:898px; top:1117px; width:2px; height:83px; } #Contact-Us_ { position:absolute; left:900px; top:1117px; width:57px; height:23px; } #index-26_ { position:absolute; left:957px; top:1117px; width:30px; height:83px; } #index-27_ { position:absolute; left:66px; top:1125px; width:148px; height:75px; } #index-28_ { position:absolute; left:740px; top:1140px; width:68px; height:60px; } #index-29_ { position:absolute; left:814px; top:1140px; width:84px; height:60px; } #index-30_ { position:absolute; left:900px; top:1140px; width:57px; height:60px; } .logo{ width:301px; height:151px; background:url(images/logo.png); text-indent:-9999px; border:none; cursor:pointer; } .logo:hover { opacity:0.9; } .signin{ width:69px; height:30px; background:url(images/signin.png); text-indent:-9999px; border:none; cursor:pointer; } .signin:hover { opacity:0.9; } .register{ width:79px; height:30px; background:url(images/register.png); text-indent:-9999px; border:none; cursor:pointer; } .register:hover { opacity:0.9; } .contact_Us{ width:53px; height:9px; background:url(images/Contact_Us.png); text-indent:-9999px; border:none; cursor:pointer; } .contact_Us:hover { opacity:0.9; } .code_of_Conduct{ width:84px; height:9px; background:url(images/Code_of_Conduct.png); text-indent:-9999px; border:none; cursor:pointer; } .code_of_Conduct:hover { opacity:0.9; } .privacy_policy{ width:65px; height:12px; background:url(images/Privacy_Policy.png); text-indent:-9999px; border:none; cursor:pointer; } .privacy_policy:hover { opacity:0.9; } .copyright{ width:148px; height:13px; background:url(images/Copyright.png); text-indent:-9999px; border:none; cursor:pointer; } .copyright:hover { opacity:0.9; } .slideshow{ width:301px; height:151px; background: url(slideshow.png), url(minecraft.png), url(tf2.png), url(CSS.png), url(GM.png), url(aos.png), url(CSGO.png), url(voip.png), text-indent:-9999px; border:none; cursor:pointer; } .slideshow:hover { opacity:0.9; } Div version source: <!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"> <head> <script type="text/javascript"> //<![CDATA[ window.__CF=window.__CF||{};window.__CF.AJS={"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}; //]]> </script> <script type="text/javascript"> //<![CDATA[ try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/aav=1870252173/"},atok:"d6e39f49946fcb6d690f0d10d5a963f3",zone:"xodusen.com",rocket:"a",apps:{"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}}];document.write('<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js"><'+'\/script>')}}catch(e){}; //]]> </script> <script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=1566821048/appsh.min.js"></script><script type="text/javascript">__CF.AJS.inith();</script><link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png"> <title>Welcome to XodusEN</title> <meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. "> <meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/rocketscript" data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/rocketscript" data-rocketsrc="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/rocketscript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> <!--[if IE]> <script type="text/javascript"> window.location = "http://www.xodusen.com/ie/"; </script> <![endif]--> <script type="text/javascript"> /* <![CDATA[ */ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35779435-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); (function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window); /* ]]> */ </script> <meta name="pinterest" content="nopin"/></head> <body style="background-color:#d7d7d7;"><script type="text/javascript"> //<![CDATA[ try{(function(a){var b="http://",c="www.xodusen.com",d="/cdn-cgi/cl/",e="618e40fe1e01787d9cb9aa2f8abc52caf8a32796.gif",f=new a;f.src=[b,c,d,e].join("")})(Image)}catch(e){} //]]> </script> <div id="Table_01"> <div id="index-01_"> <img id="index_01" src="images/index_01.png" width="1020" height="9" alt=""/> </div> <div id="index-02_"> <img id="index_02" src="images/index_02.png" width="826" height="305" alt=""/> </div> <div id="Signin_"> <a href="http://s.xodusen.com/VrtqYm"> <img id="Signin" class="signin" src="images/Signin.png" width="69" height="30" border="0" alt=""/></a> </div> <div id="index-04_"> <img id="index_04" src="images/index_04.png" width="3" height="643" alt=""/> </div> <div id="Register_"> <a href="http://s.xodusen.com/WW3rpZ"> <img id="Register" class="register" src="images/Register.png" width="79" height="30" alt=""/></a> </div> <div id="index-06_"> <img id="index_06" src="images/index_06.png" width="43" height="643" alt=""/> </div> <div id="index-07_"> <img id="index_07" src="images/index_07.png" width="69" height="613" alt=""/> </div> <div id="index-08_"> <img id="index_08" src="images/index_08.png" width="79" height="613" alt=""/> </div> <div id="index-09_"> <img id="index_09" src="images/index_09.png" width="360" height="338" alt=""/> </div> <div id="Logo_"> <a href="http://s.xodusen.com/WW3rpZ"> <img class="logo" src="images/Logo.png" width="301" height="151" alt=""></a> </div> <div id="index-11_"> <img id="index_11" src="images/index_11.png" width="165" height="338" alt=""/> </div> <div id="index-12_"> <img id="index_12" src="images/index_12.png" width="301" height="187" alt=""/> </div> <div id="index-13_"> <img id="index_13" src="images/index_13.png" width="27" height="548" alt=""/> </div> <div id="Slideshow_" class="slideshow"> <a href="http://www.xodusen.com/community"> <img src="images/slideshow.png" width="960" height="305" alt=""></a> <a href="http://www.xodusen.com/mcurl"> <img src="images/minecraft.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.194:27015"> <img src="images/tf2.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.195:27015"> <img src="images/CSS.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.197:27015"> <img src="images/GM.png" width="960" height="305" alt=""></a> <a href="aos://3267131722:32887"> <img src="images/aos.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.196:27015"> <img src="images/CSGO.png" width="960" height="305" alt=""></a> </div> <div id="index-15_"> <img id="index_15" src="images/index_15.png" width="33" height="548" alt=""/> </div> <div id="index-16_"> <img id="index_16" src="images/index_16.png" width="960" height="155" alt=""/> </div> <div id="index-17_"> <img id="index_17" src="images/index_17.png" width="39" height="88" alt=""/> </div> <div id="Copyright_"> <a href="http://www.xodusen.com/community"> <img id="Copyright" src="images/Copyright.png" width="148" height="13" alt=""></a> </div> <div id="index-19_"> <img id="index_19" src="images/index_19.png" width="773" height="5" alt=""/> </div> <div id="index-20_"> <img id="index_20" src="images/index_20.png" width="526" height="83" alt=""/> </div> <div id="Privacy-Policy_"> <a href="http://s.xodusen.com/VhGEkH"> <img id="Privacy_Policy" src="images/Privacy_Policy.png" width="68" height="23" alt=""></a> </div> <div id="index-22_"> <img id="index_22" src="images/index_22.png" width="6" height="83" alt=""/> </div> <div id="Code-of-Conduct_"> <a href="http://s.xodusen.com/Tf5Gz7"> <img id="Code_of_Conduct" src="images/Code_of_Conduct.png" width="84" height="23" alt=""></a> </div> <div id="index-24_"> <img id="index_24" src="images/index_24.png" width="2" height="83" alt=""/> </div> <div id="Contact-Us_"> <a href="http://s.xodusen.com/T5EYsG"> <img id="Contact_Us" src="images/Contact_Us.png" width="57" height="23" alt=""></a> </div> <div id="index-26_"> <img id="index_26" src="images/index_26.png" width="30" height="83" alt=""/> </div> <div id="index-27_"> <img id="index_27" src="images/index_27.png" width="148" height="75" alt=""/> </div> <div id="index-28_"> <img id="index_28" src="images/index_28.png" width="68" height="60" alt=""/> </div> <div id="index-29_"> <img id="index_29" src="images/index_29.png" width="84" height="60" alt=""/> </div> <div id="index-30_"> <img id="index_30" src="images/index_30.png" width="57" height="60" alt=""/> </div> </div> <script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4188748942/apps1.min.js"></script><script type="text/javascript">__CF.AJS.init1();</script></body> </html> My issue is, how can I achieve the same 'centered' results in the div format of the website, as the table format of the website? I have done some research to no avail, so I'd thought given the reputation of this site, that i'd post my issue here. Thank you in advance, ~ drea.

    Read the article

  • CSS import or multiple CSS files

    - by David H
    I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!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"> <head> <title>The Recipe Site</title> <link rel='stylesheet' href='/css/main.css'> <link rel='stylesheet' href='/css/site_header.css'> <!-- Let google host jQuery for us, maybeb replace with their api --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="/js/main.js"></script> </head> <body> <div id="site_container"> <div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div> <div id="site_content"> Some main content. </div> <div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div> </div> </body> </html> File: /css/main.css /* Reset Default Padding & Margin */ * { margin: 0; padding: 0; border: 0; } /* Set Our Float Classes */ .clear { clear: both; } .right { float: right; } .left { float: left; } /* Setup the main body/site container */ body { background: url(/images/wallpaper.png) repeat; color: #000000; text-align: center; font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; } site_container { background-color: #FFFFFF; height: 100%; margin-left: auto; margin-right: auto; text-align: left; width: 100%; } /* Some style sheet includes / / @import "/css/site_header.css"; */ /* Default Font Sizes */ h1 { font-size: 2.2em; } h2 { font-size: 2.0em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } p { font-size: 1.2em; } /* Default Form Layout */ input.text { padding: 3px; border: 1px solid #999999; } /* Default Table Reset */ table { border-spacing: 0; border-collapse: collapse; } td{ text-align: left; font-weight: normal; } /* Cause not all browsers know what HTML5 is... */ header { display:block;} footer { display:block;} and now the file: /css/site_header.css: site_header { background-color: #c0c0c0; height: 100px; position: absolute; top: 100px; width: 100%; } Problem: When I use the above code, the site_header div does not have any formatting/background. When I remove the link line from the HTML doc for site_header.css and instead use an @import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div. Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine... So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.

    Read the article

  • Metro: Introduction to CSS 3 Grid Layout

    - by Stephen.Walther
    The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using HTML tables for layout without requiring you to actually use any HTML table elements. Doing Page Layouts without Tables Back in the 1990’s, if you wanted to create a fancy website, then you would use HTML tables for layout. For example, if you wanted to create a standard three-column page layout then you would create an HTML table with three columns like this: <table height="100%"> <tr> <td valign="top" width="300px" bgcolor="red"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </td> <td valign="top" bgcolor="green"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </td> <td valign="top" width="300px" bgcolor="blue"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </td> </tr> </table> When the table above gets rendered out to a browser, you end up with the following three-column layout: The width of the left and right columns is fixed – the width of the middle column expands or contracts depending on the width of the browser. Sometime around the year 2005, everyone decided that using tables for layout was a bad idea. Instead of using tables for layout — it was collectively decided by the spirit of the Web — you should use Cascading Style Sheets instead. Why is using HTML tables for layout bad? Using tables for layout breaks the semantics of the TABLE element. A TABLE element should be used only for displaying tabular information such as train schedules or moon phases. Using tables for layout is bad for accessibility (The Web Content Accessibility Guidelines 1.0 is explicit about this) and using tables for layout is bad for separating content from layout (see http://CSSZenGarden.com). Post 2005, anyone who used HTML tables for layout were encouraged to hold their heads down in shame. That’s all well and good, but the problem with using CSS for layout is that it can be more difficult to work with CSS than HTML tables. For example, to achieve a standard three-column layout, you either need to use absolute positioning or floats. Here’s a three-column layout with floats: <style type="text/css"> #container { min-width: 800px; } #leftColumn { float: left; width: 300px; height: 100%; background-color:red; } #middleColumn { background-color:green; height: 100%; } #rightColumn { float: right; width: 300px; height: 100%; background-color:blue; } </style> <div id="container"> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> </div> The page above contains four DIV elements: a container DIV which contains a leftColumn, middleColumn, and rightColumn DIV. The leftColumn DIV element is floated to the left and the rightColumn DIV element is floated to the right. Notice that the rightColumn DIV appears in the page before the middleColumn DIV – this unintuitive ordering is necessary to get the floats to work correctly (see http://stackoverflow.com/questions/533607/css-three-column-layout-problem). The page above (almost) works with the most recent versions of most browsers. For example, you get the correct three-column layout in both Firefox and Chrome: And the layout mostly works with Internet Explorer 9 except for the fact that for some strange reason the min-width doesn’t work so when you shrink the width of your browser, you can get the following unwanted layout: Notice how the middle column (the green column) bleeds to the left and right. People have solved these issues with more complicated CSS. For example, see: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm But, at this point, no one could argue that using CSS is easier or more intuitive than tables. It takes work to get a layout with CSS and we know that we could achieve the same layout more easily using HTML tables. Using CSS Grid Layout CSS Grid Layout is a new W3C standard which provides you with all of the benefits of using HTML tables for layout without the disadvantage of using an HTML TABLE element. In other words, CSS Grid Layout enables you to perform table layouts using pure Cascading Style Sheets. The CSS Grid Layout standard is still in a “Working Draft” state (it is not finalized) and it is located here: http://www.w3.org/TR/css3-grid-layout/ The CSS Grid Layout standard is only supported by Internet Explorer 10 and there are no signs that any browser other than Internet Explorer will support this standard in the near future. This means that it is only practical to take advantage of CSS Grid Layout when building Metro style applications with JavaScript. Here’s how you can create a standard three-column layout using a CSS Grid Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } </style> </head> <body> <div id="container"> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> </div> </body> </html> When the page above is rendered in Internet Explorer 10, you get a standard three-column layout: The page above contains four DIV elements: a container DIV which contains a leftColumn DIV, middleColumn DIV, and rightColumn DIV. The container DIV is set to Grid display mode with the following CSS rule: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } The display property is set to the value “-ms-grid”. This property causes the container DIV to lay out its child elements in a grid. (Notice that you use “-ms-grid” instead of “grid”. The “-ms-“ prefix is used because the CSS Grid Layout standard is still preliminary. This implementation only works with IE10 and it might change before the final release.) The grid columns and rows are defined with the “-ms-grid-columns” and “-ms-grid-rows” properties. The style rule above creates a grid with three columns and one row. The left and right columns are fixed sized at 300 pixels. The middle column sizes automatically depending on the remaining space available. The leftColumn, middleColumn, and rightColumn DIVs are positioned within the container grid element with the following CSS rules: #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } The “-ms-grid-column” property is used to specify the column associated with the element selected by the style sheet selector. The leftColumn DIV is positioned in the first grid column, the middleColumn DIV is positioned in the second grid column, and the rightColumn DIV is positioned in the third grid column. I find using CSS Grid Layout to be just as intuitive as using an HTML table for layout. You define your columns and rows and then you position different elements within these columns and rows. Very straightforward. Creating Multiple Columns and Rows In the previous section, we created a super simple three-column layout. This layout contained only a single row. In this section, let’s create a slightly more complicated layout which contains more than one row: The following page contains a header row, a content row, and a footer row. The content row contains three columns: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } #leftColumn { -ms-grid-column: 1; -ms-grid-row: 2; background-color:red; } #middleColumn { -ms-grid-column: 2; -ms-grid-row: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; -ms-grid-row: 2; background-color:blue; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; background-color: orange; } </style> </head> <body> <div id="container"> <div id="header"> Header, Header, Header </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="footer"> Footer, Footer, Footer </div> </div> </body> </html> In the page above, the grid layout is created with the following rule which creates a grid with three rows and three columns: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } The header is created with the following rule: #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } The header is positioned in column 1 and row 1. Furthermore, notice that the “-ms-grid-column-span” property is used to span the header across three columns. CSS Grid Layout and Fractional Units When you use CSS Grid Layout, you can take advantage of fractional units. Fractional units provide you with an easy way of dividing up remaining space in a page. Imagine, for example, that you want to create a three-column page layout. You want the size of the first column to be fixed at 200 pixels and you want to divide the remaining space among the remaining three columns. The width of the second column is equal to the combined width of the third and fourth columns. The following CSS rule creates four columns with the desired widths: #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } The fr unit represents a fraction. The grid above contains four columns. The second column is two times the size (2fr) of the third (1fr) and fourth (1fr) columns. When you use the fractional unit, the remaining space is divided up using fractional amounts. Notice that the single row is set to a height of 1fr. The single grid row gobbles up the entire vertical space. Here’s the entire HTML page: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } #firstColumn { -ms-grid-column: 1; background-color:red; } #secondColumn { -ms-grid-column: 2; background-color:green; } #thirdColumn { -ms-grid-column: 3; background-color:blue; } #fourthColumn { -ms-grid-column: 4; background-color:orange; } </style> </head> <body> <div id="container"> <div id="firstColumn"> First Column, First Column, First Column </div> <div id="secondColumn"> Second Column, Second Column, Second Column </div> <div id="thirdColumn"> Third Column, Third Column, Third Column </div> <div id="fourthColumn"> Fourth Column, Fourth Column, Fourth Column </div> </div> </body> </html>   Summary There is more in the CSS 3 Grid Layout standard than discussed in this blog post. My goal was to describe the basics. If you want to learn more than you can read through the entire standard at http://www.w3.org/TR/css3-grid-layout/ In this blog post, I described some of the difficulties that you might encounter when attempting to replace HTML tables with Cascading Style Sheets when laying out a web page. I explained how you can take advantage of the CSS 3 Grid Layout standard to avoid these problems when building Metro style applications using JavaScript. CSS 3 Grid Layout provides you with all of the benefits of using HTML tables for laying out a page without requiring you to use HTML table elements.

    Read the article

  • How does CommandManager.RequerySuggested work?

    - by Andrei Rinea
    The MSDN only states that Occurs when the CommandManager detects conditions that might change the ability of a command to execute. However I can't seem to find any traces of how this works, what I should be aware of / avoid etc... Does it just listen for input? (i.e.: mouse moves, keys pressed and so on)

    Read the article

  • Watin - Watin.Core.Exceptions.ElementNotFoundException

    - by potterosa
    I have code that runs that gives me the error : Could not find a 'INPUT (text password textarea hidden) or TEXTAREA' tag containing attribute name with value ________ (It's testing a website) It says it can't find a What reason could it be that it can't find it? It finds others without an issue on other pages, but this page for some odd reason it baulks? How can that be?

    Read the article

  • Metro: Introduction to CSS 3 Grid Layout

    - by Stephen.Walther
    The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using HTML tables for layout without requiring you to actually use any HTML table elements. Doing Page Layouts without Tables Back in the 1990’s, if you wanted to create a fancy website, then you would use HTML tables for layout. For example, if you wanted to create a standard three-column page layout then you would create an HTML table with three columns like this: <table height="100%"> <tr> <td valign="top" width="300px" bgcolor="red"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </td> <td valign="top" bgcolor="green"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </td> <td valign="top" width="300px" bgcolor="blue"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </td> </tr> </table> When the table above gets rendered out to a browser, you end up with the following three-column layout: The width of the left and right columns is fixed – the width of the middle column expands or contracts depending on the width of the browser. Sometime around the year 2005, everyone decided that using tables for layout was a bad idea. Instead of using tables for layout — it was collectively decided by the spirit of the Web — you should use Cascading Style Sheets instead. Why is using HTML tables for layout bad? Using tables for layout breaks the semantics of the TABLE element. A TABLE element should be used only for displaying tabular information such as train schedules or moon phases. Using tables for layout is bad for accessibility (The Web Content Accessibility Guidelines 1.0 is explicit about this) and using tables for layout is bad for separating content from layout (see http://CSSZenGarden.com). Post 2005, anyone who used HTML tables for layout were encouraged to hold their heads down in shame. That’s all well and good, but the problem with using CSS for layout is that it can be more difficult to work with CSS than HTML tables. For example, to achieve a standard three-column layout, you either need to use absolute positioning or floats. Here’s a three-column layout with floats: <style type="text/css"> #container { min-width: 800px; } #leftColumn { float: left; width: 300px; height: 100%; background-color:red; } #middleColumn { background-color:green; height: 100%; } #rightColumn { float: right; width: 300px; height: 100%; background-color:blue; } </style> <div id="container"> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> </div> The page above contains four DIV elements: a container DIV which contains a leftColumn, middleColumn, and rightColumn DIV. The leftColumn DIV element is floated to the left and the rightColumn DIV element is floated to the right. Notice that the rightColumn DIV appears in the page before the middleColumn DIV – this unintuitive ordering is necessary to get the floats to work correctly (see http://stackoverflow.com/questions/533607/css-three-column-layout-problem). The page above (almost) works with the most recent versions of most browsers. For example, you get the correct three-column layout in both Firefox and Chrome: And the layout mostly works with Internet Explorer 9 except for the fact that for some strange reason the min-width doesn’t work so when you shrink the width of your browser, you can get the following unwanted layout: Notice how the middle column (the green column) bleeds to the left and right. People have solved these issues with more complicated CSS. For example, see: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm But, at this point, no one could argue that using CSS is easier or more intuitive than tables. It takes work to get a layout with CSS and we know that we could achieve the same layout more easily using HTML tables. Using CSS Grid Layout CSS Grid Layout is a new W3C standard which provides you with all of the benefits of using HTML tables for layout without the disadvantage of using an HTML TABLE element. In other words, CSS Grid Layout enables you to perform table layouts using pure Cascading Style Sheets. The CSS Grid Layout standard is still in a “Working Draft” state (it is not finalized) and it is located here: http://www.w3.org/TR/css3-grid-layout/ The CSS Grid Layout standard is only supported by Internet Explorer 10 and there are no signs that any browser other than Internet Explorer will support this standard in the near future. This means that it is only practical to take advantage of CSS Grid Layout when building Metro style applications with JavaScript. Here’s how you can create a standard three-column layout using a CSS Grid Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } </style> </head> <body> <div id="container"> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> </div> </body> </html> When the page above is rendered in Internet Explorer 10, you get a standard three-column layout: The page above contains four DIV elements: a container DIV which contains a leftColumn DIV, middleColumn DIV, and rightColumn DIV. The container DIV is set to Grid display mode with the following CSS rule: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } The display property is set to the value “-ms-grid”. This property causes the container DIV to lay out its child elements in a grid. (Notice that you use “-ms-grid” instead of “grid”. The “-ms-“ prefix is used because the CSS Grid Layout standard is still preliminary. This implementation only works with IE10 and it might change before the final release.) The grid columns and rows are defined with the “-ms-grid-columns” and “-ms-grid-rows” properties. The style rule above creates a grid with three columns and one row. The left and right columns are fixed sized at 300 pixels. The middle column sizes automatically depending on the remaining space available. The leftColumn, middleColumn, and rightColumn DIVs are positioned within the container grid element with the following CSS rules: #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } The “-ms-grid-column” property is used to specify the column associated with the element selected by the style sheet selector. The leftColumn DIV is positioned in the first grid column, the middleColumn DIV is positioned in the second grid column, and the rightColumn DIV is positioned in the third grid column. I find using CSS Grid Layout to be just as intuitive as using an HTML table for layout. You define your columns and rows and then you position different elements within these columns and rows. Very straightforward. Creating Multiple Columns and Rows In the previous section, we created a super simple three-column layout. This layout contained only a single row. In this section, let’s create a slightly more complicated layout which contains more than one row: The following page contains a header row, a content row, and a footer row. The content row contains three columns: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } #leftColumn { -ms-grid-column: 1; -ms-grid-row: 2; background-color:red; } #middleColumn { -ms-grid-column: 2; -ms-grid-row: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; -ms-grid-row: 2; background-color:blue; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; background-color: orange; } </style> </head> <body> <div id="container"> <div id="header"> Header, Header, Header </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="footer"> Footer, Footer, Footer </div> </div> </body> </html> In the page above, the grid layout is created with the following rule which creates a grid with three rows and three columns: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } The header is created with the following rule: #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } The header is positioned in column 1 and row 1. Furthermore, notice that the “-ms-grid-column-span” property is used to span the header across three columns. CSS Grid Layout and Fractional Units When you use CSS Grid Layout, you can take advantage of fractional units. Fractional units provide you with an easy way of dividing up remaining space in a page. Imagine, for example, that you want to create a three-column page layout. You want the size of the first column to be fixed at 200 pixels and you want to divide the remaining space among the remaining three columns. The width of the second column is equal to the combined width of the third and fourth columns. The following CSS rule creates four columns with the desired widths: #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } The fr unit represents a fraction. The grid above contains four columns. The second column is two times the size (2fr) of the third (1fr) and fourth (1fr) columns. When you use the fractional unit, the remaining space is divided up using fractional amounts. Notice that the single row is set to a height of 1fr. The single grid row gobbles up the entire vertical space. Here’s the entire HTML page: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } #firstColumn { -ms-grid-column: 1; background-color:red; } #secondColumn { -ms-grid-column: 2; background-color:green; } #thirdColumn { -ms-grid-column: 3; background-color:blue; } #fourthColumn { -ms-grid-column: 4; background-color:orange; } </style> </head> <body> <div id="container"> <div id="firstColumn"> First Column, First Column, First Column </div> <div id="secondColumn"> Second Column, Second Column, Second Column </div> <div id="thirdColumn"> Third Column, Third Column, Third Column </div> <div id="fourthColumn"> Fourth Column, Fourth Column, Fourth Column </div> </div> </body> </html>   Summary There is more in the CSS 3 Grid Layout standard than discussed in this blog post. My goal was to describe the basics. If you want to learn more than you can read through the entire standard at http://www.w3.org/TR/css3-grid-layout/ In this blog post, I described some of the difficulties that you might encounter when attempting to replace HTML tables with Cascading Style Sheets when laying out a web page. I explained how you can take advantage of the CSS 3 Grid Layout standard to avoid these problems when building Metro style applications using JavaScript. CSS 3 Grid Layout provides you with all of the benefits of using HTML tables for laying out a page without requiring you to use HTML table elements.

    Read the article

  • CSS height problem. IE8 seems correct Firefox seems wrong. Any fix?

    - by user169867
    Below is a complete html page that shows the problem. The "myDiv" should be 22px in height (including the border). Item 1 should have a 1px space between its border and the divs border. In IE8 it is. In FF 3.6.2 though it is 24px and I can't understand why. Ultimately my goal is to get the same CSS to create the same result in both browsers. It's driving me crazy! Any help would be appreciated :) <!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" > <head> <title></title> <style type="text/css"> div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; } div.aclb:hover {border:#3399FF 1px solid;} div.aclb.focus {background:#FFF; border:#3399FF 1px solid;} div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; } div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0;} div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;} div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;} div.aclb li.input {} div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;} div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;} div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center; line-height:10px;} div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;} div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;} </style> </head> <body> <div id="myDiv" style="width:250px" class="aclb"> <ul> <li class="block"> <a class="d">x</a><span>Item 1</span> </li> <li class="input"> <input type="text" style="width:30px" maxlength="30"/> </li> </ul> </div> </body> </html>

    Read the article

  • Editable table view cell

    - by Koning Baard XIV
    I am creating an application. I have to implement a bookmark feature, and adding one should be similar to this: I want editable UITableViewCells for text input. I was wondering if there is an easier way then embedding a UITextField into a UITableViewCell. And if not, can someone explain how I can use the UITextField inside it? Thanks

    Read the article

  • Problem with From field in contact form and mail() function

    - by Matthew
    I've got a contact form with 3 fields and a textarea... I use jQuery to validate it and then php to send emails. This contact form works fine but, when I receive an email, From field isn't correct. I'd like to want that From field shows text typed in the Name field of the contact form. Now I get a From field like this: <[email protected]> For example, if an user types "Matthew" in the name field, I'd like to want that this word "Matthew" appears in the From field. This is my code (XHTML, jQuery, PHP): <div id="contact"> <h3 id="formHeader">Send Us a Message!</h3> <form id="contactForm" method="post" action=""> <div id="risposta"></div> <!-- End Risposta Div --> <span>Name:</span> <input type="text" id="formName" value="" /><br /> <span>E-mail:</span> <input type="text" id="formEmail" value="" /><br /> <span>Subject:</span> <input type="text" id="formSubject" value="" /><br /> <span>Message:</span> <textarea id="formMessage" rows="9" cols="20"></textarea><br /> <input type="submit" id="formSend" value="Send" /> </form> </div> <script type="text/javascript"> $(document).ready(function(){ $("#formSend").click(function(){ var valid = ''; var nome = $("#formName").val(); var mail = $("#formEmail").val(); var oggetto = $("#formSubject").val(); var messaggio = $("#formMessage").val(); if (nome.length<1) { valid += '<span>Name field empty.</span><br />'; } if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) { valid += '<span>Email not valid or empty field.</span><br />'; } if (oggetto.length<1) { valid += '<span>Subject field empty.</span><br />'; } if (valid!='') { $("#risposta").fadeIn("slow"); $("#risposta").html("<span><b>Error:</b></span><br />"+valid); $("#risposta").css("background-color","#ffc0c0"); } else { var datastr ='nome=' + nome + '&mail=' + mail + '&oggetto=' + oggetto + '&messaggio=' + encodeURIComponent(messaggio); $("#risposta").css("display", "block"); $("#risposta").css("background-color","#FFFFA0"); $("#risposta").html("<span>Sending message...</span>"); $("#risposta").fadeIn("slow"); setTimeout("send('"+datastr+"')",2000); } return false; }); }); function send(datastr){ $.ajax({ type: "POST", url: "contactForm.php", data: datastr, cache: false, success: function(html) { $("#risposta").fadeIn("slow"); $("#risposta").html('<span>Message successfully sent.</span>'); $("#risposta").css("background-color","#e1ffc0"); setTimeout('$("#risposta").fadeOut("slow")',2000); } }); } </script> <?php $mail = $_POST['mail']; $nome = $_POST['nome']; $oggetto = $_POST['oggetto']; $text = $_POST['messaggio']; $ip = $_SERVER['REMOTE_ADDR']; $to = "[email protected]"; $message = $text."<br /><br />IP: ".$ip."<br />"; $headers = "From: $nome \n"; $headers .= "Reply-To: $mail \n"; $headers .= "MIME-Version: 1.0 \n"; $headers .= "Content-Type: text/html; charset=UTF-8 \n"; mail($to, $oggetto, $message, $headers); ?>

    Read the article

  • Is there a good [and modern] reason to not have static HTML pages with AJAX content , rather than generate pages?

    - by user1725
    Assumptions: We don't care about IE6, and Noscript users. Lets pretend we have the following design concept: All your pages are HTML/CSS that create the ascetics, layout, colours, general design related things. Lets pretend this basic code below is that: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link href="/example.css" rel="stylesheet" type="text/css"/> <script src="example.js" type="text/javascript"></script> <head> <body> <div class="left"> </div> <div class="mid"> </div> <div class="right"> </div> </body> </html> Which in theory should produce, with the right CSS, three vertical columns on the web page. Now, here's the root of the question, what are the serious advantages and/or disadvantages of loading the content of these columns (lets assume they are all indeed dynamic content, not static) via AJAX requests, or have the content pre-set with a scripting language? So for instance, we would have, in the AJAX example, lets asume jquery is used on-load: //Multiple http requests $("body > div.left").load("./script.php?content=news"); $("body > div.right").load("./script.php?content=blogs"); $("body > div.mid").load("./script.php?content=links"); OR--- //Single http request $.ajax({ url: './script.php?content=news|blogs|links', method: 'json', type: 'text', success: function (data) { $("body > div.left").html(data.news); $("body > div.right").html(data.blogs); $("body > div.mid").html(data.links); } }) Verses doing this: <body> <div class="left"> <?php echo function_returning_news(); ?> </div> <div class="mid"> <?php echo function_returning_blogs(); ?> </div> <div class="right"> <?php echo function_returning_links(); ?> </div> </body> I'm personally thinking right now that doing static HTML pages is a better method, my reasoning is: I've separated my data, logic, and presentation (ie, "MVC") code. I can make changes to one without others. Browser caches mean I'm just getting server load mostly for the content, not the presentation wrapped around it. I could turn my "script.php" into a more robust API for the website. But I'm not certain or clear that these are legitimately good reasons, and I'm not confidently aware of other issues that could happen, so I would like to know the pros-and-cons, so to speak.

    Read the article

  • Using ViewModel Pattern with MVC 2 Strongly Typed HTML Helpers

    - by Brettski
    I am working with ASP.NET MVC2 RC and can't figure out how to get the HTML helper, TextBoxfor to work with a ViewModel pattern. When used on an edit page the data is not saved when UpdateModel() is called in the controller. I have taken the following code examples from the NerdDinner application. Edit.aspx <%@ Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.DinnerFormViewModel>" %> ... <p> // This works when saving in controller (MVC 1) <label for="Title">Dinner Title:</label> <%= Html.TextBox("Title", Model.Dinner.Title) %> <%= Html.ValidationMessage("Title", "*") %> </p> <p> // This does not work when saving in the controller (MVC 2) <label for="Title">Dinner Title:</label> <%= Html.TextBoxFor(model => model.Dinner.Title) %> <%= Html.ValidationMessageFor(model=> model.Dinner.Title) %> </p> DinnerController // POST: /Dinners/Edit/5 [HttpPost, Authorize] public ActionResult Edit(int id, FormCollection collection) { Dinner dinner = dinnerRepository.GetDinner(id); if (!dinner.IsHostedBy(User.Identity.Name)) return View("InvalidOwner"); try { UpdateModel(dinner); dinnerRepository.Save(); return RedirectToAction("Details", new { id=dinner.DinnerID }); } catch { ModelState.AddModelErrors(dinner.GetRuleViolations()); return View(new DinnerFormViewModel(dinner)); } } When the original helper style is used (Http.TextBox) the UpdateModel(dinner) call works as expected and the new values are saved. When the new (MVC2) helper style is used (Http.TextBoxFor) the UpdateModel(dinner) call does not update the values. Yes, the current values are loaded into the edit page on load. Is there something else which I need to add to the controller code for it to work? The new helper works fine if I am just using a model and not a ViewModel pattern. Thank you.

    Read the article

  • Fix a box 250px from top of content with wrapping content

    - by Matt
    I'm having trouble left aligning a related links div inside a block of text, exactly 250 pixels from the top of a content area, while retaining word wrapping. I attempted to do this with absolute positioning, but the text in the content area doesn't wrap around the content. I would just fix the related links div in the content, however, this will display on an article page, so I would like for it to be done without placing it in a specific location in the content. Is this possible? If so, can someone help me out with the CSS for this? Example image of desired look & feel... UPDATE: For simplicity, I've added example code. You can view this here: http://www.focusontheclouds.com/files/example.html. Example HTML: <!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"> <head> <title>Example Page</title> <style> body { width: 400px; font-family: Arial, sans-serif; } h1 { font-family: Georgia, serif; font-weight: normal; } .relatedLinks { position: relative; width: 150px; text-align: center; background: #f00; height: 300px; float: left; margin: 0 10px 10px 0; } </style> </head> <body> <div class="relatedLinks"><h1>Related Links</h1></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus est luctus ante auctor et ullamcorper metus ullamcorper. Vestibulum molestie, lectus sed luctus egestas, dolor ipsum aliquet orci, ac bibendum quam elit blandit nulla.</p> <p>In sit amet sagittis urna. In fermentum enim et lectus consequat a congue elit porta. Pellentesque nisl quam, elementum vitae elementum et, facilisis quis velit. Nam odio neque, viverra in consectetur at, mollis eu mi. Etiam tempor odio vitae ligula ultrices mollis. </p> <p>Donec eget ligula id augue pulvinar lobortis. Mauris tincidunt suscipit felis, eget eleifend lectus molestie in. Donec et massa arcu. Aenean eleifend nulla at odio adipiscing quis interdum arcu dictum. Fusce tellus dolor, tempor ut blandit a, dapibus ac ante. Nulla eget ligula at turpis consequat accumsan egestas nec purus. Nullam sit amet turpis ac lacus tincidunt hendrerit. Nulla iaculis mauris sed enim ornare molestie. </p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non purus diam. Suspendisse iaculis tincidunt tempor. Suspendisse ut pretium lectus. Maecenas id est dui.</p> <p>Nunc pretium ipsum id libero rhoncus varius. Duis imperdiet elit ut turpis porta pharetra. Nulla vel dui vitae ipsum sollicitudin varius. Duis sagittis elit felis, quis interdum odio. </p> <p>Morbi imperdiet volutpat sodales. Aenean non euismod est. Cras ultricies felis non tortor congue ultrices. Proin quis enim arcu. Cras mattis sagittis erat, elementum bibendum ipsum imperdiet eu. Morbi fringilla ullamcorper elementum. Vestibulum semper dui non elit luctus quis accumsan ante scelerisque.</p> </body> </html>

    Read the article

  • Input string was not in the correct format using int.Parse

    - by JDWebs
    I have recently been making a login 'representation' which is not secure. So before answering, please note I am aware of security risks etc., and this will not be on a live site. Also note I am a beginner :P. For my login representation, I am using LINQ to compare values of a DDL to select a username and a Textbox to enter a password, when a login button is clicked. However, an error is thrown 'Input string was not in the correct format', when using int.Parse. Front End: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login_Test.aspx.cs" Inherits="Login_Login_Test" %> <!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"> <head runat="server"> <title>Login Test</title> </head> <body> <form id="LoginTest" runat="server"> <div> <asp:DropDownList ID="DDL_Username" runat="server" Height="20px" DataTextField="txt"> </asp:DropDownList> <br /> <asp:TextBox ID="TB_Password" runat="server" TextMode="Password"></asp:TextBox> <br /> <asp:Button ID="B_Login" runat="server" onclick="B_Login_Click" Text="Login" /> <br /> <asp:Literal ID="LI_Result" runat="server"></asp:Literal> </div> </form> </body> </html> Back End: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Login_Login_Test : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { Binder(); } } private void Binder() { using (DataClassesDataContext db = new DataClassesDataContext()) { DDL_Username.DataSource = from x in db.DT_Honeys select new { id = x.UsernameID, txt = x.Username }; DDL_Username.DataValueField = "id"; DDL_Username.DataTextField = "txt"; DDL_Username.DataBind(); } } protected void B_Login_Click(object sender, EventArgs e) { if (TB_Password.Text != "") { using (DataClassesDataContext db = new DataClassesDataContext()) { DT_Honey blah = new DT_Honey(); blah = db.DT_Honeys.SingleOrDefault(x => x.UsernameID == int.Parse(DDL_Username.SelectedValue.ToString())); if (blah == null) { LI_Result.Text = "Something went wrong :/"; } if (blah.Password == TB_Password.Text) { LI_Result.Text = "Credentials recognised :-)"; } else { LI_Result.Text = "Error with credentials :-("; } } } } } I am aware this problem is very common, but none of the help I have found online is useful/relevant. Any help/suggestions appreciated; thank you for your time :-).

    Read the article

  • Inline HTML Syntax for Helpers in ASP.NET MVC

    - by kouPhax
    I have a class that extends the HtmlHelper in MVC and allows me to use the builder pattern to construct special output e.g. <%= Html.FieldBuilder<MyModel>(builder => { builder.Field(model => model.PropertyOne); builder.Field(model => model.PropertyTwo); builder.Field(model => model.PropertyThree); }) %> Which outputs some application specific HTML, lets just say, <ul> <li>PropertyOne: 12</li> <li>PropertyTwo: Test</li> <li>PropertyThree: true</li> </ul> What I would like to do, however, is add a new builder methid for defining some inline HTML without having to store is as a string. E.g. I'd like to do this. <% Html.FieldBuilder<MyModel>(builder => { builder.Field(model => model.PropertyOne); builder.Field(model => model.PropertyTwo); builder.ActionField(model => %> Generated: <%=DateTime.Now.ToShortDate()%> (<a href="#">Refresh</a>) <%); }).Render(); %> and generate this <ul> <li>PropertyOne: 12</li> <li>PropertyTwo: Test</li> <li>Generated: 29/12/2008 <a href="#">Refresh</a></li> </ul> Essentially an ActionExpression that accepts a block of HTML. However to do this it seems I need to execute the expression but point the execution of the block to my own StringWriter and I am not sure how to do this. Can anyone advise?

    Read the article

  • Problem writing HTML content to Word document in ASP.NET

    - by saran
    I am trying to export the HTML page contents to Word. My Html display page is: What is your favourite color? NA List the top three school ? one National two Devs three PS And a button for click event. The button click event will open MS word and paste the page contents in word. The word page contains the table property of html design page. It occurs only in Word 2003. But in word 2007 the word document contains the text with out table property. How can I remove this table property in word 2003. I am not able to add the snapshots. Else i will make you clear. I am designing the web page by aspx. I am exporting the web page content by the following code. protected void Button1_Click(object sender, EventArgs e) { Response.ContentEncoding = System.Text.Encoding.UTF7; System.Text.StringBuilder SB = new System.Text.StringBuilder(); System.IO.StringWriter SW = new System.IO.StringWriter(); System.Web.UI.HtmlTextWriter htmlTW = new System.Web.UI.HtmlTextWriter(SW); tbl.RenderControl(htmlTW); string strBody = "<html>" + "<body>" + "<div><b>" + htmlTW.InnerWriter.ToString() + "</b></div>" + "</body>" + "</html>"; Response.AppendHeader("Content-Type", "application/msword"); Response.AppendHeader("Content-disposition", "attachment; filename=" + fileName); Response.ContentEncoding = System.Text.Encoding.UTF7; string fileName1 = "C://Temp/Excel" + DateTime.Now.Millisecond.ToString(); BinaryWriter writer = new BinaryWriter(File.Open(fileName1, FileMode.Create)); writer.Write(strBody); writer.Close(); FileStream fs = new FileStream(fileName1, FileMode.Open, FileAccess.Read); byte[] renderedBytes; // Create a byte array of file stream length renderedBytes = new byte[fs.Length]; //Read block of bytes from stream into the byte array fs.Read(renderedBytes, 0, System.Convert.ToInt32(fs.Length)); //Close the File Stream fs.Close(); FileInfo TheFile = new FileInfo(fileName1); if (TheFile.Exists) { File.Delete(fileName1); } Response.BinaryWrite(renderedBytes); Response.Flush(); Response.End(); }

    Read the article

  • How to retrieve the size of a file before uploading it?

    - by geowa4
    I have an file input tag in my web app. I'd like to check that the file isn't too big before sending it to the server. Of course, I still have validation server side. Is there any way to do this with JavaScript? It must work in IE7+ and FF3+. Thank you. EDIT: somefileinputobject.files[0].filesize works in FF, but not IE.

    Read the article

  • jQuery UI dialog + WebKit + HTML response with script

    - by Anthony Koval'
    Once again I am faced with a great problem! :) So, here is the stuff: on the client side, I have a link. By clicking on it, jQuery makes a request to the server, gets response as HTML content, then popups UI dialog with that content. Here is the code of the request-function: function preview(){ $.ajax({ url: "/api/builder/", type: "post", //dataType: "html", data: {"script_tpl": $("#widget_code").text(), "widgets": $.toJSON(mwidgets), "widx": "0"}, success: function(data){ //console.log(data) $("#previewArea").dialog({ bgiframe: true, autoOpen: false, height: 600, width: 600, modal: true, buttons: { "Cancel": function() { $(this).dialog('destroy'); } } }); //console.log(data.toString()); $('#previewArea').attr("innerHTML", data.toString()); $("#previewArea").dialog("open"); }, error: function(){ console.log("shit happens"); } }) } The response (data) is: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript">var smakly_widget_sid = 0 ,widgets = [{"cols": "2","rows": "2","div_id": "smakly_widget","wid": "0","smakly_style": "small_image",}, ] </script> <script type="text/javascript" src="/media/js/smak/smakme.js"></script> </head> <body> preview <div id="smakly_widget" style="width:560px;height:550px"> </div> </body> </html> As you see, there is a script to load: smakme.js, somehow it doesn't execute in WebKit-based browsers (I tried in Safari and Chrome), but in Firefox, Internet Explorer and Opera it works as expected! Here is that script: String.prototype.format = function(){ var pattern = /\{\d+\}/g; var args = arguments; return this.replace(pattern, function(capture){ return args[capture.match(/\d+/)]; }); } var turl = "/widget" var widgetCtrl = new(function(){ this.render_widget = function (w, content){ $("#" + w.div_id).append(content); } this.build_widgets = function(){ for (var widx in widgets){ var w = widgets[widx], iurl = '{0}?sid={1}&wid={2}&w={3}&h={4}&referer=http://ya.ru&thrash={5}'.format( turl, smakly_widget_sid, w.wid, w.cols, w.rows, Math.floor(Math.random()*1000).toString()), content = $('<iframe src="{0}" width="100%" height="100%"></iframe>'.format(iurl)); this.render_widget(w, content); } } }) $(document).ready(function(){ widgetCtrl.build_widgets(); }) Is that some security issue, or anything else?

    Read the article

  • Detect whether the loading image is taken from camera directly, when using smartphones

    - by Eitan
    I am using html, tag: <input type = "file" /> On android and on many cellulars I have the ability to get the file directly by taking a picture and save it. How can I know (by javascript code) how did I get the picture (direcly by the camera, or by some files that on my cellular)? I did some workarround, and found exif (http://www.nihilogic.dk/labs/exif/exif.js), but I didn't succeed using it, either I don't know whether exif is the right solution. Thanks :)

    Read the article

  • GUI Freezes and Output to JTextField from user input

    - by user2929005
    I am having I hope only two issues currently. I have had help on this on a previous question that I have asked but now I am running into different issues. My current issues now is that I need to print out into a JTextField a sorted array. I do not have questions about how to sort the array I just would like help on how to get the array to print to the JTextField when the Bubble Sort button is pressed. Currently when I press the button it freezes. It freezes at this line. list.add(Integer.valueOf(input.nextInt())); please help Thank you. import java.awt.EventQueue; import javax.swing.*; import java.awt.event.*; import java.util.*; public class Sorting { private JFrame frame; private JTextArea inputArea; private JTextField outputArea; ArrayList<Integer> list = new ArrayList<Integer>(); Scanner input = new Scanner(System.in); /** * Launch the application. */ public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { public void run() { try { Sorting window = new Sorting(); window.frame.setVisible(true); } catch (Exception e) { e.printStackTrace(); } } }); } /** * Create the application. */ public Sorting() { initialize(); } /** * Initialize the contents of the frame. */ private void initialize() { frame = new JFrame(); frame.setBounds(100, 100, 450, 300); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Sorting"); frame.getContentPane().setLayout(null); JButton bubbleButton = new JButton("Bubble Sort"); bubbleButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent arg0) { list.add(Integer.valueOf(input.nextInt())); // for(int i = 0; i < list.size(); i++){ // // } } }); bubbleButton.setBounds(10, 211, 114, 23); frame.getContentPane().add(bubbleButton); JButton mergeButton = new JButton("Merge Sort"); mergeButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { } }); mergeButton.setBounds(305, 211, 114, 23); frame.getContentPane().add(mergeButton); JButton quickButton = new JButton("Quick Sort"); quickButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { } }); quickButton.setBounds(163, 211, 114, 23); frame.getContentPane().add(quickButton); inputArea = new JTextArea(); inputArea.setBounds(10, 36, 414, 51); frame.getContentPane().add(inputArea); outputArea = new JTextField(); outputArea.setEditable(false); outputArea.setBounds(10, 98, 414, 59); frame.getContentPane().add(outputArea); outputArea.setColumns(10); JLabel label = new JLabel("Please Enter 5 Numbers"); label.setHorizontalAlignment(SwingConstants.CENTER); label.setBounds(10, 11, 414, 14); frame.getContentPane().add(label); } }

    Read the article

  • jquery load a specific #Div content from multiple html files

    - by Vikram
    Hello friends I am trying to make a Content Slider for my site. I have multiple HTML files and the structure of these files is like this: <div id="title"><h2>Title of the Slide</h2></div> <div id="image"><a href="http://mylink.com"><img src="image.jpg" width="600" height="300" alt="image"</a></div> <div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div> I have been trying to use the following script get content (but no success): <?php function render($position="") { ob_start(); foreach(glob("/slides/*.html") as $fileName) { $fname = basename( $fileName ); $curArr = file($fname); $slides[$fname ]['title'] = $curArr[0]; $slides[$fname ]['image'] = $curArr[1]; $slides[$fname ]['content'] = $curArr[2]; foreach($slides as $key => $value){ ?> <div id="slide-title"> <?php echo $value['title'] ?> </div> <div id="slide-content"> <?php echo $value['image'] ?> </div> <div id="slide-image"> <?php echo $value['content'] ?> </div> <?php }} ?> <?php return ob_get_clean(); } But then I came to know about a jQuery function.... (again no success) jQuery.noConflict(); (function($){ $(document).ready(function () { $('#slide-title').load('slides/slide1.html #title'); $('#slide-content').load('slides/slide1.html #content'); $('#slide-image').load('slides/slide1.html #image'); }); })(jQuery); Now My questions are..... Am I using the right syntax. How do I get the content from multiple files using jQuery. Please Note : My knowledge on Programming is almost '0'. I have just started learning it.

    Read the article

  • Validate site/domain via javascript

    - by Chez
    I have a standard html form where the user can specify a website/domain: favourite website: [ ] I expect the user to type things like: [www.google.com] [www.yahoo.com] [www.example.co.jp] I want to validate the domain/site via javascript so if a user had typed something wrong: [www...google.com] [www.-example.com] I tell them straight away. Can anybody post this javascript ? Alternatively can anybody point me to a site where I can look at their javascript ? Many Thanks

    Read the article

  • Equivalent of IllegalArgumentException of Java in C++

    - by vito
    In Java if an input argument to a method is invalid, we can throw an IllegalArgumentException (which is of type RuntimeException). In C++, there is no notion of checked and unchecked exceptions. Is there a similar exception in standard C++ which can be used to indicate a runtime exception? Or is there a common style not in the standard but everyone follows in practice for a situation like this? Or, should I just create my own custom exception and throw it?

    Read the article

< Previous Page | 194 195 196 197 198 199 200 201 202 203 204 205  | Next Page >