LiveSearch

Powered by vanilla & lovin' it!

  1.  
    where did you all start??

    I never learned tables, so i'm hoping that means I won't have any bad habits to break. I also never really learned web at all. I mean I understand the basics of html, but i've never built a site. yes i realize i'm beyond fashionably late to the party.

    I see a lot of sites, ALA, tutorials abound, do you just code or do you code via Dreamweaver??

    I want to learn so I can make my own portfolio site and also build sites for some businesses I'm starting up.

    I hear CSS is the way to go, but I don't know where to begin. All those <div>s and all the angst of positioning, at least according to my friend who's in the trenches currently.

    can anyone point me in the right direction?
    •  
      CommentAuthorkarmadrome
    • CommentTimeMar 14th 2007
     
    heres some links to try...

    i still use DW4 (when i cant remenber a tag!) - but do most of in in an crimson editor and its free!

    great resource > w3schools (xhtml, css, xml, asp, php, javascript and lots more)

    make a page in this then hack it! - its good practice > css pagemaker

    lists, floats, selectors > maxdesign

    just a few to get you going!
    •  
      CommentAuthormeska
    • CommentTimeMar 14th 2007 edited
     
    Don't worry LFM, i'm in the same predicament, am finally getting round to learning the basics! Oh and cheers for the links Karma.
    •  
      CommentAuthormiddigit
    • CommentTimeMar 14th 2007
     
    ooh, cool - nice karma thanks :) i should give this a shot too
    •  
      CommentAuthorwebsnap
    • CommentTimeMar 14th 2007
     
    Sweet links, thanks.
    •  
      CommentAuthorihc
    • CommentTimeMar 14th 2007
     
    if youve ever used stylesheets in quark or word then you are halfway there

    to save yourself headaches to start out, use one set of style rules for typography and another for layout

    you can combine them later to save of dl size but trust me its good to separate them out
    •  
      CommentAuthormiddigit
    • CommentTimeMar 14th 2007
     
    thanks ihc :)
  2.  
    Karma - thanks for the links - now I know what my weekend plans are.

    meska - glad to know I'm not alone

    ihc - i love my style sheets in quark - I hate when I get projects from other designers who didn't make any style sheets, thanks for the tip on separating typography and layout - seems logical. I assume you do those as external .css that you link to in your code, right?

    I <3 you all!
    •  
      CommentAuthorihc
    • CommentTimeMar 14th 2007
     
    yes - unless its really nothing at all that you are styling best to put them in external files.

    keeps your code tidier and of course multiple pages can refer to the same stylesheet.

    also separate files for different things is a strategy for ironing out browser bugs/quirks in a manageable way

    you wont encounter those in typography - they all kind of work for that (watchout for line-height) just in layout stuff

    a good tutorial for organising your sheets can be found here and here. These aren't precisely what i work with but its along the same lines.

    I blogged about this over at forgivenessissexy

    many wouldn't bother being that fussy but it helps you learn in manageable chunks and also make changes as your site 'matures'
    •  
      CommentAuthorkarmadrome
    • CommentTimeMar 15th 2007
     
    make use of comments too, it makes it easer to find bits, eg:

    /* ---- header styles---- */

    #head {
    height: 100px;
    width: 400px;
    margin: 0 0 0 180px;
    }


    /* ---- formatting styles ---- */

    .grad {
    background-color: #fff;
    background-image: url("img/bg_para.jpg");
    background-repeat: no-repeat;
    color: #333333;
    height: 110px;
    padding: 10px;
    margin: 0px;
    }

    .imgright {
    float: left;
    margin-top: 0px;
    margin-right: 20px;
    padding: 4px;
    }
    •  
      CommentAuthorchris
    • CommentTimeMar 15th 2007 edited
     
    and condense your css too ;)

    background: #fff url("img/bg_para.jpg") no-repeat;

    margin: 0 20px 0 0;
    hehe

    use something like cssedit and bbedit for coding, grab some free xhtml / css layouts via googling, mess with them a bit to see what does what, then adapt them to your needs.
    •  
      CommentAuthorkarmadrome
    • CommentTimeMar 15th 2007
     
    ^good call.. i just copied some css form a site i had open :happy:
    •  
      CommentAuthorchris
    • CommentTimeMar 15th 2007 edited
     
    also, as you can see, you can shorten css quite easily (may cause problems in older browsers*), here are some more tips along those lines...

    color - #fff turns into #ffffff, #f0 turns into #f0f0f0 etc.

    margins - margin: top left bottom right = margin: 10px 5px 20px 5px, and you can shorten certain variations a little more, like so - margin: 10px 5px, that would translate into margin: 10px 5px 10px 5px, for example. margins go clockwise, from the top.

    links - always declare link stylings in this order - a:link, a:visited, a:hover, a:active - LoVe/HAte. declare them all, too.

    ...actually, you could possibly add the :focus pseudo class in there, before active... so, link, visited, hover, focus, active. you'll need a new way to remember the order now.
    •  
      CommentAuthorkarmadrome
    • CommentTimeMar 15th 2007
     
    chris:LoVe/HAte


    more cunning than a rabbit with a fox in its mouth!.. didnt know that one thanks chris :]
    •  
      CommentAuthorihc
    • CommentTimeMar 15th 2007
     
    i'd layoff short-coding til you work out what everything does

    its worth learning about the cascade scoring though

    by letting the cascade work its magic you can actually trim out a tonne of css you might have added if you tried styling every element.

    the cascade, the C of CSS, is the pattern whereby each element 'inherits' the styles of the its 'parent' or enclosing tag

    if you apply styles to then all the sub-elements will inherit the same styles [ymmv*]

    the cascade scoring is a means of managing the scenario where two lines of code apply to the same element
    a {}
    is less likely to apply than
    a.class {}
    which in turn is trumped by
    body div div dl li a#id {}
    a good overview of css specifitiy scoring [again YMMV*] can be found at stuff and nonsense which uses starwars figures to illustrate the point.

    also download the freeware app XyleScope which the greatest ever app to debug your own css code. one of the panes int he main window shows the 'score' for a particular rule and you can see what is overriding what

    * some browsers score their propriatory styling (underline and blue for links for example) higher than specified css. so if you find (most likely with IE) that you have made a style command for an element but its not working - make it more specific
  3.  
    wow, thanks - I really appreciate all of these links and tips! NOw to dive in and learn to swim with CSS.
    •  
      CommentAuthorihc
    • CommentTimeMar 17th 2007
     
    drag meska in the soup with you
    •  
      CommentAuthormeska
    • CommentTimeMar 17th 2007
     
    ~puts on a tight pair of Speedos
    •  
      CommentAuthorihc
    • CommentTimeMar 17th 2007
     
    and no breast stroke!
    •  
      CommentAuthordek
    • CommentTimeMar 18th 2007
     
    just wanted to throw in a link with a HUMONGOUS list of resources, including a lot of CSS stuff, ranging from beginner to expert. imho, it's the list to end them all. :wink:

    Web Developer's Handbook
    •  
      CommentAuthorihc
    • CommentTimeMar 19th 2007
     
    holy cow!
    •  
      CommentAuthormeska
    • CommentTimeMar 19th 2007
     
    That link is awesome. Nice one!
  4.  
    dek, i think i <3 you.