CSS is not loading when using segment URI in codeigniter - css

Question

why CSS is not loading when using segment URI in codeigniter
but it is working good when I remove the segment ?
this is how I link the css file
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- bootstrap -->
<link href="public/css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="public/css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="public/js/jquery-1.8.3.min.js"></script>
Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class profiles extends CI_Controller
{
public function index()
{
$user_id = $this->uri->segment(2, 9);
$this->load->model('user_model');
$this->load->model('count_model');
$data = array();
$result = $this->user_model->read_user_information_profile($user_id);
$data = array(
'username' => $result[0]->username,
'fname' => $result[0]->fname,
'lname' => $result[0]->lname,
);
$this->load->view('profiles_view', $data);
}
}
Thanks in advance

Answer 1

Because you are using relative URLs for loading your CSS, it's trying to load it from /dir/profiles/public/css/style.css instead of /dir/public/css/style.css hence why it doesn't load.
You can either use absolute URLs in your CSS with:
<link href="<?php echo base_url('public/css/style.css'); ?>" rel='stylesheet' type='text/css' media="all" />
Or set a base tag before you try to load any CSS or JS:
<base href="<?php echo base_url(); ?>" />
See: http://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url, note you may need to load the URL helper if you're not already.

Answer 2

Change the loading in this way:
<!-- bootstrap -->
<link href="<?php echo base_url(); ?>css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="<?php echo base_ur;(); ?>css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="<?php echo base_url(); ?>js/jquery-1.8.3.min.js"></script>
You don't need to config the base_url. It detect automatically