Hoi hoi,

ik zit met een klein probleempje. Ik heb mijn mobile en desktop-versie op zo'n manier gewireframed dat ik niet op en nette manier responsive gesliced krijg. Iemand die een idee heeft hoe ik onderstaande mockup best uitwerk? Het gaat voornamelijk over die profilepicture (Lion king) die een grote sprong maakt.



Bedankt!
Hoe is de leeuw links (PC) gepositioneerd? Float? Of met position: absolute?

In geval laatste: makkelijk, nieuwe positie toewijzen.
In geval eerste (wat logisch lijkt)... zorgen dat het in de HTML eerder komt dan de tekst.
En dan gewoon display: block;

In theorie begin je met mobiel, dus is de (html) volgorde: leeuw, kop, tekst.
In je PC-ding ga je dan met position: absolute/relative aan de slag.
Ik zou het in dit geval andersom doen, aangezien werken met absolute positioneren echt niet goed is voor het positioneren van de hoofd pagina elementen.

Mijn oplossing, al vind ik het echt niet mooi: http://jsbin.com/AWeLISE/1

om de reponsiviteit te testen: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fjsbin.com%2FAWeLISE%2F1

PS: Het plaatje in de beginpost is nou niet echt een wireframe of lockup, het is al een volwaardig design.

PS2: Het is "I am Jasper" of "I'm Jasper", niet "I'am Jasper". De eerste vorm is formeel, de 2e spreektaal/informeel.
De elementen waren inderdaad gewoon gefloat.

Er zit dus niets anders op dan spelen met de position absolute?

Is het een idee om 2x de afbeelding in de HTML te zetten en a.d.h.v. welke state display block of display none? Maar dat is al helaal niet semantisch.

Reageren