[html+css] Div met afgeronde hoeken, iframe valt buiten div

[Joopieboy]

Een klant van mij wilt een site met div's met afgeronde hoeken, geen probleem.
Alleen wilt zij nu een sidebar boven het tekstvak, met afgeronde hoeken, waarin een iframe komt van youtube.
Alleen dat iframe is dus vierkant.

Ik heb al geprobeerd om met dezelfde codes waarmee ik de div voorzien heb van afgeronde hoeken, ook bij het iframe element te gebruiken, maar dit hielp niet. Door midden val de z-index op -1 te zetten, zodat hopelijk de div erover heen viel, dat werkte ook niet. Verder nog wat dingen geprobeerd/gezocht maar ik kom niet toch een oplossing.

Dit is de bedoeling, gehaald uit het voorbeeld van de ontwerper:

Zo is het met een margin van 20px boven en onder de video:

Dit is zonder margin, waar de afgeronde hoeken onder het iframe element vallen:


De html code van dit gedeelte:

HTML:

<div id="sidebar">
<iframe width="285px" height="192px" src="http://www.youtube.com/embed/QJtFmXH5qZ8?rel=0" frameborder="0" ></iframe>
</div>

De de css:

Cascading Stylesheet:

#sidebar {
background-color:#fff;
width:285px;
margin:13px 0px 0px 619px;
padding:0px;
border-color:#f9c473;
border-style:solid;
border-width:1px;
border-radius:25px;
-moz-border-radius:25px;
filter:alpha(opacity=90);
opacity:0.9;
z-index:1;
}
#sidebar iframe {
margin:0px;
padding:0px;
border-color:#f9c473;
border-style:solid;
border-width:1px;
border-radius:25px;
-moz-border-radius:25px;
z-index:-1;
}

Is hier een truuk voor? Of mis ik iets? Als het onmogelijk is, overleg ik wel om dan maar een vierkant vlak te gebruiken... Maar het liefst zoals de ontwerper het wilde.

Testcase staat hier online: http://www.joopiesplace.nl/phoenix/index.html

Alvast bedankt!

[Brutes]

Een tip: bekijk de site maar eens in een browser die geen CSS3 ondersteund, zoals IE8. Dan wordt je hele layout uit elkaar getrokken...

[Joopieboy]

Zover was ik nog niet, maar dat zou best wel eens kunnen, betekend dat ik voor de oudere IE's een aparte stylesheet moet gaan maken.

[harrald]

Waarschijnlijk gaat dit alleen lukken als je 4 ronde hoek afbeeldingen maakt en die absoluut positioneert in de hoeken met een z-index die hoger ligt dan het iframe.
Dan zal je voor elke hoek een 'shim' moeten maken met een lege iframe omdat anders het youtubeiframe nog steeds boven je afgeronde hoek zal staan.

Ik ooit wel eens afgeronde hoekjes gemaakt boven een googlemaps map. Maar weet zo even niet heel precies meer hoe ik dit toen heb gemaakt. Helaas heb dit ook niet meer als voorbeeld.

Je kan er niet simpelweg een laag boven leggen want dan kan er niet meer op het youtubefilmpje geklikt worden. Dus echt alleen de 4 hoekjes.

[Voor 12% gewijzigd door harrald op 01-07-2011 13:57]

[Bosmonster]

Joopieboy schreef op vrijdag 01 juli 2011 @ 13:50:
Zover was ik nog niet, maar dat zou best wel eens kunnen, betekend dat ik voor de oudere IE's een aparte stylesheet moet gaan maken.

Nee, dat betekent dat je niet snapt wat progressive enhancement inhoudt.

Daarnaast, wil je werkelijk een stuk van je video en interface af gaan knippen?

(ook de reden waarom afbeeldingen niet zullen gaan werken voor ronde hoeken, dan kun je de controls helemaal niet meer gebruiken)

[Voor 14% gewijzigd door Bosmonster op 01-07-2011 13:58]

[Joopieboy]

@harrald: Dat is wel jammer, maar ik kan hier idd eens mee gaan experimenteren! Dankjewel.
Zou u dit kunnen opzoeken voor mij?

Progressive enhancement? Daar ben ik bekend mee ja, kijk maar eens naar mijn website. Maar ik ben op dit moment bezig puur met IE9... En ik moet toegeven dat dit niet mijn sterkste punt is.

En sja, mijn keuze is het niet, keuze van de ontwerper.

[Voor 68% gewijzigd door Joopieboy op 01-07-2011 14:06]

[Anoniem: 96523]

Rondje hoeken (CSS3) is niet mogelijk op iframes, maar bijvoorbeeld ook niet op een object (waar je normaal flash mee aanroept).

Ik kan wel één oplossing bedenken waar de designer (waarschijnlijk) geen problemen mee heeft:
maak een screenshot van het filmpje, zet daar de ronde hoeken omheen en maak er een link van. Wanneer iemand op de afbeelding klikt open je de video in een lightbox.

[MueR]

Joopieboy schreef op vrijdag 01 juli 2011 @ 13:58:
En sja, mijn keuze is het niet, keuze van de ontwerper.

Het is jouw taak om tegen een ontwerper te zeggen "heel leuk, maar dit kan niet op het web". Als we zomaar alles doe wat ontwerpers tekenen, is het einde zoek. Lastig is het overigens wel, want er zijn veel te veel "ontwerpers" die leuk drukwerk kunnen maken en dus denken dat websites gewoon hetzelfde zijn.

[Joopieboy]

Anoniem: 96523 schreef op vrijdag 01 juli 2011 @ 14:30:
Rondje hoeken (CSS3) is niet mogelijk op iframes, maar bijvoorbeeld ook niet op een object (waar je normaal flash mee aanroept).

Ik kan wel één oplossing bedenken waar de designer (waarschijnlijk) geen problemen mee heeft:
maak een screenshot van het filmpje, zet daar de ronde hoeken omheen en maak er een link van. Wanneer iemand op de afbeelding klikt open je de video in een lightbox.

Dat is wel een heel goed idee, thnx!

MueR schreef op vrijdag 01 juli 2011 @ 14:36:
[...]

Het is jouw taak om tegen een ontwerper te zeggen "heel leuk, maar dit kan niet op het web". Als we zomaar alles doe wat ontwerpers tekenen, is het einde zoek. Lastig is het overigens wel, want er zijn veel te veel "ontwerpers" die leuk drukwerk kunnen maken en dus denken dat websites gewoon hetzelfde zijn.

Mm daar heb je wel gelijk in. Ik heb net al een mail gestuurd dus ik ben eens benieuwd.

Edit: ik heb al antwoord gehad. 'Het val toch weg tegen wat erboven en eronder staat', dus het is prima zo.
Dank jullie wel voor alle hulp en het meedenken.

[Voor 7% gewijzigd door Joopieboy op 01-07-2011 15:17]

[noes]

Anoniem: 96523 schreef op vrijdag 01 juli 2011 @ 14:30:
Rondje hoeken (CSS3) is niet mogelijk op iframes, maar bijvoorbeeld ook niet op een object (waar je normaal flash mee aanroept).

Kan wel met flash, iframe weet ik niet.

In je flash parameters zet je wmode = opaque, zo wordt ie binnen de HTML gerenderd ipv als layer er boven op. Nu kan je een soort overlay maken met de hoeken dmv absolute positioning & z-index. Zo kan je ook dropdown menu's etc boven flash laten vallen. In hoeverre je die parameters kan aanpassen bij youtube integratie weet ik niet, maar anders kan je altijd kijken naar flowplayer of jwplayer.

Bosmonster schreef op vrijdag 01 juli 2011 @ 13:58:
[...]
Nee, dat betekent dat je niet snapt wat progressive enhancement inhoudt.

Als je met de opdrachtgever hebt afgesproken dat je IE7 en 8 ook ondersteund, zal je wel moeten. Progressive enhancement is leuk, maar een beetje lastig te verkopen aan een bedrijf waar iedereen IE7 gebruikt. Zodra iedereen in ieder geval op een IE9/Firefox4 (en vergelijkbaar) niveau zit qua browser, zal progressive enhancement echt kunnen gaan werken.

[Voor 28% gewijzigd door noes op 01-07-2011 15:39. Reden: progressive enhancement]

[Joopieboy]

Mja het is sowieso extreem lastig met een website te ontwikkelen, deze klant gebruikt gelukkig een 'moderne up to date' browser. En heeft verder geen eisen qua ondersteuning. Maar dit is wel iets waar ik zelf mee bezig ben.
Alleen wat in IE9 goed gaat, gaat bv in IE8 op 1 punt de mist in, maar IE7 maakt er helemaal een potje van...
Dat soort dingen.

[418O2]

ligt vaak aan de manier waarop je eea opbouwt. Als je het goed doet, hoef je meestal niet heel veel aan te passen voor IE7/8.

Het zou al een hoop schelen als je een xhtml1.0 of html5 doctype zou gebruiken.

[Joopieboy]

Nouja ik hoef nu ansich ook niet veel aan te passen, maar ik zag in IE7 dat de site 1 venster omlaag werd verplaatst. Dus dat word nog leuk.

[418O2]

Je draait IE9 he?

Als je test met de comptabiliteitsmodus of het in IE8 of IE7 nog werkt, dan kan ik je nu alvast vertellen dat dat weinig zin heeft.

[Joopieboy]

Nee Virtualbox met XP, en IE7.

[Voor 9% gewijzigd door Joopieboy op 01-07-2011 16:32]

[_naranya]

Waarom zou je ook de hoekjes van een filmpje willen af willen ronden, je wilt toch je hele film zien en niet 95%

[Joopieboy]

_naranya schreef op vrijdag 01 juli 2011 @ 16:32:
Waarom zou je ook de hoekjes van een filmpje willen af willen ronden, je wilt toch je hele film zien en niet 95%

Kijk, de ontwerper heeft zich wat leuks bedacht, klant vind het ook allemaal maar gaaf, en ik als 'simpele' website bouwer moet maar doen wat ze willen. Alleen dit gaat dus niet haha.

[418O2]

Dit moet je gewoon niet willen, je krijgt onherroepelijk issues met dat embed element.

Je bent net begonnen met websites maken of niet? Je moet echt gauw leren dat je designers soms moet afremmen en duidelijk maken dat sommige dingen binnen het redelijke niet te realiseren zijn. Als ik de site zo zie, kan ik me niet voorstellen dat er erg veel budget is en derhalve past zo'n oplossing niet echt in het kostenplaatje.

Is het altijd hetzelfde videootje btw? Dan zou ik hem gewoon laten rerenderen met die hoekjes in het filmpje zelf en dat zelf embedden met een videoplayer.

[Joopieboy]

Ik bouw al enige tijd websites, en sinds 2008 ben ik echt actief met sites maken voor mensen, etc. Dus al een geruime tijd eigenlijk. Normaal gesproken maar ik zelf ontwerpen (redelijk strak en straight forward), maar deze klant wou een behoorlijk gewaagd ontwerp. Dus in dat opzicht is dit wel mijn 1e keer dat ik te maken heb met zo een ontwerp bureau.

Qua kosten, het moet idd allemaal niet te duur.

En het is gewoon een standaard video van youtube ja, niet te moeilijk. Er bestaat misschien een kans dat er een speler online komt te staan, wss een plugin vanuit wordpress maar dat moeten we nog even kijken.

[Voor 31% gewijzigd door Joopieboy op 01-07-2011 18:19]

[PainkillA]

Dit soort zaken wil je niet bouwen. De klant is met dit geknoei straks 50% van zijnjbudget kwijt aan nog geen 5% van de site (schatting) Ook ga je zoals eerder aangegeven veel issues krijgen met verschillende browsers.

[Joopieboy]

Mwow de layout is nu wel goed hoor, dat viel me reuze mee. Tuurlijk heb ik niet echt alles gedaan zoals de ontwerper wou, maar ik kan het prima onderbouwen. En de boel is zelfs gevalideerd door W3C.

Enige waar ik nu tegenaan loop is mijn beperkte javascript kennis. Ik heb 1 div, waarin bij de ene link een lijstje met links in moet komen, en bij een andere link een andere lijstje met links in dezelfde div. Maar ik krijg het niet voor elkaar...

Zie: [javascript] Div openen/sluiten + wisselen van plaatje

Edit: dat eerste is al gefixt, maar nu nog dat je 2x moet drukken op een link als je een menu hebt laten openstaan.

[Voor 15% gewijzigd door Joopieboy op 04-07-2011 00:05]