WampServer
Apache, PHP, MySQL
on Windows
Bootstrap, css not displaying through localhost
Posted by:
Seraphyx
(---.socal.res.rr.com)
Date: December 14, 2013 09:55AM
Version of Operating system? Windows 7 64 bit
Version of Wamp Server installed? 2.4
Version of Apache you are running? 2.4.4
Version of MySQL you are running? 5.6.12
Version of PHP you are running? 5.4.12
The wamp icon is green.
Hello all, I've been trying to learn and work with bootstrap recently and everything has been going mostly okay. I am using Dreamweaver CC to code and in the live view all of the CSS seems to be working perfectly fine, however, when I move the entire website folder(including the css and js folders) to wamp/www/to test it through localhost the CSS does not seem to be displaying when I browse to the html page.
My html code:
Here is a screenshot of what it looks offline in DW CC live mode, which is working (images are too large so I'm just linking them):
[i43.tinypic.com]
And what it looks like when I put it in the www directory in wamp to test it out, not working (note: I moved the ENTIRE directory including css and js, everything is intact and the locations of files are unchanged):
[i39.tinypic.com]
As you can see no CSS seems to be applied when I open the page through localhost. If I go directly into the wamp directory and open the same page with chrome it will look perfectly fine but if I try to open it through the browser by going to localhost/<location of my webpage> then none of the CSS seems to be working. Any pointers on what I'm doing wrong?
Edit: I tested this without bootstrap and just a generic dreamweaver template and external css file, same problem. I'm guessing it has to be some sort of setup option that I've missed or something.
Edited 5 time(s). Last edit at 12/17/2013 05:29AM by Seraphyx.
Version of Wamp Server installed? 2.4
Version of Apache you are running? 2.4.4
Version of MySQL you are running? 5.6.12
Version of PHP you are running? 5.4.12
The wamp icon is green.
Hello all, I've been trying to learn and work with bootstrap recently and everything has been going mostly okay. I am using Dreamweaver CC to code and in the live view all of the CSS seems to be working perfectly fine, however, when I move the entire website folder(including the css and js folders) to wamp/www/to test it through localhost the CSS does not seem to be displaying when I browse to the html page.
@charset "utf-8";
.mainContent {
margin-top: 60px;
}
body {
background-image: url
../images/bg.png);
color: #000000;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:link, a:active {
}
#body {
}
.navbar {
padding-right: 15px;
}My html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BS</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="[oss.maxcdn.com];
<script src="[oss.maxcdn.com];
<![endif]-->
</head>
<body id="body">
<!-- NAV BAR -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- END NAV BAR -->
<div class="mainContent">
<div class="col-sm-8">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p> <a class="btn btn-lg btn-primary" href="#" role="button">Button »</a> </p>
</div>
<div class="col-sm-4">
<h1>Twitter Feed Widget</h1>
<p>This is the 2nd column in the 1st row.</p>
</div>
<div class="col-sm-12">
<h1>Row 2</h1>
<p>This is the second row, takes up all 12 grid spaces</p>
</div>
<div class="col-sm-4">
<h1>Row 3</h1>
<p>This div takes up 4 grid spaces</p>
</div>
<div class="col-sm-4">
<h1>Row 3</h1>
<p>Third row second column</p>
</div>
<div class="col-sm-4">
<h1>Row 3</h1>
<a class="twitter-timeline" href="[twitter.com]; data-widget-id="411754892240228352">Tweets by @Seraphyx_</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"
;</script>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="[code.jquery.com];
<script src="js/bootstrap.min.js"></script>
</body>
</html>Here is a screenshot of what it looks offline in DW CC live mode, which is working (images are too large so I'm just linking them):
[i43.tinypic.com]
And what it looks like when I put it in the www directory in wamp to test it out, not working (note: I moved the ENTIRE directory including css and js, everything is intact and the locations of files are unchanged):
[i39.tinypic.com]
As you can see no CSS seems to be applied when I open the page through localhost. If I go directly into the wamp directory and open the same page with chrome it will look perfectly fine but if I try to open it through the browser by going to localhost/<location of my webpage> then none of the CSS seems to be working. Any pointers on what I'm doing wrong?
Edit: I tested this without bootstrap and just a generic dreamweaver template and external css file, same problem. I'm guessing it has to be some sort of setup option that I've missed or something.
Edited 5 time(s). Last edit at 12/17/2013 05:29AM by Seraphyx.
Re: Bootstrap, css not displaying through localhost
Posted by:
RiggsFolly
(---.as13285.net)
Date: December 16, 2013 02:55PM
You might be better off asking on a dreamweaver specific site.
---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-
---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-
Re: Bootstrap, css not displaying through localhost
Posted by:
Seraphyx
(---.socal.res.rr.com)
Date: December 17, 2013 05:34AM
It doesn't appear to be an issue with Dreamweaver. The styling and everything looks fine in it. The only issue comes when I try to use wamp to browse to that page. If I go IN the site's root directory in the wamp folder and open the index page with chrome (right click on the page, open with chrome), all of the styling is fine again, just like in Dreamweaver. However, if I try to use a browser to open the page through localhost it doesn't appear to apply any styling. What I mean is going to localhost in a browser with wamp running and clicking on my website to go to the index page, no styling is applied.
Hopefully this makes sense.
Hopefully this makes sense.
Re: Bootstrap, css not displaying through localhost
Posted by:
RiggsFolly
(---.as13285.net)
Date: December 17, 2013 11:17AM
This will most likely be a folder location/heirarchy issue. Something is no longer in the right place to be incuded.
Use DW to setup the site and it will probably get the directory locations correct.
---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-
Use DW to setup the site and it will probably get the directory locations correct.
---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-
Sorry, only registered users may post in this forum.
