Ik heb een foto een widt: 25% gegeven, maar hij lijnt helemaal uit tegen de zijkant. Ik heb foto's al eens vaker op die manier inline-block met andere elemten gezet. Dus ik kan me echt niet bedenken wat er nu precies fout moet gaan. Heb zelfs al met projecten vergelijken waarin ik de zelfde techniek gebruikte. Heb een foto van het resultaat met border: http://nl.tinypic.com/r/6nxtl3/8
Ja zonder plaatje doet hij het ook gewoon, maar zodra ik het <img> element een bestands locatie geef gaat het mis. Dan maakt hij de width tot aan de rechterkant van het scherm. Bij mijn weten doe ik toch niks raars, ik zet gewoon sections in een wrapper en geef dan aan hoe groot ze moeten zijn.
Probeer eens je img tag de volgende attributen mee te geven:
max-width:100%;
height:auto;
display:block;
Vervolgens kun je de parent van de img een vaste breedte mee geven, hierdoor wordt je image zogenaamd 'responsive' en behoud hij zijn aspect ratio. Op deze manier moet het 100% werken.
Dus alles bij mijn IMG tag vervangen door dat? Heb ik gedaan en dan schiet het plaatje uit het scherm. IK wil ook juist dat die 25% is omdat ik ook een responsive ontwerp na streef. Daarom wil ik het niet gaan oplossen met Px. Aangezien ik dan dadelijk een element in de pagina heb die altijd een aantal px zal blijven.
[size=xsmall]Toevoeging op 20/04/2015 11:51:03:[/size]
Het spijt me voor de snelle reactie, had de parent nog niet aangepast. Maar ik snap wel nog steeds niet waarom die het niet gewoon zou doen in de CSS die ik had opgesteld. Maar echt super bedankt! Zal deze techniek zeker gaan onthouden voor als me dit de volgende keer weer gebeurt!
[size=xsmall]Toevoeging op 20/04/2015 11:54:06:[/size]
Ik zie nu pas je edit, ik ga gewoon dubbelposten.
De reden waarom het bij jou niet altijd werkt heeft waarschijnlijk te maken door de margins in percentages, probeer te debuggen via element inspecteren en probeer eens wat CSS styles uit te vinken en te kijken wat het met jouw element doet.
ja dit heb ik dus allemaal gedaan, ik heb gisteren zeker 2 uur en deze ochtend weer een 1 uur erop gezet. Ik heb hiervoor al een responsive website geschreven. Waar ik 4 plaatjes inline-block met 24% width 1% left-margin had. Dit werkte gewoon perfect, heb zelfs nu een van die zelfde plaatje gebruikt. Het enige verschil met wat ik nu heb is dat ik de sections (omdat dit een iets groter project is) in een div met ID wrapper heb gezet. Maar dit zou toch voor de CSS en HTML uitkomst helemaal niks moeten uitmaken. Wat ik dan weer niet wist is dat je ook met PX een responsive desing kon krijgen, dat is misschien leuk om eens wat mee uit te proberen.
Bootstrap is me al aanbevolen, maar ik wil eerst echt een website van scratch kunnen maken voor ik een framework eigen wil maken. Aangezien ik dan bang ben tegen simpele problemen (zoals deze) aan te lopen en deze dan niet te kunnen oplossen.
Peter, in Bootstrap hoef je dit soort problemen niet op te lossen, dat doet Bootstrap voor je. Ik was ook begonnen aan een website, 2,5 maand aan gewerkt, al dit soort problemen oplossen. Op een gegeven moment was ik het zo zat dat ik maar eens naar Frameworks ben gaan kijken. Ik heb Bootstrap gekozen en heb binnen een week alles waar ik hiervoor 2,5 maand over heb gedaan overgezet en het ziet er 100x beter uit (ik ben dus ook geen designer :-)).
Wanneer je leert met een framework omgaan in de front-end van een website kom je ook wel eens problemen tegen, alleen minder vaak omdat veel problemen al voor je zijn opgelost, dat wil niet zeggen dat je hier niet problemen van leert op te lossen. Je leert vanzelf welke classes of styles je kunt gebruiken naarmate je je hier meer mee bezig houdt, op den duur weet je ook precies wat elke stijl precies met je element doet.
Met PX gebruik voor responsive webdesign doelde ik eigenlijk op dingen zoals margin-left:20px;.
Kleine hoeveelheden pixels kan prima en daardoor breekt je ontwerp veel minder snel op mobiele apparaten.
