[html, css, js] voor dummies #21

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_108087323
quote:
4s.gif Op zondag 8 januari 2012 00:25 schreef picodealion het volgende:
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag ([ afbeelding ]), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.

zcflevo.nl
pi_108087475
Sorry, fixed.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_108104189
Iemand? Volgens mij is het vrij simpel maar het lukt me maar niet ;(
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  vrijdag 17 februari 2012 @ 23:55:55 #229
137776 boem-dikkie
Jedi Mind Baby!
pi_108104333
Hoe bedoel je 'iniaten'? Je kunt het jQuery slider stuk toch sowieso inladen en de div die de boel laat sliden meesturen als container van de door AJAX ingeladen items?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_108104487
Je kunt toch gewoon na het succesvol voltooien van je Ajax-request die initialisatie van die flexslider aanroepen...?
Bleuh.
pi_108104646
Het probleem is dat de slider in de container niet werkt omdat die al geladen is voordat de container gebruikt wordt (die roep je immers pas later handmatig op).

Wat ik dus wil is de slider pas laden na de AJAX-load van de container, zoals PimD zegt. Dit lukt me echter niet ( ben niet zo'n jQuery held).
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_108104729
Je hebt toch gewoon een showContent-functie aangemaakt... die wordt neem ik aan aangeroepen zodra je AJAX-ding voltooid is...?
Bleuh.
pi_108104843
Ja, maar als ik daar de slider probeer te doen dan doet ie het niet meer, dus daar doe ik iets fout. Kan m'n code nu helaas niet posten want ik zit op mobiel.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  zaterdag 18 februari 2012 @ 00:11:09 #234
137776 boem-dikkie
Jedi Mind Baby!
pi_108104952
Kijk met Firebug (oid) wat er allemaal gebeurt als je Ajax wordt ingeladen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_108105060
Goed idee, zal ik morgen even doen. Alleen volgens mij is het heel simpel.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  zaterdag 18 februari 2012 @ 09:40:41 #236
87680 Mirel
Mirel wil een bongophone.
pi_108109538
quote:
0s.gif Op maandag 13 februari 2012 12:40 schreef Mirel het volgende:
Hoe kan ik de AddThis Like knop fixen zodat 'ie het ook in Firefox doet? Als je iets liket, dan zie je het tekstwolkje naast de like knop niet. Op het AddThis forum zeggen ze niks. Ik ben niet te spreken over hun behulpzaamheid. }:|
http://support.addthis.co(...)-it-right?new=176005

www.mirelmasic.nl random post

Code is gewoon:
[ code verwijderd ]

Even iets anders. Ik wil een custom scrollbalk, die de gewone vervangt van de browser. Ik weet dan niet of ik hier moet wezen:
http://jscrollpane.kelvinluck.com/

Heb de bestanden gedownload en in een map gezet, en dit geprobeerd in de head, maar het werkt niet:
[ code verwijderd ]

When all else fails, you always have delusion.
  zaterdag 18 februari 2012 @ 12:40:04 #237
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_108112870
quote:
0s.gif Op zaterdag 18 februari 2012 09:40 schreef Mirel het volgende:

[..]

Met die like-buttons ben ik niet bekend, maar je scrollbalk zou met die header in feite gewoon moeten werken.

Zie hier een werkend voorbeeld

SPOILER: En de code
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.


[ Bericht 2% gewijzigd door BBQSausage op 18-02-2012 12:51:11 ]
  zaterdag 18 februari 2012 @ 14:03:17 #238
137776 boem-dikkie
Jedi Mind Baby!
pi_108115433
Je werkende voorbeeld faalt hier nogal.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  zaterdag 18 februari 2012 @ 14:04:52 #239
87680 Mirel
Mirel wil een bongophone.
pi_108115490
quote:
7s.gif Op zaterdag 18 februari 2012 12:40 schreef BBQSausage het volgende:

[..]

Met die like-buttons ben ik niet bekend, maar je scrollbalk zou met die header in feite gewoon moeten werken.

Zie hier een werkend voorbeeld

SPOILER: En de code
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
ik zie witte leegte

edit: inmiddels doet 'ie het. Maar ik wil een script waarbij de gewone scrollbalk van de browser zelf vervangen wordt. Helemaal rechts. Niet binnen een div
When all else fails, you always have delusion.
  zaterdag 18 februari 2012 @ 14:18:25 #240
12221 Tijn
Powered by MS Paint
pi_108115848
Dan zet je het toch gewoon op het body-element ipv een div?
Verberg de nieuwsticker
pi_108116173
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
Bleuh.
  zaterdag 18 februari 2012 @ 14:50:06 #242
87680 Mirel
Mirel wil een bongophone.
pi_108116747
quote:
2s.gif Op zaterdag 18 februari 2012 14:18 schreef Tijn het volgende:
Dan zet je het toch gewoon op het body-element ipv een div?
oh ja, natuurlijk
When all else fails, you always have delusion.
  zaterdag 18 februari 2012 @ 14:51:26 #243
230788 n8n
Pragmatisch
pi_108116790
quote:
0s.gif Op zaterdag 18 februari 2012 14:29 schreef PimD het volgende:
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
“Specialization is for insects”.—Robert Heinlein
  zaterdag 18 februari 2012 @ 14:54:18 #244
84244 Scorpie
Abject en infaam!
pi_108116873
quote:
0s.gif Op zaterdag 18 februari 2012 14:29 schreef PimD het volgende:
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
Hoog hobby gehalte wat mij betreft. Als ik dat op een website zie ga ik van :') naar :D naar :'( naar :( naar _O-
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
  zaterdag 18 februari 2012 @ 15:08:34 #245
87680 Mirel
Mirel wil een bongophone.
pi_108117262
Gewoon, omdat het kan.
When all else fails, you always have delusion.
  zaterdag 18 februari 2012 @ 15:26:43 #246
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_108117764
quote:
10s.gif Op zaterdag 18 februari 2012 14:03 schreef boem-dikkie het volgende:
Je werkende voorbeeld faalt hier nogal.
:{ Vreemd, hier werkt ie prima in FF,Chrome & IE.
  zaterdag 18 februari 2012 @ 15:34:06 #247
56176 Catch22-
Ben je Blind?!
pi_108117949
quote:
0s.gif Op zaterdag 18 februari 2012 14:29 schreef PimD het volgende:
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
designers hebben er nogal een handje van. niet doen inderdaad. gewoon niet
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108118243
Hoi!

Ik heb de volgende code: (code van de tekst op een footer)

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		<div class="layout-col-01">
<div class="block">
<div style="margin-top: 0px;">
<table style="height: 221px;" class="klantenservice" border="0">
<tbody>
<tr>
<td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left">
  <strong><span style="color: #333333; font-size: 12px;">Website</span></strong>
<ul>
<p><li><a target="_self" href="http://www.site.nl">Bedrijfsinformatie</a></li></p>
<p><li><a target="_self" href="http://www.site.nl">Contact</a></li></p>
<p><li><a target="_self" href="http://www.site.nl"> Keurmerk</a></li></p>
<p><li><a target="_self" href="http://www.site.nl">Site</a></li></p>
</ul>
</td>
<td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left">
<span style="color: #333333; font-size: 12px;"><strong>Bestellen</strong></span>
<ul>
  <p><li><a target="_self" href="http://www.site.nl">Een bestelling plaatsen</a></li></p>
<p><li><a target="_self" href="http://www.site.nl">Orderstatus volgen</a></li></p>
<p><li><a target="_self" href="http://www.site.nl">Bestelling annuleren</a></li></p>
</ul>
</td>
<td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left">
<span style="color: #333333; font-size: 12px;"><strong>Betalen</strong></span>
<p><img src="www.afbeelding.nl" height="45" width="89" /></p>
</td>
  <td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left">
<span style="color: #333333; font-size: 12px;"><strong>Keurmerk</strong></span>
<p><img src="www.afbeelding.nl" height="45" width="89" /></p>
</td>
<td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left">
<span style="color: #333333; font-size: 12px;"><strong>Vind ons op</strong></span>
<img src="facebook.logo" height="32" width="32" /> facebook
<img src="twitter.logo" height="32" width="32" /> twitter
<img src="youtube.logo" height="32" width="32" /> hyves
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Ik wil de links die onder de titels staan , zoals bestelling plaatsen, orderstatus volgen e.d. (zijn niet de werkelijke teksten) onder elkaar hebben, en niet naast elkaar.
Ik heb dit opgelost door de <p> tags er voor en achter te zetten. Echter maken deze een hoop witregels tussen deze teksten.

> Mijn vraag dus: Hoe kan ik deze links (woorden) onder elkaar zetten zonder de <p> tags en zonder dat er een hele witregel tussen komt.

> Hoe kan ik eventueel ervoor zorgen dat de titel ''Vind ons op'' ook op één regel komt te staan? Want deze tekst staat nu op twee regels.

BVD!
pi_108118938
Dat zouden ze al moeten hebben, <li> elementen zijn standaard blok-elementen die onder elkaar stapelen. Ik denk dat er ergens een css regel is die dat verneukt.

Verder is je HTML echt verschrikkelijk, sorry. Elementen op plaatsen waar ze niet mogen (een <p> om een <li> heen), inline styles, tabellen voor de layout, elementen die gebruikt worden puur voor layout in plaats van om hun semantische waarde. Volg eens een paar tutorials (semantische) html en css.
pi_108119350
Ik heb er zelf ook helemaal geen verstand van. Maarja, als de <li> en <p> tags het voor elkaar krijgen, waarom zou ik het dan eigenlijk de moeilijke weg doen?
Maar bedankt voor de tip, zal eens wat tutorials gaan bekijken.

En het zal dan inderdaad wel aan de css files ergens liggen. Want op een gewone tekstpagina werkt het wel zonder de P tags..

Met inline styles, bedoel je dat ik de style codes in de css moet plaatsen en niet de html file?
  zaterdag 18 februari 2012 @ 16:23:31 #251
84244 Scorpie
Abject en infaam!
pi_108119384
quote:
0s.gif Op zaterdag 18 februari 2012 15:08 schreef Mirel het volgende:
Gewoon, omdat het kan.
Nee. Gewoon niet doen. Nooit.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
pi_108119770
Is deze code dan ook zeer slecht?

1
2		  <a href="http://www.keurmerk.info" target="_blank" ><img src="{{ 'webshopkeurmerk-logo.png' }}"
style="float:left; margin:-6px 9px; cursor:pointer; cursor:hand; border:0" width="149" height="55"  alt="Webshop Keurmerk Certificaat"  /></a>

aangezien ik de styles e.d. in html code heb geplakt. En hoe is dit eventueel te verbeteren?
  zaterdag 18 februari 2012 @ 16:38:03 #253
134533 donroyco
dus niet Donroyco
pi_108119825
quote:
0s.gif Op zaterdag 18 februari 2012 16:35 schreef Snoepje5 het volgende:
Is deze code dan ook zeer slecht?
[ code verwijderd ]

aangezien ik de styles e.d. in html code heb geplakt. En hoe is dit eventueel te verbeteren?
Ja. Volg eens een tutorial over hoe het wél moet.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_108119849
Niet 'zeer slecht', maar het is beter om styles inderdaad in een css bestand te zetten.

Geef de img een class of id (een id alleen als hij uniek is op die pagina, een class als 'ie vaker voorkomt). Als je bijvoorbeeld class="keurmerk" in de img tag zet, kan je de css zo doen:

1
2
3
4
5
6
7		.keurmerk {
float:left; 
margin:-6px 9px; 
cursor:pointer; 
cursor:hand; 
border:0
}

Wat zijn die {{ }} om de src van je plaatje? Gebruik je Smarty oid?
  zaterdag 18 februari 2012 @ 16:40:22 #255
56176 Catch22-
Ben je Blind?!
pi_108119900
margin top en bottom beide negatief? Lijkt me niet handig
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108119918
quote:
11s.gif Op zaterdag 18 februari 2012 16:40 schreef Catch22- het volgende:
margin top en bottom beide negatief? Lijkt me niet handig
Ligt er maar net aan, maar in dit geval is het wat raar.
pi_108120173
{{ .. }} is omdat 'ie vanuit de assets files van onze website de afbeeldingen haalt (geloof ik).
Echter is die in deze tekst nutteloos. Ik had de link ff ingekort, maar normaliter is ie www.blablabla.nl/kuermerklogo.jpg (dan heeft {{}} dus geen enig nut)
Maar met de {{ }} tags kan ik bijv. keurmerk.jpg opgeven als deze afbeelding in de assets file staat. Ik heb het niet uitgevonden..

Ik ga iig zorgen dat er meer in de css komt i.p.v. alles in html te proppen. Die tabel gaat ook weg, moet alleen nog een manier uitzoeken om in de css een code te plaatsen zodat de blokken tekst naast elkaar staan ipv onder elkaar.

Met dat negatief, heb ook maar wat nummers ingepropt en uiteindelijk kwam die op de goede plek op de website te staan.. Vandaar dat 't wss beide negatief zal zijn.
pi_108120209
Om blokken naast elkaar te krijgen gebruik je display: inline of display: inline-block (zoek ze op en piel er wat mee in www.jsfiddle.net)

En op zich is dat negatief niet verkeerd, gewoon wat verrassend. Als het werkt, prima. Beter dat je met css pielt om het te krijgen hoe je wil dan dat je er elementen omheen gaat zetten die ook dat effect creëren.

Net als je <li>'s, door er een <p> omheen te zetten zet je er in feite gewoon een extra element omheen dat als oorspronkelijke waarde display: block heeft. In plaats daarvan kan je dus ook met css gewoon display: block op de li's zetten, krijg je het zelfde effect maar dan zonder extra <p>./
  zaterdag 18 februari 2012 @ 16:55:38 #259
56176 Catch22-
Ben je Blind?!
pi_108120370
quote:
14s.gif Op zaterdag 18 februari 2012 16:41 schreef picodealion het volgende:

[..]

Ligt er maar net aan, maar in dit geval is het wat raar.
ik heb dat volgens mij nog nooit gedaan.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108120423
Ik wel. Mooi voorbeeldje waar ik het gebruik:

SPOILER: NSFW
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
De blokken daar hebben allemaal een padding van 5px, maar de eerste h1 is altijd een balk die de volle breedte nodig heeft (tot aan de border dus, niet de padding) dus geef ik die altijd standaard een -5px margin om dat weer recht te trekken.
pi_108120522
Dat ging makkelijk. Heb echter wel één class moeten verwijderen uit de html files omdat deze iets raars deed met de footer tekst (oude footer layout).

Nu staat het dus mooi.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<div class="footercol"><b>SERVICE</b>
<ul>
<li><a href="link1"> Ons </a></li>
<li><a href="link1"> Voorwaarden </a></li>
<li><a href="link1"> Nog iets </a></li>
<li><a href="link1"> En iets </a></li>
<li><a href="link1"> Kopen </a></li>
</ul>
</div>
<div class="footercol"><b>POPULAIR</b>
<ul>
<li><a href="link1"> Tekst </a></li>
<li><a href="link1"> Iets </a></li>
<li><a href="link1"> Dat </a></li>
<li><a href="link1"> Dit </a></li>
</ul>
</div>

Bij css heb ik nu:

1
2
3
4		.footercol {
  background: url(col02.png) no-repeat;
  display: inline-block;
}

Hier is niets mis mee toch?

Nog wat optimaliseren met afbeeldingen die in de footer moeten en wat afstand creeren tussen de blokken.. Moet ik er wel komen. En dan nog wat tutorials bekijken om alle teksten te verbeteren.
  zaterdag 18 februari 2012 @ 17:03:11 #262
56176 Catch22-
Ben je Blind?!
pi_108120590
jawel. Waarom gebruik je een div als je hem niet als blockelement gebruikt?

En waarom positioneer je je achtergrondafbeelding niet?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108120603
Stukken beter dit.

Als ik echt wil mierenneuken: de <b> tag is tegenwoordig wat achterhaald. Je kan beter <strong> gebruiken. Daarnaast is het wat overbodig om álle <li>'s in een lijst dezelfde class te geven. In plaats daarvan kan je de <ul> gewoon die class geven en dan in plaats van

1
2
3		.link1 {
   styles
}

gewoon
1
2
3		.link1 li {
  styles
}

doen. Op die manier hoef je de class maar 1 keer te zetten, en selecteer je nog steeds alle li's.

Verder ziet dit er echt al vele malen beter uit! ^O^.
pi_108120624
quote:
11s.gif Op zaterdag 18 februari 2012 17:03 schreef Catch22- het volgende:
jawel. Waarom gebruik je een div als je hem niet als blockelement gebruikt?

En waarom positioneer je je achtergrondafbeelding niet?
Hij moet toch iets hebben om de lijsten + titel te wrappen? Div is daar een prima element voor in dit geval, imo.
pi_108120705
quote:
11s.gif Op zaterdag 18 februari 2012 17:03 schreef Catch22- het volgende:
jawel. Waarom gebruik je een div als je hem niet als blockelement gebruikt?

En waarom positioneer je je achtergrondafbeelding niet?
Ja heb je gelijk in.
Moet
1  background-position:0 18px;
nog toevoegen. Stond er bij de oude css wel bij.
Geen idee wat een blockelement is. Het moet wel als blokken naast elkaar worden weergegeven.

@picodealion, had inderdaad ook de strong tag zien langskomen. Ben wat gewend met de b tag maar kan het ook omruilen als dat beter is.

Zal dat met die li's verbeteren. Bedankt voor de tip :)
pi_108120813
Een block element is een element dat standaard display: block heeft, en dus onder elkaar stapelt. Voorbeelden: <ul>, <div>, <p>.
Een inline-element is een element dat standaard in lijn met de tekst blijft, zoals <strong>, <span> en <a>.

Door met css de display waarde op wat anders te zetten kan je een block-element zoals div bijvoorbeeld toch gewoon inline maken (display: inline) of juist een <strong> element laten stapelen door hem display:block te maken.

Een inline-block is een speciale vorm die pas later is ingevoerd. Het is een block element in die zin dat je hem hoogte, breedte, margin en padding kan geven, maar ze lijnen wel naast elkaar uit in plaats van onder elkaar.

IE6 en lager hebben daar moeite mee, maar tegenwoordig kan je dat vrij veilig gebruiken.
  zaterdag 18 februari 2012 @ 17:12:48 #267
56176 Catch22-
Ben je Blind?!
pi_108120817
quote:
0s.gif Op zaterdag 18 februari 2012 17:07 schreef Snoepje5 het volgende:

Geen idee wat een blockelement is. Het moet wel als blokken naast elkaar worden weergegeven.
ga dan alsjeblieft wat HTML en css tutorials doorlezen, want het is niet de bedoeling dat je hier wat post en wij maar uit gaan zoeken hoe jij het moet oplossen :)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108122722
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		$(document).ready(function() {  
  
    // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('.menu li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #portfolio';  
            $('#portfolio').load(toLoad)  
        }  
    });  
  
    $('.menu li a').click(function(){  
  
    var toLoad = $(this).attr('href')+' #portfolio';  
    $('#portfolio').slideUp('fast',loadcontent);  

    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    $('.flexslider').flexslider({
        animation: "slide"
    });
    function loadcontent() {  
        $('#portfolio').load(toLoad,'',showNewcontent())  
    }  
    function showNewcontent() {  
        $('#portfolio').slideDown('slow',hideLoader()); 
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  
  
    });  
});  

Waarom werkt die Flexslider niet? :'(
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  zaterdag 18 februari 2012 @ 18:29:06 #269
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_108122781
quote:
0s.gif Op zaterdag 18 februari 2012 18:27 schreef Neraice het volgende:

[ code verwijderd ]

Waarom werkt die Flexslider niet? :'(
Zou handig zijn als je er ook even een stukje HTML bij post, of desnoods een linkje naar de niet werkende pagina.
pi_108123826
quote:
14s.gif Op zaterdag 18 februari 2012 17:03 schreef picodealion het volgende:
Stukken beter dit.

Als ik echt wil mierenneuken: de <b> tag is tegenwoordig wat achterhaald. Je kan beter <strong> gebruiken. Daarnaast is het wat overbodig om álle <li>'s in een lijst dezelfde class te geven. In plaats daarvan kan je de <ul> gewoon die class geven en dan in plaats van
[ code verwijderd ]

gewoon
[ code verwijderd ]

doen. Op die manier hoef je de class maar 1 keer te zetten, en selecteer je nog steeds alle li's.

Verder ziet dit er echt al vele malen beter uit! ^O^.
Link1 zijn in de werkelijkheid natuurlijk niet identieke links. Dan zou ik voor 20 links aparte regels in het css bestand moeten maken. Is dat niet erg omslachtig?
pi_108123964
Je kunt toch stylen op de classname van je UL ofzo. Lees eens een keer een boek ofzo voor je ergens mee begint :')
Bleuh.
  zaterdag 18 februari 2012 @ 19:13:26 #272
56176 Catch22-
Ben je Blind?!
pi_108124305
quote:
0s.gif Op zaterdag 18 februari 2012 19:03 schreef PimD het volgende:
Je kunt toch stylen op de classname van je UL ofzo. Lees eens een keer een boek ofzo voor je ergens mee begint :')
ja tis de laatste tijd wel erg...
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108124381
Nu we het toch over boeken hebben - iemand SMACSS van Jonathan Snook gelezen? Hoewel er veel dingen in staan die ik al standaard probeer te doen, weet hij het allemaal op een erg goede manier te brengen. Toch wel weer wat dingetjes opgepikt die ik in de toekomst zeker ga gebruiken.
Bleuh.
pi_108124628
Nee, maar hij heeft altijd wel heel zinnige dingen te zeggen. Ik ga die eens bestellen.

Ik heb wel kort geleden de eerste 4 boeken van A Book Apart gelezen, vooral Responsive Web Design (Ethan Marcotte) was erg interessant.
pi_108124818
Ik heb HTML5 en RWD van A Book Apart hier liggen, de anderen heb ik alleen op PDF en (nog) niet gelezen. Zeker leuke boekjes, hoewel ik ze wel erg aan de prijs vind. Ik geloof dat je incl. porto iets van 25 euro per stuk kwijt bent :')
Bleuh.
pi_108124867
Idd, beetje jammer maar ik kan mijn baas meestal wel zover krijgen ze te betalen. Die over content strategy van Erin Kissane vond ik niet de moeite waard eigenlijk. Ik ben wel benieuwd naar Mobile First, aangezien ik daar steeds meer mee te maken krijg tegenwoordig.
pi_108124961
Wij hebben ze ook op het netwerk staan, ik vertik het om zelf te betalen voor PDF-jes ;)

Mobile First heb ik nog niet gelezen. Merk wel dat het voor veel 'creatieve' mensen nog lastig is om vanuit deze insteek te werken, en niet meer totale controle te hebben over een ontwerp. Helemaal in combinatie met de responsive/adaptive hype nu natuurlijk.
Bleuh.
pi_108126779
Ik heb het e.e.a. gelezen en zo tot een goed resultaat gekomen geloof ik. Nu zit ik echter nog met een vraag waar ik het antwoord niet op kan vinden. Weet eigenlijk ook niet zo goed waar ik op zou moeten googlen. Iets met ''display text in blocks css code'' oid maar geen resultaat.

Ik heb nu dus 4 ''blokken'' tekst naast elkaar staan. Onder het ene blok zit 1 regel minder tekst als onder het andere. Ik wil de blokken natuurlijk allemaal vanaf boven gelineerd hebben en niet vanaf onder. Het ene blok begint daarom ook 1 regel lager als het andere. Ik wil deze witregel graag onder het blok hebben en niet er boven.

Zou iemand zo vriendelijk willen zijn om mij deze code te geven of mij de juiste term te geven waarop ik het antwoord kan zoeken?

Margin-top e.d. werken niet. De witregel schuift gewoon mee. Height: of min-height werkt ook niet.

Heb o.a. deze voorbeeldcode gevonden:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21		<style>
    ul#display-inline-block-example,
    ul#display-inline-block-example li {
        /* Setting a common base */
        margin: 0;
        padding: 0;
    }

    ul#display-inline-block-example li {
        display: inline-block;
        width: 100px;
        min-height: 100px;
        background: #ccc;
    }
</style>

<ul id="display-inline-block-example">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

maar die geeft ook hetzelfde probleem. Wil ik onder het ene blok 2 regels hebben dan verschuift de bovenkant.
pi_108127026
Dat is volgens mij een bij-effect van display:inline-block.

Probeer ze eens op display:block en float:left ?

-edit-
ff uit mijn hoofd, dus het kan zijn dat ik 't mis heb. later wel ff tijd om te pielen
  zaterdag 18 februari 2012 @ 21:00:16 #280
87680 Mirel
Mirel wil een bongophone.
pi_108128094
quote:
2s.gif Op zaterdag 18 februari 2012 14:18 schreef Tijn het volgende:
Dan zet je het toch gewoon op het body-element ipv een div?
Ik neem aan dat je dit bedoelt:
1
2
3
4
5
6
7
8
9		    <script type="text/javascript" data-src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" style="visibility:hidden;"></script>
    <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
    <script>
    $(function()
    {
        $('body').jScrollPane();
    });
    </script>
Hij is nu foetsie. Het is weg. En nu? :P

Waarom is het in je voorbeeld trouwens blauw? Waar komen die eigenschappen vandaan? jquery.jscrollpane.min.js?

Fuck it, ik neem de gelijknamige wordpress plugin wel. :')

[ Bericht 12% gewijzigd door Mirel op 18-02-2012 21:09:11 ]
When all else fails, you always have delusion.
  zaterdag 18 februari 2012 @ 22:42:43 #281
56176 Catch22-
Ben je Blind?!
pi_108131938
quote:
0s.gif Op zaterdag 18 februari 2012 19:33 schreef PimD het volgende:
Wij hebben ze ook op het netwerk staan, ik vertik het om zelf te betalen voor PDF-jes ;)

Mobile First heb ik nog niet gelezen. Merk wel dat het voor veel 'creatieve' mensen nog lastig is om vanuit deze insteek te werken, en niet meer totale controle te hebben over een ontwerp. Helemaal in combinatie met de responsive/adaptive hype nu natuurlijk.
creatievelingen zijn wel vrij stug. helaas... ze denken echt vanuit een statische situatie, erg zonde. heb t sowieso niet op grafici aangezien ik in mijn rol als interaction designer vaak wordt tegengewerkt omdat designers iets onlogisch ontwerpen 'omdat het mooier is' maar wel onbruikbaar of onlogisch.

ik lees veel op smashingmag en.met name van hun network. daarnaast volg ik een aantal frontenddevs op twitter (waaronder @paul_irish ) en lees ik veel van hun css en javascript artikelen.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108132709
Display: block - Zorgt ervoor dat de tekst half onder elkaar komt te staan en niet naast elkaar.
Echter met float:left; is dat opgelost en werkt het wel! Thanks.

Alleen de copyright tekst wordt naar rechts gepropt. Valt vast wel te fixen.
/ opgelost met een aantal <br>'s maar ik kan er volgens mij al van uit gaan dat dit niet de juiste manier is :) (terwijl het wel werkt)

[ Bericht 15% gewijzigd door Snoepje5 op 18-02-2012 23:27:19 ]
  zondag 19 februari 2012 @ 23:50:04 #283
56176 Catch22-
Ben je Blind?!
pi_108172049
als je jezelf een hoop moeite wil besparen moet je even wat tutorials.lezen over wat block elementen zijn en doen.

blockelementen breng je in een flow en daarmee regel je de positionering (heel basis gezegd)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108173454
Als ik een containerdiv heb met drie left-floatende divs erin, hoe zorg ik er ookalweer voor dat de containerdiv meeschaalt? Was dat niet iets als.. float:none? Ik ben het vergeten :')
  maandag 20 februari 2012 @ 01:12:07 #285
56176 Catch22-
Ben je Blind?!
pi_108174484
de container moet ook floaten anders schaalt hij niet. als de container margin auto heeft moet je die drie divs een rappers geven met een float left
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  maandag 20 februari 2012 @ 01:13:06 #286
56176 Catch22-
Ben je Blind?!
pi_108174501
een wrappers dus. editten met de normale layout op je telefoon werkt niet.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108175339
Je bedoelt overflow:hidden
zcflevo.nl
  maandag 20 februari 2012 @ 08:09:57 #288
56176 Catch22-
Ben je Blind?!
pi_108176636
dan schaalt hij toch juist niet mee? je conten blijft alleen wel zichtbaar
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  maandag 20 februari 2012 @ 08:18:50 #289
91039 mstx
2x1/2 = 1/2 x 1/2
pi_108176705
In de hoogte meeschalen: container ook floaten of na de 3 binnenste divs een <br style="clear:both" />
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_108176740
Dank, vanavond proberen. :D ik wist het gewoon niet meer.
pi_108177932
overflow:hidden werkt, top :D
  maandag 20 februari 2012 @ 09:55:33 #292
56176 Catch22-
Ben je Blind?!
pi_108177957
dan schaalt hij niet mee he. Dat kan problemen opleveren in je flow, of als je container een achtergrond heeft.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108178659
quote:
11s.gif Op maandag 20 februari 2012 09:55 schreef Catch22- het volgende:
dan schaalt hij niet mee he. Dat kan problemen opleveren in je flow, of als je container een achtergrond heeft.
Juist wel.
zcflevo.nl
pi_108179373
quote:
11s.gif Op maandag 20 februari 2012 09:55 schreef Catch22- het volgende:
dan schaalt hij niet mee he. Dat kan problemen opleveren in je flow, of als je container een achtergrond heeft.
Mijn container heeft een achtergrond, en de div schaalt nu wel goed mee. :o en de drie floatende divs zijn ook nog op zn plek. Als ik weer ergens ben met usbverbinding zal ik de code even posten met een shotje
pi_108185185
quote:
5s.gif Op maandag 20 februari 2012 13:56 schreef karton2 het volgende:

[..]

Ik ben de weg kwijt vandaar dat ik nogal traag van begrip ben :')
Als ik de complete link van de afbeelding aan moet geven dan krijg je D:\werk\wamp\www\joomla\templates\testtemplate\images\favo.jpg

En die link komt inderdaad niet overeen met de eigenschappen van de afbeelding in de browser.
quote:
11s.gif Op maandag 20 februari 2012 13:57 schreef Catch22- het volgende:
en als je /images/favo.jpg van je link maakt?

en dit is trouwens meer iets voor [html, css, js] voor dummies #21 ;) of eigenlijk [Wordpress] Algemeen topic deel 4
Op aangeven van Catch22- held in wording ga ik in dit topic maar verder.
Ik heb zelf al zitten sleutelen aan die /images map in die html link maar het probleem blijft bestaan.
  maandag 20 februari 2012 @ 14:03:46 #296
56176 Catch22-
Ben je Blind?!
pi_108185246
Heb je geen andere afbeeldingen in die pagina die naar dezelfde map verwijzen?

als je er nu /template/testtemplate/images/favo.jpg van maakt?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108185960
quote:
11s.gif Op maandag 20 februari 2012 14:03 schreef Catch22- het volgende:
Heb je geen andere afbeeldingen in die pagina die naar dezelfde map verwijzen?

als je er nu /template/testtemplate/images/favo.jpg van maakt?
Ik heb geen andere afbeeldingen die naar de image map verwijzen.
Ik gebruik nu gewoon een localhost template als speeltuin om dingen uit te proberen.
Als ik jouw link /template/testtemplate/images/favo.jpg gebruik dan doet deze het niet.
De volgende twee doen het ook niet:
D:/Werk/wamp/www/joomla/templates/testtemplate/images/favo.jpg
img src="file:///D|/Werk/wamp/www/joomla/templates/testtemplate/images/favo.jpg

Bij de tweede link verandert de afbeelding van het plaatje zoals hieronder te zien is:

Het gaat dus om de rechter afbeelding.
Bij de eigenschappen bij de rechter krijg ik 'niet beschikbaar'.

edit:
Maar als ik het online ipv localhost zou zetten en ik verwijs naar /images/favo/jpg dan zou ie het moeten doen toch?
pi_108192025
Waarom maak je je paden niet gewoon absoluut t.o.v. je webroot?
zcflevo.nl
pi_108193076
quote:
5s.gif Op maandag 20 februari 2012 16:55 schreef KomtTijd... het volgende:
Waarom maak je je paden niet gewoon absoluut t.o.v. je webroot?
Als je img src="http://localhost/joomla/images/favo.jpg bedoelt; levert ook niks op.
Heb vanalles geprobeerd om de afbeelding zichtbaar te krijgen maar niks lijkt te werken.
  maandag 20 februari 2012 @ 17:22:03 #300
56176 Catch22-
Ben je Blind?!
pi_108193247
Heb je een base href gedefinieerd?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[html, css, js] voor dummies #21
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')