[CSS] Divjes weg laten vallen bij smalle schermen

[Verwijderd]

Weer maar eens proberen een topic van de grond te krijgen die niet zomaar gesloten wordt...
Ik heb een klein probleempje met een website waar ik aan bezig ben.
Ik werk zelf op een breedbeeldscherm, daar is het probleem dus niet.
De site bestaat in principe uit een middendeel (maincontent in een container), 2 zijbalken en 2 footers.
het middendeel heeft een vaste breedte, dus deze schuift netjes mee naar links als ik een smaller scherm gebruik.
Probleem is dat de 2 zijbalken dan over de maincontent heen gaan staan. Dat is dus niet de bedoeling.
Is er een mogelijk om die 2 sidebars weg te laten vallen wanneer het scherm verkleint wordt? Dus dat je dan enkel de container en de 2 footers krijgt te zien? De footers moeten uiteraard wel onderaan blijven staan, maar dat heb ik al opgelost.

Ik heb op internet hiernaar gezocht, maar er bestaan nogal veel verschillende oplossingen voor en ik zie door de bomen het bos niet meer.
Bijvoorbeeld werken met 2 CSS files, waarbij 1 de divjes gewoon onzichtbaar maakt, en de andere dus voor brede schermen is. Maar de php code die er dan achter moet liggen om te schakelen tussen die 2, vind ik lastig. Tevens zitten er zoveel uitzonderingen aan dat ik daar niet aan wil beginnen.

Wellicht is t een idee om de divjes achter de maincontent te laten schuiven, zodat deze niet meer zichtbaar zijn? Moet wel zeggen dat de maincontent transparant is, omdat er een schaduw achter ligt welke er wel moet blijven (geef ik de maincontent een achtergrond, valt dus die schaduw erachter weg) Dan zou ik met Z-index moeten werken, maar dit heb ik tot nu toe nooit goed werkend gekregen.

De zijbalken en footers staan niet binnen de container.

Stukje CSS:

code:

#sidebar1 {
    float: left; 
    width: 200px; 
    height: auto;
    margin: -180px 0 0 20px;
    font-size: x-small;
    }
#sidebar2 {
    float: right; 
    width: 180px; 
    height: auto;
    text-align:right;
    margin: -180px 20px 0 0;
    font-size: x-small;
    }
#mainContent {
    margin-top: -200px;
    margin-left: auto;
    margin-right: auto;
    font-size: x-small; 
    width: 800px;
        }

Ik hoop dat iemand ermee kan helpen

[MichielioZ]

Wat je zelf als CSS hebt gegeven werkt iig niet en ik verwacht ook geen oplossing in floats.
Floats zouden gedeeltelijk kunnen werken als de maincontent helemaal links zou staan op de pagina, dan kan je de 2 "balken" rechts ervan laten floaten en bij een kleiner scherm zouden die dan onder (en dus niet achter) de maincontent vallen.
De methode met 2 CSS files via PHP zie ik ook niet zo snel, werkt dat met een browser sniffing icm met andere (lelijke) PHP global variabelen ?

Je zou het via javascript kunnen maken...
Hoe dan ook zul je de minimale resolutie (of breedte in dit geval) moeten bepalen waarbij de website moet "switchen" lijkt me.

edit:

Zie net in je CSS dat je echt wilt switchen als je resolutie kleiner wordt dan 1220px.
Ohja, ik kan het toch niet laten: waarom die negatieve top margins in 's hemelsnaam ?

[ Voor 12% gewijzigd door MichielioZ op 06-09-2011 23:21 ]

[RobIII]

Heb je ook (relevante!) HTML zodat we zien hoe je div's genest zijn? En toevallig een online testcase waarmee je dit probleem kunt illustreren. Die paar regels CSS op zichzelf zeggen nog niet héél veel.

[Verwijderd]

De gegeven code is de huidige situatie en die werkt, op het verdwijnen van de sidebars na.

Float is in dit geval om de 2 balken links en rechts uit te lijnen.
Wat mij de meest makkelijke oplossing lijkt is de sidebars te laten "verdwijnen" achter de maincontent, met witte achtergrond. Maar hiervoor moet ik met Z-index gaan werken, om de diepte aan te geven van de verschillende zaken. Niet de meest mooiste oplossing als je ermee gaat schuiven natuurlijk (er staat tekst in, welke terugkomt op een andere pagina, contactgegevens voornamelijk) Maar bij een wel of niet breedbeeld scherm krijg je het effect alleen, of bijvoorbeeld op een telefoon.

met een complex php script wil niet niet werken omdat hier zoveel op de achtergrond voor moet zitten zoals idd de genoemde browser sniffing. En voor deze site is zoiets uitgebreids echt niet nodig.

negatieve top margins: zorgen dat ze niet onder de 3e header (schaduwtje van de menubalk) terecht komen. Slechte oplossing, ik weet het, maar dat heeft dus te maken met dat ik de Z-index niet echt lekker mee kan werken.

edit: @roblll: ik geef niet graag html vrij, omdat ik dan ook informatie vrijgeef van de website, die nog niet bekend mag worden.

[ Voor 5% gewijzigd door Verwijderd op 06-09-2011 23:33 ]

[Zeebonk]

Ik weet niet zeker of ik je probleem helemaal begrijp, maar je kan het volgens mij gewoon oplossen met een wrapper met een vaste breedte? Ik ga er althans van uit dat je content niet mee schaalt met het scherm (#maincontent{width: 800px})

[Verwijderd]

Zeebonk schreef op dinsdag 06 september 2011 @ 23:32:
Ik weet niet zeker of ik je probleem helemaal begrijp, maar je kan het volgens mij gewoon oplossen met een wrapper met een vaste breedte? Ik ga er althans van uit dat je content niet mee schaalt met het scherm (#maincontent{width: 800px})

Mijn container is mijn wrapper

code:

#container { 
    margin: 0 auto; 
    text-align: left; 
    width: 800px;
    height: 90%;

}

[C0rnelis]

PHP is server side en weet niet eens van de client wat de resolutie is, dat krijg je enkel met bijv. de hulp van javascript te weten en dat zou dan een redirect / ajax call moeten doen wil je php code draaien die afhankelijk is van de schermresolutie. Andere vraag:moet het per se zo breed? Tevens: als je je gehele website (maincontent + sidebars) een fixed width geeft, dan komen er gewoon scrollbars in beeld bij de gebruikers die een te kleine viewport hebben.

Nogmaals, fixed width is dus geen 100%

[ Voor 5% gewijzigd door C0rnelis op 06-09-2011 23:35 ]

[disjfa]

Verwijderd schreef op dinsdag 06 september 2011 @ 23:31:
met een complex php script wil niet niet werken omdat hier zoveel op de achtergrond voor moet zitten zoals idd de genoemde browser sniffing. En voor deze site is zoiets uitgebreids echt niet nodig.

Zonder browser sniffing kan je nooit achter de resolutie komen. En de resolutie kan veranderen als iemand het scherm aanpast.

Maak gewoon een aantal css bestanden die je per stuk inlees real time per resolutie om je scherm netjes te voorschijn blijft komen. Zorg gewoon dat je de informatie neerzet zoals je wilt per resolutie en maak het niet ingewikkeld.

[Verwijderd]

C0rnelis schreef op dinsdag 06 september 2011 @ 23:34:
PHP is server side en weet niet eens van de client wat de resolutie is, dat krijg je enkel met bijv. de hulp van javascript te weten en dat zou dan een redirect / ajax call moeten doen wil je php code draaien die afhankelijk is van de schermresolutie. Andere vraag:moet het per se zo breed? Tevens: als je je gehele website (maincontent + sidebars) een fixed width geeft, dan komen er gewoon scrollbars in beeld bij de gebruikers die een te kleine viewport hebben.

Nogmaals, fixed width is dus geen 100%

er mogen geen scrollbars in beeld komen bij het bekijken van de website in een smal scherm. Alleen wanneer de container te smal wordt. De zijbalken zijn extra info, welke dubbel op de website staan vermeld.
links en rechts staat er wat contact informatie, werkt sneller dan alleen een pagina contact. De informatie is dus "overbodig" wanneer men op een kleiner scherm werkt.

[RobIII]

Dit werkt zoals je (beschrijft dat je) wil: http://jsfiddle.net/qpxVU/

[ Voor 16% gewijzigd door RobIII op 06-09-2011 23:42 ]

[CH4OS]

Verwijderd schreef op dinsdag 06 september 2011 @ 23:31:
edit: @roblll: ik geef niet graag html vrij, omdat ik dan ook informatie vrijgeef van de website, die nog niet bekend mag worden.

Waarom gelijk de definitieve content in een website, terwijl je de layout nog niet eens af hebt? Gebruik dan bijvoorbeeld http://lipsum.com om tekst te genereren ervoor. Ook wordt er niet naar de definitieve pagina gevraagd, maar een testcase: dat hoeft niet met de tekst te zijn, als het maar wél jouw probleem laat zien. Dat maakt het echt zoveel makkelijker.

[-DarkShadow-]

Dit kan heel gemakkelijk in CSS:

code:

@media only screen and (max-width: 300px){
    #sidebar1{
        display:none;
    }
}

Zie ook http://lessframework.com/

[Verwijderd]

@roblll:
niet helemaal, maak m maar eens heel smal, De balken verplaatsen zich dan onder elkaar, en dat is helemaal niet de bedoeling.

Kom net nog een probleem tegen en dat is dat als de site smaller wordt gemaakt als de container, dat je wel een scrollbalk krijgt, maar dat de lengte van het menu niet meer meegenomen wordt. puntje van aandacht, maar dit denk ik zelf wel op te kunnen lossen.

[RobIII]

Verwijderd schreef op dinsdag 06 september 2011 @ 23:31:

edit: @roblll: ik geef niet graag html vrij, omdat ik dan ook informatie vrijgeef van de website, die nog niet bekend mag worden.

Je kunt toch een testcase bouwen zoals ik deed Daar hoef je toch geen "geheime info" voor prijs te geven Ik vraag naar die HTML omdat het nogal interessant is hoe die div's genest zijn.

Dat is nou precies waar we steeds zo op hameren; als je de moeite niet neemt (of wil nemen) om even een fatsoenlijke testcase online te zetten of even in code tags wat relevante HTML te posten, hoe verwacht je dan van ons wel dat we je gaan helpen? Moeten we in onze glazen bol kijken hoe je site er (qua structuur/nesting/DOM tree) uit ziet?

[ Voor 28% gewijzigd door RobIII op 06-09-2011 23:54 ]

[Bosmonster]

-DarkShadow- schreef op dinsdag 06 september 2011 @ 23:47:
Dit kan heel gemakkelijk in CSS:

code:

@media only screen and (max-width: 300px){
    #sidebar1{
        display:none;
    }
}

Zie ook http://lessframework.com/

Dit heeft niet zoveel met LESS te maken, maar dit zijn gewoon media queries. Oftewel responsive webdesign

Lijkt me in dit geval ook de meest zinvolle methode / zoekterm.

edit: ah.. lessframework heeft blijkbaar ook niks met LESS te maken, maar is gewoon weer een CSS gridmeukding.

[ Voor 20% gewijzigd door Bosmonster op 06-09-2011 23:56 ]

[Verwijderd]

-DarkShadow- schreef op dinsdag 06 september 2011 @ 23:47:
Dit kan heel gemakkelijk in CSS:

code:

@media only screen and (max-width: 300px){
    #sidebar1{
        display:none;
    }
}

Zie ook http://lessframework.com/

Ik ga dit eens proberen.

[disjfa]

Verwijderd schreef op dinsdag 06 september 2011 @ 23:58:
[...]
Ik ga dit eens proberen.

Of te wel je eigen idee implementeren

Verwijderd schreef op dinsdag 06 september 2011 @ 22:59:
Bijvoorbeeld werken met 2 CSS files, waarbij 1 de divjes gewoon onzichtbaar maakt, en de andere dus voor brede schermen is.

[Verwijderd]

disjfa schreef op woensdag 07 september 2011 @ 00:00:
[...]

Of te wel je eigen idee implementeren

[...]

? ik begrijp niet hoe je dat bedoeld, een aparte css wilde ik juist niet gebruiken?

even speciaal voor jullie de complete html code (exc teksten)
HTML:

code:

*snip*

complete css:

code:

*snip*

Ja ik werk best wel rommelig in de indeling van de divjes.

edit: fout voor de breedte van de header2 en 3 is er al uit, nog niet verwerkt in bovenstaande code: min-width: 800px;

[ Voor 80% gewijzigd door RobIII op 07-09-2011 00:34 ]

[RobIII]

Ik vroeg om re-le-van-te code (HTML/CSS/whatever). Dus niet een crapload aan menu's, CSS die (voor je probleem) niet relevant is etc. Is het nou echt zo moeilijk je probleem even te reproduceren in, zeg, een regel of 10~30 HTML en eenzelfde hoeveelheid CSS? Zoals ik dat hier bijvoorbeeld deed?

Met een testcase doelen we dus niet op 150+ regels html/css.

[ Voor 26% gewijzigd door RobIII op 07-09-2011 00:40 ]

[Verwijderd]

geef ik relevante code (er wordt gevraagd hoe de divjes in elkaar genest zijn) en dan wordt t weggehaald? Wat is er niet relevant aan?

Je vraagt om code, je krijgt code. probleem kun je reproduceren met die code, dus issie relevant.
Dat JIJ je eigen vraag niet beantwoord wilt krijgen, is niet mijn fout, ik geef antwoord, probeer mee te werken, en dan wordt t gewoon weggehaald? wie is hier dan de fout? JIJ! Boeit me geen flikker of je een mod bent, waarom wil je geen antwoord op je vraag? Stel die vraag dan niet! Code is relevant, probleem is ermee te reproduceren, mits je fatsoenlijk de startpost leest.
En ik ga geen 2e keer moeite meer doen om die code terug te plaatsen...

[Verwijderd]

RobIII schreef op woensdag 07 september 2011 @ 00:45:
En ik blijf niet aan de gang je te wijzen op hoe we hier werken.

je schuift de fout op mij af, terwijl je dondersgoed weet dat jij die code niet had weg hoeven halen, andere aanpak. Code was pas niet-relevant geweest als het probleem er niet mee te re-produceren was.

Opmerking aan het begin van dit topic staat er niet voor niets he.

[TheBorg]

Verwijderd schreef op woensdag 07 september 2011 @ 00:41:
En ik ga geen 2e keer moeite meer doen om die code terug te plaatsen...

Ik zag die lap code en ben naar het volgende topic geskipped. Ik (en vele anderen) willen best mensen helpen, maar dan moet je het die mensen wel makkelijk maken, en dus niet eerst door een hoop bagger laten worstelen.

[Verwijderd]

zo veel niet-relevante code stond er echt niet in.

Maar ik ga t nogmaals proberen, even gedult voor een edit.

Zoals gezegt, edit:
HTML:

code:

<body>
<div id="container">
<div id="header"></div>
       <div id="header2"></div>
             <div id="header3"></div>
  <div id="sidebar1">
   </div>
    <div id="sidebar2">
  </div>
  <div id="mainContent">
     </div>
  </div>
  <div id="footer">
</div>
  <div id="footer2">
   </div>

</body>

edit: morgen komt er een werkende versie online, zodat met outlines alle divjes te zien zijn en het probleem duidelijker wordt.
Lezen van de startpost is dan wel nog steeds noodzakelijk.

[ Voor 156% gewijzigd door Verwijderd op 07-09-2011 01:45 ]

[OkkE]

Verwijderd schreef op woensdag 07 september 2011 @ 00:52:
Zoals gezegt, edit:
HTML:

code:

...

edit: morgen komt er een werkende versie online, zodat met outlines alle divjes te zien zijn en het probleem duidelijker wordt.
Lezen van de startpost is dan wel nog steeds noodzakelijk.

En de CSS?

Even een heel ander issue, waarom zou je op een kleiner scherm de sidebar(s) weg willen hebben? Ik zou er eerder voor kiezen om ze op een kleiner scherm tussen de mainContent en de footer(s) te laten vallen. Tenzij de inhoud niet waardevol is, maar dan kan je 't beter sowieso weg laten.

Zoektermen zijn o.a. min-width, max-width en media queries.

[Verwijderd]

OkkE schreef op woensdag 07 september 2011 @ 08:23:
[...]

En de CSS?

Even een heel ander issue, waarom zou je op een kleiner scherm de sidebar(s) weg willen hebben? Ik zou er eerder voor kiezen om ze op een kleiner scherm tussen de mainContent en de footer(s) te laten vallen. Tenzij de inhoud niet waardevol is, maar dan kan je 't beter sowieso weg laten.

Zoektermen zijn o.a. min-width, max-width en media queries.

CSS weggehaald omdat deze niet nuttig genoeg was om het probleem te reproduceren (geen omlijningen)
Ik ga nu even een proefpagina online zetten met bijbehorend css bestand waar wel te zien is wat ik bedoel.

De informatie in de zijbalken is Contactinformatie en kvk nummer e.d.. Deze informatie is handig als een bezoeker snel even t nummer nodig heeft bijvoorbeeld.
informatie staat ook op de contact pagina zelf. Dus bij een smaller beeldscherm, hoeven die zijbalken niet meer aanwezig te zijn. Schermen breder dan 1200px (800 content, 2x 200 zijbalken) hebben t probleem niet.

edit: de proefpagina. Hier heb ik vrijwel alle divjes voorzien van een border 1px, behalve die met achtergrond.
Je kunt goed zien dat de 2 zijbalken netjes meeschuiven, maar ze gaan door/over de content div staan.
Let op: linkjes werken niet, ik begin altijd met de index te optimaliseren en ga dan pas met de rest verder.
http://pobresh.com/proef/index.php
cssfile: http://pobresh.com/proef/dvw.css

Antwoord op een eventueel opkomende vraag: Php is nog niet in de pagina verwerkt, maar als voorbereiding wel al gebruikt als extensie. O.a. formulieren en wat dynamiek heb ik php voor nodig.

[ Voor 21% gewijzigd door Verwijderd op 07-09-2011 15:31 ]

[OkkE]

Verwijderd schreef op woensdag 07 september 2011 @ 15:08:
CSS weggehaald omdat deze niet nuttig genoeg was om het probleem te reproduceren (geen omlijningen)

Kleuren, backgrounds, lettertypes, etc. zijn niet nuttig inderdaad voor het probleem. Maar width, height, position, etc.. wel.

edit: de proefpagina. Hier heb ik vrijwel alle divjes voorzien van een border 1px, behalve die met achtergrond.

Ik gebruik zelf in een testcase altijd outline in plaats van border, omdat een border ook ruimte inneemt en een outline niet.

Je kunt goed zien dat de 2 zijbalken netjes meeschuiven, maar ze gaan door/over de content div staan.

Dit kan je dus doen met Media Queries:

code:

@media (max-width:1200px) {
  #sidebar1, #sidebar2 { 
    display: none; 
  }
}

[Beatboxx]

Als je nu voor elke breedte etc een procentuele verhouding geeft?

EDIT: (Dus height: 100%) etc

[ Voor 19% gewijzigd door Beatboxx op 07-09-2011 16:18 ]

[marquis]

Heb je hier wat aan?

code:

<frameset cols="50%,818,50%" border=0 frameSpacing=0>
    <frame src="frame/lframe.htm" name="empty" noresize scrolling="no" frameborder=no marginHeight=0 marginWidth=0 topmargin="0" leftmargin="0">
        <frame src="index1.htm" name="index" noresize scrolling="yes" frameborder=no marginHeight=0 marginWidth=0 topmargin="0" leftmargin="0">
        <frame src="frame/rframe.htm" name="empty" noresize scrolling="no" frameborder=no marginHeight=0 marginWidth=0 topmargin="0" leftmargin="0">
    </frameset><noframes></noframes>
</head>

En in de rframe.htm en lframe.htm gebruik ik de volgende code (voorbeeld is voor de linkerkant, de rechterkant gebruikt dan ipv "repeat right bottom' "repeat left bottom" en de .jpg is dan ook gespiegeld) :

code:

<style type="text/css">
<!--
body {
    background: url(blokl.jpg) repeat right bottom;
}
-->
</style>

Het middenframe staat vast, de linker en rechter frame passen zich aan aan de grote van het venster.
Je kunt het bekijken hoe het werkt op *snip*

[ Voor 8% gewijzigd door RobIII op 07-09-2011 16:42 . Reden: (Al dan niet onbedoelde) spam ]

[OkkE]

marquis schreef op woensdag 07 september 2011 @ 16:28:
Heb je hier wat aan?
[...]
Het middenframe staat vast, de linker en rechter frame passen zich aan aan de grote van het venster.
Je kunt het bekijken hoe het werkt op *snip*

Laten we a.u.b. geen slechte oplossingen met tal van nadelen gaan geven. Gebruik van frames raad ik iedereen af, maar zeker voor dit probleem.

[ Voor 12% gewijzigd door RobIII op 07-09-2011 16:42 . Reden: (Al dan niet onbedoelde) Spam ]

[Verwijderd]

OkkE schreef op woensdag 07 september 2011 @ 16:13:

Dit kan je dus doen met Media Queries:

code:

@media (max-width:1200px) {
  #sidebar1, #sidebar2 { 
    display: none; 
  }
}

En waar in de css moet ik die dan zetten, of maakt dat niet veel uit?, en werkt dat zo zonder extra code?
@marquis: frames? r en l frame, ja het werkt en dat weet ik. Maar de indexering van de website krijg je gekloot mee. Men kan daardoor via google op enkel een zijbalk terecht komen. En dat is wat je niet wilt. Dit fout heb ik voorheen gemaakt, maar dan met iframes (te zien op mijn eigen site, nog) dat is echt niet handig.

[marquis]

OkkE schreef op woensdag 07 september 2011 @ 16:32:
[...]

Laten we a.u.b. geen slechte oplossingen met tal van nadelen gaan geven.

Niet alleen gaan roepen maar dan ook zeggen waarom!

Maar de indexering van de website krijg je gekloot mee. Men kan daardoor via google op enkel een zijbalk terecht komen. En dat is wat je niet wilt. Dit fout heb ik voorheen gemaakt, maar dan met iframes (te zien op mijn eigen site, nog) dat is echt niet handig.

Ik gebruik daarvoor alleen maar index1 wat het middenframe is. Alle knoppen wijzen naar index.htm die dan op zijn beurt opnieuw de index.htm en lframe en rframe laad. Daardoor voorkom je wel iets.

[ Voor 49% gewijzigd door marquis op 07-09-2011 16:39 ]

[Verwijderd]

marquis schreef op woensdag 07 september 2011 @ 16:33:
[...]

Niet alleen gaan roepen maar dan ook zeggen waarom!

Check mijn eigen post voor je Frames werken niet lekker met indexeringen van google en andere zoeksites.

[Verwijderd]

Alle mooie, complexe oplossingen ten spijt is de meest voor de hand liggende en meest zekere oplossing (omdat hij de minste ruimte laat voor verschillende interpretaties van browser familie tot browser familie) om gewoon per verschillende resolutie een geheel eigen versie van de pagina te bouwen.

Dus, gewoon hardcoded per aspect ratio (als het zuiver daar om gaat) een volledige variant bouwen. Althans, dat zou mijn advies zijn. Zeker als je zelf aangeeft dat het niet zo geavanceerd en complex hoeft te zijn, dan moet je dus juist voor de straightforward oplossingen gaan.

[TeeDee]

Wellicht een handig opstapje voor responsive webdesign @ Hanselman. Ik kan namelijk niet 1 2 3 vinden of het hier over CSS3 gaat of niet

[ Voor 15% gewijzigd door TeeDee op 07-09-2011 16:40 ]

[OkkE]

marquis schreef op woensdag 07 september 2011 @ 16:33:
[...]

Niet alleen gaan roepen maar dan ook zeggen waarom!

[...]

Ik gebruik daarvoor alleen maar index1 wat het middenframe is. Alle knoppen wijzen naar index.htm die dan op zijn beurt opnieuw de index.htm en lframe en rframe laad. Daardoor voorkom je wel iets.

Staat genoeg op internet hier over.

Wanneer je alleen je website maar in het midden wilt hebben; kun je dit met een heel klein beetje CSS oplossen: .site { width:980px; margin: 0px auto; }. Waarom zou je dan een hele frameset bouwen?

Wat o.a. heel onhandig is aan framesets: alleen de domeinnaam staat in de adresbalk, maar niet de volledige link, een bezoeker kan dus nooit die specifieke pagina doorsturen. Of je moet gebruik maken van Javascript.

Verwijderd schreef op woensdag 07 september 2011 @ 16:38:
Alle mooie, complexe oplossingen ten spijt is de meest voor de hand liggende en meest zekere oplossing (omdat hij de minste ruimte laat voor verschillende interpretaties van browser familie tot browser familie) om gewoon per verschillende resolutie een geheel eigen versie van de pagina te bouwen.

Dus, gewoon hardcoded per aspect ratio (als het zuiver daar om gaat) een volledige variant bouwen. Althans, dat zou mijn advies zijn. Zeker als je zelf aangeeft dat het niet zo geavanceerd en complex hoeft te zijn, dan moet je dus juist voor de straightforward oplossingen gaan.

Hoe wil je er achter komen wat de resoluties van de bezoeker is? En voor elke mogelijk resolutie een versie? Heel veel werk. Overgens is er niks complex aan Media Queries, in mijn ogen simpeler dan cross-browser Javascipt.

Sowieso is de beste oplossing een logische basis pakken (bijv. 1024) en voor grote schermen door Media Queries (of percentages, of JS) de site aan te passen.

Verwijderd schreef op woensdag 07 september 2011 @ 16:33:
En waar in de css moet ik die dan zetten, of maakt dat niet veel uit?, en werkt dat zo zonder extra code?

Hier staat uitleg: http://webdesignerwall.co...n-with-css3-media-queries

[ Voor 7% gewijzigd door OkkE op 07-09-2011 16:57 ]

[Edwinboss]

Heb even iemands jsfiddle iets aangepast: http://jsfiddle.net/Xy2nT/

Op deze manier heb je 2 sidebars die achter het scherm wegschuiven zodra het scherm te klein word.
En zodra het scherm kleiner word als de groene container krijg je een horizontale scrollbalk te zien.

[RMX]

Bij Geenstijl hebben ze dit ook.
Resize je pagina meer eens

[Verwijderd]

OkkE schreef op woensdag 07 september 2011 @ 16:55:
Hoe wil je er achter komen wat de resoluties van de bezoeker is? En voor elke mogelijk resolutie een versie? Heel veel werk. Overgens is er niks complex aan Media Queries, in mijn ogen simpeler dan cross-browser Javascipt.

Achter de resolutie komen is geen enkel probleem, dat doe je met JavaScript.

http://www.javascriptkit.com/domref/windowproperties.shtml

En je hoeft niet noodzakelijkerwijs voor iedere afzonderlijke resolutie een geheel eigen variant te maken. Je kan het beperken tot, zoals ik al aangaf, aspect ratio. Of, gewoon op minimum breedte. Dus, indien meer dan <x> pixels, laat de sidebars dan wél zien, anders weglaten.

Voorbeeld van wat ik bedoel - http://www.ilovecolors.com.ar/detect-screen-size-css-style/

[Verwijderd]

marquis schreef op woensdag 07 september 2011 @ 16:33:
Ik gebruik daarvoor alleen maar index1 wat het middenframe is. Alle knoppen wijzen naar index.htm die dan op zijn beurt opnieuw de index.htm en lframe en rframe laad. Daardoor voorkom je wel iets.

Krijg je wel een langere laadtijd.
Maar google indexeringen kan je ook naar lframe en rframe sturen. Wat je dus niet wilt hebben lijkt me? Dat is niet te voorkomen.

Overigens

de @media oplossing heb ik net uitgeprobeert en werkt!, heb m nog niet doorgevoert op de proefpagina. Maar hij doet in google chrome iig wattie moet doen. Bij kleiner dan 1200px laat ie de 2 sidebars volledig vervallen, en dat is precies wat ik wilde.

Voor de footers die nog altijd over elkaar schuiven heb ik wat anders bedacht. Maar ik kom er op mijn manier niet onderuit met 2 footers te werken nu. 1 tekst moet links staan de andere rechts. Zal ik dat met span classes kunnen oplossen en dan 1 footer maken?

[OkkE]

Verwijderd schreef op woensdag 07 september 2011 @ 17:12:
Achter de resolutie komen is geen enkel probleem, dat doe je met JavaScript.

[...]

Dan bedoelen we eigenlijk gewoon 't zelfde, alleen stel jij voor Javascript te gebruiken en ik stel voor Media Queries te gebruiken.