Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.quote:Op woensdag 31 december 2008 14:44 schreef Roy_T het volgende:
[..]
Absoluut. Sterker nog: ze zijn de nummer 1 reden waarom een website snel of traag is (of overkomt). Hoe snel je verbinding ook is, een browser kan niet meer dan 2 requests per domein aan (en voor JS-bestanden 1). Hoe meer request, hoe langer het duurt. Kun je oplossen door meer assets hosts te gebruiken (static1.example.com, static2.example.com, die allemaal naar dezelfde fysieke locatie verwijzen), maar bij teveel verschillende hosts krijg je weer last van vertraging door DNS lookups.
Of inline images wel of niet handig zijn hangt heel erg van je doel af. Voor de gemiddelde website maakt het niets uit of is het nadeliger (wanneer je geen goede caching gebruikt). Je hebt het echt over high traffic sites wil het interessant worden.
Leesvoer: http://developer.yahoo.com/performance/
Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.quote:Op woensdag 31 december 2008 14:48 schreef Swetsenegger het volgende:
Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.
ik denk dat het nu júíst een issue is. Vroeger maakte je zoveel mogelijk hele kleine bestandjes zodat er zoveel mogelijk in de cache terecht kwam (websites in frames anyone?) maar tegenwoordig boeit de download tijd maar weinig meer dus kun je beter gewoon één groot bestand maken en het voor lief nemen dat niet alles door de browser gecached kan worden.quote:Op woensdag 31 december 2008 @ 14:26 schreef Swetsenegger het volgende:
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan
En als iemand erop wil Googlen: dat ging over "CSS sprites"quote:Op woensdag 31 december 2008 15:04 schreef RenRen- het volgende:
Neemt natuurlijk niet weg dat je wel realistisch moet blijven... dr was laatst ook een topic over imagemapping, dat kan ook nog wat uitmaken en lijkt me praktischer.
Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.quote:Op woensdag 31 december 2008 14:55 schreef Roy_T het volgende:
[..]
Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.
Ik zou het eerder in goede caching, het samenvoegen van bestanden (de 9 externe JS bestanden op de Fok! frontpage zouden makkelijk tijdens het deploy proces kunnen worden samengevoegd bijvoorbeeld) en far future expiry headers zoeken overigens dan inline images, maar het is leuk om te weten hoe het werkt
Zie ook http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Alleen zijn mijn cijfers wél gebaseerd op onderzoeksresultaten.quote:Op woensdag 31 december 2008 17:27 schreef Swetsenegger het volgende:
Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.
Dat magquote:Ik vind het allemaal nogal overtrokken.
Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?quote:Op woensdag 24 december 2008 13:10 schreef mcDavid het volgende:
niet echt een CSS probleem, maar ik zou wordpress eens bekijken!
Het is de bedoeling dat je je eigen layout omzet in templates. Het kan wel helpen als je eerst een (soortgelijke) template eens goed bekijkt, zodat je een beetje een idee krijgt hoe dat werkt. Verder zijn er met google vast honderden tutorials te vinden over hoe je een wordpresstemplate maakt.quote:Op maandag 5 januari 2009 @ 20:30 schreef Mirel het volgende:
[..]
Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?
Kutgedoe
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .butlong { display: block; float: left; height: 16px; margin: 0px 10px 0px 0px; color:#337f92; background: #d2eaf0; padding: 2px; text-align:center; text-decoration: none; border: 1px solid #337f92; } .but { width: 100px; } .butlong { width: 175px; } |
1 2 | <a href="/user/mailbox/delete/<?php echo $list->id; ?>.html" class="butlong">Verwijder bericht</a> |
Line-height ook op 16px zetten.quote:Op donderdag 8 januari 2009 @ 13:52 schreef Chandler het volgende:
Ik heb een klein vraagje dat over a en input gaat, deze wil ik namelijk beiden stijlen met een zelfde class
class:
[ code verwijderd ]
html:
[ code verwijderd ]
maar ik krijg als resulaat dit
[afbeelding]
Wat doe ik fout?
tuurlijk is dat mogelijk, als je maar specifiek genoeg bent.quote:Op donderdag 8 januari 2009 @ 14:24 schreef Chandler het volgende:
Ik heb het geprobeerd maar wil nog niet helemaal lukken eingelijkIk wil idd beiden even hoog/groot hebben! is dat mogelijk met 1 class? of dien ik apparte classes te maken?
Thsnks, dat laatste gaf mcDavid mij meequote:Op donderdag 8 januari 2009 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?
een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
Hmm, dat kanquote:Op donderdag 8 januari 2009 18:49 schreef veldmuis het volgende:
Nog even mierenneuken op die sait: rechtsonder, dat meer informatie-knopje, daar zou ik tekst van maken. Ivm cleartype en andere AA-dingetjes op tekst steekt dat nogal af. Die oranje onderrand is gewoon een border-bottom.
vertical-align kan volgens mij ook gebruikt worden om de positie van plaatjes op de tekstregel te bepalen. Het werkte wel iigquote:Op donderdag 8 januari 2009 @ 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?
een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
Ik heb het even bekeken maar zie nog steeds een verschilquote:Op donderdag 8 januari 2009 15:31 schreef mcDavid het volgende:
Ik zie al wat het probleem is: bij een button komt de border bínnen het element, bij een anchor erbuiten.
http://duft.nl/test.php heb het opgelost met wat spelen met de font-size en line-height (laatste heeft alleen effect op anchor). Maar een handigere oplossing zou denk ik zijn om de maat apart te defineren
button.but {height:22px;}
a.but{height:20px;}
zoiets.
In IE klopt het niet, in FF wel..quote:Op vrijdag 9 januari 2009 10:00 schreef Chandler het volgende:
[..]
Ik heb het even bekeken maar zie nog steeds een verschil
[ afbeelding ]
Moet je maar niet zo'n idiote browser gebruikenquote:Op vrijdag 9 januari 2009 @ 10:00 schreef Chandler het volgende:
[..]
Ik heb het even bekeken maar zie nog steeds een verschil
[afbeelding]
Je bedoeld in de topics waar jij in postquote:Op vrijdag 9 januari 2009 14:14 schreef mcDavid het volgende:
Dat kan kloppen want meer dan de helft van de mensen zijn idioten.
-edit-
op fok minder trouwens.
Ja en aangezien ik nogal eens op F5 ram is de fx-score vast wat overrated, maar dan nog.quote:Op vrijdag 9 januari 2009 @ 14:32 schreef HuHu het volgende:
[..]
Je bedoeld in de topics waar jij in post?
Ik ben bang van niet.quote:Op vrijdag 9 januari 2009 @ 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />quote:Op vrijdag 9 januari 2009 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Frames?!quote:Op vrijdag 9 januari 2009 14:30 schreef Patje1987 het volgende:
Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.
http://www.patrickvd.com/
Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getestquote:Op vrijdag 9 januari 2009 18:44 schreef veldmuis het volgende:
[..]
Frames?!
Dat 'Valid HTML' onderin kun je trouwens ook wel weghalen.
Edit: Ohw, je zit in een frame ivm je domein.
quote:Op vrijdag 9 januari 2009 @ 18:49 schreef Patje1987 het volgende:
[..]
Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getest ;)
1 2 3 | RewriteCond %{HTTP_HOST} ^.*(patrickvd.com)$ [NC] RewriteRule ^(.*)$ http://patrickvd.derium-online.com/$1 [L] |
Omdat je dan JS nodig hebt, en anders niet?quote:Op vrijdag 9 januari 2009 16:54 schreef Light het volgende:
[..]
Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />
Daar kun je dan natuurlijk nog weer classes aanhangen
Iddquote:Op vrijdag 9 januari 2009 20:10 schreef Roy_T het volgende:
[..]
Omdat je dan JS nodig hebt, en anders niet?
Ik heb even in de CSS specs gekeken, maar zag het er niet in staanquote:Op vrijdag 9 januari 2009 20:34 schreef Mirel het volgende:
Wat is trouwens de menumodule code in joomla. Ben die even kwijt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | background-image:url(bg.jpg); margin-top:0; } ul, li { padding: 0px; margin: 0px; } img { border: none; } #container { width:757px; height:868px; margin-left:auto; margin-right:auto; } #header { background-image:url(images/ani_01.jpg); width:757px; height:248px; float:left; } ul{ list-style:none; } li{ display:inline; } #sidebalkleft{ background-image:url(images/ani_02.jpg); width:28px; height:575px; float:left; } #menu{ width:479px; height:41px; float:left; } #menu a{ border:0; text-decoration:none; list-style:none; display:inline; } #onderstuk{ background-image:url(images/ani_07.jpg); width:223px; height:41px; float:left; } #content{ background-image:url(images/ani_10.jpg); width:556px; height:495px; float:left; } #menubalk{ background-image:url(images/ani_09.jpg); height:39px; width:702px;' float:right; } #onderbalk{ background-image:url(images/ani_12.jpg); width:757px; height:45px; float:inherit; } #rechterbalk{ background-image:url(images/ani_08.jpg); height:575px; width:28px; float:right; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Animatie</title> <link href="div.css" rel="stylesheet" type="text/css" /> </head> <body><div id="container"> <div id="header"> </div> <div id="sidebalkleft"> </div> <div id="menu"> <ul> <li><a href="index.html"> <img src="images/ani_03.jpg" width="118" height="41" /></a></li> <li><a href="historie.html"><img src="images/ani_04.jpg" width="120" height="41" /></a></li> <li><a href="studiolfc.html"><img src="images/ani_05.jpg" width="121" height="41" /></a></li> <li><a href="contact.html"> <img src="images/ani_06.jpg" width="120" height="41" /> </a> </li> </ul> </div> <div id="onderstuk"></div> <div id="rechterbalk"></div> <div id="menubalk"></div> <div id="content"> </div> <div id="onderbalk"> </div> </div> </body> </html> |
het is een beginquote:Op zondag 11 januari 2009 21:37 schreef veldmuis het volgende:
Begin eens met
ul, li {
padding: 0px;
margin: 0px;
}
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |