Remote access to localhost does not show css

Problems with the Windows version of XAMPP, questions, comments, and anything related.

Remote access to localhost does not show css

Postby Willbe90 » 24. March 2011 19:25

So I have installed xampp and uploaded my website template on to my localhost server. I can view the website on my computer, but when I try to access it from another computer (a friends mac- chrome and on safari) it shows the basic html. No images are shown, No CSS style is shown. The website shows veritcally. I am somewhat of a networking newbie. If it works fine for me, but they cannot see the website as I do, what could be the issue? They are trying to log into my IP address with http://ipaddress/namegivenforsite/

not sure if there are security precautions set in place to prevent "remote" access, or if it is just an issue using macs to access the site.

any help would be great! thanks
Willbe90
 
Posts: 3
Joined: 24. March 2011 19:19

Re: Remote access to localhost does not show css

Postby Altrea » 24. March 2011 19:39

how does your css/image path look like?
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8293
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Remote access to localhost does not show css

Postby Willbe90 » 24. March 2011 19:50

not exactly sure what you are asking....
Willbe90
 
Posts: 3
Joined: 24. March 2011 19:19

Re: Remote access to localhost does not show css

Postby Altrea » 24. March 2011 20:15

You say no css style is shown. So i think you have included an external css file.
Your images are external files too.

If you show us your sourcecode (especially how you have included your images and css files) we can say more about whats wrong.
Very common your paths only fits for your local system.
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8293
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Remote access to localhost does not show css

Postby Willbe90 » 24. March 2011 20:27

Well here's what I did. I copy and pasted the page source, when accessing the site from my localhost. Not exactly sure if this is what you wanted. I moved the entire template folder into the htdocs folder inside the xampp folder.



<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>
localpmc-
Just another WordPress site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="Just another WordPress site" />
<link rel="alternate" type="application/rss+xml" title="localpmc RSS Feed" href="http://localpmc/wordpress/?feed=rss2" />
<link rel="pingback" href="http://localpmc/wordpress/xmlrpc.php" />
<meta name='robots' content='noindex,nofollow' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localpmc/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localpmc/wordpress/wp-includes/wlwmanifest.xml" />
<link rel='index' title='localpmc' href='http://localpmc/wordpress' />
<meta name="generator" content="WordPress 3.1" />
<link rel="stylesheet" type="text/css" href="http://localpmc/wordpress/wp-content/themes/luxury/luxury/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localpmc/wordpress/wp-content/themes/luxury/luxury/coin-slider-styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localpmc/wordpress/wp-content/themes/luxury/luxury/menusm.css" media="screen" />

<link rel="stylesheet" type="text/css" href="http://localpmc/wordpress/wp-content/themes/luxury/luxury/pagenavi-css.css" media="screen" />

<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/cufon-libsans.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/Script_font.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/cufon-run.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/custom.js"></script>
<script type="text/javascript" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/js/menusm.js"></script>

</head>
<body>
<div id="page_index">

<!--header-->
<div id="header">
<!-- logo-->
<div class="logo">
<h1><a href="http://localpmc/wordpress/" title="localpmc - Just another WordPress site">
localpmc </a> <small class="slogan">

Just another WordPress site </small></h1>
</div>
<!-- /logo-->
<div class="rss">
<p>Follow Us:</p>
<a href="http://localpmc/wordpress/?feed=rss2"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/rss_1.gif" width="30" height="32" alt="RSS" /></a>
<a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/rss_2.gif" width="30" height="32" alt="RSS" /></a>
<a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/rss_3.gif" width="30" height="32" alt="RSS" /></a>

<a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/rss_4.gif" width="30" height="32" alt="RSS" /></a>
</div>
<!--/rss -->
<div class="clr"></div>
<!--topnav menu-->
<div class="topnav">
<ul class="menusm">
<li class="page_item page-item-2"><a href="http://localpmc/wordpress/?page_id=2" title="Sample Page">Sample Page</a></li>

</ul>
<div class="clr"></div>
</div>
<!--/topnav menu-->
<div class="search">
<form method="get" id="searchform" action="http://localpmc/wordpress/">
<fieldset id="search">
<span>
<input type="text" value="Search..." onclick="this.value='';" name="s" id="s" class="keywords" />
<input name="searchsubmit" type="image" src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/search.gif" value="Go" id="searchsubmit" class="btn" />

</span>
</fieldset>
</form>
</div>
<!--/searchform -->
<div class="clr"></div>
<!--slider -->
<div id="slider">
<!-- start slideshow -->

<div class="slider_show_bg_top">
<div class="slider_show_bg">
<div id="slideshow">
<div class="slider-item"><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_img_1.jpg" alt="icon" width="944" height="384" border="0" /></a></div>
<div class="slider-item"><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_img_2.jpg" alt="icon" width="944" height="384" border="0" /></a></div>
<div class="slider-item"><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_img_3.jpg" alt="icon" width="944" height="384" border="0" /></a></div>
<div class="slider-item"><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_img_4.jpg" alt="icon" width="944" height="384" border="0" /></a></div>
<div class="slider-item"><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_img_5.jpg" alt="icon" width="944" height="384" border="0" /></a></div>
<div class="clr"></div>

</div>
</div>
</div>
<!-- end #slideshow -->
<div class="controls-center">
<div id="slider_controls">
<ul id="slider_nav">
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_small_1.jpg" alt="images" width="163" height="120" /></a></li>
<!-- Slide 1 -->

<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_small_2.jpg" alt="images" width="163" height="120" /></a></li>
<!-- Slide 2 -->
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_small_3.jpg" alt="images" width="163" height="120" /></a></li>
<!-- Slide 3 -->
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_small_4.jpg" alt="images" width="163" height="120" /></a></li>
<!-- Slide 4 -->
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/slider_small_5.jpg" alt="images" width="163" height="120" /></a></li>
<!-- Slide 5 -->
</ul>

</div>
</div>
<div class="clr"></div>
</div>
<!--/slider -->
</div>
<!--/header-->

<div id="columns">
<div id="centercol">

<div class="box post">
<div class="post-block">
<div class="post-title">
</div>
<div class="content"></div>
<div class="clr"></div>
</div>
</div>
<div class="box post" id="post-1">

<div class="content">
<div class="post-title">
<h2><a href="http://localpmc/wordpress/?p=1" rel="title" title="Hello world!">
Hello world! </a></h2>
<div class="post-data">In
<a href="http://localpmc/wordpress/?category_name=uncategorized" title="View all posts in Uncategorized" rel="category">Uncategorized</a> | on
03.24.11 | by
<a href="http://localpmc/wordpress/?author=1" title="Posts by admin">admin</a> | <a class="post-view" href="http://localpmc/wordpress/?p=1" title="View Comments" rel="category tag">

Comments <strong>(
1 )</strong></a> </div>
<!--/post-date -->
</div>
<!--/post-title -->
<div class="clr"></div>
<!--/post-pic -->
<div class="post-excerpt">

<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
<!--/post-excerpt -->
<div class="post-leav"><a href="http://localpmc/wordpress/?p=1" title="Leave Your Response">read more</a></div>
<div class="clr"></div>
</div>
<!--/content -->
</div>

<!--/box -->
</div>
<!--/centercol -->
<div id="rightcol">
<div class="box ads">
<div class="wtitle">
<h2>
Advertise </h2>

<small>Dolor slit, sed do eiusmod</small>
</div>
<div class="content">
<div class="small_link">
<div><small><a href="http://localpmc/wordpress/">
Learn More About Advertising Here </a></small></div>
<div class="clr"></div>
</div>

</div>
<!--/content -->
</div>
<!--/box -->
<div class="box">
<div class="wtitle">
<h2>
Navigation </h2>

<small>Dolor slit, sed do eiusmod</small> </div>
<!-- tab-nav -->
<div id="mstabs">
<ul class="bookmarks">
<li><a href="#" rel="mstab-1">
Categories </a></li>
<li><a href="#" rel="mstab-2">

Archives </a></li>
<li class="last"><a href="#" rel="mstab-3">
Links </a></li>
</ul>
<div id="mstab-1">
<ul class="menusm">
<li class="cat-item cat-item-1"><a href="http://localpmc/wordpress/?category_name=uncategorized" title="View all posts filed under Uncategorized">Uncategorized</a>

</li>
</ul>
</div>
<div id="mstab-2">
<ul class="menusm">
<li><a href='http://localpmc/wordpress/?m=201103' title='March 2011'>March 2011</a></li>
</ul>
</div>
<!-- Start Meta -->

<div id="mstab-3">
<ul class="menusm">
<li><a href="http://codex.wordpress.org/">Documentation</a></li>
<li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li>
<li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li>
<li><a href="http://wordpress.org/support/">Support Forum</a></li>
<li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
<li><a href="http://wordpress.org/news/">WordPress Blog</a></li>

<li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
</ul>
</div>
<!-- End Meta -->
</div>
<!-- /tab-nav -->
</div>
<!--/box -->
<div class="box ads">

<div class="banner">
</div>
<!--/content -->
</div>
<!--/box -->
</div>
<!--/rightcol -->
<div class="clr"></div>
</div>
<!--/columns -->
<div class="clr"></div>

</div>
<!--/page -->
<div id="page_bottom">
<div class="footer_resize">
<div class="box_footer">
<div class="box-col box_2">
<h2>Simple text widget</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali.</p>
</div>

<div class="box-col box_1">
<h2>Blogroll</h2>
<ul>
<li><a href="#">Development Blog</a></li>
<li><a href="#"> Documentation</a></li>
<li><a href="#"> Plugins</a></li>

<li><a href="#"> Suggest Ideas</a></li>
<li><a href="#"> Support Forum</a></li>
<li><a href="#"> Themes</a></li>
</ul>
</div>

<div class="box-col">

<h2>Recent post</h2>
<ul>
<li><span>admin on</span> <a href="#">Dynamic Sidebar support</a></li>
<li><span>admin on</span> <a href="#">Nulla fringilla purus at leo dignissim congue. </a></li>
<li><span>admin on</span> <a href="#">Dynamic Sidebar support</a></li>

<li><span>admin on</span> <a href="#">Nulla fringilla purus at leo dignissim congue. </a></li>
<li><span>admin on</span> <a href="#">Dynamic Sidebar support</a></li>
<li><span>admin on</span> <a href="#">Nulla fringilla purus at leo dignissim congue. </a></li>
</ul>

</div>
<div class="box-col box_1">
<h2>Our Skills</h2>
<ul>
<li><a href="#">Metus Et Tristique</a></li>
<li><a href="#"> Semper</a></li>
<li><a href="#"> Condimentum</a></li>

<li><a href="#"> Quisque Sit Amet</a></li>
<li><a href="#"> Parturient</a></li>
</ul>
</div>
<div class="box-col box_1">
<h2>Get In Touch</h2>

<ul>
<li>Firm: FakeFirm</li>
<li> Address: 123 Fakestreet,</li>
<li> 25 New York</li>
<li> Phone: +123 3213 432</li>

<li> Fax: +4332 434235 5453</li>
<li> Email: info@companysite.com </li>
</ul>
<ul class="icons">
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/small_rss_1.gif" width="16" height="16" alt="icon" /></a></li>
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/small_rss_2.gif" width="16" height="16" alt="icon" /></a></li>
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/small_rss_3.gif" width="16" height="16" alt="icon" /></a></li>

<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/small_rss_4.gif" width="16" height="16" alt="icon" /></a></li>
<li><a href="#"><img src="http://localpmc/wordpress/wp-content/themes/luxury/luxury/images/small_rss_5.gif" width="16" height="16" alt="icon" /></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
<div id="footer">
<div class="footer_resize">

<div class="text1">&copy; Copyright 2011 localpmc. All Rights Reserved
(TS) <a href="http://www.templatesold.com">WordPress Themes</a></div>
</div>
</div>
<div class="clr"></div>
<!--/footer -->
</div>
</body>
</html>
Willbe90
 
Posts: 3
Joined: 24. March 2011 19:19

Re: Remote access to localhost does not show css

Postby marcoscf » 25. March 2011 15:08

The problem is you are using absolute urls in all of your links and includes. You are including your host name "localpmc" in the urls, and this would only be accessible from your own pc, or within your local LAN (if you have one and it is correctly configured). If you try to ping "localpmc" from your friend's mac, you probably won't get an answer.

You should change them to relative urls, for example change:

<link rel="stylesheet" type="text/css" href="http://localpmc/wordpress/wp-content/themes/luxury/luxury/style.css" media="screen" />


to:

Code: Select all
<link rel="stylesheet" type="text/css" href="/wordpress/wp-content/themes/luxury/luxury/style.css" media="screen" />


or even to a path relative to wordpress/:

Code: Select all
<link rel="stylesheet" type="text/css" href="wp-content/themes/luxury/luxury/style.css" media="screen" />


Same with every other link.

Assuming you are accessing the site like http://<ip address>/wordpress/ this should work.
marcoscf
 
Posts: 4
Joined: 02. August 2008 01:44


Return to XAMPP for Windows

Who is online

Users browsing this forum: No registered users and 68 guests