...

View Full Version : Universal HTML and/or CSS to aid development of all sites??



brett007
08-07-2007, 05:28 PM
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

Jutlander
08-07-2007, 05:33 PM
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:


.clear {
clear: both;
}

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

brett007
08-07-2007, 05:36 PM
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

VIPStephan
08-07-2007, 07:03 PM
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.:


<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…

brett007
08-07-2007, 09:44 PM
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

garydarling
08-07-2007, 11:18 PM
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/

brett007
08-07-2007, 11:49 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum