scroll probleem
de site is www.vereiken.com
de werkende scroll sectie is raamdecoraties
de meeste andere secties zoals rolluiken & Somfy scrollen dus niet.
Als leek dacht ik er goed aan te doen, de main e.d. mee te copieeren vd werkende sectie maar dat geeft geen oplossing.
excuses als mijn onwetendheid hier ongepast is en jullie om die reden mij niet van dienst willen zijn.
Als ik op: http://www.vereiken.com/Somfy/somfy.html# zit,
Dan link je naar 2 urls... Home en Somfy.
Met de bijbehorende code:
Code (php)
1
2
2
<li><a href="../index.html">Home</a></li>
<li><a href="somfy.html#somfy" class="scrollTo">Somfy</a></li>
<li><a href="somfy.html#somfy" class="scrollTo">Somfy</a></li>
je gebruikt de anchor: #somfy
Terwijl je in de section de volgende ID gebruikt: <section id="somfyn" class="t1Container">
het verschil: somfy / somfyn
Verander:
Code (php)
1
2
2
<li><a href="../index.html">Home</a></li>
<li><a href="rolluiken.html#rolluiken" class="scrollTo">Rolluiken</a></li>
<li><a href="rolluiken.html#rolluiken" class="scrollTo">Rolluiken</a></li>
Eens naar:
Code (php)
1
2
2
<li><a href="../index.html">Home</a></li>
<li><a href="#rolluiken" class="scrollTo">Rolluiken</a></li>
<li><a href="#rolluiken" class="scrollTo">Rolluiken</a></li>
Het werkt dan prima hier :)
Toevoeging op 28/12/2016 12:25:16:
Kijk ik bijv. op een zuster site met hetzelfde script en pak ik daar de sectie raamdecoraties dan werkt het ook niet! de site is zonwering-helmond.nl
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<li><a href="../index.html">Home</a></li>
<li><a href="raamdecoraties.html#silhouette" class="scrollTo">Silhouettes</a></li>
<li><a href="raamdecoraties.html#facette" class="scrollTo">Facettes</a></li>
<li><a href="raamdecoraties.html#duette" class="scrollTo">Duettes</a></li>
<li><a href="raamdecoraties.html#plisse" class="scrollTo">Plisss</a></li>
<li><a href="raamdecoraties.html#jaloezie" class="scrollTo">Jaloezien</a></li>
<li><a href="raamdecoraties.html#vjaloezie" class="scrollTo">Verticale Jaloezien</a></li>
<li><a href="raamdecoraties.html#houtjaloezie" class="scrollTo">Houten Jaloezien </a></li>
<li><a href="raamdecoraties.html#rolluiken" class="scrollTo">Rolgordijnen</a></li>
<li><a href="raamdecoraties.html#silhouette" class="scrollTo">Silhouettes</a></li>
<li><a href="raamdecoraties.html#facette" class="scrollTo">Facettes</a></li>
<li><a href="raamdecoraties.html#duette" class="scrollTo">Duettes</a></li>
<li><a href="raamdecoraties.html#plisse" class="scrollTo">Plisss</a></li>
<li><a href="raamdecoraties.html#jaloezie" class="scrollTo">Jaloezien</a></li>
<li><a href="raamdecoraties.html#vjaloezie" class="scrollTo">Verticale Jaloezien</a></li>
<li><a href="raamdecoraties.html#houtjaloezie" class="scrollTo">Houten Jaloezien </a></li>
<li><a href="raamdecoraties.html#rolluiken" class="scrollTo">Rolgordijnen</a></li>
in:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<li><a href="../index.html">Home</a></li>
<li><a href="#silhouette" class="scrollTo">Silhouettes</a></li>
<li><a href="#facette" class="scrollTo">Facettes</a></li>
<li><a href="#duette" class="scrollTo">Duettes</a></li>
<li><a href="#plisse" class="scrollTo">Plisss</a></li>
<li><a href="#jaloezie" class="scrollTo">Jaloezien</a></li>
<li><a href="#vjaloezie" class="scrollTo">Verticale Jaloezien</a></li>
<li><a href="#houtjaloezie" class="scrollTo">Houten Jaloezien </a></li>
<li><a href="#rolluiken" class="scrollTo">Rolgordijnen</a></li>
<li><a href="#silhouette" class="scrollTo">Silhouettes</a></li>
<li><a href="#facette" class="scrollTo">Facettes</a></li>
<li><a href="#duette" class="scrollTo">Duettes</a></li>
<li><a href="#plisse" class="scrollTo">Plisss</a></li>
<li><a href="#jaloezie" class="scrollTo">Jaloezien</a></li>
<li><a href="#vjaloezie" class="scrollTo">Verticale Jaloezien</a></li>
<li><a href="#houtjaloezie" class="scrollTo">Houten Jaloezien </a></li>
<li><a href="#rolluiken" class="scrollTo">Rolgordijnen</a></li>
Toevoeging op 28/12/2016 12:30:39:
"heb het aangepast Elmar, maar bij mij geen resultaat, niet in FF en ook niet in Safari"
Ik zie geen verandering hoor..
Verander:
Code (php)
1
2
2
<li><a href="../index.html">Home</a></li>
<li><a href="rolluiken.html#rolluiken" class="scrollTo">Rolluiken</a></li>
<li><a href="rolluiken.html#rolluiken" class="scrollTo">Rolluiken</a></li>
Eens naar:
Code (php)
1
2
2
<li><a href="../index.html">Home</a></li>
<li><a href="#rolluiken" class="scrollTo">Rolluiken</a></li>
<li><a href="#rolluiken" class="scrollTo">Rolluiken</a></li>
Nu kun je het overal doorvoeren ;-)
Toevoeging op 28/12/2016 14:14:15:
Haha, nu loop ik tegen een klein foutje aan, op zonwering-deurne.nl in de sectie rolluiken heb ik een hagelschade sectie toegevoegd. de twitter en facebook iconen lijnen echter niet zo uit zoals het zou moeten zijn. grrrrr. dit zelffde probleem heb ik bij de somfy sectie.
in main.css staat de volgende code (regel 450):
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#footer .inner a {
display: inline-block;
height: 55px;
width: 65px;
background: url("../_images/_global/social-icons.png") 0 0 no-repeat;
background-size: 200px 114px;
text-indent: -99999px;
}
display: inline-block;
height: 55px;
width: 65px;
background: url("../_images/_global/social-icons.png") 0 0 no-repeat;
background-size: 200px 114px;
text-indent: -99999px;
}
Zou je de height niet naar 56px doen? ( de social icons, zijn nu niet helemaal rond, de onderkant wordt afgesneden als je goed kijkt )
Antwoord voor je probleem met de "divjes/uitlijning" --> in main.css bestaat het ID hagelschade niet, je hebt deze wel voor anderen aangemaakt...
Zal wel weer een erg dom klein iets zijn.
Code (php)
1
#somfy#left-content img {
Dit moet zijn
Code (php)
1
#somfy #left-content img {
...gelet op de spatie.
Dit verklaart ook waarom terras nu niet werkt ;-)
Succes met nalopen :)
Nu heb ik de volgende wens, bij vereiken.com sectie Somfy/brochures heb ik een groot aantal brochures toegevoegd(thumbs met pdf erachter) het lijkt mij beter om nu de thumbs netjes te verdelen in de linkersectie vd pagina (bijv. 3 naast elkaar en dan weer een rij eronder en daar weer onder naar gelang het aantal) en dan met een hoover de beschrijving vd folder te geven. Voordat ik weer alles door elkaar gooi vraag ik liever even wat advies.
Code (php)
1
2
3
2
3
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
en dan pas je deze zo toe:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="column-left">Links (rij 1)</div>
<div class="column-center">Midden (rij 1)</div>
<div class="column-right">Rechts (rij 1)</div>
<div class="column-left">Links (rij 2)</div>
<div class="column-center">Midden (rij 2)</div>
<div class="column-right">Rechts (rij 2)</div>
<div class="column-center">Midden (rij 1)</div>
<div class="column-right">Rechts (rij 1)</div>
<div class="column-left">Links (rij 2)</div>
<div class="column-center">Midden (rij 2)</div>
<div class="column-right">Rechts (rij 2)</div>
ik zit ook nog met een ander probleem;
Daar waar ik bijv op een iphone kijk op al de sites waar ik dit script gebruik staat de tekst en de footer steeds door elkaar, dit kan ik oplossen door in de html al de containers te hernoemen naar home (maar dan werkt de scroll natuurlijk weer niet!) dan lijnt alles perfect uit.
Maar daar waar ik een container bijv. inzet noem of somfy dan staat de footer ineens door de tekst en ook de tekst staat op een aparte plaats waar deze niet thuis hoort. dit is oa. bij vereiken.com/horren maar ook bij zonweringcentrale.nl/raamdecoraties. eigenlijk is er bijna geen sectie te vinden waar dit nu niet voorkomt
Thnx alvast
Toevoeging op 01/01/2017 20:04:48:
Het andere probleem heb ik al getackeld haha, ik miste onderaan in de mai nog de volgende regels. #somfy, #wovenwood, e.d.
Gewijzigd op 01/01/2017 19:10:11 door Johnny van den Crommenacker
Dit zet je in main.css:
Code (php)
1
2
3
2
3
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
En dit stukje code:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="column-left">Links (rij 1)</div>
<div class="column-center">Midden (rij 1)</div>
<div class="column-right">Rechts (rij 1)</div>
<div class="column-left">Links (rij 2)</div>
<div class="column-center">Midden (rij 2)</div>
<div class="column-right">Rechts (rij 2)</div>
<div class="column-center">Midden (rij 1)</div>
<div class="column-right">Rechts (rij 1)</div>
<div class="column-left">Links (rij 2)</div>
<div class="column-center">Midden (rij 2)</div>
<div class="column-right">Rechts (rij 2)</div>
kun je toepassen in je HTML pagina's.
Bijvoorbeeld zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section id="brochure" class="t1Container">
<div class="fifty-split" id="left-content">
<div class="column-left"><a href="_images/Somfy RS100.pdf" target="_blank"><img alt="" src="_images/TAHOMA.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-center"><a href="_images/Vereiken Somfy CONNEXOON.pdf" target="_blank"><img alt="" src="_images/CONNEXOON.png" style="width: 100px; height: 141px;"></a></div>
<div class="column-right"><a href="_images/Vereiken Somfy rolluik folder.pdf" target="_blank"><img alt="" src="_images/rolluik.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-left"><a href="_images/Vereiken Somfy terrasverlichtingbalk.pdf" target="_blank"><img alt="" src="_images/verlichting.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-center"><a href="_images/Vereiken Somfy draadloze bediening zonwering.pdf" target="_blank"><img alt="" src="_images/zonwering.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-right"><a href="_images/Vereiken Somfy chronis io.pdf" target="_blank"><img alt="" src="_images/chronis.jpg" style="width: 100px; height: 141px;"></a></div>
<!-- en dan hier herhaal je dat voor de overige afbeeldingen :-) -->
</div>
<div class="fifty-split" id="right-content">
<!-- Hier je gebruikelijke code -->
</div>
</section>
<div class="fifty-split" id="left-content">
<div class="column-left"><a href="_images/Somfy RS100.pdf" target="_blank"><img alt="" src="_images/TAHOMA.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-center"><a href="_images/Vereiken Somfy CONNEXOON.pdf" target="_blank"><img alt="" src="_images/CONNEXOON.png" style="width: 100px; height: 141px;"></a></div>
<div class="column-right"><a href="_images/Vereiken Somfy rolluik folder.pdf" target="_blank"><img alt="" src="_images/rolluik.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-left"><a href="_images/Vereiken Somfy terrasverlichtingbalk.pdf" target="_blank"><img alt="" src="_images/verlichting.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-center"><a href="_images/Vereiken Somfy draadloze bediening zonwering.pdf" target="_blank"><img alt="" src="_images/zonwering.jpg" style="width: 100px; height: 141px;"></a></div>
<div class="column-right"><a href="_images/Vereiken Somfy chronis io.pdf" target="_blank"><img alt="" src="_images/chronis.jpg" style="width: 100px; height: 141px;"></a></div>
<!-- en dan hier herhaal je dat voor de overige afbeeldingen :-) -->
</div>
<div class="fifty-split" id="right-content">
<!-- Hier je gebruikelijke code -->
</div>
</section>
En je tweede "probleem":
Je CSS is een rommeltje :P, het verschil met ID's en CLASSES begrijp je nog niet goed.
Simpel vertaald: ID's gebruik je maar 1 keer op een pagina en CLASSES kun je meerdere keren gebruiken op je pagina.
Om je een idee te geven, je hebt de volgende code met classes:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<style>
.rood {color:red;}
.blauw{color:blue;}
</style>
<a href="linkje.html" class="rood">ik ben een rood linkje<a/>
<a href="linkje.html" class="blauw">ik ben een blauw linkje<a/>
<a href="linkje.html" class="rood">ik ben ook rood<a/>
.rood {color:red;}
.blauw{color:blue;}
</style>
<a href="linkje.html" class="rood">ik ben een rood linkje<a/>
<a href="linkje.html" class="blauw">ik ben een blauw linkje<a/>
<a href="linkje.html" class="rood">ik ben ook rood<a/>
Zoals je ziet, ik "hergebruik" de class "rood".
Uiteraard kun je ook ID's gebruiken zoals je nu doet:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<style>
#rood {color:red;}
#blauw{color:blue;}
</style>
<a href="linkje.html" id="rood">ik ben een rood linkje<a/>
<a href="linkje.html" id="blauw">ik ben een blauw linkje<a/>
<a href="linkje.html" id="rood">ik ben ook rood, maar ben niet valide. een ID hoor je maar 1 keer te gebruiken en dat wil soms nog wel eens botsen.<a/>
#rood {color:red;}
#blauw{color:blue;}
</style>
<a href="linkje.html" id="rood">ik ben een rood linkje<a/>
<a href="linkje.html" id="blauw">ik ben een blauw linkje<a/>
<a href="linkje.html" id="rood">ik ben ook rood, maar ben niet valide. een ID hoor je maar 1 keer te gebruiken en dat wil soms nog wel eens botsen.<a/>
Om je een "totale uitleg" mee te geven, lees dan eerst dit eens:
http://www.handleidinghtml.nl/css/selectors/selectors04.html
Gewijzigd op 02/01/2017 09:53:42 door E vH
Met het zooitje in de main ga ik direct aan de slag, ik weet dat het een rommeltje is. haha