Copyright 1998 - 2026 DPG Media B.V. Mon, 11 May 2026 04:27:50 GMT Mon, 11 May 2026 04:27:50 GMT GoT - list_messages https://gathering.tweakers.net/ Gathering of Tweakers https://tweakers.net/g/if/logo.gif nl-nl https://gathering.tweakers.net/rss/list_messages/1471769 [CSS] Divjes weg laten vallen bij smalle schermen - Softwareontwikkeling - GoT gathering@tweakers.net (Administrator) OkkE https://gathering.tweakers.net/forum/list_message/36721842#36721842 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.
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. :)]]> OkkE https://gathering.tweakers.net/forum/list_message/36721842#36721842 Wed, 07 Sep 2011 15:23:01 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36721761#36721761 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?
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?]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36721761#36721761 Wed, 07 Sep 2011 15:13:18 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36721751#36721751 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/
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 https://gathering.tweakers.net/forum/list_message/36721751#36721751 Wed, 07 Sep 2011 15:12:19 GMT RMX https://gathering.tweakers.net/forum/list_message/36721685#36721685 Bij Geenstijl hebben ze dit ook. Resize je pagina meer eens Resize je pagina meer eens]]> RMX https://gathering.tweakers.net/forum/list_message/36721685#36721685 Wed, 07 Sep 2011 15:03:27 GMT Edwinboss https://gathering.tweakers.net/forum/list_message/36721682#36721682 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. 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.]]> Edwinboss https://gathering.tweakers.net/forum/list_message/36721682#36721682 Wed, 07 Sep 2011 15:02:54 GMT OkkE https://gathering.tweakers.net/forum/list_message/36721609#36721609 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
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]]> OkkE https://gathering.tweakers.net/forum/list_message/36721609#36721609 Wed, 07 Sep 2011 14:55:37 GMT TeeDee https://gathering.tweakers.net/forum/list_message/36721481#36721481 Wellicht een handig opstapje voor responsive webdesign @ Hanselman. Ik kan namelijk niet 1 2 3 vinden of het hier over CSS3 gaat of niet Hanselman. Ik kan namelijk niet 1 2 3 vinden of het hier over CSS3 gaat of niet ;)]]> TeeDee https://gathering.tweakers.net/forum/list_message/36721481#36721481 Wed, 07 Sep 2011 14:40:31 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36721469#36721469 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.
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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36721469#36721469 Wed, 07 Sep 2011 14:38:59 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36721434#36721434 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.
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 https://gathering.tweakers.net/forum/list_message/36721434#36721434 Wed, 07 Sep 2011 14:34:58 GMT marquis https://gathering.tweakers.net/forum/list_message/36721425#36721425 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.
OkkE schreef op woensdag 07 september 2011 @ 16:32:
[...]

Laten we a.u.b. geen slechte oplossingen met tal van nadelen gaan geven. :o
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.]]> marquis https://gathering.tweakers.net/forum/list_message/36721425#36721425 Wed, 07 Sep 2011 14:33:45 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36721423#36721423 OkkE schreef op woensdag 07 september 2011 @ 16:13: Dit kan je dus doen met Media Queries: code:1 2 3 4 5 @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.
OkkE schreef op woensdag 07 september 2011 @ 16:13:

Dit kan je dus doen met Media Queries:
code:
1
2
3
4
5

@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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36721423#36721423 Wed, 07 Sep 2011 14:33:37 GMT OkkE https://gathering.tweakers.net/forum/list_message/36721415#36721415 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.
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. :o Gebruik van frames raad ik iedereen af, maar zeker voor dit probleem.]]> OkkE https://gathering.tweakers.net/forum/list_message/36721415#36721415 Wed, 07 Sep 2011 14:32:50 GMT marquis https://gathering.tweakers.net/forum/list_message/36721390#36721390 Heb je hier wat aan? code:1 2 3 4 5 6 <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:1 2 3 4 5 6 7 <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*
code:
1
2
3
4
5
6

<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:
1
2
3
4
5
6
7

<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*]]> marquis https://gathering.tweakers.net/forum/list_message/36721390#36721390 Wed, 07 Sep 2011 14:28:47 GMT Beatboxx https://gathering.tweakers.net/forum/list_message/36721297#36721297 Als je nu voor elke breedte etc een procentuele verhouding geeft? EDIT: (Dus height: 100%) etc
EDIT: (Dus height: 100%) etc]]> Beatboxx https://gathering.tweakers.net/forum/list_message/36721297#36721297 Wed, 07 Sep 2011 14:17:53 GMT OkkE https://gathering.tweakers.net/forum/list_message/36721276#36721276 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:1 2 3 4 5 @media (max-width:1200px) { #sidebar1, #sidebar2 { display: none; } }
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:
1
2
3
4
5

@media (max-width:1200px) {
  #sidebar1, #sidebar2 { 
    display: none; 
  }
}
]]> OkkE https://gathering.tweakers.net/forum/list_message/36721276#36721276 Wed, 07 Sep 2011 14:13:24 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36720799#36720799 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.
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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36720799#36720799 Wed, 07 Sep 2011 13:08:14 GMT OkkE https://gathering.tweakers.net/forum/list_message/36718021#36718021 Verwijderd schreef op woensdag 07 september 2011 @ 00:52: Zoals gezegt, edit: HTML: code:1 ... 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 schreef op woensdag 07 september 2011 @ 00:52:
Zoals gezegt, edit:
HTML:
code:
1

...


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.]]> OkkE https://gathering.tweakers.net/forum/list_message/36718021#36718021 Wed, 07 Sep 2011 06:23:44 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717728#36717728 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:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <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.
Maar ik ga t nogmaals proberen, even gedult voor een edit.

Zoals gezegt, edit:
HTML:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717728#36717728 Tue, 06 Sep 2011 22:52:27 GMT TheBorg https://gathering.tweakers.net/forum/list_message/36717721#36717721 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 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.]]> TheBorg https://gathering.tweakers.net/forum/list_message/36717721#36717721 Tue, 06 Sep 2011 22:50:19 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717717#36717717 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.
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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717717#36717717 Tue, 06 Sep 2011 22:48:25 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717698#36717698 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...
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 https://gathering.tweakers.net/forum/list_message/36717698#36717698 Tue, 06 Sep 2011 22:41:13 GMT RobIII https://gathering.tweakers.net/forum/list_message/36717680#36717680 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. hier bijvoorbeeld deed?

Met een testcase doelen we dus niet op 150+ regels html/css.]]> RobIII https://gathering.tweakers.net/forum/list_message/36717680#36717680 Tue, 06 Sep 2011 22:36:07 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717597#36717597 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:1 *snip* complete css: code:1 *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;
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:
1

*snip*


complete css:
code:
1

*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;]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717597#36717597 Tue, 06 Sep 2011 22:09:29 GMT disjfa https://gathering.tweakers.net/forum/list_message/36717569#36717569 Verwijderd schreef op dinsdag 06 september 2011 @ 23:58: [...] Ik ga dit eens proberen.Of te wel je eigen idee implementerenVerwijderd 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 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.
]]> disjfa https://gathering.tweakers.net/forum/list_message/36717569#36717569 Tue, 06 Sep 2011 22:00:56 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717561#36717561 -DarkShadow- schreef op dinsdag 06 september 2011 @ 23:47: Dit kan heel gemakkelijk in CSS: code:1 2 3 4 5 @media only screen and (max-width: 300px){ #sidebar1{ display:none; } } Zie ook http://lessframework.com/Ik ga dit eens proberen.
-DarkShadow- schreef op dinsdag 06 september 2011 @ 23:47:
Dit kan heel gemakkelijk in CSS:
code:
1
2
3
4
5

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


Zie ook http://lessframework.com/
Ik ga dit eens proberen.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717561#36717561 Tue, 06 Sep 2011 21:58:59 GMT Bosmonster https://gathering.tweakers.net/forum/list_message/36717542#36717542 -DarkShadow- schreef op dinsdag 06 september 2011 @ 23:47: Dit kan heel gemakkelijk in CSS: code:1 2 3 4 5 @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.
-DarkShadow- schreef op dinsdag 06 september 2011 @ 23:47:
Dit kan heel gemakkelijk in CSS:
code:
1
2
3
4
5

@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. :+]]> Bosmonster https://gathering.tweakers.net/forum/list_message/36717542#36717542 Tue, 06 Sep 2011 21:54:12 GMT RobIII https://gathering.tweakers.net/forum/list_message/36717526#36717526 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?
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?]]> RobIII https://gathering.tweakers.net/forum/list_message/36717526#36717526 Tue, 06 Sep 2011 21:50:20 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717520#36717520 @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. 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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717520#36717520 Tue, 06 Sep 2011 21:47:47 GMT -DarkShadow- https://gathering.tweakers.net/forum/list_message/36717519#36717519 Dit kan heel gemakkelijk in CSS: code:1 2 3 4 5 @media only screen and (max-width: 300px){ #sidebar1{ display:none; } } Zie ook http://lessframework.com/
code:
1
2
3
4
5

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


Zie ook http://lessframework.com/]]> -DarkShadow- https://gathering.tweakers.net/forum/list_message/36717519#36717519 Tue, 06 Sep 2011 21:47:47 GMT CH4OS https://gathering.tweakers.net/forum/list_message/36717517#36717517 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.
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.]]> CH4OS https://gathering.tweakers.net/forum/list_message/36717517#36717517 Tue, 06 Sep 2011 21:47:31 GMT RobIII https://gathering.tweakers.net/forum/list_message/36717485#36717485 Dit werkt zoals je (beschrijft dat je) wil: http://jsfiddle.net/qpxVU/ http://jsfiddle.net/qpxVU/]]> RobIII https://gathering.tweakers.net/forum/list_message/36717485#36717485 Tue, 06 Sep 2011 21:39:53 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717471#36717471 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.
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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717471#36717471 Tue, 06 Sep 2011 21:37:36 GMT disjfa https://gathering.tweakers.net/forum/list_message/36717464#36717464 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 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.]]> disjfa https://gathering.tweakers.net/forum/list_message/36717464#36717464 Tue, 06 Sep 2011 21:36:07 GMT C0rnelis https://gathering.tweakers.net/forum/list_message/36717458#36717458 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%
Nogmaals, fixed width is dus geen 100%]]> C0rnelis https://gathering.tweakers.net/forum/list_message/36717458#36717458 Tue, 06 Sep 2011 21:34:53 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717456#36717456 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:1 2 3 4 5 6 7 #container { margin: 0 auto; text-align: left; width: 800px; height: 90%; }
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:
1
2
3
4
5
6
7

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

}
]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717456#36717456 Tue, 06 Sep 2011 21:34:38 GMT Zeebonk https://gathering.tweakers.net/forum/list_message/36717446#36717446 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}) wrapper met een vaste breedte? Ik ga er althans van uit dat je content niet mee schaalt met het scherm (#maincontent{width: 800px})]]> Zeebonk https://gathering.tweakers.net/forum/list_message/36717446#36717446 Tue, 06 Sep 2011 21:32:52 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717438#36717438 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.
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.]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717438#36717438 Tue, 06 Sep 2011 21:31:40 GMT RobIII https://gathering.tweakers.net/forum/list_message/36717435#36717435 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. testcase waarmee je dit probleem kunt illustreren. Die paar regels CSS op zichzelf zeggen nog niet héél veel.]]> RobIII https://gathering.tweakers.net/forum/list_message/36717435#36717435 Tue, 06 Sep 2011 21:31:21 GMT MichielioZ https://gathering.tweakers.net/forum/list_message/36717355#36717355 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 ? 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 ?
]]> MichielioZ https://gathering.tweakers.net/forum/list_message/36717355#36717355 Tue, 06 Sep 2011 21:16:28 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/36717262#36717262 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:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #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 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#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]]> Verwijderd https://gathering.tweakers.net/forum/list_message/36717262#36717262 Tue, 06 Sep 2011 20:59:17 GMT