[html, css, js] voor dummies #21

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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.
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 :')
Nee.
  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.
Nee.
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 :')
Nee.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] voor dummies #21
Index

» digital corner

» development

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