[CSS] Laten wegvallen van afbeelding aan twee kanten

[SuperM]

Ik ben op zoek naar de juiste code om een wereldkaart aan twee kanten te laten wegvallen met behulp van een semitransparante PNG die een fade van transparant naar wit (achtergrondkleur site) bevat.

Zodra de gebruiker het browservenster verkleint, moet zowel links als rechts er tegelijkertijd van de afbeelding worden 'afgesneden', hetgeen mooi afgewerkt dankzij de PNG. Ik krijg het alleen zelf voor geen mogelijkheid voor elkaar, en heb alle combi's van positions, overflows en (min-)widths/heights geprobeerd. De wereldkaart zelf moet perse een img zijn en geen background, omdat er gewerkt wordt met image maps icm. Mootools.

Mijn opzet:

Cascading Stylesheet:

#left {
float: left;
min-width: 20px;
width: 20px;
height: 600px;
background-image:url('fade-links.png');
background-repeat:repeat-y;
}

#right {
float: left;
min-width: 20px;
width: 20px;
height: 600px;
background-image:url('fade-rechts.png');
background-repeat:repeat-y;
}

#map {
float: left;    
width: 600px;
height: 600px;
}

HTML:

<div id="left"></div>
<div id="map"><img src="images/map.jpg" alt="Map" width="600" height="600" /></div>
<div id="right"></div>

[_Erikje_]

zet er een div omheen. geef deze position:relative. De rest van je divjes geef je position:absolute, en met left, top en right kan je de divjes positioneren.

zoals hier:
Absolute Positioning Inside Relative Positioning

alles floaten is trouwens geen good practice! zeker omdat de verschillende browsers er anders mee omgaan.

[ Voor 14% gewijzigd door _Erikje_ op 02-11-2011 20:58 ]

[SuperM]

Heb je instructies gevolgd maar vooralsnog verschuiven de #left en #right niet mee.

Bestand staat nu ook hier

Cascading Stylesheet:

body {
    margin: 0;
}
#left, #right {
    min-width: 20px;
    width: 20px;
    height: 600px;
    background-color: #ff0000;
    position: absolute;
}

#left {
    left: 0px;
    top: 0px;
}

#right {
    right: 0px;
    top: 0px;
}

#map {
    height: 600px;
    position: absolute;
    left: 20px;
}

#container {
    position: relative;
    width: 640px;
}

HTML:

<div id="container">
    <div id="left"></div>
    <div id="map"><img src="Desert.jpg" alt="Map" width="600" height="600" /></div>
    <div id="right"></div>
</div>

[ Voor 64% gewijzigd door SuperM op 02-11-2011 21:48 ]

[_Erikje_]

dus de #left en #right moeten boven de map hangen? geef ze een z-index hoger dan #map en je bent klaar

ook moet je #map left: 0 geven en container kleiner maken

[SuperM]

Zojuist gedaan, en de #left en #right hangen nu wel boven de map, maar schuiven niet mee zodra ik het scherm resize

link

[ Voor 17% gewijzigd door SuperM op 02-11-2011 21:53 ]

[_Erikje_]

tja, resizen is een bitch. Dat gaat niet werken met absolute positionering. Je kunt container een min-width opgeven, dan resized hij niet. maar gezien dat wel wenselijk is (?) zou ik toch kijken naar een float oplossing

good luck

[marko77]

Je initiele voorbeeld heeft de pngs naast de container staan, wat is nu precies de bedoeling? Als je je browser venster verkleind zal toch ook de img geresized moeten worden of werkt het anders?

[SuperM]

Het is de bedoeling dat zodra de browser kleiner wordt dan de kaartgrootte, de kaart stukje bij beetje verdwijnt onder de fade zonder scrollbars van de browser (overflow: hidden).

[OkkE]

Je bedoelt zoiets: http://jsfiddle.net/okke/HNKDz/show/ ?

Hier de code met klein beetje uitleg in de CSS comments:
http://jsfiddle.net/okke/HNKDz/

Alleen getest in Chrome. Nog netter zou het zijn om die "mask-" divs met :before en :after te doen, maar dat snapt IE niet.

R4gnax schreef op vrijdag 04 november 2011 @ 09:11:
Vanaf IE8 werken de :before en :after pseudo selectors gewoon. Voor IE6 & 7 kun je met een kleine hack op basis van CSS expressions een tweetal DOM elementen injecteren om de functionaliteit van :before en :after te emuleren.

True. Maar gezien de vraag/kennis van de TS, leek het me beter om daar verder niet zo over uit te wijden.

[ Voor 74% gewijzigd door OkkE op 04-11-2011 09:52 ]

[R4gnax]

OkkE schreef op donderdag 03 november 2011 @ 16:51:
Je bedoelt zoiets: http://jsfiddle.net/okke/HNKDz/show/ ?

Hier de code met klein beetje uitleg in de CSS comments:
http://jsfiddle.net/okke/HNKDz/

Alleen getest in Chrome. Nog netter zou het zijn om die "mask-" divs met :before en :after te doen, maar dat snapt IE niet.

Vanaf IE8 werken de :before en :after pseudo selectors gewoon. Voor IE6 & 7 kun je met een kleine hack op basis van CSS expressions een tweetal DOM elementen injecteren om de functionaliteit van :before en :after te emuleren.

[SuperM]

Top! Hartelijk bedankt.

OkkE schreef op donderdag 03 november 2011 @ 16:51:
Je bedoelt zoiets: http://jsfiddle.net/okke/HNKDz/show/ ?

Hier de code met klein beetje uitleg in de CSS comments:
http://jsfiddle.net/okke/HNKDz/

Alleen getest in Chrome. Nog netter zou het zijn om die "mask-" divs met :before en :after te doen, maar dat snapt IE niet.


[...]

True. Maar gezien de vraag/kennis van de TS, leek het me beter om daar verder niet zo over uit te wijden.