Ok, so I have a project I'm working on: http://www.d2burke.com/exp/intern/
BaseURL is set to: '/exp/intern/'
.htaccess reroutes to /exp/intern/index.php
I have custom routes set up for
http://www.d2burke.com/exp/intern/questions
-- $route['apply'] = "internship/apply";
http://www.d2burke.com/exp/intern/apply
-- $route['questions'] = "internship/questions";
etc.
When you go to http://www.d2burke.com/exp/intern/internship/questions, all is well and the normal tan background shows up...
When you use one of the custom routes...you get the background image from my main site...? what is the world is going on?
You seem to overwrite the background by loading an extra style sheet in the body content like so
<link rel="stylesheet" href="../../css/style.css" />
The browser interprets this as a relative path to your page path.
In the internship/questions page, this relative page translate to http://www.d2burke.com/exp/css/style.css, which doesn't exists.
The fix would be to use an absolute path like /css/style.css
Note: It's pretty obvious if you use Firebug and check the Net tab
EDIT: Alternatively, open Firebug, click the arrow in the Console tab and enable "Show Network Error". That way any 404 error will appear in your console and come up as an error (great debug feature)
Related
I'm having an issue with my project. It has no errors and something but when I tried to upload it on some free hosting sites The CSS wont trigger. This is my first time uploading my project so guys this the url grandluis.epizy.com/grand/ or https://grandluis.000webhostapp.com and my directory was like this.
/htdocs-
-------/grand-
-------------/application-
-------------/assets-
-------------/system-
-------------.editorconfig
-------------.htaccess
-------------.composer.json
-------------.contributing.md
-------files for your website should be uploaded here-
-------index2.html-
.hraccess-
.override-
DO NOT UPLOAD FILES HERE-
and I notice something that if you click a url button on the website the css will trigger. I think the CSS only wont trigger if you typed the URL manually.
grandluis.000webhostapp.com - your css are loaded in http while you're accessing your website through https
You have to update your config.php to:
$config['base_url'] = 'https://grandluis.000webhostapp.com';
Also, if you're not doing it yet, use base_url when loading assets.Example:
<link href="<?=base_url('path/to/your/style.css');?>" rel="stylesheet" />
I am not sure what exactly is broken and it's kinda hard to explain. My file structure looks something like this:
+bin
+css
-style.css
-fontawesome.min.css
+fonts
-FontAwesome.otf
- ...
+www
+comp
-header.php
-footer.php
-index.php
-otherpage.php
Both index.php and otherpage.php include header.php and footer.php at the top and bottom, the content is in between.
Requesting the domain gives me the index.php and requesting the otherpage.php shows that as well as expected.
Requesting the configured bin.domain.com/css/style.css shows the correct css-file.
However, and this is the problem: The Link-Tag to the css-files is in the header.php and the css is not applied. Going to the Inspector shows the link-tag and following the link inside that shows the css that should apply to the page.
Now, here comes the weird thing: Going to the Style-Editor Tab in the Firefox Devtools shows the CSS from fonts.google.com as one link-tag imports a font. This is as expected but nothing else is shown so I don't even know where the error is at. Any Ideas?
Requesting the configured bin.domain.com/css/style.css shows the correct css-file.
This might not be it but you say you are using the following
<link href="bin.domain.com/css/style.css" rel="stylesheet">
What if you change it to
<link href="http://bin.domain.com/css/style.css" rel="stylesheet">
I found the solution:
The website itself was loaded via https. The Stylesheets and assets however where linked with http. I regenerated the SSL-Certificate and made the bin-subdomain a https-one. This was also said in the console in my Firefox-Browser but I didn't notice that.
This also explains why the Google-Font-Link worked while the others didn't. It was a https-request instead of a http-one.
I recently did a fresh install of Lumen framework and started building a site from it. Yes I know lumen is designed only for APIs but please help me out with this.
I have placed all my views inside /resources/views and my templates inside /resources/views/templates.
Now since I had to place [css/js/images] somewhere, I thought placing all of that in public/assets/[css/js/images] would be nice.
Now in my layout when I am trying to include css - I use something like this -
<link href="{{ url('assets/css/something.css') }}">
and it works giving an output of something like this -
<link href="localhost/assets/css/something.css">
same thing works for js also but it gets strange when I try to include images. For including an image I write something like -
<img src ="{{ url('assets/images/someimage.jpg') }}"
and when I view page source, output is as I expect it to be -
<img src="localhost/assets/images/someimage.jpg">
but my console fires 404 not found errors stating someimage.jpg not found. And when I crosscheck by inspecting the image's parent, the Url is totally different soemthing like this -
<img src="localhost/images/someimage.jpg">
See, automatically omitting 'assets' from image url and resulting in 404, but I can see correct url when I view page source.
Things I tried to resolve the issue -
Cleared cache and reloaded the page.
Tried using asset() instead of url() but prototype of that was removed from lumen.
Pull out [css/js/images] folder from assets and pasted them in parent i.e. public. This worked but then the question is why did the previous setup worked find for both css and js and caused problem only with images ?
My other questions are -
1. How can the url in page source be different from the one being rendered ? Just to mention in my case the url in page source worked and displayed image but since the url being renderred omitted 'assets' from path hence resulted in 404.
2. Is there any other good way to include these assets in views. If yes then please also mention where to put them ?
Attaching some images/code for reference.
Output of rendered page showing 404 errors for images but none for css.
Output of view page source windows showing asset included in image path
No clue if this is right, but I believe you actually need to put an image stream inside that URL. Now the server is trying to retrieve some byte encoded object that isn't there.
I have no idea if it's the same case for you, but I've had many instances where I had to put in image streams instead of URLs, which I've solved this way using this library:
Routes.php
/**
* Image handling routes.
* These make sure images actually are images instead of bytecode
*/
Route::get('organization/logo/{logo}', function($logo) {
$file = Image::make(Storage::disk('logo-image')->get($logo));
return $file->response();
});
View
<img src="{{ asset('organization/logo/' . $organization->logo_path) }}" alt="">
I might be completely off, but I recognize what's happening with your app and this took care of the issues when I implemented it.
Check your web server configuration. It sounds like you have some type of redirect setup that redirects assets/images/* to just images/*.
As a simple test, open your "Network" tab and navigate your browser to http://samplelumena.local/assets/images/footer1.jpg. I'm guessing the Network trace will show a 30x (301, 302, etc.) to http://samplelumena.local/images/footer1.jpg, followed by the 404 for that url.
I'm aware that doing so in HTML is as simple as this:
<link rel="icon" href="/favicon.ico" />
However, I have a PHP site, in which:
DirectoryIndex index.php
to direct the user directly to the main page.
I can't seem to find a way to get a browser tab icon.
What have I tried?
I tried to echo HTML inside index.php with the code, which didn't work. I also tried placing the line of code in some other working header HTML from within index.php. Google has nothing... literally.
The image is a .ico, called 'favicon.ico', is in root, and is recognized as a valid ico file.
Any help?
By default, you actually don't need anything in your HTML for a favicon. Simply having a valid favicon.ico in your root should be enough.
Sometimes, when changing favicon you need to clear your browser cache for that site. Also, try accessing the favicon.ico directly: http://example.com/favicon.ico and make sure you can load it.
Here's a good resource about favicons: HTML 5 Favicon - Support?
If you visit this page in Chrome:
http://www.immigrationconsult.org/contact.php
And Inspect Element on the page, go to Console you will see this error:
GET htt...cms/contact/images/ajax-loader.gif 404 (Not Found) jquery.min.js:4
I followed the instructions here to create a:
http://css-tricks.com/weird-file-requests-and-easing-server-stress-with-htaccess/
I tested to make sure it works, and it does, but not on this specific request. jquery.min.js is the jQuery minified from the makers, I did not change it at all. I used Agent Ransack to deep search for any reference of this in any of my files, the search yielded no results.
I have no idea what to do or how to prevent this issue from happening, this seems like such a small issue, but I can not locate the cause of the problem! Please help.
So, it was really a misdirection by Chrome. The plugin at fault was jQuery Coda-Slider. Because it was JS compressed, Agent Ransack couldn't find the string... lesson learned...
You clearly don't have the ajax-loader.gif file in the correct directory, or at least your ajax script is looking the wrong place.
you can either modify the java script to point to the right location or you can just put the file in the correct location, i would choose the latter.
I have had these errors my self with JQuery, where some icons didn't get loaded, just had to put them in the correct folder and it worked.
But if you use googles jquery libs, all resources should get loaded automagic as well. Like this...
<script type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("jquery", "1.7.2");
google.load(etc..);
</script>
You need to download the entire zip file from their website: http://jquerymobile.com/download/. After you unzip it, you will find the js file, the CSS and a folder called "images", all of which need to be present locally.