HTML/CSS Singlepage/Sticky Footer

HTML/CSS Singlepage/Sticky Footer

Webdesign | 15-04-2014 | Pascal Merks | Reacties


Ik heb een kleine aanpassing aangebracht aan mijn HTML/CSS Responsive HTML5/CSS3 Grid die er voor zorgt dat de footer altijd aan de onderkant van de pagina blijft plakken. tevens heb ik een header, main, en footer deel aangemaakt. Handig als je een 100% width header en footer in je ontwerp hebt of gewoon wil dat de footer onderaan blijft staan. Verder werkt het het zelfde alleen het is nu opgesplitst.

Link naar een voorbeeld: http://grid.pmkmedia.nl/sticky

Zip bestand met alle bestanden voor de sticky footer versie: http://grid.pmkmedia.nl/grid-1200-1.2-sticky.zip

 

Nog een leuk experiment van mij. Je kent ze wel de single page websites http://www.android.com/kitkat/index.html. Ik heb het grid omgebouwd naar een singlepage grid/template. Qua basis is het het zelfde. Je moet nu alleen je section ook insluiten in een div die de zelfde id heeft als de "href" anker naam in de menu links (info over ankers http://www.webrichtlijnen.nl/aan-de-slag/links-naar-pagina-ankers). Verder zit er ook een script in die er voorzorg dan alles soepel scrolt. Om alle content van de pagina's in de singlepage website te krijgen heb je de module CGSimpleSmarty nodig. Hier een tutorial van Rolf hoe je dat voor elkaar krijgt http://www.rolftjassens.com/blog/multiple-pages-in-one-with-jquery-tabs

Link naar een voorbeeld: http://grid.pmkmedia.nl/single

Zip bestand met alle bestanden voor de sticky footer versie: http://grid.pmkmedia.nl/grid-1200-1.2-single.zip

 

Nog een klein experimentje voor een singelpage website.

Parallax scrolling background. Active pagina zichtbaar in het menu. Smooth scrolling.

Link naar een voorbeeld: http://grid.pmkmedia.nl/parallax

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/parallax.zip

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets