Loading ...
Sorry, an error occurred while loading the content.

Re: [cightml] Alternate style sheets.

Expand Messages
  • Franki
    By the way people, I wanted to ask.. if anyone thinks it is worth adding some cookie code to the page, so that it will remember what stylesheet you used on one
    Message 1 of 36 , Nov 1, 2004
    • 0 Attachment
      By the way people,

      I wanted to ask.. if anyone thinks it is worth adding some cookie code
      to the page, so that it will remember what stylesheet you used on one
      page, so that if you have multiple pages with the same code, it would
      remember your stylesheet.

      That is not so much for the screen res sheets, but more for people that
      use it to "skin" their site..

      I think this script could be very cool if I add some more stuff to it.
      and best of all it fits with my JS mantra, never use Javascript for
      anything that will break badly for NON JS browsers.. if the browser
      doesn't support it, the page will use the default styleseet, so you
      lose no needed functionality.. its an enhancement not a replacement.

      What do you guys thing are things you'd like in a CSS skinnable library.???

      Rgds

      Franki


      Franki wrote:
      > Dude, you really should never get a job writing JavaScript, cos you suck
      > at it. :-)
      >
      > Just to help you out, I made a working page, in the form of a tute, that
      > not only tells you want to do step by step, it also does it itself, so
      > the page will size itself according to your screen resolution.
      >
      > As an added bonus, I also added a select box that will allow people to
      > change the stylesheet manually if they so desire.
      > You can see/test the page here:
      > http://htmlfixit.com/resource/js-snippets/JS_swap_styles/index.html
      >
      > I will not be adding this to the site at this stage, because I've used
      > the JavaScript from that site I showed you and I don't steal.
      > At a later date, I will be re-writing it, because I don't particularly
      > like the way he has done it and I think I can simplify it somewhat.
      > I don't have time to rewite it now, and you probably want an answer
      > asap, so I'm only going to make this available on the cightml list until
      > I've had time to replace the other guys code.
      >
      > Hope that helps.
      >
      > Regards
      >
      > Franki
      >
      >
      >
      > > DW wrote:
      > > > lokrin wrote:
      > > >
      > > >
      > > >>I had several style sheets on my site for different layouts.
      > > >>Let's say:
      > > >>
      > > >>/* sheet 1 */
      > > >>h1 {color : green;}
      > > >>p {color : green;}
      > > >>/* end */
      > > >>
      > > >>/* sheet 2 */
      > > >>h1 {color : red;}
      > > >>/* end */
      > > >>
      > > >>/* sheet 3 */
      > > >>p {color : blue;}
      > > >>/* end 3 */
      > > >>
      > > >>If I called sheet one I would have h1-green and p-green.
      > > >>If I called 2 then h1 would turn red and p would remain green.
      > > >>If I then called 3 then p would change to blue, but h1 would stay red.
      > > >>
      > > >>Basically, it would keep the last style intact and only change the
      > newly
      > > >>defined styles. It would NOT reset previously defined styles back to
      > > >>browser defaults.
      > > >
      > > >
      > > > I have three style sheets, default, normal and big.
      > > > It is the calling of these to suit the viewer's screen size that I am
      > > > having trouble with.
      > > > i.e my JS is obviously not working.
      > > > Derek
      > >
      > > Show me the JS you are using again.. I've just the original email.
      > >
      > OK, I've gone to the site that Franki found and I have set up a
      > default.css file and two "alternate" css files, "normal" and "big".
      > Into my page (in the head section)I have used the following:
      >
      > <link rel="stylesheet" type="text/css" href="default.css"/>
      >
      > <script language="JavaScript" type="text/javascript">
      > <!--
      > if ((screen.width => 1280) {
      > <link rel="alternate stylesheet" type="text/css"
      > href="bigstylesemm.css" title="big">
      > }
      > else {
      > <link rel="alternate stylesheet" type="text/css"
      > href="stylesemm.css" title="normal">
      > }
      > //-->
      > </script>
    • DW
      ... I have made all my divs relative. Tried float without any positioning and the text wandered way off screen to the right. Reinserted a distansce left
      Message 36 of 36 , Nov 5, 2004
      • 0 Attachment
        Franki wrote:

        > DW wrote:
        > > Both my page and my css file are verified! No html....
        > > Took your advice re combining the header and the 'content' - saves
        > > mucking round - but I would still be interested to see "relative"
        > > positioning explained. None of the books seem to do more than
        > mention it
        > > as a possible work.
        > > Derek
        >
        >
        > Ok, I'll give it a very quick attempt (explaining relative positioning)
        >
        > Relative positioning means that the element is positioned according to
        > the normal progression of the HTML, so if you put a div under a h2 tag,
        > you can be sure that that is how they will display in the page.
        >
        > There are some things you can do with CSS that slightly change the
        > positioning of relative elements, and those are clear, and float.
        >
        > If you relatively position two divs one under the other, and then tell
        > one of them to float: right, the other one will normally fill the gap to
        > the right of the one you just floated left. The result is that you have
        > two divs side by side.
        >
        > If you didn't want the other div to fall in beside the one that has been
        > floated left, you sould add clear: right to the div with float: left in
        > it, and that would stop the other div from moving in to the right of it.
        >
        > Clear: http://www.w3schools.com/css/pr_class_clear.asp
        >
        > and
        >
        > Float: http://www.w3schools.com/css/pr_class_float.asp
        >
        > As a general rule, use float and steer clear of "clear' unless you
        > really need to.. in most cases float is enough.
        >
        > Absolute positioning on the other hand, means to position the element
        > absolutely as defined by its parent container, (which could be another
        > element, or the body of the page.)
        >
        > absolute is more complicated becase then you have to deal with objects
        > overlaying each other at lower resolutions and other such things..
        > until you really get good at CSS positioning, you should stick to
        > relative for the most part.. and even when you are good at it, I
        > suggest you still only use absolute in special circumstances.
        >
        > In short, absolute is essentially overriding the normal progression of
        > html to define its own rules, relative postitioning is a way of bending
        > the natural progression of the html to suit your needs.
        >
        > Many pages like HTMLfixit itself are a combination of the two. In our
        > case, we wanted the menu's to be fixed with regardless of the page size,
        > and have the center div grow/shrink according to the page size. so the
        > menu's are absolute and the others are relative.
        >
        > Thats is definately the short story, it can get allot more complicated,
        > but that should give you a general overview of the differences.
        >
        >
        >
        > Rgds
        >
        > Franki
        >
        I have made all my divs relative. Tried "float" without any
        "positioning" and the text wandered way off screen to the right.
        Reinserted a distansce 'left' and it came back to where it had been
        without the "float".
        The relevant div now reads:

        div.heading
        {
        position: relative;
        float: none;
        top: -24em;
        left: 38%;
        width: 60%;
        font-family: Comic Sans MS;
        text-align: center;
        }

        This is exactly where I want it, and it obeys the command even if I
        remove the 'float:none' line.

        Any comments, please, for this slow learner?
        Derek
      Your message has been successfully submitted and would be delivered to recipients shortly.