locked
How do I center my website? RRS feed

  • Question

  • Hello All

    When I debug my silverlight application + webite it is always align to the left how I make it centered?

     

    Thanks


    I'm a PC and I run Left For Dead 2 :)
    Sunday, December 11, 2011 6:24 PM

Answers

  • Create a main div that holds all your other divs.

    <div id="main" style="margin: 20px auto auto auto; position: relative; width: 1000px; height: 800px; z-index: 3; top: auto; right: auto; bottom: auto; left: auto; ">

    </div>

    Of course you'd need to change the width, height, z-index if you wish and the top margin (set here to 20px) and the div name (set here to "main").

    ~Christine

    • Marked as answer by Asim09 Sunday, December 11, 2011 6:49 PM
    Sunday, December 11, 2011 6:32 PM
  • Never mind I fixed it did not put the width in!

     

    Thanks!


    I'm a PC and I run Left For Dead 2 :)
    • Marked as answer by Asim09 Sunday, December 11, 2011 6:49 PM
    Sunday, December 11, 2011 6:49 PM

All replies

  • Create a main div that holds all your other divs.

    <div id="main" style="margin: 20px auto auto auto; position: relative; width: 1000px; height: 800px; z-index: 3; top: auto; right: auto; bottom: auto; left: auto; ">

    </div>

    Of course you'd need to change the width, height, z-index if you wish and the top margin (set here to 20px) and the div name (set here to "main").

    ~Christine

    • Marked as answer by Asim09 Sunday, December 11, 2011 6:49 PM
    Sunday, December 11, 2011 6:32 PM
  • It does not work, I can see the loading thing in the middle but then it jumps to the left, here is the HMTL page code:

     

    <div id="main">
    	<div id='errorLocation' style="font-size: small;color: Gray;"></div>
       
    
    	<div id="silverlightControlHost">
    		<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
    			<param name="source" value="ClientBin/Silverlight_001.xap"/>
    			<param name="onerror" value="onSilverlightError" />
    			<param name="background" value="white" />
    			<param name="minRuntimeVersion" value="4.0.60310.0" />
    			<param name="autoUpgrade" value="true" />
    			<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" style="text-decoration: none;">
    			<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration: none;">
    				<img src="http://go.microsoft.com/fwlink/?LinkID=161376" alt="Get Microsoft Silverlight" style="border-style: none"/>
    			</a>
    		</object><iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe></div></div>
    

    here is the CSS:

    	<style type="text/css">
    	html {
    		height: 100%;
    		/*overflow: auto;*/
    	}
    	body {
    		height: 100%;
    		padding: 0;
    		margin: 0;
    	}
    	
    	
    	#main{
    	    margin-right: auto;
    	margin-left: auto;}
    	
    	
    	#silverlightControlHost {
    	height: 100%;
    	
    }
    	</style>


    Here is the Javascript code:

     

    <script type="text/javascript" src="Silverlight.js"></script>
    	<script type="text/javascript">
            function onSilverlightError(sender, args) {
            
                var appSource = "";
                if (sender != null && sender != 0) {
                    appSource = sender.getHost().Source;
                } 
                var errorType = args.ErrorType;
                var iErrorCode = args.ErrorCode;
                
                if (errorType == "ImageError" || errorType == "MediaError")
                    return;
                
                var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
    
                errMsg += "Code: "+ iErrorCode + "    \n";
                errMsg += "Category: " + errorType + "       \n";
                errMsg += "Message: " + args.ErrorMessage + "     \n";
    
                if (errorType == "ParserError")
                {
                    errMsg += "File: " + args.xamlFile + "     \n";
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                else if (errorType == "RuntimeError")
                {           
                    if (args.lineNumber != 0)
                    {
                        errMsg += "Line: " + args.lineNumber + "     \n";
                        errMsg += "Position: " +  args.charPosition + "     \n";
                    }
                    errMsg += "MethodName: " + args.methodName + "     \n";
                }
    
                throw new Error(errMsg);
            }
    	</script>



    I'm a PC and I run Left For Dead 2 :)
    Sunday, December 11, 2011 6:46 PM
  • Never mind I fixed it did not put the width in!

     

    Thanks!


    I'm a PC and I run Left For Dead 2 :)
    • Marked as answer by Asim09 Sunday, December 11, 2011 6:49 PM
    Sunday, December 11, 2011 6:49 PM