iFrame probleem
- Onderwerp starter gast0187
- Startdatum
- Status
IE werkt alleen tegen op laptop (op desktop is alles compatibel)
Hallo,
Met modernizr tool (js) wil IE de css3 effecten wel doen voor het menu. (bedankt voor de tip)
Maar nu zit ik met een zeer vreemd probleem: mijn menu is passend op mijn desktop van breedte gelijk zoals die van titel en iframe, footer.
Nu als ik de site op mijn laptop bekijk geeft hij dat anders weer terwijl hij volgens (als ik zie met mijn ogen) dat dit er nog naast zou moeten passen.
Ook als ik de width aanpas doet hij dat op mijn desktop de aanpassing als ik op mijn laptop kijk niets van aanpassing te bespeuren.
Het gaat om de menu in ie die ik een speciale style heb gegeven maar ik heb wel niet alles van de style gekopieerd naar de ie.css file ik vermoed dat hij die andere css ook lees en bij ie gewoon dezelfde dingen overschrijft.
De menu code voor ondersteunende browsers:
de style die wordt overschreven als je met ie surft:
in html heb ik dit:
de css van CSS/all-ie-only.css
Waarom werkt ie nu tegen op mijn laptop terwijl op mijn desktop alles vlotjes verloopt. (terwijl hij in de breedte nog plaats over is) ?
Mijn desktop is 23 inch schermgrootte en laptop 15.6 inch. (nochtans zie ik dat de menus die op een 2e rij verschijnen er nog naast kunnen op de eerste rij)
Hallo,
Met modernizr tool (js) wil IE de css3 effecten wel doen voor het menu. (bedankt voor de tip)
Maar nu zit ik met een zeer vreemd probleem: mijn menu is passend op mijn desktop van breedte gelijk zoals die van titel en iframe, footer.
Nu als ik de site op mijn laptop bekijk geeft hij dat anders weer terwijl hij volgens (als ik zie met mijn ogen) dat dit er nog naast zou moeten passen.
Ook als ik de width aanpas doet hij dat op mijn desktop de aanpassing als ik op mijn laptop kijk niets van aanpassing te bespeuren.
Het gaat om de menu in ie die ik een speciale style heb gegeven maar ik heb wel niet alles van de style gekopieerd naar de ie.css file ik vermoed dat hij die andere css ook lees en bij ie gewoon dezelfde dingen overschrijft.
De menu code voor ondersteunende browsers:
Code:
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
nav {
margin-bottom: 10px;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
width: 1004px;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav ul li {
float:left;
}
nav ul li a {
float: left;
color:#d4d4d4;
padding: 10px 35px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
nav ul li a:hover,
nav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
nav li ul a:hover,
nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0 0;
position: absolute;
width: 170px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
nav li:hover ul {
left: auto;
}
nav li ul a {
background: none;
border: 0 none;
margin-right: 0px;
width: 100px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
nav li li ul {
margin: -1px 0 0 170px;
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}
nav li li:hover ul {
visibility:visible;
}
nav ul ul li:last-child > a {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
nav ul ul ul li:first-child > a {
-moz-border-radius:0 10px 0 0;
-webkit-border-radius:0 10px 0 0;
border-radius:0 10px 0 0;
}de style die wordt overschreven als je met ie surft:
in html heb ik dit:
HTML:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="CSS/all-ie-only.css" />
<![endif]-->de css van CSS/all-ie-only.css
Code:
nav li:hover ul {
left: auto;
margin-left: -100px;
}
nav li li:hover ul {
visibility:visible;
margin-left: 0px;
}
nav {
margin-bottom: 10px;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 0px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: none;
width: 84em;
}
nav ul li a {
float: left;
margin-top: 1px;
color:#d4d4d4;
padding: 10px 36px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
footer{
clear: both;
padding: 10px;
left: 0px;
bottom: 0px;
background: black;
width: 985px;
position: relative;
height: 25px; /* Height of the footer */
}Waarom werkt ie nu tegen op mijn laptop terwijl op mijn desktop alles vlotjes verloopt. (terwijl hij in de breedte nog plaats over is) ?
Mijn desktop is 23 inch schermgrootte en laptop 15.6 inch. (nochtans zie ik dat de menus die op een 2e rij verschijnen er nog naast kunnen op de eerste rij)
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi Antoon,
"Met modernizr tool (js) wil IE de css3 effecten wel doen voor het menu." > Mooi!
"Ik heb niet alles van de style gekopieerd naar de ie.css file; ik vermoed dat hij die andere css ook leest en bij ie gewoon dezelfde dingen overschrijft."
> Correct (tenminste: als het Conditional Comment met de link naar het IE-stylesheet later in de html staat dan het gewone stylesheet; anders worden de IE-styles juist overschreven door de gewone).
"Maar nu zit ik met een zeer vreemd probleem: (...) als ik de width aanpas doet hij de aanpassing op mijn desktop; als ik op mijn laptop kijk, niets van aanpassing te bespeuren."
> Bij gebrek aan de volledige html- en css-code kan ik dit probleem niet reproduceren. Dus ook geen idee waar het aan kan liggen of wat er anders zou kunnen.
"(nochtans zie ik dat de menus die op een 2e rij verschijnen er nog naast kunnen op de eerste rij)"
> Een gokje, als het alleen in IE speelt: misschien omdat IE een net iets andere lettergrootte/spatiëring heeft. En/of omdat IE altijd ruimte inpikt voor de rechter-scrollbar, ook al is die niet nodig.
> De maat in inches is niet relevant voor wat er op scherm komt: het gaat om de resolutie en de browser (en in sommige gevallen het Operating System in combinatie met de browser).
Als je de site online zet, kan ik nog wel even meekijken.
Heb je het IE-footer probleem inmiddels opgelost?
Maar het meeste werk zit er op! :thumb:
CSShunter
"Met modernizr tool (js) wil IE de css3 effecten wel doen voor het menu." > Mooi!
"Ik heb niet alles van de style gekopieerd naar de ie.css file; ik vermoed dat hij die andere css ook leest en bij ie gewoon dezelfde dingen overschrijft."
> Correct (tenminste: als het Conditional Comment met de link naar het IE-stylesheet later in de html staat dan het gewone stylesheet; anders worden de IE-styles juist overschreven door de gewone).
"Maar nu zit ik met een zeer vreemd probleem: (...) als ik de width aanpas doet hij de aanpassing op mijn desktop; als ik op mijn laptop kijk, niets van aanpassing te bespeuren."
> Bij gebrek aan de volledige html- en css-code kan ik dit probleem niet reproduceren. Dus ook geen idee waar het aan kan liggen of wat er anders zou kunnen.
"(nochtans zie ik dat de menus die op een 2e rij verschijnen er nog naast kunnen op de eerste rij)"
> Een gokje, als het alleen in IE speelt: misschien omdat IE een net iets andere lettergrootte/spatiëring heeft. En/of omdat IE altijd ruimte inpikt voor de rechter-scrollbar, ook al is die niet nodig.
- Aha: de breedte van het menu is voor niet-IE: 1004px + border-L 1px + border-R 1px = 1006px (= aan de erg krappe kant voor resolutie 1024*768px, want in Firefox is de R-scrollbar dan 18px, d.w.z. 1006+18 = exact 1024px!).
- Voor IE is de menu-breedte een relatieve maat geworden: 84em. Betekent: de menu-breedte is afhankelijk van de lettergrootte, en die zou op de laptop net iets anders kunnen zijn. En/of: een afrondingsverschil; als bv. 84em op de desktop door de browser wordt uitgerekend tot 1002.4763815px, en op de laptop tot 1002.5143296px, zal het in het ene geval 1002px worden en in het andere geval 1003px.
Want halve pixels bestaan niet!
> De maat in inches is niet relevant voor wat er op scherm komt: het gaat om de resolutie en de browser (en in sommige gevallen het Operating System in combinatie met de browser).
- Als ik een scherm heb van 37cm breed en een resolutie instel van 1024*768px, past er minder op dan als ik een scherm van 30cm breed heb op een resolutie van 1280*1024px!
Als je de site online zet, kan ik nog wel even meekijken.
Heb je het IE-footer probleem inmiddels opgelost?
Maar het meeste werk zit er op! :thumb:
CSShunter
Klopt, het meeste werk is gedaan.
de footer heb ik met margins/padding geregeld en ook via de speciale css voor ie.
Na modernizr deed IE mijn footer perfect en de rest niet.
dus heb ik de style aangepast en voor ie de footer nog eens opnieuw gedaan in de css voor ie zodat die overschreven wordt.
Footer probleem is inmiddels opgelost!
.
De site wordt op 28 mei online gezet (een verzameling van verschillende sites eigenlijk, portfolio), met logo van de school dus vertellen dat het om een fictieve site gaat is dan ook overbodig als het logo van de school er op staat.
Mvg gast0187
de footer heb ik met margins/padding geregeld en ook via de speciale css voor ie.
Na modernizr deed IE mijn footer perfect en de rest niet.
dus heb ik de style aangepast en voor ie de footer nog eens opnieuw gedaan in de css voor ie zodat die overschreven wordt.
Footer probleem is inmiddels opgelost!
.
De site wordt op 28 mei online gezet (een verzameling van verschillende sites eigenlijk, portfolio), met logo van de school dus vertellen dat het om een fictieve site gaat is dan ook overbodig als het logo van de school er op staat.
Mvg gast0187
Laatst bewerkt:
Hallo,
Het resolutie probleem is inmiddels ook opgelost werkt in alle browsers en met een resolutie (1920 * 1080, mijn desktop) en ook op mijn laptop resolutie (1366 * 768), dus tussenin of groter vermoed ik ook
Met kleinere resoluties hoef ik denk ik geen rekening meer te houden, wat denk jij wat de kleinste ondersteunende resolutie voor de huidige website's moet zijn?
Mvg gast0187
Het resolutie probleem is inmiddels ook opgelost werkt in alle browsers en met een resolutie (1920 * 1080, mijn desktop) en ook op mijn laptop resolutie (1366 * 768), dus tussenin of groter vermoed ik ook
Met kleinere resoluties hoef ik denk ik geen rekening meer te houden, wat denk jij wat de kleinste ondersteunende resolutie voor de huidige website's moet zijn?
Mvg gast0187
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi gast0187,
... de kleinste ondersteunde resolutie voor de huidige website's?
Tja, vroeger was het makkelijk: toen waren er alleen maar desktops.
Mijn desktop heeft 1280*1024px, en is nog lang niet doorgebrand zodat ik een nieuwe moet kopen.
En tegenwoordig zijn er naast de desktops en laptops allerlei kleine en tussenformaten gekomen: mobieltjes (in landscape: 480*320px), kleine tablets (in landscape: 800*600px), grote tablets (in landscape: 1024*768px) en nog van alles er tussenin.
Oftewel: problemen als je het iedereen naar de zin wilt maken met een paginabreedte gelijk aan de schermbreedte (voor kleine schermen) en een maximale paginabreedte voor breedbeeldschermen (om de regels niet te lang te maken om prettig te kunnen lezen)!
De oplossing is: een "responsive layout" maken, die zich aanpast aan het scherm van de bezoeker (met css3/javascript: zie bv. hier).
Om dat niet te hoeven doen, kan je denk ik het beste de {width: 1000px;} van de #container van de index-pagina terugbrengen tot 990px.
Met de rechter scrollbar erbij past de pagina dan nog goed op een resolutie van 1024*768px (de grote tablets in liggende stand); en alles wat groter is. D.w.z. alle desktops en de grote tablets worden zo in elk geval goed bediend.
Alles wat kleiner is, zal dan horizontaal moeten scrollen om de breedte te kunnen zien.
Toch nog een eenvoudig antwoord!
Met vriendelijke groet,
CSShunter
... de kleinste ondersteunde resolutie voor de huidige website's?
Tja, vroeger was het makkelijk: toen waren er alleen maar desktops.
- En de resolutie werd gaandeweg steeds hoger. Eerst hadden ze 640*480px, toen 800*600px, daarna kwam 1024*768px, 1280*1024px en meer.
- Als je maar rekening hield met bezoekers die op een bepaald moment nog een oudere monitor hadden, zat je altijd goed. Zo was jarenlang een maximale paginabreedte van 800px gebruikelijk, ook al begonnen de 1024*768px schermen (en hoger) langzamerhand de markt te veroveren.
- Daarna kwamen de laptops en de breedbeeldschermen. Ook geen probleem, want die hebben uit zichzelf ook een stevige resolutie in de breedte.
- Maar ... toen kwam de ommekeer: alles moest opeens kleiner!
Dat is te zeggen!
Mijn desktop heeft 1280*1024px, en is nog lang niet doorgebrand zodat ik een nieuwe moet kopen.
En tegenwoordig zijn er naast de desktops en laptops allerlei kleine en tussenformaten gekomen: mobieltjes (in landscape: 480*320px), kleine tablets (in landscape: 800*600px), grote tablets (in landscape: 1024*768px) en nog van alles er tussenin.
Oftewel: problemen als je het iedereen naar de zin wilt maken met een paginabreedte gelijk aan de schermbreedte (voor kleine schermen) en een maximale paginabreedte voor breedbeeldschermen (om de regels niet te lang te maken om prettig te kunnen lezen)!
De oplossing is: een "responsive layout" maken, die zich aanpast aan het scherm van de bezoeker (met css3/javascript: zie bv. hier).
- Betekent: alle breedte-maten relatief opgeven (in %) in plaats van in vaste px.
- Of: wel vaste px, maar het aantal daarvan laten afhangen van een bepaald gebied in de schermbreedtes.
- En: het menu aanpassen zodat dit zo nodig in twee regels komt te staan (en ook hoverbaar blijft zonder dat de items gaan verschuiven).
- Ook aan het iframe-script zal wat gedokterd moeten worden om geen dubbele rechter scrollbars te krijgen.
- Maar om het lekker te laten lopen, moet hier vanaf het begin van het ontwerp al rekening mee gehouden worden, en het vraagt eigenlijk een verse start vanaf nul...
Om dat niet te hoeven doen, kan je denk ik het beste de {width: 1000px;} van de #container van de index-pagina terugbrengen tot 990px.
Met de rechter scrollbar erbij past de pagina dan nog goed op een resolutie van 1024*768px (de grote tablets in liggende stand); en alles wat groter is. D.w.z. alle desktops en de grote tablets worden zo in elk geval goed bediend.
Alles wat kleiner is, zal dan horizontaal moeten scrollen om de breedte te kunnen zien.
Toch nog een eenvoudig antwoord!
Met vriendelijke groet,
CSShunter
Laatst bewerkt:
Optie 1
Die 990px lijkt me een goed idee (dat zal dus ook nog passen op mijn iPhone 5, landscape: 1136 x 640)
De oudere modellen iPhone modellen doen dan weer niet mee 4 & 4s (max. 960px breedte) en NOG oudere iPhones ondersteunen dat ga ik nu niet meer doen.(deze zijn te smal in breedte weer goede weergave)
Ik weet niet hoe het met de Samsung modellen zit maar mensen die geregeld surfen zullen wel in het bezit zijn met smartphone met een redelijke resolutie (> 960px breedte)
Tablets zijn dan ook geen probleem meer.
Eerst zien hoe de lay-out er uit komt te zien tot 990px, als dit goed zit en de lay out niet extra extreem moet wijzigen ga ik tot 960px breedte gaan (ik herrinner me net het 960px grid systeem)
Voor nog kleinere mobieltjes ga ik het zo laten: ik vind als men op voorhand bij aankoop van mobieltje weet "ik ga regelmatig surfen op internet met mijn smartphone/iphone", kies dan voor een smartphone/iphone met een redelijke resolutie.
Optie 2
Nog interessanter is dat responsive layout, ik heb ooit zo eens een voorbeeld (demo) van gehad maar die is zoek geraakt.
Dat was zo als het scherm verkleinde dat de background veranderde, een voorbeeldje was dat.
Maar hier vrees ik dat ik niet volledig opnieuw moet beginnen want de pagina's blijven dezelfde, maar de CSS zal dan een hele ommekeer moeten krijgen vrees ik.
Wat ga ik nu doen?
De eerste optie is een aanrader, maar optie 2 is de beste als je echt zoveel mogelijk mensen wilt bereiken die op verschillende resoluties zitten.
Optie 1 ga ik doen, optie 2 mischien bij een volgende keer (waarschijnlijk vreselijk om iets bestaand aan te passen, dus als ik meer tijd heb)
Die 990px lijkt me een goed idee (dat zal dus ook nog passen op mijn iPhone 5, landscape: 1136 x 640)
De oudere modellen iPhone modellen doen dan weer niet mee 4 & 4s (max. 960px breedte) en NOG oudere iPhones ondersteunen dat ga ik nu niet meer doen.(deze zijn te smal in breedte weer goede weergave)
Ik weet niet hoe het met de Samsung modellen zit maar mensen die geregeld surfen zullen wel in het bezit zijn met smartphone met een redelijke resolutie (> 960px breedte)
Tablets zijn dan ook geen probleem meer.
Eerst zien hoe de lay-out er uit komt te zien tot 990px, als dit goed zit en de lay out niet extra extreem moet wijzigen ga ik tot 960px breedte gaan (ik herrinner me net het 960px grid systeem)
Voor nog kleinere mobieltjes ga ik het zo laten: ik vind als men op voorhand bij aankoop van mobieltje weet "ik ga regelmatig surfen op internet met mijn smartphone/iphone", kies dan voor een smartphone/iphone met een redelijke resolutie.
Optie 2
Nog interessanter is dat responsive layout, ik heb ooit zo eens een voorbeeld (demo) van gehad maar die is zoek geraakt.
Dat was zo als het scherm verkleinde dat de background veranderde, een voorbeeldje was dat.
Maar hier vrees ik dat ik niet volledig opnieuw moet beginnen want de pagina's blijven dezelfde, maar de CSS zal dan een hele ommekeer moeten krijgen vrees ik.
Wat ga ik nu doen?
De eerste optie is een aanrader, maar optie 2 is de beste als je echt zoveel mogelijk mensen wilt bereiken die op verschillende resoluties zitten.
Optie 1 ga ik doen, optie 2 mischien bij een volgende keer (waarschijnlijk vreselijk om iets bestaand aan te passen, dus als ik meer tijd heb)
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Ja, lijkt me een prima plan.
Bij optie 2:
Het hoeft niet n.l. alleen de css te zijn die voor een responsive layout moet worden aangepast. Het kan ook nodig zijn om toch ook in de html wijzigingen aan te brengen, bv. in de volgorde van de elementen, en/of de manier waarop er al of niet gefloat wordt.
Dit dan in verband met het moeten "duiken" van het ene element onder het andere (bv. een menu dat bij mini-schermen onder de header moet komen in plaats van er in).
En als er javascript-functionaliteit is zit (bv. een dia-slider), zal vaak ook het javascript daarvan uitgebreid moeten worden om alle schermbreedtes en -hoogtes te kunnen bedienen.
En dan kan het behoorlijk gecompliceerd worden om alles op z'n plaats te krijgen!
Met vriendelijke groet,
CSShunter
Bij optie 2:
Daar kan ik het hartgrondig mee eens zijn, en helemaal opnieuw beginnen kost meestal minder tijd.
Het hoeft niet n.l. alleen de css te zijn die voor een responsive layout moet worden aangepast. Het kan ook nodig zijn om toch ook in de html wijzigingen aan te brengen, bv. in de volgorde van de elementen, en/of de manier waarop er al of niet gefloat wordt.
Dit dan in verband met het moeten "duiken" van het ene element onder het andere (bv. een menu dat bij mini-schermen onder de header moet komen in plaats van er in).
En als er javascript-functionaliteit is zit (bv. een dia-slider), zal vaak ook het javascript daarvan uitgebreid moeten worden om alle schermbreedtes en -hoogtes te kunnen bedienen.
En dan kan het behoorlijk gecompliceerd worden om alles op z'n plaats te krijgen!
- Voorbeeld (werkt van superbreedbeeld t/m 320*480px): klikbare altijd paginabrede slideshow met menu
Zie broncode... - Toelichting: in dit topic.
Met vriendelijke groet,
CSShunter
- Status
