[CSS] voor dummies - Deeltje 8

Ik maak vrijwel altijd gebruik van de standaardmarges van <p> en <h#> tags. Het enige wat ik vrijwel altijd 0 margin en/of padding meegeef zijn <form> en <fieldset>. *{margin:0 / padding:0;} lijkt me sowieso geen goed idee eigenlijk; zou inhouden dat je voor elk ander element waar het van toepassing is een marge/padding moet gaan verzinnen.

een duidelijke grond om dat niet te willen lijkt me dat je gewoon wilt dat je site er fatsoenlijk uitziet. Anders kun je al je websites net zo goed als plain text op gaan slaan.
Als om wat voor reden ook de stylesheet niet geladen wordt wordt dat *{margin:0;padding:0} ook niet geladen dus dan gaat gewoon de browsers stanaardlayout in.

-edit-
en ja ik heb het wel gedaan, omdat ik eerst bij zo'n beetje ieder element apart margin en padding 0 aangegeven had. Dan scheelt het nogal.

quote:

Op vrijdag 15 februari 2008 12:40 schreef mcDavid het volgende:
een duidelijke grond om dat niet te willen lijkt me dat je gewoon wilt dat je site er fatsoenlijk uitziet. Anders kun je al je websites net zo goed als plain text op gaan slaan.
Als om wat voor reden ook de stylesheet niet geladen wordt wordt dat *{margin:0;padding:0} ook niet geladen dus dan gaat gewoon de browsers stanaardlayout in.

In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.

quote:

Op vrijdag 15 februari 2008 12:43 schreef Tuvai.net het volgende:

[..]

In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.

Ik zou niet weten waarom ik dat zou gebruiken.
Wellicht als een pagina écht gigantisch irritant is opgemaakt, maar met datsoort gepruts staat de styling ook meestal in de HTML dus dan heb je niets aan die optie.

quote:

Op vrijdag 15 februari 2008 12:45 schreef mcDavid het volgende:

[..]

Ik zou niet weten waarom ik dat zou gebruiken.
Wellicht als een pagina écht gigantisch irritant is opgemaakt, maar met datsoort gepruts staat de styling ook meestal in de HTML dus dan heb je niets aan die optie.

Het is een ideaal hulpmiddeltje om gewoon even snel je Stylesheet uit te zetten of van Stylesheet et switchen, om te zien hoe een pagina zonder opmaak er uit ziet. Bij met tabellen opgezette sites heeft dat inderdaad al geen nut meer nee, omdat alles door elkaar staat.

Overigens doe ik ook altijd een check-ronde door een website die ik maak, zonder stylesheet, vooral wanneer ik er formulieren, functionaliteit en dergelijke aan ga hangen. Ik wil dat al mijn websites te lezen én te gebruiken zijn, ook zonder stylesheet.

Een site bekijken zonder stylesheet is de ideale manier om te testen of de html semantisch correct gebruikt is imo

quote:

Op vrijdag 15 februari 2008 11:35 schreef mcDavid het volgende:
[..]
Vaak is dat op te lossen door je css te beginnen met de volgende regel:
* {margin:0;padding:0}

Dat is erg lomp als algemene "oplossing". En in dit geval maakt het ook niets uit.

quote:

Op vrijdag 15 februari 2008 12:53 schreef CraZaay het volgende:
Een site bekijken zonder stylesheet is de ideale manier om te testen of de html semantisch correct gebruikt is imo

Ja, of om een site die in FF echt heel brak is nog enigszins leesbaar te krijgen. Ctrl+Shift+S in de dev-toolbar, alleen is die sneltoets in FF3 gekoppeld aan een eigen printscreen functie van FF

quote:

Op vrijdag 15 februari 2008 12:43 schreef Tuvai.net het volgende:

[..]

In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.

Ik bied zelf als alternate stylesheet een CSS bestand aan waarmee de pagina erg minimalistisch wordt. Die kun je in FF dus kiezen via Beeld -> PaginaStijl -> Minimalistic. Handig om al je gebruikers te kunnen bedienen.

Overigens: http://diveintoaccessibility.org/. Verplicht leesvoer.

Hebben jullie handige links met AJAX voorbeelden?

Ik had een heel handig link met allemaal voorbeelden, echter ben ik deze kwijt

Ik zoek eigelijk; als je met je muis over 'iets' heen gaat, dat er een veld/blok verschijnt met tekst erin.

Da's geen AJAX

quote:

Op woensdag 20 februari 2008 10:50 schreef CraZaay het volgende:
Da's geen AJAX

Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?

quote:

Op woensdag 20 februari 2008 11:00 schreef saban het volgende:

[..]

Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?

Het is pas AJAX wanneer jij de gegevens pas van de server download als je met je muis over het tekstveld gaat.

quote:

Op woensdag 20 februari 2008 11:01 schreef Geqxon het volgende:

[..]

Het is pas AJAX wanneer jij de gegevens pas van de server download als je met je muis over het tekstveld gaat.

Dat zeg ik toch?

quote:

Op woensdag 20 februari 2008 11:02 schreef saban het volgende:

[..]

Dat zeg ik toch?

Koffie. Eerst koffie, en dan praten we verder.

quote:

Op woensdag 20 februari 2008 11:10 schreef Geqxon het volgende:
[..]
Koffie. Eerst koffie, en dan praten we verder.

Saban kan ook wel wat koffie gebruiken, dit is het CSS voor dummies topic, niet JavaScript voor dummies

quote:

Op woensdag 20 februari 2008 11:13 schreef SuperRembo het volgende:

[..]

Saban kan ook wel wat koffie gebruiken, dit is het CSS voor dummies topic, niet JavaScript voor dummies

Ik wou er geen apart topic voor starten
Trouwens doe mij maar cappuchino

quote:

Op woensdag 20 februari 2008 11:00 schreef saban het volgende:

[..]

Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?

99% van de tijd wordt een reeds bestaande div (in de DOM) getoond/verborgen met CSS/JS. Beetje afhankelijk van de situatie of het zinnig is om daar steeds een HTTP-request voor te maken.

saban, het is geen ajax. Die 2 KB tekst en CSS gegevens kan je wel hiden en showen op een mouseover zonder serverside processing.

quote:

Op woensdag 20 februari 2008 10:32 schreef saban het volgende:
Hebben jullie handige links met AJAX voorbeelden?

Ik had een heel handig link met allemaal voorbeelden, echter ben ik deze kwijt

Ik zoek eigelijk; als je met je muis over 'iets' heen gaat, dat er een veld/blok verschijnt met tekst erin.

ajax is het pas als je op het moment dat een gebruiker een bepaalde handeling doet, daadwerkelijk een nieuw request maakt naar de server en deze informatie opvraagt die na het inladen verder verwerkt worden....

wat je beschrijft is gewoon een normaal 'onmouseover-event waarbij bepaalde informatie eerst niet getoond wordt, maar pas getoond wordt bij die onmouseover... als het verder geen nut heeft om een 'asynchroon request te doen voor die informatie en die informatie ook an sich bij het allereerste laden van de pagina al meegestuurd kan worden (maar enkel niet zichtbaar op de pagina dan getoond wordt), is het aan te raden dat te doen, het is nutteloos enkel modewoordjes te willen toepassen als deze niet expliciet een meerwaarde hebben tov een eenvoudigere manier (eenvoudiger is altijd beter als het aan je eisen ook voldoet)

quote:

Op woensdag 20 februari 2008 12:12 schreef CraZaay het volgende:

[..]

99% van de tijd wordt een reeds bestaande div (in de DOM) getoond/verborgen met CSS/JS. Beetje afhankelijk van de situatie of het zinnig is om daar steeds een HTTP-request voor te maken.

Kun je eindeloos op door debateren. Vaak hoor je mensen zeggen dat AJAX niet té overmatig gebruikt word omdat je anders een overkill aan HTTP requests krijgt, maar dan kun je je afvragen wat nou zwaarder is; een HTTP request die een lijst met dynamische gegevens opvragen op het moment dat een gebruiker deze opvraagt (bijvoorbeeld door een druk op een knop), of standaard op elke pagina in een onzichtbare div deze lijst gooien, maar die niet altijd gebruikt word.

quote:

Op woensdag 20 februari 2008 13:09 schreef Tuvai.net het volgende:

[..]

Kun je eindeloos op door debateren. Vaak hoor je mensen zeggen dat AJAX niet té overmatig gebruikt word omdat je anders een overkill aan HTTP requests krijgt, maar dan kun je je afvragen wat nou zwaarder is; een HTTP request die een lijst met dynamische gegevens opvragen op het moment dat een gebruiker deze opvraagt (bijvoorbeeld door een druk op een knop), of standaard op elke pagina in een onzichtbare div deze lijst gooien, maar die niet altijd gebruikt word.

Absoluut, vandaar dat ik aangaf dat het afhankelijk is van de situatie in de hoeveelheid data. je moet een beetje de "sweet spot" zoeken inderdaad,

quote:

Op woensdag 20 februari 2008 12:22 schreef NiteSpeed het volgende:
saban, het is geen ajax. Die 2 KB tekst en CSS gegevens kan je wel hiden en showen op een mouseover zonder serverside processing.

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...

AJAX staat voor Asnynchronus Javascript And XML

Heeft dus weinig met CSS te maken, totdat je de boel wilt gaan opmaken.

quote:

Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...

Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..

de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?

quote:

Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...

Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?

quote:

Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...

Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.

quote:

Op woensdag 20 februari 2008 14:13 schreef RM-rf het volgende:

[..]

Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..

de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?

Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.

quote:

Op woensdag 20 februari 2008 14:17 schreef Geqxon het volgende:

[..]

Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?

Natuurlijk kan dat Was alleen aan het rondkijken/vragen/zoeken of het mogelijk was (tuurlijk wel), maar of het ook efficient is voor de tijd dat ik er in stop

quote:

Op woensdag 20 februari 2008 14:45 schreef CraZaay het volgende:

[..]

Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.

Per ID nu 15 velden (in zelfde tabel), dit later uitgebreid worden door info ook uit andere tabellen op te vragen.
De hoeveelheid ID kan verschillen, van tien tot een paar honderd.

quote:

Op donderdag 21 februari 2008 09:14 schreef saban het volgende:

[..]

Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.

Dat is onzin, serverload is geen 2-dimensionale absoluutheid..

ik zei niet voor niks dat het gebruik van ajax in deze 'verlicht iig vrijwel geen enkele structurele belasting op de server'

het enige verschil dat je zou 'winnen' zou een enkele sqlquery zijn om de betreffende data op te vragen (ervanuitgaande dat de data uit een db komt) wat milli-microseconden rendertijd en een paar bytes aan data...
zodra echter een gebruik enthousiast met zn muis over de elementen beweegt krijg je een veel zwaardere belasting, omdat voor iedere mouseover dus een separate reqiuest komt, een aparte query uitgevoerd moet worden... iedere 'winst' wat betreft serverbelasting is minimaal en niet structureel die je had verlies je razend snel zodra er ook gebruik van gemaakt wordt..

bedenk ook dat een server helemaal geen problemen ermee heeft ipv in 0.135 seconde in 0.137 seconde een pagina te renderen en server en of deze ipv 6.056 ipv 6.012 Bytes groot is...

een 'que' aan requests kan eerder laadproblemen opleveren, zowel aan de serverside (het aantal connecties welke een server aankan zal eerder beperkt zijn en hierdoor kunnen request in de wachtrij geplaatst).. maar ook aan de clientside, meestal betekent ajax toch dat er na het event dat het request ooproept eventjes gewacht moet worden totdat het request geplaatst is en de data teruggelezen... juist zulk een vertraging is bij mouseovers mogelijk een ergenis, helemaal als het gaat om een hele rij van elementen die op een mouseover zo'n request oproepen (het effect dat je kunt krijgen is dat als de gebruiker toevallig met zn muispointer over de elementen heenbeweegt zelfs zonder te weten hermee data op te vragen, opeens meerdere requests geplaats worden en het enkele seconden duurt voor deze afgehandeld zijn).

maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...

RM-rf waarom zo agressief opgesteld

Als ik het beter zou weten was ik hier niet terecht.
Zo leer ik nog eens wat

quote:

Op donderdag 21 februari 2008 10:47 schreef RM-rf het volgende:

[..]

maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...

Dat laatste zinnetje verneukt echt je hele post, waar misschien toch wel een kern van waarheid in zat