• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 47 posts ]  Go to page Previous  1, 2, 3, 4  Next
Author Message
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 2:07 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
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">

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 2:35 pm 
Offline
Power Poster
Power Poster

Joined: Thu May 04, 2006 9:12 am
Posts: 369
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 2:50 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
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:
img{max-width:100%;height:auto;}


Verander deze naar:
Code:
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!

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 2:59 pm 
Offline
Power Poster
Power Poster

Joined: Thu May 04, 2006 9:12 am
Posts: 369
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 3:16 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Feb 28, 2014 3:47 pm 
Offline
Power Poster
Power Poster

Joined: Thu May 04, 2006 9:12 am
Posts: 369
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!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Mon Mar 03, 2014 3:30 pm 
Offline
Power Poster
Power Poster

Joined: Thu May 04, 2006 9:12 am
Posts: 369
Ik heb een kleine aanpassing gemaakt in "responsive.css".
Daar stond
Code:
img{width:100%;height:auto; }

en daar heb ik van gemaakt
Code:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Fri Mar 14, 2014 9:30 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Tue Mar 18, 2014 10:50 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Last edited by pasmaskas on Tue Dec 02, 2014 9:00 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Tue May 27, 2014 2:24 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7498
Location: The Netherlands
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

_________________
Image
Latest CMSMS article: Search Form Autocomplete

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Wed May 28, 2014 7:19 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Wed May 28, 2014 7:31 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
Nog een klein dingetje.

Ik denk als je dit deel uit responsive.css sloopt

Code:
/* 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.

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Wed May 28, 2014 10:19 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7498
Location: The Netherlands
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

_________________
Image
Latest CMSMS article: Search Form Autocomplete

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Wed May 28, 2014 11:13 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 497
Mooie tutorial Rolf! Die ga ik ook maar eens testen! zal een hoop schelen.

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive/Singlepage/parallax website Grid voor CMSMS
PostPosted: Mon Aug 11, 2014 7:19 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Thu Jan 26, 2012 3:22 pm
Posts: 235
Location: Belgium
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

_________________
Kind regards,
HarmO


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 47 posts ]  Go to page Previous  1, 2, 3, 4  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
A2 Hosting