[CSS] Fluid/responsive website met 'vaste' plaatsing buttons

[handige_harrie]

TL;DR: Hoe kan ik buttons plaatsen op een vaste plek tov een (background) image, terwijl deze image responsive is en diens grootte of positie dus afhangt van de grootte van het browservenster. Ik heb twee losse oplossingen maar zoek de combinatie.

Ik ben bezig een portfolio site te bouwen; die zowel op desktop als mobile er goed moet uitzien. Het gaat om het eindresultaat maar ook om er zelf wat van op te steken, want als UI/UX'er heb ik praktisch geen recente web ervaring; tijd om daar verandering in te brengen. Met mijn stoffige css-kennis, google en stackoverflow ben ik al best een eind gekomen vind ik zelf. Overigens heb ik geen bezwaar om js/jquery of andere handige tools te gebruiken (nog niet naar gekeken), wat ook maar het handigst is om dit enigzins net te bouwen voor mobile/desktop en alle relevante browsers.

De bedoeling is dat de site een venstervullende achtergrondfoto is met daarin verschillende segmenten die video-loopjes krijgen bij :hover* (en klikbaar worden naar meer info). Die positie van de videos moet precies overeen komen met de achtergrondfoto, en is vrij arbitrair; m.a.w. ik kan het niet in bv. een grid proppen. *Overigens ga ik er voor zorgen dat de video's niet afspelen op mobile, want dat is alleen maar irritant.

Dat is me al gelukt, zie hier:
voorbeeld 1
hover op het beeldscherm voor een quick&dirty voorbeeld. Als je browsergrootte verandert zie je dat de video netjes op z'n plek blijft. Dit werkt zo:

code:

#container {
    width:100%;
    height:auto;
    padding:0;
    margin:0;
    border:0;
}
#bg { /*achtergrondfoto*/
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height: auto;
    z-index: -1;
}
#screen { /*de video*/
    opacity: 0;
    position: absolute;
    margin-left: 53.33%; /*custom, maar dat geeft niet; het werkt*/
    margin-top: 20.14%; /*custom*/
    width:25.89%; /*custom*/
}
#screen:hover {
    opacity: 1;
}

Echter, nu wil ik de boel ook enigzins elegant laten schalen; in 3 stadia:
stadium 1. ratio: <4:3 (width: 100% van een 4:3 afbeelding)
stadium 2. ratio: 4:3<16:9 (height: 100%, hier wordt langzaam meer zichtbaar van de 16:9 afbeelding)**
stadium 3. ratio: >16:9 (width: 100% van de 16:9 afbeelding)

Ook dat heb ik voor elkaar met media queries die kijken naar de screenratio van de browser:
voorbeeld 2

De vraag is nu, hoe combineer ik beide voorbeelden? Omdat in stadium 2 de positionering van de afbeelding zo anders werkt met de centrering 'hack', en de video in het eerste voorbeeld is gepositioneerd tov het browservenster. Veel handiger zou zijn als ik de video zou kunnen positioneren tov een container div. (Hoe) kan dit?

**Ik test vooralsnog eigenlijk alleen in Chrome. In Edge en Safari (iphone5) gaat ie in stadium 2 stuk. Tips? Kan dit zonder deze 'hack'?

code:

/*in de media query voor stadium 2*/
    #container {
    float: right;
    right: 50%;
    position: relative;
}

#sixteennine { /*16:9 ratio image*/
    float: right;
    right: -50%;
    position: relative;
    height: 100%;
    z-index: -1;
}

Alvast bedankt!

[eXtreaL]

Wat ik zou proberen is om in je eerste voorbeeld "position: relative;" aan #container toe te voegen. Dit zal ervoor zorgen dat alle absoluut gepositioneerde elementen in deze container relatief zijn aan de omvang van de container.

Daarnaast zou ik op #bg de position, left, top en z-index properties verwijderen. Dit zal ervoor zorgen dat de container ook daadwerkelijk wordt uitgerekt naar de grootte van de content (in dit geval de afbeelding). Zoals je nu waarschijnlijk wel hebt gezien heeft de container een hoogte van 0 pixels, doordat alle elementen hierin absoluut gepositioneerd zijn.

Tot slot zou ik op #screen de margin-left en margin-right property vervangen voor "left" en "right". Je bent je element namelijk aan het positioneren, margin gebruik je in feite alleen om "ruimte" om een element heen te creëren.

Kijk maar eens of je hier nu wat verder mee kunt komen . Als dit niet lukt, is het wellicht handig om je voorbeeld in een Codepen (http://codepen.io) te zetten en hier te linken. Dan kan ik je aan de hand daarvan wel even een aangepast voorbeeld sturen.

[handige_harrie]

Thanks voor de tips; dat is al wat netter . Ik heb echter nog geen verder succes geboekt met het elimineren van de centrering hack/het werkend krijgen in andere browsers.

Hoewel dit in Chrome werkt, gaat ie ook in jsfiddle stuk op dit middelste stadium:
https://jsfiddle.net/ponke008/kumou0ok/

In Edge kan ik zien dat ie de -50% doet t.o.v. de afbeeldingsgrootte (1920px, dus -960px) en niet 'dynamisch' t.o.v. de breedte van het browserwindow zoals in Chrome.

Ik heb nog niet geprobeerd om de buttons mee te verplaatsen. Het liefst fix ik eerst dit cross-browser probleem.

[handige_harrie]

Sjongejonge, na lang klooien heb ik iig het cross-browser probleem er uit:
https://dl.dropboxusercon...5739/site/fluidtest3.html

code:

/*in de media query voor stadium 2*/
    #container {
    float: right;
    right: 50%;
    position: relative;
}

#sixteennine { /*16:9 ratio image*/
    float: right;
    right: -50%;
    position: relative;
    height: 100vh; */dit was eerst 100%*/
    z-index: -1;
}

Dat is het grote nadeel van Google en Stackoverflow; je krijgt zoveel verouderde antwoorden met allerlei complexe workarounds; terwijl letterlijk 2 characters veranderen het probleem kan oplossen...

Vwb browser-support van 'vh', dit is geen probleem:
http://caniuse.com/#feat=viewport-units

Nu door met het button probleem!

[handige_harrie]

Verdere progressie, de button (video) blijft nu ook goed op z'n plek:
https://dl.dropboxusercon...ite/fluidtest-button.html

Ik heb alleen nog een gek probleem bij de mate waarin ik in het eerste stadium (<4:3) de video verder naar rechts moet verplaatsen dan je zou verwachten. Komt neer op zo'n +1,12%, waar die nou vandaan komt ben ik nog niet achter.