HTML/CSS Responsive HTML5/CSS3 Grid voor CMSMS

[pasmaskas]

Hey rodeto,

Kan je een pagina laten zien waar dat gebeurt? Dan kan ik kijken wat er fout gaat.

Misschien heb je de afbeelding een formaat mee gegeven? zo iets als:

<img src="foto.jpg" height="150" width="100" alt="foto">

Dit kan dan beter zijn:

<img src="foto.jpg" alt="foto">

[rodeto]

dank voor je snelle reactie

Ik heb hem even online gezet en je kunt hem hier zien.
De grote afbeelding staat inderdaad zonder afmetingen vermeld.

[pasmaskas]

Ik heb er even mee gespeelt en zie het probleem denk ik.

In de responsive.css staat een regel die er voor zorgt dat de afbeelding maximaal 100% mag zijn. Dit had ik gedaan om te vorkomen da de afbeelding altijd uitrekt.

Regel:

Code: Select all

img{max-width:100%;height:auto;}

Verander deze naar:

Code: Select all

img{width:100%;height:auto;}

Dus max-width naar width.

Als het goed is zal de afbeelding nu altijd 100% van de div gebruiken ook met schalen

Ik had ook het probleem in firefox net met max-width wel vreemd dat dat gebeurt. Maar zo werkt het in iedergeval!

[rodeto]

nee, ik denk niet dat dit de oplossing is. In IE blijft het probleem zich nog voordoen.
Maar nu wordt de andere afbeelding (die zelfs een width en een height had meegekregen) ook opgeschaald naar 100% van de div afmeting.

[pasmaskas]

Nu weet ik weer waarom ik het zo gedaan! Om te voorkomen wat jij net beschreef. zo blijft de afbeelding altijd zijn eigen formaat. Wel raar dat de foto dan niet schaalt als je het venster verkleint. Ik ga dit probleem is even aanpakken!

Ik geef meestal de div een extra class mee bijvoorbeeld "headerimg"

<div class="two-third-column headerimg"><img src="images/shutterstock.jpg" /></div>

in de style.css zet ik dan:

.headerimg {width:100%;display: block;height:auto;}

Zo weet hij dat die afbeelding altijd 100% van de div moet aanhouden. Dat werkt bij in elke browser.

Wat je ook kan doen is tog die max weg halen net als in mijn vorige poost dan schalen alle plaatjes altijd 100% en dan geef je het logo boven in een class mee met het juiste formaat dat je hem wilt hebben. zo kan je per afbeelding aangeven of hij mee moet schalen of ze eigen formaat moet aanhouden.

Mij mij werkt in iedergeval de extra class altijd al in elke browser

Ik heb net ook even in IE10 getest en die schaalt gewoon goed met jou test

[rodeto]

De laatste optie lijkt inderdaad goed te werken.
Ik heb de logo foto nu de volgende css meegegeven:
.headerimg {
max-width:338px;
display: block;
height:90px;
}
Ik heb hierin max-width aangehouden omdat de foto anders helemaal niet meer meeschaalt.

Zoals ik het nu kan zien lijkt het goed te werken.

Dank voor je hulp!

[rodeto]

Ik heb een kleine aanpassing gemaakt in "responsive.css".
Daar stond

Code: Select all

img{width:100%;height:auto; }

en daar heb ik van gemaakt

Code: Select all

img{width:100%;height:auto; display: block;}

Bij de eerste manier kwam er onder een afbeelding een kleine rand te zitten. Dat is hiermee opgelost

Ik ben nu nog even aan het zoeken naar een oplossing voor een ander probleem met de split-column. Als ik een split column met twee DIV's links naast een andere DIV heb, wil ik graag dat de splt column 100% van de hoogte heeft van de grote DIV. Dat kan ik op een of andere manier nog niet zodanig krijgen dat dit tijdens herschalen ook max 100% blijft.

[pasmaskas]

Ik heb het grid een kleine upgrade gegeven en heb alles even na gelopen.

Wat is er veranderd in versie 1.3:

1. Nieuwe jQuery, Retina, html5shiv.js versies.
2. Menu staat nu los van het grid.
3. Kleine aanpassing aan responsive.css menu deel verplaatst naar menu.css en de manier van afbeelding weergaven. (dankzij tip van rodeto)
4. currentpage css toegevoegt aan menu.css + menu sjabloon aangepast zodat je ziet op welke pagina je bent via de currentpage.
5. menu.css en het menu licht aangepast.

Link naar zip: http://grid.pmkmedia.nl/grid-1200-1.3.zip

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

[pasmaskas]

Ik heb een versie gemaakt met een ander menu. Ik vond dat dat ook anders/beter kan. Ik heb het menu veranderen naar een css menu die uitklapt als je er over heen hovert (klikt op een touchscreen). Daarnaast heb ik het zelfde menu ook even gemaakt met een klein javascriptje. Als je klikt klapt het menu uit met een effectje. Nu kan je kiezen wil je het oude vertrouwde selectie lijst menu of een css/javascript menu.

CSS versie

Link naar zip: http://grid.pmkmedia.nl/grid-1200-1.3.1-CSS.zip

Javascript versie

Link naar zip: http://grid.pmkmedia.nl/grid-1200-1.3.1-JAVA.zip

[Rolf]

Nadat ik het eerst met enkele kleine websites heb geprobeerd, heb ik de stoute schoenen aangetrokken en http://www.smakelijketenzonderzout.nl omgebouwd naar een responsive website met gebruik van deze super tutorial van Pasmaskas!

Volgens mij werkt het perfect, al was het een hele klus om de bestaande content óók geschikt te maken voor het tonen op kleine beeldschermen!!! Voor enkele pagina's is dat simpelweg niet mogelijk, bijv. de pagina http://www.smakelijketenzonderzout.nl/t ... idenwijzer. Ik heb er nu een waarschuwingsmelding in geplaatst die alleen getoond wordt op kleine schermen. Moet hier nog eens wat meer mee stoeien, wat de beste en mooiste oplossing is...

Wat me wel opvalt is dat de website een stuk trager is geworden. Er wordt al met al wel behoorlijk wat JS geladen ondanks dat ik het alleen laadt als het echt nodig is...
Iemand daar ervaring mee?

Groet, Rolf

[pasmaskas]

Tof dat je een website met behulp van mijn tutorial om hebt gebouwd naar een responsive website! Ik heb zelf nog maar 1 oude website omgebouwd naar het grid aleen die heb ik niet letterlijk omgebouwt maar na gebouwd en wat verbeterd.

Over de JS vraag. Er woord inderdaad wat JS ingeladen.

Voor backwards comptabiliteit:

html5shiv.js, deze word ingeladen zodat oudere browsers ( IE8 en lager ) de html5 tags ondersteund.

css3-mediaqueries.js, deze word ingeladen zodat oudere browsers om kunnen gaan met mediaqueries.

Deze moeten als het goed is alleen in geladen worden in IE8 of lager.

Voor het viewport probleem van windows phone

Dan staat er nog een javascript in voor de viewport fix op een windows phone.

Voor het menu

Hier voor word jQuery geladen voor het omvormen van het menu nav-mobile.js naar een mobiel vriendelijk menu.

Voor retina schermen

En helemaal aan het einde een retina script die een afbeelding omzet naar het hogere resolutie bestand als die aanwezig is.


Je kan het deel voor backwards comptabiliteit er uit halen aangezien er niet veel meer gebruikt word gemaakt van IE8 of lager en andere browsers meestal automatisch updaten naar de nieuwste versie.

De viewport fix kan je het beste laten staan anders krijgen windows phone gebruikers problemen.

Het menu gedeelte kan er ook uit en kan je vervangen door de css.

Het retina script is niet nodig als je geen grotere afbeeldingen wil. je kan dat ook gedeeltelijk in css doen maar dan word je css weer groter. Dit is denk ik de makkelijkste manier maar niet perse nodig.


Ik heb bij een website ook last van wat vertraging door al die JS je ziet hem opgebouwd worden! Je kan in ieder geval de backwards comptabiliteit js en de retina js gewoon weg halen en het menu ombouwen naar css dat scheelt al wat denk ik. Ik hoop dat je heir wat mee kan.

Gr pascal

[pasmaskas]

Nog een klein dingetje.

Ik denk als je dit deel uit responsive.css sloopt

Code: Select all

/* general table css */
table{width:100%;table-layout:fixed;word-wrap:break-word;}

de tabellen weer op normale grote zijn en wel goed zichtbaar op mobiel. Ze zullen dan gedeeltelijk uit beeld vallen alleen dan moeten ze naar rechts scrollen.

[Rolf]

Grumbl, net een post gemaakt en wordt deze niet op het forum opgeslagen

Maar goed, opnieuw... Bedankt voor je snelle reactie Pasmaskas! Ik denk dat ik er uit ben!

Ik heb een aantal dingen gedaan:
1. de door jou genoemde retina JS er uit gehaald, deze gebruikte ik niet...
2. niet noodzakelijke bestanden van de {cms_jquery} tag verwijderd.
3. de LITE versie van de Cycle plugin gebruikt i.p.v. de ALL versie.
4. Overige 6 "losse" JS delen gecombineerd in één bestand.

Ik hoef nu nog maar 3 bestanden te laden in plaats van de 12 er voor!!!

Over het súper eenvoudig combineren van JS bestanden heb ik deze tutorial geschreven:
https://www.cmscanbesimple.org/blog/eas ... s-and-code

[pasmaskas]

Mooie tutorial Rolf! Die ga ik ook maar eens testen! zal een hoop schelen.

[HarmO]

hallo,

sorry, het is weer even geleden. ben out geweest door een motorongeval.

Wat ik voorstel Pasmaskas is dat je een github projectje aanmaakt.
Dan kan iedereen die wil modifecaties zijn feedback en verbeteringen doorgeven. is dat een goed idee?

CheerZ

HarmO