I am not the best with ASP.NET, but I am using it for an authentication back-end and RESTful Web API (as I know enough C# to be dangerous).
I have a website built strictly in HTML, CSS, and JS. It looks fantastic outside when started directly with any popular browser (chrome, IE, firefox). I want to use some of the functionality of ASP.NET within the this website, and have it be the front-end to my web application. I simply dragged and dropped the HTML, CSS, and JS folders (including all images, etc.) into my ASP.NET project, and when I preview in browser from visual studio, the entire HTML layout is garbled and everything just doesn’t look the same.
I added permissions for unauthourized users to access the pages, css folders, and the js folder in Web.config.
Any idea on why this would happen? Does ASP.NET render HTML/CSS differently during build than just viewing it directly through the browser?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Site Name » Awesome Tagline Here</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/red.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<script src="js/modernizr.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/colorbox.js" type="text/javascript"></script>
<script src="js/flexslider.js" type="text/javascript"></script>
<script src="js/livevalidation.js" type="text/javascript"></script>
<script src="js/twitter.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<section id="wrapper">
<section class="shell">
<!-- Header -->
<header>
<h1 id="logo"><a href="home.html" class="notext">Name Of site</a></h1>
<nav>
<ul class="main-nav">
<li class="current"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li>
<a href="services.html">Services</a>
<ul>
<li><a href="services.html">Service Page 1</a></li>
<li><a href="services.html">Service Page 2</a></li>
<li>
<a href="services.html">Service Page 3</a>
<ul>
<li><a href="services.html">Service Page 1</a></li>
<li><a href="services.html">Service Page 2</a></li>
<li><a href="services.html">Service Page 3</a></li>
<li><a href="services.html">Service Page 4</a></li>
</ul>
</li>
<li><a href="services.html">Service Page 4</a></li>
</ul>
</li>
<li><a href="projects.html">Projects</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="socials">
<li class="facebook"><a href="#">Facebook</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="rss"><a href="#">RSS</a></li>
</ul>
</nav>
</header>
<!-- End Header -->
</section>
<section id="large-slider">
<ul class="slides">
<li>
<img src="css/images/home-slide1.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
<li>
<img src="css/images/home-slide2.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
<li>
<img src="css/images/home-slide3.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
<li>
<img src="css/images/home-slide1.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
</ul>
</section>
<section class="shell">
<section class="about-row">
<h2 class="section-head"><a href="about.html" class="more">More Info</a> <span><span>More</span> About Us</span></h2>
<section class="thumbs">
<img src="css/images/th-about1.jpg" alt="" />
<img src="css/images/th-about2.jpg" alt="" />
<img src="css/images/th-about3.jpg" alt="" />
<img src="css/images/th-about4.jpg" alt="" />
</section>
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut</p>
</section>
</section>
<section class="projects-row">
<h2 class="section-head"><a href="projects.html" class="more">More Projects</a> <span><span>Latest</span> Projects</span></h2>
<ul class="thumbs">
<li>
<a href="project.html"><img src="css/images/th-home1.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
<li>
<a href="project.html"><img src="css/images/th-home2.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
<li>
<a href="project.html"><img src="css/images/th-home3.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
<li>
<a href="project.html"><img src="css/images/th-home4.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
</ul>
</section>
<section class="clients-row">
<h2 class="section-head"><a href="#" class="more">View More</a> <span><span>Our</span> Clients</span></h2>
<ul>
<li><a href="#"><img src="css/images/client1.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client2.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client3.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client4.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client5.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client6.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client7.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client8.png" alt="" /></a></li>
</ul>
</section>
<section class="row">
<section class="half">
<h2 class="section-head"><span><span>We</span> Hire</span></h2>
<h4>SALES MARKETING CONSULTANT</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">More</a></p>
<h4>ART DIRECTOR</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">More</a></p>
</section>
<section class="half">
<h2 class="section-head"><span><span>Our</span> Services</span></h2>
<ul class="left">
<li><a href="services.html">Advertising</a></li>
<li><a href="services.html">Brand Identity Design</a></li>
<li><a href="services.html">Business Planning</a></li>
<li><a href="services.html">Startup Planning</a></li>
<li><a href="services.html">Campaign Planning</a></li>
</ul>
<ul class="right">
<li><a href="services.html">Online Advertising Services</a></li>
<li><a href="services.html">Website Architecture Design</a></li>
<li><a href="services.html">Interactive Design</a></li>
<li><a href="services.html">Game Design</a></li>
<li><a href="services.html">Development</a></li>
</ul>
</section>
</section>
<h2 class="bottom-text">“Eat your <strong>betting money</strong>, but don't bet your <strong>eating money</strong>.”</h2>
</section>
<section id="footer-push"></section>
</section>
<!-- Footer -->
<footer>
<section class="shell">
<section id="to-top">
<a href="#">Up</a>
<span class="overlay"></span>
</section>
<section class="twitter-feed">
<h5>Latest Tweets</h5>
<section id="tweets"></section>
</section>
<section class="about-box">
<h5>Tested on All Browsers</h5>
<p>Find out more theme features <a href="#">Here</a></p>
<img src="css/images/browsers.png" alt="" />
</section>
<section class="contact-box">
<h5>Get in Touch</h5>
<ul>
<li><span class="small">email.</span> <a href="#">info@ibetwhat.com</a></li>
<li><span class="small">ph.</span> 655-606-105</li>
<li><span class="small">add.</span> East Pixel aBld. 99 <br /> City 9000</li>
</ul>
</section>
<section class="socials">
<ul>
<li class="facebook"><a href="#">Facebook <span>Become a fan!</span></a></li>
<li class="twitter"><a href="#">Twitter <span>Need more feed</span></a></li>
<li class="rss"><a href="#">RSS <span>Be up to date</span></a></li>
</ul>
</section>
</section>
<section id="bottom">
<section class="shell">
<p class="foot-nav">
<a href="home.html">Home</a> <span>|</span>
<a href="about.html">About</a> <span>|</span>
<a href="services.html">Services</a> <span>|</span>
<a href="projects.html">Projects</a> <span>|</span>
<a href="blog.html">Blog</a> <span>|</span>
<a href="contact.html">Contact</a> <span>|</span>
<a href="#">Bonus Pages</a>
</p>
<p>© 2012 My Company.</p>
</section>
</section>
</footer>
<!-- End Footer -->
</body>
</html>
Most likely your references are not the same in your VS project as they are on the server. Check that the relative path on your HTML to the CSS file is correct. Next check for the image paths to still work inside your CSS (if any). You’ll need to fix those based on your new location.
Try accessing the CSS, js, and images by direct URLs. Verify that the HTML uses the same paths.
Of course use Firebug or Chrome Developer Tools to debug the paths.