divs over images goedzetten

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

D B

D B

25/05/2015 22:29:13
Quote Anchor link
Hallo,

Ik ben met Flickr bezig een fotoalbum op mijn website te krijgen. Nu wil ik graag wat tekst over de foto zetten zodat je via deze foto als link het album kunt openen. Helaas krijg ik mijn div's niet goed uitgelijnd over de foto. Kan iemand mij hier mee op weg helpen? Ik wil zo weinig mogelijk vaste breedtes/hoogtes gebruiken.

Dit is wat ik nu heb:

http://jsfiddle.net/em4o44xh/

Op deze pagina staat een test:

http://www.zscwesterhoven.nl/fotostest.php
 
PHP hulp

PHP hulp

21/11/2024 19:58:09
 

26/05/2015 00:16:53
Quote Anchor link
huh? Je hebt een span eromheen?

Tis een goede gedachte maar niet correct.

Dit is correct.

http://jsfiddle.net/em4o44xh/3/
 
Ozzie PHP

Ozzie PHP

26/05/2015 00:42:36
Quote Anchor link
grappig gemaakt Rickert :)
 

26/05/2015 09:17:43
Quote Anchor link
Dankje, kleinigheidje :)
 
D B

D B

26/05/2015 11:02:09
Quote Anchor link
Hallo Rickert,

Dit heb je super gemaakt! Werkt goed.

Ik heb alleen 1 klein ding, namelijk als mijn description langer is maakt hij mijn div te breed. Mijn div moet eigenlijk niet groter zijn als mijn image (150x150). Kan ik dit oplossen zonder vaste breedte mee te geven? Of is dit niet erg om een vaste breedte mee te geven? (ivm browser/mobiel compatible)
 

26/05/2015 11:17:28
Quote Anchor link
Hoi D B,

Natuurlijk kan dit. Wat houd je tegen ;)

Wat is je aanraadt is de div een vaste breedte te geven zodat deze niet verder kan oprekken dan jij aangeeft.
En ook zou ik dit doen met percentages, dit ivm responsiveness.

Eerst zelf proberen natuurlijk en daarna gaan we je helpen als je met wat antwoorden komt :)
 
D B

D B

26/05/2015 11:24:37
Quote Anchor link
Kijk hier kan ik wat mee :)

Ik zat dus inderdaad te twijfelen hoe dat op te lossen met responsive. Ik ga nu met percentages aan de slag.

Ook heb ik nu 2 coverlayers gemaakt, maar ze komen allebei van onder naar boven ingeschoven. Ben nog aan het kijken of ik er 1 van boven naar onder kan laten schuiven.

Toevoeging op 26/05/2015 11:46:26:

Ik heb het nu zo dat de breedte 12% is. Maar als ik nu mijn browser verklein, worden de foto's kleiner (dat is goed). Maar dan komen mijn coveroverlay's buiten de foto te liggen.

Wat kan ik hier nog in aanpassen?
 

26/05/2015 12:25:22
Quote Anchor link
Het lastige van percentages is dat het inderdaad altijd blijft schalen.
Je zal dus gebruik moeten maken van media-queries. Linkje

Doe ook gelijk als je iets hebt geprobeerd ofzo een nieuwe update van je JS-fiddle. Dan kan ik en andere developers zien wat je hebt gedaan en geprobeerd, dan kunnen we je juiste richting insturen want je doet het zo te horen netjes.

Toevoeging op 26/05/2015 12:40:34:

Heb trouwens gezien hoe je het hebt gedaan op je live voorbeeld.
Netjes kerel!

Ik had alleen een andere naam gebruikt i.p.v overlayA en overlayB.

.coveroverlayTop en .coveroverlayBottom

Ook leuk hoe je mijn voorbeeld hebt opgepakt en hier een tweede bij hebt gezet.
Wat je nu nog te doen staat is op maat van het scherm dit aan te passen of vastzetten zodat het altijd 150px x 150px is.

Makkelijkste oplossing is natuurlijk het 150x150 concept. Met percentages moet je veel queries maken en checken of het netjes werkt.

Wat ook een goede oplossing is:
Twitter Bootstrap, Linkje

En de HTML die erbij hoor is dan dit;
http://jsfiddle.net/em4o44xh/4/
 
D B

D B

26/05/2015 13:07:53
Quote Anchor link
Sorry, had even moeten melden dat ik het livevoorbeeld aangepast heb.

Zit namelijk met mijn api key dat ik het niet zomaar op jsfiddle kan zetten denk ik.

Ik heb nu even een vaste breedte gekozen, daar ik de hele site nog een keer aan wil pakken om hem responsible te maken, en mijn fotoalbum script nog veel verder uitgewerkt moet worden.

Ik zit nu nog met 2 dingen:
1) De tekst in de overlay loopt buiten de div (opgelost; kwam door de padding)
2) Met mijn query's krijg ik de albums niet in de goede volgorde. Kan ik hier iets mee met de AJAX-requests (met each loop lijkt de ene sneller binnen te zijn als de andere)?
Gewijzigd op 26/05/2015 13:46:46 door D B
 

26/05/2015 13:46:04
Quote Anchor link
De vaste breedte is denk ik een juiste keuze hier.

De tekst die uit de div loopt is een vervelend probleem maar kan je alleen maar met JS oplossen denk ik om te kijken dat de tekst niet meer dan een x aantal tekens is.

Verder weet ik niet hoe je het met JS moet doen, heb ook een Flickr API Library gemaakt in Codeigniter om te kunnen comminuceren met Flickr en mijn systeem.

http://www.tvmoordrecht.nl/fotoalbum

Hier verwijs ik niet naar Flickr maar worden de foto's opgehaald en getoond op de website.
 
D B

D B

26/05/2015 13:48:19
Quote Anchor link
Ik ga inderdaad ook nog uitbreiden, zodat de foto's ook getoond worden binnen de site. Maar ben begonnen met de albums :)

Tekst heb ik opgelost, was ik ook hierboven aan aan het passen :P (Maar inderdaad hele lange woorden moet ik gewoon niet gebruiken)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.