xeestudios

Dear All, I would like to know your view along-with your important feedback upon my homepage design. Kindly suggest me if you have better idea which i can implement. Which Logo i should use? (attached two logos) Brief about my website. 1) Project Exchange program 2) Website Designing 3) Website Development 4) SEO & other digital marketing. Website URL : www.xeestudios.com

Great website! But if you can fix some minor issues this will be superb. 1) Instead of PT Sans use Open Sans font. 2) Proper margin is required in the footer section. 3) Use justified alignment for the paragraph. Looks more professional. 4) Instead of using gradient image in the footer you can have much better footer. 5) Footer looks very simple. Its like Tuxedo with Slippers. 6) In mobile view the footer element are not showing responsive behavior.(Snapshot enclosed) 7) The banner image needs to be large or either fixed to the body so that even on large screen it shouldnt show black background.(Snapshot enclosed). SEO Point of view: 1) Donot use <br /><br />, bad practice. You should use padding or margin instead. 2)You have some errors in validator. 3)Your website ranking is too low.(2 years old website) 4)In the footer you have used TABLE, Use UL instead. That would give you more flexibility. There are few more. If you are interest in fixing this up you can contact me at info@xeestudios.com or can visit www.xeestudios.com

<div style="background:url(images/slide-5.jpg); height:300px; width:600px"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr> <td style="background:rgba(240,240,240,0.9);" width="500" height="100"> <ul> <li>Sample Text 1</li> <li>Sample Text 1</li> <li>Sample Text 1</li> </ul> </td> </tr> </table> </div> You cannot modify the opacity of an image using the css code as per my knowledge. Either you can do it in your photo editor or you can use the CSS code for background as i have shown you in the above example. Modify the alpha parameter, this way you can vary the transparency. I hope this solves your issue www.xeestudios.com

Easiest Way <style> body{ margin:0} .nav { font-size:25px; top:50%; position:fixed; font-family:UtsaahRegular; text-align:center; float: left; background-color:#999999; border-radius:0 10px 10px 0; } ul{ list-style:none; margin:0 0 5px 0; padding:0 0 0 10px;} ul li{text-align:left; width:80px;} ul li a{ text-decoration:none;font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase} ul li a:hover{ color:#FFFFFF;} </style> <div class="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Contact</a></li> <li><a href="/">Etc</a></li> <li><a href="/">Etc</a></li> </ul> </div>

<style> body{ margin:0} .main{ width:950px; margin:0 auto; box-shadow: 0 0 5px #333;} .header{ height:120px; background:#9c0;} .section{ height:300px; background:#efefef;} .content{ min-height:500px} .footer { height:70px; background:#9cf;} </style> <div class="main"> <div class="header"> <header></header> </div> <div class="section"> <section></section> </div> <div class="content"> <main></main> </div> <div class="footer"> <footer></footer> </div> </div> *********************************************************************************** I suggest use similar structure which will bind your element nicely. Use min-height with the main div and it will handle your data nicely.

<style> h1,h2,h3,h4,h5,h6{ margin:0} .col-md-12{ border:1px solid #9c0; width:950px; margin:0 auto} .row2{ height:300px; background:#9cf;} .register{ float:left; width:33%; min-height:300px; background:#9c0;} .col-md-4{} .adspace{ float:left; width:33%; min-height:300px; margin-left:4px; background:#c00;} .market{ float:left; width:33%; min-height:300px; margin-left:4px; background:#efefef;} .market-heading{} .market-list{} </style> <section class="col-md-12"> <div class="row2"> <div class="register col-md-4"> <h4 class="register-heading">Get registered with us</h4> <form action="" method="post"> </form> </div> <div class="adspace col-md-4"></div> <div class="market col-md-4"> <h4 class="market-heading">Marketplace</h4> <ul class="market-list"> </ul> </div> </div> </section> Simple and Quick Solution Use "min-height" with the CSS as i have shown you in the snapshot attached. It will work without fail.

Hi, I m having issue with my contact form ( xeestudios.com/contact-us ). Sometimes it takes the input nicely and sometimes it throws error {{JSON Output}} Can anyone suggest me the possible cause? Would be thankful to you.

I think you need the following solution. If you have something else in your mind draw it in MSPAINT and post back, i would love to solve it for you. Write to me at info @ xeestudios.com /********************CSS*************************/ *{ padding:0; margin:0;} body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-image: url(bk.gif) repeat-x;; } #wrapper{ width: 950px; margin:0 auto; box-shadow:0 0 5px #555; } #header { height: 150px; /****************950px doesnt looks appropriate************************/ background: url('Untitled-1.png'); position:relative; float:left; } #content { height:500px; position:relative; float:left; } #footer { height:70px; position:relative; float:left; } ***************************HTML********************************* <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Your Page Title</title> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html>

Simple and Easy CSS CODE .wrapper { width:960px; margin:0 auto;} .header { width:100%; margin:0} .content { width:960px; margin:0 auto} .footer {width:100%; margin:0} HTML CODE <div class="header"> <div class="wrapper"><!-----Your Content --------------></div> </div> <div class="content"><!-----Your Content --------------></div> <div class="footer"> <div class="wrapper"><!-----Your Content --------------></div> </div> ---------> OR <-------------- CSS CODE .wrapper { width:960px; margin:0 auto;} .header,.content,.footer { width:100%; margin:0} HTML CODE <div class="header"> <div class="wrapper"><!-----Your Content --------------></div> </div> <div class="content"> <div class="wrapper"><!-----Your Content --------------></div> </div> <div class="footer"> <div class="wrapper"><!-----Your Content --------------></div> </div> By Xee Studios

very simple name the body of video.html with <body class="video"> and in style.css use .video before all the class in style.css For. e.g - .video h1,h2,h3,h4 { } .video p{ } .video span { } etc.. Just put .video with all the class to be used in vedio.html There are other ways too but for that i need to look into your files. By Xee Studios

Very Simple Solution :- ****************************************************************************************************************************** <body> <form style="width:440px;" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <fieldset style="text-align:left; padding:24px;"> <legend>Subscribe to Our Newsletter </legend> <br /> <?php if($msg_to_user !=''){ ?> Name:<br /> <input name="name" type="text" maxlength="36" value="<?php echo $name; ?>" /><br /> Email:<br /> <input name="email" type="text" maxlength="36" value="<?php echo $email; ?>" /><br /><br /> <input name="mySubmitBtn" type="submit" value="Submit"> <?php } ?> <?php echo $msg_to_user; ?> </fieldset> </form> </body> ****************************************************************************************************************************** By Xee Studios

Thanks

How to play Sound on click or Mouseover My goal is to have the sound play when the mouse hovers over a certain element, like a menu item. I have tried many changes through my HTML and CSS, but I can't find the solution, so I'm hoping that someone with better eyes and more knowledge of web-design can give me a solution. Take a look at www.xeestudios.com . Just need that if anyone places mouse over the menu item it should play sound. That's it. Thanks in Advance.

Simple and Easy Solution.... Add overflow: hidden; To --> #container By Xee Studios

Float will be a better choice as it support many attributes like padding, margin, width etc to make ur menu flexible. By Xee Studios

Do this simple Modification and i hope it solves your issue. ********************************************************************************************************** <style> /* Footer Style */ .footer{ position:fixed; bottom:0px; left:0px; width:100%; font-size:13px; background:#000; height:20px; padding-bottom:10px; text-transform:uppercase; z-index:4; } .footer a{ padding:5px 10px; letter-spacing:1px; text-shadow:1px 1px 1px #000; color:#ddd; float:right; } .footer a:hover{ color:#fff; } .footer a span{ font-weight:bold; position: relative; bottom: 8px; } .footer a.left{ float:left; } .fleft{ float:left;} </style> <div class="footer"> <div class="fleft"> <a href="http://www.thoroprod.com"> <img src="images/thoro.png" width="25"> <span>THORO PRODUCTIONS, INC. © 2013 THORO PRODUCTIONS™ ALL RIGHTS RESERVED. </span> </a> </div> <div class="fright"> <a href=""><img src="images/logo2.png" width="25"></a> <a href="http://www.youtube.com/thoroprod1"><img src="images/youtube.png" width="25"></a> <a href="http://www.twitter.com/rexmakesbeats"><img src="images/twitter.png" width="25"></a> <a href="http://www.facebook.com/thoroprod"><img src="images/facebook.png" width="25"></a> </div> *********************************************************************************************************************** By Xee Studios

Simple and Quick Solution On Line No. 218 in Style.css #primary-menu ul li { Remove -> Z-index : 40; } By Xee Studios

Use the following changes.. *************************************************************************************************************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>text text text text text t[[][]ext text text</title> <meta name="viewport" content="width=800"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!--Page Head--> </script> <style type="text/css"> * { margin: 0px; padding:0px; } html, body { height: 93%; } #container { min-height:100%; } .Button1,.Button1:link,.Button1:visited{background-image:url('wpimages/wp0371eabb_06.png');background-position:0px 0px;text-decoration:none;display:block;position:absolute;} .Button1:focus{outline-style:none;} .Button1:hover{background-position:0px -46px;} .Button1:active{background-position:0px -23px;} .Button1 span,.Button1:link span,.Button1:visited span{color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:capitalize;font-style:normal;left:0px;top:4px;width:90px;height:14px;font-size:11px;display:block;position:absolute;cursor:pointer;} .Button1:hover span{text-transform:none;} .Button1:active span{text-transform:none;} .Button2,.Button2:link,.Button2:visited{background-image:url('wpimages/wp0371eabb_06.png');background-position:0px -69px;text-decoration:none;display:block;position:absolute;} .Button2:focus{outline-style:none;} .Button2 span,.Button2:link span,.Button2:visited span{color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:4px;width:90px;height:14px;font-size:11px;display:block;position:absolute;cursor:pointer;} .Button3,.Button3:link,.Button3:visited{background-image:url('wpimages/wp679ffa40_06.png');background-position:0px 0px;text-decoration:none;display:block;position:absolute;} .Button3:focus{outline-style:none;} .Button3:hover{background-position:0px -44px;} .Button3:active{background-position:0px -22px;} .Button3 span,.Button3:link span,.Button3:visited span{color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:4px;width:90px;height:14px;font-size:11px;display:block;position:absolute;cursor:pointer;} .Body-P { margin:0.0px 0.0px 12.0px 0.0px; text-align:justify; font-weight:400; } .Body-P-P0 { margin:0.0px 0.0px 6.0px 0.0px; text-align:right; font-weight:400; } .Body-C { font-family:"Arial", sans-serif; font-size:13.0px; line-height:1.23em; } .Body-C-C0 { font-family:"Arial", sans-serif; font-size:11.0px; line-height:1.27em; } #footer{ min-width: 900px; margin-top:44px; background:#4da97a; position: fixed; bottom:-1%; margin: 0 auto; width:100%; padding:10px; } .push { height: 50px; /* .push must be the same height as .footer */ } </style> <script type="text/javascript" src="wpscripts/jsRollover.js"></script> <script type="text/javascript"> PPImgInit('roll_1','wpimages/wp2ce72923_06.png','wpimages/wp23fd5ce6_06.png','','',0,0); PPImgInit('roll_3','wpimages/wp2fccadb5_06.png','wpimages/wp4b2110a1_06.png','','',0,0); PPImgInit('roll_4','wpimages/wp2219c97b_06.png','wpimages/wpd0bc036a_06.png','','',0,0); PPImgInit('roll_2','wpimages/wpd558206d_06.png','wpimages/wp70536ef8_06.png','','',0,0); </script> </head> <body style="background:url('wpimages/wp1d62cba6_06.png') repeat;"> <div id="container" class="clearfix"> <div style="width:900px; margin-left:auto; margin-right:auto; height:80px; position:relative;"> <img src="wpimages/wpd3eca1fb_06.png" border="0" width="160" height="66" alt="" style="position:absolute;left:1px;top:23px;"> <a href="index.html" id="btn_7" class="Button1" style="position:absolute;left:190px;top:61px;width:90px;height:23px;"><span>Button</span></a> <a href="page2.html" id="btn_8" class="Button1" style="position:absolute;left:282px;top:61px;width:90px;height:23px;"><span>Button</span></a> <a href="page4.html" id="btn_10" class="Button1" style="position:absolute;left:466px;top:62px;width:90px;height:23px;"><span>Button</span></a> <a href="page5.html" id="btn_11" class="Button1" style="position:absolute;left:558px;top:62px;width:90px;height:23px;"><span>Precios</span></a> <a href="javascript:;" id="btn_12" class="Button2" style="position:absolute;left:650px;top:62px;width:90px;height:23px;"><span>Button</span></a> <a href="javascript:;" id="btn_13" class="Button1" style="position:absolute;left:742px;top:62px;width:90px;height:23px;"><span>Button</span></a> <a href="page3.html" id="btn_9" class="Button3" style="position:absolute;left:374px;top:62px;width:90px;height:22px;"><span>Button</span></a> </div> <div style="width:100%; background:#fff;height:auto; position:relative; margin-top:20px; left:0px; top:20%;"> <div id="paracc" style="width:900px; margin-left:auto; margin-right:auto; min-height:600px;"> <img src="wpimages/wp226c73cf_06.png" border="0" width="217" height="60" title="" alt="Contacto " style=""> <br> <br> <br> <table> <tr> <td> <div style="min-height:150px; margin-top:30px; padding-bottom:10px;"> <p class="Wp-Normal-P"><span class="Normal-C">text tesx text text</span></p> <p></p> <p class="Wp-Normal-P"><span class="Normal-C"> </span></p> <p class="Wp-Normal-P"><span class="Normal-C">text tesx text text</span></p> <p></p> <p class="Wp-Normal-P"><span class="Normal-C"> </span></p> <p class="Wp-Normal-P"><span class="Normal-C">text tesx text text</span></p> <p class="Wp-Normal-P"><span class="Normal-C">text tesx text text</span></p> <p></p> <p class="Wp-Normal-P"><span class="Normal-C"> </span></p> <p class="Wp-Normal-P"><span class="Normal-C">text tesx text text</span></p> <p class="Wp-Normal-P"><span class="Normal-C">text tesx text text text tesx text texttext tesx text</span></p> </div> </td><td style="position:absolute;"> <div style="position:relative; top:-0px; right:-100px; clear:both;"> </div> </td></tr></table> </div> </div> <div class="push" style="background:url('wpimages/wp0c2acc0f_06.png') repeat;"></div> </div> <div id="footer" style=""> <div style="width:900px; margin-left:auto; margin-right:auto; padding:10px 0px 0px 0px;" > <div style="float:left;"> <img src="wpimages/wpd558206d_06.png" border="0" width="47" height="47" name="roll_2" alt="" onmouseover="PPImgAction('over','roll_2')" onmouseout="PPImgAction('out','roll_2')" style=""> <img src="wpimages/wp2ce72923_06.png" border="0" width="47" height="47" name="roll_1" alt="" onmouseover="PPImgAction('over','roll_1')" onmouseout="PPImgAction('out','roll_1')" style=""> <img src="wpimages/wp2fccadb5_06.png" border="0" width="47" height="47" name="roll_3" alt="" onmouseover="PPImgAction('over','roll_3')" onmouseout="PPImgAction('out','roll_3')" style=""> <img src="wpimages/wp2219c97b_06.png" border="0" width="47" height="47" name="roll_4" alt="" onmouseover="PPImgAction('over','roll_4')" onmouseout="PPImgAction('out','roll_4')" style=""> </div> <div style=" margin-right:80px;padding:0px 0px 0px 0px;"> <p class="Body-P-P0"><span class="Body-C-C0">text tesx text text</span></p> <p class="Body-P-P0"><span class="Body-C-C0">text tesx text texttext tesx text texttext tesx text texttext</span></p> <p class="Body-P-P0"><span class="Body-C-C0">text tesx text texttext tesx text text</span></p> </div> </div> </div> </body> </html> *************************************************************************************************************************************************** By Xee Studios

Use a PHP Script, will help you fix this issue.

It is the most simple issue... If your CSS file is located in the any sub-directory For e.g ->www/css/styles.css then add "../" before the image path like below. html { background: url('../images/Background.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } By Xee Studios

<style><!-- #row { margin:0 auto; width: 900px; } #row .box{ float:left; width: 271px; margin: 10px 10px 13px 13px; height: 177px; background: #000; } #row .box img { position:absolute; z-index:2; } span{ z-index:1; color:#FFFFFF; display:block; text-align:center; margin-top:80px;} #row .box img:hover { opacity: 0.2; cursor:pointer; z-index:0; } --></style> <div id="row"> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #1</span></div> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #2</span></div> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #3</span></div> </div> <div id="row"> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #4</span></div> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #5</span></div> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #6</span></div> </div> <div id="row"> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #7</span></div> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #8</span></div> <div class="box"><img src="http://puu.sh/5LSQD.png" width="271" height="177" /><span>Text #9</span></div> </div> By Xee Studios