HTML-site forum


 · Forums · Reactie · Statistieken · Registreren · Zoeken · Regels · Tips · FAQ
HTML-site forum / Tutorials / reset.css en imports - voordat je begint aan een css en template
Schrijver Bericht
Jerg Scharpff
Forum Lid

9 posts
# Geplaatst: 22 Nov 2009 14:57 · Aangepast door: Jerg Scharpff


Heb deze tip van een collega gekregen en ik wil dit graag delen:

Door reset.css te gebruiken, spaar je jezelf van enorm veel hoofdpijn, voordat je aan een nieuw ontwerp begint:

reset.css zet alle eigenschappen voor elke browser eerst 'hetzelfde', zodat je daarna geen rare padding en margin problemen tegen zou moeten komen. Zoek anders maar eens op google naar reset.css deze file wordt ook constant vernieuwd en er zijn verschillende versies en meningen hierover natuurlijk.

Ik gebruik zelf de volgende reset

Voorbeeld van reset.css:
css code
 
@charset "utf-8";
/* CSS Document */
/* Global Styles Reset */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body 			{line-height: 1;}
ol, ul 			{list-style: none;}
blockquote, q 	{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
/* add 'cellspacing="0"' */
table {border-collapse: collapse;border-spacing: 0;}
 



Voor javascript doe ik hetzelfde:
Gebruik imports. Dit is erg handig als je met meerdere aparte style sheets of javascripts werkt:

In html voor /head
html code
 
 
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen, projection">
<script type="text/javascript" src="jscript/scriptloader.php"></script>
 
 


Door meerdere css bestanden te koppelen kun je ook modules gescheiden houden bijvoorbeeld, bijv. form.css, frontend.css, backend.css etc.

De css code in main.css

css code
 
@charset "utf-8";
/* CSS Document */
 
@import url("reset.css");
@import url("screen.css");
@import url("iphone.css");
 
 



De javascript file noem ik in het voorbeeld 'scriptloader.php'
Hierin doe je het volgende:

php code
 
<?php 
 
// examples of libraries or javascript files you want to add to your page
 
 
include 'jquery-1.3.2.min.js';
include 'navbar_spry.js';
include 'jquery.pngFix.js';
include 'tooltips.js';
include 'browserSniffer.js';
include 'style_switch.js';
 
// Greybox
 
include 'greybox/AJS.js';
include 'greybox/AJS_fx.js';
include 'greybox/greybox_scripts.js';
 
?>
 
 


Dit werkt voor mij als een charm en is ook heel gemakkelijk als je even iets wilt testen, of moet debuggen.

 
Sebastiaan Franken
Moderator

3847 posts
# Geplaatst: 24 Nov 2009 01:37 · Aangepast door: Sebastiaan Franken


Niet om moeilijk te doen,maar die reset.css kan in één klap (padding + margin = vaak 90% van het probleem):
css code
 
*
{
    margin: 0;
    padding: 0;
}
 


En ik twijfel of dit tutorial materiaal is, hoewel het wel erg handig is om het te weten ;-)

BaZz
Forum Lid

3574 posts
# Geplaatst: 24 Nov 2009 10:35 · Aangepast door: BaZz


99% van het probleem zou ik zeggen :-)

pas op:

outline: 0;

kan voor problemen zorgen:
http://arjaneising.nl/css/dont-remove-the-outline-from-links

meestal heet de bovenstaande aanpak de meyer reset
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://meyerweb.com/eric/tools/css/reset/

maar mijn absolute voorkeur heeft die simpele reset voor alle elementen (*) zoals hierboven: kort en bondig.

Jerg Scharpff
Forum Lid

9 posts
# Geplaatst: 24 Nov 2009 10:49


Het is inderdaad die meyer reset die ik ergens had gevonden. Thanks voor die links erbij te plaatsen.
Zodra je met complexe sites werkt ben ik toch blij dat deze instellingen voor al mijn tags op 0 staan.
Elke css met deze tags die je verder importeert zal die tags toch overriden. Iedereen zijn werkwijze he...

Misschien heb je gelijk met de outline, bedankt voor het artikel ;-) Het is ook beter als mensen deze zien, maar zodra ik wil dat mensen deze wel zien, zet ik ze in mijn custom css file gewoon aan. OVer het algemeen vind ik het een storend element.

Daarbij, tutorial materiaal of niet het is toch maar handig om te weten, het vergemakkelijkt alles een beetje volgens mij.

En als mijnheer 2173 posts sebastiaan weet waar dit artikel thuishoort, be my guest to publish it elsewhere ;-) told ya, I'm newbie, and I'm proud of it, because designing is more fun than posting :-)

toedels!!

BaZz
Forum Lid

3574 posts
# Geplaatst: 24 Nov 2009 10:56 · Aangepast door: BaZz


Quoting: Jerg Scharpff

Zodra je met complexe sites werkt ben ik toch blij dat deze instellingen voor al mijn tags op 0 staan.


maar dat doet die simpele reset ook gewoon: * betekent alle elementen, dus die hele opsomming is niet noodzakelijk :-)

Quoting: Sebastiaan Franken

* { margin: 0; padding: 0; }


Jerg Scharpff
Forum Lid

9 posts
# Geplaatst: 24 Nov 2009 10:59


Ik zal mijn letterlijke woorden aanpassen naar figuurlijke woorden.
Alle browsers hebben voor-instellingen, betreffende links, outlines, h1 groottes. Elke browser heeft een andere engine en instructieset.
De meyer approach vind ik handiger, om deze reden.
Ik vertrek van een figuurlijke '0'

:-)

Sebastiaan Franken
Moderator

3847 posts
# Geplaatst: 2 Dec 2009 18:26 · Aangepast door: Sebastiaan Franken


Quoting: Jerg Scharpff

En als mijnheer 2173 posts sebastiaan weet waar dit artikel thuishoort, be my guest to publish it elsewhere ;-) told ya, I'm newbie, and I'm proud of it, because designing is more fun than posting :-)


Als we het dan toch in het Engels gaan doen:

Unfortunately I am not a moderator here. I would love to be. I don't know where this post should belong, but I do think it's a bit lean to be a tutorial. That's all.

Quoting: Jerg Scharpff


Ik zal mijn letterlijke woorden aanpassen naar figuurlijke woorden.
Alle browsers hebben voor-instellingen, betreffende links, outlines, h1 groottes. Elke browser heeft een andere engine en instructieset.
De meyer approach vind ik handiger, om deze reden.
Ik vertrek van een figuurlijke '0'

:-)


Maar gelukkig doet dit:

css code
 
*
{
    margin: 0;
    padding: 0;
}
 


in elke browser hetzelfde.

DMWeijers
Moderator

2088 posts
# Geplaatst: 2 Dec 2009 19:38 · Aangepast door: DMWeijers


Quoting: Jerg Scharpff


Misschien heb je gelijk met de outline, bedankt voor het artikel ;-) Het is ook beter als mensen deze zien, maar zodra ik wil dat mensen deze wel zien, zet ik ze in mijn custom css file gewoon aan. OVer het algemeen vind ik het een storend element.


Outline wel doen, maar niet op een a-element, maar doe het zo:
css code
 
a:active {
outline: none;
}


Zo zie je de link NIET als je klikt (aestetisch gezien mooier), maar als je geen muis gebruikt zie je hem wel als je erover "tabt" (goede gebruiksvriendelijkheid).

Quoting: BaZz


maar dat doet die simpele reset ook gewoon: * betekent alle elementen, dus die hele opsomming is niet noodzakelijk :-)

Niet waar, deze slaat veel elementen over :) (waarom denk je anders dat Eric Meyer een hele nieuwe reset.css gaat maken als het daarmee ook kan?)
Daarnaast is het ook fijn als je niet met de basis-settings van alle typografische elementen rekening te hoeven houden.

Reactie

Tekst vet maken  Tekst cursief maken  Tekst onderstrepen  Afbeelding invoegen  Insert YouTube video  Link invoegen  html code invoeren  css code invoeren  php code invoeren   javascript code invoeren  Uitschakelen *Wat is dat?


» Naam  » Wachtwoord 
 Alleen geregistreerde bezoekers kunnen hier een bericht plaatsen. Je kunt inloggen of je hier registreren.

 



Dit forum is gebaseerd op miniBB © 2001-2010

cursus html


Sponsor: BlueYellow

Sitemap