• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
css problems

#1
[eluser]kkoncept[/eluser]
I did a search and saw several threads that came close to answering my question but didn't quite get there. I'm trying to link to an external style sheet with the following code in my view file using base_url():

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html&gt;
    &lt;head&gt;
        &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" /&gt;
        &lt;title&gt;&lt;?=$title?&gt;&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url();?&gt;css/styles.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <div class="header"><img src="&lt;?php echo base_url();?&gt;images/logo.gif" alt="LOGO" /></div>
        <br />
        <div class="content">Some content here</div>
    &lt;/body&gt;
&lt;/html&gt;


My directory structure is

Code:
/public_html
..css
..images
..system

and my controller code is this:

Code:
&lt;?php

class Home extends Controller {
    
    function Home()
    {
        parent::Controller();
        
        $this->load->helper('url');
        $this->load->helper('form');
        
    }
    
    function index()
    {
        
        $data['title'] = 'Welcome';
        $this->load->view('home_view', $data);
    }
}

?&gt;

Everything seems to be working except that the css isn't getting applied. As you can see, I am using the same technique to link to my images folder. The weird part is that it works for the images folder but not the css folder.

Could the problem be in the css file itself? The code for that is here:

Code:
#header {
background-image: /images/headerbg.gif;
}

#content {
font-style: italic;
}

Thanks in advance for any enlightenment.

#2
[eluser]spider pig[/eluser]
You need to change the links to images in your CSS:

Code:
#header {
    background-image: ../images/headerbg.gif;
}

Also, if you are using .htaccess to rewrite the URLs, make sure you include the css and images sub-directories:

Code:
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

#3
[eluser]kkoncept[/eluser]
[quote author="spider pig" date="1221120539"]You need to change the links to images in your CSS:

Code:
#header {
    background-image: ../images/headerbg.gif;
}

Also, if you are using .htaccess to rewrite the URLs, make sure you include the css and images sub-directories:

Code:
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
[/quote]

Thanks for the quick reply. I'm not using .htaccess to rewrite the URLs. Also, I tried it both ways as:

Code:
#header {
    background-image: ../images/headerbg.gif;
}

and:

Code:
#header {
    background-image: /images/headerbg.gif;
}

It doesn't work either way. Also, it isn't just the background image that isn't working. None of the CSS formatting is working. This leads me to believe that for some reason my view isn't finding the CSS file.

#4
[eluser]kkoncept[/eluser]
I figured it out and feel pretty stupid because it was a newbie mistake and I am far from a newbie:

the difference is that this:

Code:
<div class="header"><img src="&lt;?php echo base_url();?&gt;images/logo.gif" alt="LOGO" /></div>
        <br />
        <div class="content">Some content here</div>

Should be this:

Code:
<div id="header"><img src="&lt;?php echo base_url();?&gt;images/logo.gif" alt="LOGO" /></div>
        <br />
        <div id="content">Some content here</div>

using "id" instead of "class". So, not a CI issue at all but just an example of me making things more complicated than they really are.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.