Gepositioneerde advertentie verbergen bij lage resolutie

[Zenda]

Ik heb een met CSS gepositioneerde advertentie. Nu wil ik dat deze gewoon verborgen wordt als de resolutie laag is, of als je het venster versmald.

Ik ken de hidden value van overflow, CSS, alleen lijkt dit niet te werken met absolute positioning.

Is er een methode in CSS, om een DIV via positioning over de website te laten zweven, maar dat hij het niet meerekent als de breedte van de website en wanneer je hem versmalt verborgen wordt via z-index bijvoorbeeld?

[shakkie]

Als ik dit zo lees gaat dat met css alleen niet lukken. Je zal er naar mijn idee Javascript bij nodig gaan hebben.

[Sebazzz]

shakkie schreef op zaterdag 22 mei 2010 @ 17:02:
Als ik dit zo lees gaat dat met css alleen niet lukken. Je zal er naar mijn idee Javascript bij nodig gaan hebben.

Zoekterm die je wilt hebben is media selectors.

[kaesve]

Sebazzz schreef op zaterdag 22 mei 2010 @ 17:05:
[...]

Zoekterm die je wilt hebben is media selectors.

hoezo? sinds wanneer detecteert dat de resolutie van een venster? en hoe kan je het laten reageren op verandering van die resolutie? volgens mij ga je hier toch echt javascript voor nodig hebben hoor :0

[Sebazzz]

Volgens mij heb je niet gezocht...
http://www.css3.info/preview/media-queries/
Media queries, helaas werkt dit niet in IE7, 8 weet ik niet, 9 wel.

[apokalypse]

Sebazzz schreef op zaterdag 22 mei 2010 @ 18:05:
Volgens mij heb je niet gezocht...

Je had het eerst zelf over media selectors

[kaesve]

ah, sinds css3 dus. maar zo te zien wordt dit nog heel slecht ondersteunt.. het voorbeeld werkt bij mij iig niet, zowel in chrome als firefox getest

[Sebazzz]

apokalypse schreef op zaterdag 22 mei 2010 @ 18:22:
[...]

Je had het eerst zelf over media selectors

Media-queries maken er onderdeel van uit.

[geert1]

Makkelijkste manier is inderdaad met Javascript, iets met een onResize event. Echt mooi is het niet trouwens, maar op zich een prima methode.

Afhankelijk van je exacte situatie kan het misschien ook met CSS, door bijvoorbeeld een wrapper div met breedte: 100% op "overflow: hidden" te zetten. De reden dat "overflow: hidden" bij jouw niet werkt, is omdat het te verbergen kind-element "position: absolute" heeft. Als je de container / wrapper ook een position-waarde geeft, zoals "relative", dan verbergt die het element wel. Maar of dat hier lekker werkt als oplossing is zonder een voorbeeld moeilijk te zeggen.

Daarnaast wel wat verontrustend dat hier een CSS3 oplossing wordt aangedragen voor een dergelijke situatie. Dit geeft een verkeerd beeld van de ondersteuning van css3 in de hedendaagse desktop-browser-markt. In de meeste doelgroepen gaat het nog duren totdat IE8 is uitgefaseerd, voordat we veel van css3 als compatible kunnen veronderstellen. Dat zal bijvoorbeeld ergens in 2012 tot 2015 zijn. Tot die tijd is css3 voornamelijk bruikbaar onder de noemer "progressive enhancement". Oftewel: Het is puur te gebruiken als optionele verbetering voor een website, in de veronderstelling dat slechts een klein deel van de gebruikers het gaat zien (mensen met specifieke nieuwe browsers of zelfs nightly builds). Belangrijke functionaliteit die voor iedereen moet werken zal dus voorlopig nog met de gevestigde technieken moeten worden geimplementeerd.

[ Voor 18% gewijzigd door geert1 op 22-05-2010 18:58 ]

[pieturp]

@ geert1,

Onresize gebeurt, eh, on resize Niet bij landing. Onload moet je de breedte/hoogte uitlezen, en inderdaad netjes bij onresize opnieuw.

[R4gnax]

geert1 schreef op zaterdag 22 mei 2010 @ 18:53:
Afhankelijk van je exacte situatie kan het misschien ook met CSS, door bijvoorbeeld een wrapper div met breedte: 100% op "overflow: hidden" te zetten. De reden dat "overflow: hidden" bij jouw niet werkt, is omdat het te verbergen kind-element "position: absolute" heeft. Als je de container / wrapper ook een position-waarde geeft, zoals "relative", dan verbergt die het element wel. Maar of dat hier lekker werkt als oplossing is zonder een voorbeeld moeilijk te zeggen.

Alleen oude Internet Explorer versies, die nog sterk afhankelijk zijn v/h 'layout'/'hasLayout' mechanisme, hebben problemen met overflow van gepositioneerde kind-elementen. Zelfs onder IE8 zou het al goed moeten gaan zonder ook de wrapper te positioneren en (strict genomen) een layout trigger mee te geven.