Having trouble loading a CSS file in CodeIgniter?

I've added a link to my header.php and despite trying various solutions from stackoverflow, it still isn't working for me. Can someone please help? Thank you in advance :)

Here's my folder structure:

Main Folder: ci_attl - application - css - style.css

<link href="<?php echo base_url();?>application/css/style.css" rel="stylesheet">  - not functioning properly 

<link href="<?php echo base_url();?>/css/style.css" rel="stylesheet">  - not functioning properly

<link href="<?php echo base_url();?>../css/style.css" rel="stylesheet">  - not functioning properly

My autoload.php

$autoload['helper'] = array('form','url', 'html');

My .htaccess

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /ci_attl/

  RewriteCond %{REQUEST_URI} ^system.*
  RewriteRule ^(.*)$ /index.php?/$1 [L]

  RewriteCond %{REQUEST_URI} ^application.*
  RewriteRule ^(.*)$ /index.php?/$1 [L]

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?/$1 [L]    

</IfModule>

<IfModule !mod_rewrite.c>
  ErrorDocument 404 /index.php
</IfModule>

My config.php

$config['base_url'] = '';
$config['index_page'] = '';

Console error message:

Failed to load the resource: the server responded with a status of 403 (Forbidden) 
http://[::1]/ci_attl/application/css/style.css

Answer №1

It is important to set up a dedicated folder for your assets.

If you place them in the application folder, you may encounter a 403 error due to .htaccess rules in CI.

I recommend creating a separate folder within your root directory, such as 'assets', and keeping all css/js files there.

This will result in a path like this:

http://[::1]/ci_attl/assets/css/style.css

Ensure that you have the correct .htaccess configurations:

Options +FollowSymLinks -MultiViews
RewriteEngine on
RewriteBase /ci_attl/
RewriteCond $1 !^(index\.php|assets|images|robots\.txt)
RewriteRule ^(.*)$ index.php/$1 [L]

Give it a try and inform me of the outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Customize the Menu Style in Your WordPress Theme

As a newcomer to Wordpress theme development, I am struggling to properly style my navigation menu. Below is the raw HTML code I have: <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div cl ...

Attempting to squeeze a lengthy word into a small span

Apologies for my poor English. I tried searching for an answer online but couldn't find a solution. Maybe I'm just not able to figure it out myself. All I need is to make those long words fit inside a button. This is how it currently looks. My ...

When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with som ...

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

Removing a background by linking a CSS file

Issue Resolved: I have found the solution. The problem was that the css document still contained html tags. Thank you to everyone who provided assistance. While designing a website using css, I encountered a situation where the site worked perfectly when ...

Implementing a jQuery function to trigger window resize on window load

I'm facing an issue with my resize function where the contents within a window change when it reaches a certain width. I'm trying to achieve this same effect on window load but haven't been successful so far. Here's what I've attem ...

Tips for preventing elements from wrapping in a lengthy list and using scrollbars in Firefox

When dealing with a lengthy flex list, the items (buttons) should wrap when there is not enough space available (using flex-wrap). However, an issue arises in Firefox where the items are wrapped once a scrollbar appears, even if there is ample space. In c ...

Experiencing discrepancies in pixel height while conducting tests using Nightwatch

Let me start by sharing some details about my machine setup: Operating System: CentOS 7 Graphics Drivers: kmod-nvidia (dedicated GPU) I am currently testing a webpage using Nightwatch, and one of the requirements is to ensure that a background image&apo ...

CSS Problems in IE9 Causing Alignment Issues with Two Items in List Item

Take a look at this: JSFiddle The code looks fine in firefox, chrome, and opera, but in ie9, the numbers are shifting. Please see the image for reference. Everything is correct on the left, but on the right is ie9. I'm stuck and need help to solve ...

Is it possible to partially move the image outside of the MUI dialog?

Is it possible to move an image partially outside of the MUI dialog, with the bottom part inside and the top part outside the dialog? I attempted a solution found on Stack Overflow but it did not yield the desired result. This is the dialog code: <Dial ...

When employing DIV instead of TABLE, the issue arises where the width of the DIV does not completely occupy

<div style="width:100%;"> <div style="background-image:url('../images/navi/top-red.png'); float:left;"></div> <div style="width:180px; float:left"><img src="/images/navi/logo.jpg" ...

Ways to unveil a concealed div element using JavaScript

If javascript is disabled, I want to hide a div. If javascript is enabled, however, I don't want to rely on using the <noscript> tag due to issues in Chrome and Opera. Instead, my approach is as follows: <div id="box" style="display:none"> ...

Utilizing Bootstrap 5: Breaking a Page into Two Separate Vertical Sections

I am looking to design a unique grid system that divides the page into either 2 columns or 2 rows that are completely separate from each other. This means that the content on one side of the page does not expand to match the height of the content on the ot ...

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

What is the best way to place a parent div above its child element?

I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...

Css animations not functioning properly in Chrome

I've been working on this animation project, here is the link: http://codepen.io/Zeaklous/pen/dIomg It seems to work perfectly fine on Firefox but not on Chrome. Here is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/ ...

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...

Using Rails to assign a page-specific CSS class within a shared layout

Is there a way to apply unique CSS classes to specific tags within a common layout? In my application.html.erb layout file, the application.css.scss is loaded using <%= stylesheet_link_tag "application". . . %>, which then includes all CSS files in ...

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection. For example, I have the following 3 options: Facebook Youtube Twitter If a user selects ...

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...