+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: URLS inside CSS (/showthread.php?tid=7463)
URLS inside CSS - El Forum - 04-10-2008
[eluser]Unknown[/eluser]
Hello, I am quite noob to Code Igniter and while trying to port a site I have to use this framework I encountered this issue:
I have a php page which calls a css file, I ported this as specified in some C.I. help pages using:
Code:
<link href="<?php echo base_url()?>css/drop-down-menu.css" type="text/css" rel="stylesheet" />However, inside the file drop-down-menu.css I've got a style spec like this:
Code:
#nav a.main {
background:url("images/tableft2.png") no-repeat left top;
margin:0;
padding:0 5px 0px 1px;
text-decoration:none;
width:7em;
}I tried adding the same "<?php echo base_url()?>" to the "images/tableft2.png" url style, however, as I expected, PHP won't parse it.
My question therefore is, how would you solve this? aside of hard-coding the page URL in the style (using
Code:
url("mysite.com/images/tableft2.png")URLS inside CSS - El Forum - 04-10-2008
[eluser]xwero[/eluser]
it's possible if you put your css code in a php file.
Code:
<link href="<?php echo base_url()?>css/drop-down-menu.php" type="text/css" rel="stylesheet" />
// in the file
#nav a.main {
background:url("<?php echo base_url()?>images/tableft2.png") no-repeat left top;
margin:0;
padding:0 5px 0px 1px;
text-decoration:none;
width:7em;
}Css isn't a dynamic language. In xhtml 2 you can add a src attribute to all elements which moves the images out the css files.
URLS inside CSS - El Forum - 04-10-2008
[eluser]Seppo[/eluser]
The CSS code URLs are relative to the css directory.
So, if your structure is like this
Quote:-- system
-- css
---- drop-down-menu.css
-- images
---- tableft2.png
...
You should set the css form the css folder to the image file
Code:
background:url("../images/tableft2.png") no-repeat left top;URLS inside CSS - El Forum - 04-10-2008
[eluser]sandwormusmc[/eluser]
I put my main css into a CI view, then loaded that. That way I can access all of the CI internals from within that view/css for setting the base url (forgot what they are at the moment...).
URLS inside CSS - El Forum - 04-10-2008
[eluser]m4rw3r[/eluser]
@sandwormusmc: If you do so, then you would circumvent the browser caching that normally occurs when a css file is loaded (I take you include the css in the HTML sent to the browser and the css isn't a separate action in the controller, right?), which causes the css to get reloaded for every page request.
Why not relative URL
in the CSS?