Login

09-11-2009, 04:43 AM

[eluser]richzilla[/eluser]
Hi all, i dont know wether im missing something here, but do i have to do something unusual to load multiple stylesheets into a page, im playing about with a css framework just to see whats what, but my browser will only ever read styles from the first sheet it finds, or is that what its supposed to do?

i thought it was possibly my browser, because firefox 3.5 is still in beta for linux, but 3.0 has the same problem.

Anybody have any ideas?

cheers

09-11-2009, 04:56 AM

[eluser]LuckyFella73[/eluser]
Would be nice to see some code. Could you post your header section please?

09-11-2009, 04:58 AM

[eluser]richzilla[/eluser]
That would help...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

&lt;html&gt;

    &lt;head&gt;

        &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;

        &lt;title&gt;My site&lt;/title&gt;

        &lt;link rel="stylesheet" href="styles/obst.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;

        &lt;link rel="stylesheet" href="styles/960.css" type="text/css" media="screen" title="960" charset="utf-8" /&gt;

        &lt;link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" title="Reset" charset="utf-8" /&gt;

        &lt;link rel="stylesheet" href="styles/text.css" type="text/css" media="screen" title="Text" charset="utf-8" /&gt;

    &lt;/head&gt;

    &lt;body id="main"&gt;

        <div id="container" class="container_12">    

            <div id="header" class="grid_12">

                This is the header

            </div>

        </div>

    &lt;/body&gt;    

&lt;/html&gt;

09-11-2009, 05:19 AM

[eluser]Phil Sturgeon[/eluser]
That will work only in your default controller. The second you go into any controller or method it will be looking for:

Quote:controller/method/styles/reset.css

You need to use a absolute path or an absolute URL instead of these relative paths you have in your example.

To do this, try:

Code:
&lt;link rel="stylesheet" href="/styles/obst.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;

or

Code:
&lt;link rel="stylesheet" href="&lt;?=base_url();?&gt;styles/obst.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;

Just to note, this is not a strange CodeIgniter issue. It is generally a bad idea to use relative paths to load anything on the web if you are using / in your URL's. Every / thinks it is a new directory, and so the current location changes breaking relative paths.

Take a look at my Asset library/helper to get some shorter syntax for this.

09-11-2009, 05:23 AM

[eluser]Aken[/eluser]
There's nothing wrong with your HTML. You probably have an error in your "obst.css" file that's causing extra stuff to not load for some reason (it can be something as silly as a missing bracket). Run it through the CSS Validator to see if that's the issue (and/or to find any other errors with your CSS).

Just as a tip, though, you should rearrange the way the CSS files are loaded, because the reset one will overwrite anything above it, which is not good, lol.

Code:
&lt;link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" title="Reset" charset="utf-8" /&gt;

&lt;link rel="stylesheet" href="styles/960.css" type="text/css" media="screen" title="960" charset="utf-8" /&gt;

&lt;link rel="stylesheet" href="styles/text.css" type="text/css" media="screen" title="Text" charset="utf-8" /&gt;

&lt;link rel="stylesheet" href="styles/obst.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;

09-11-2009, 05:30 AM

[eluser]Unknown[/eluser]
Thank you for the share guys, I really appreciate that!

09-11-2009, 05:35 AM

[eluser]jedd[/eluser]
I use this kind of thing in my default.php (primary view)

Code:
echo "\n". link_tag('assets/stylesheets/COMMON.css');

A month or so ago I could have cut-n-pasted my old three x 960 css lines, but they got pulled out. 960's an interesting idea, and well worth investigating, but I found it a tad .. cumbersome / restrictive / painful. I think I don't have enough detailed understanding of raw CSS - apparently that makes a big difference - but I also just dislike all that wasted space on pages.

09-11-2009, 05:54 AM

[eluser]richzilla[/eluser]
cheers for the help guys, i pulled out the charset and title fields and all was well... very odd...

@jedd, id seen a lot of people saying that about it, i dont know if ill ever actually use it in production, im just having a play to see what i end up with. Did you find it worked ok in a 'real' website?

09-11-2009, 06:10 AM

[eluser]jedd[/eluser]
Hey ricardino - as I say, I got the impression from various tutorials about it (and blue something - the other similar grid-based thing (ooh - I just had a Tobias Funke moment)) that it helped if you were particularly well versed with things CSS already.

Sometimes I read those kinds of comments as 'you should only use this if you don't need it'. Mind, a number of CI people suggest new users learn PHP first, before picking up any PHP framework. Probably similar logic.

But no, never used it in a real site. I suspect it'll give you a more professional looking site simply because so many sites use a fixed width approach (ie. you'll be part of the popular crowd Wink

I hover between a netbook (1200x) and a desktop (1680x) and a 960-limit is annoying on the former because I have so little space and really hate to waste it, and on the desktop it just looks wrong. Yes, I don't always use full-width windows while I browse, but then it means I have to match my window width to the web site's width, and that seems to be missing the point of HTML, IMO.

Having said that, I can see that for some types of sites it would probably work really well.

09-11-2009, 03:07 PM

[eluser]Aken[/eluser]
960.gs is perfectly suitable if it fits your website's structure. And in my opinion, it doesn't take someone with a LOT of CSS knowledge to use it. But it does make things easier to understand the basics behind it. 960 is not that complicated if you go through the code.