Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Universal HTML and/or CSS to aid development of all sites??

    Hey everyone! Just trying to brush up on my html/css abilities/effeciency and I'm wondering about universal html/css code to use in virtually all websites?

    for example It seems like * { margin: 0; padding: 0; } is an example of something that should always be in the pages code to start off on an even slate...is this true, more or less, also possibly some general IE fixes straight off or some HTML {[style here]} type of stuff...?

    Any other codes to help prevent browser differences, bugs, or just in general make the writing of the site more logical and structured?

    I basically would appreciate any opinions, practices or thoughts on this, I'm pretty new and knowing this is going to help me a lot. I'm interested in always providing identical output to safari, Ie-mac (whatever the latest version is), and most importantly these three: Ie6, 7 and Firefox (2+)

    Thanks everyone! Can't wait to absorb some of the wisdom from many of you skilled folks.


    - Brett
    Last edited by brett007; 08-07-2007 at 05:34 PM. Reason: spelling and such

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Yes the universal selector is very useful. I used to code sites without it, but it all turned out nasty. Don't know if there's any other special or useful codes, perhaps a clearing class:

    Code:
    .clear {
    clear: both;
    }
    But if you have a footer, you might as well put clear: both; on that instead.
    .
    .

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice one...I knew about the CLEAR tag....but still haven't wrapped my head around it's usage....you are supposed to clear (in general) a float in the same direction?

    So if I have

    #floatingdiv {
    float: left;
    }

    I should make it

    #floatingdiv {
    float: left;
    clear: left;
    }

    Is that correct? Is that a universal rule as you see it, or are there important exceptions? (I may totally be off my rocker on this....)

    * note: I didn't know about clear: both on footers as a rule....thanks.


    - Brett

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,729
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    If an element is floated in either direction and if you want any following element continue under that floated element you apply the clear property to the following element, not the floated one.

    I.e.:
    Code:
    <div>
    <img style="float: left;" />
    <p style="clear: left;>text</p>
    
    <img style="float: right;" />
    <img style="float: left;" />
    <p style= clear: both;">text</p>
    </div>
    I usually don’t use the universal selector for all elements as there are cases where I wanna keep the default settings and not specify new styles for every element again.

    However, a general body font size in percent (62.5% to be exact) in combination with widths in % or em makes it easy to change the general size of a website (increasing the font size will also increase the page width). 62.5% because it makes counting em units easier as they will be equivalent to pixel sizes (i.e. 1em = 10px, 1.2em = 12px). But you have to be careful because relative units refer to the parent element.

    If you develop websites regularly you start getting annoyed of the repeating work to set up a page so you (or I at least) have created default templates and use the same HTML structure over and over. This might be kind of a “general HTML” rule. Like the basic page structure is always: container > header, content, footer > title and menu in header, etc…

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    VIPStephan, that's a clever signature you have there, I gotta admit... I clicked it! :D

    thanks for the 'clearing' tips....seems like I need to come up with a basic template for general use as well...sounds like a good plan...I see loads of templates online, but I always find them to be cluttered and full of junk or even if it's nice I feel like I'm hacking someone else's work....just feels sloppy and I'd like to KNOW what it is I'm getting into, if that makes sense...or maybe I just like re-inventing the wheel and I'm wasting time and effort when I should just find nice pre-made templates by someone more accomplished... :p

    - Brett

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Take a look at the YUI Reset idea, created by some geeks at Yahoo. I've used it on my designs with excellent results. Also look at YUI Base for uniformity in layout and fonts.

    http://developer.yahoo.com/yui/reset/

  • #7
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by garydarling View Post
    Take a look at the YUI Reset idea, created by some geeks at Yahoo. I've used it on my designs with excellent results. Also look at YUI Base for uniformity in layout and fonts.

    http://developer.yahoo.com/yui/reset/
    Hey sounds like a good idea! Great find! I'll give it a shot next time, thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •