[html, css, js] voor dummies #21

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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.
Nee.
  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
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-
  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?
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?
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')