20/04/2015 00:39:08
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
HTML:
<div id='wrapper'>
<section id='img'>
<img src="hond.jpg" />
</section>
<section id='openingstijden'>
<p>09:00 - 00:00 MA<br>
09:00 - 00:00 DI<br>
09:00 - 00:00 WO<br>
09:00 - 00:00 DO<br>
09:00 - 00:00 VR<br>
09:00 - 00:00 ZA<br>
09:00 - 00:00 ZO<br></p>
</section>
</div>
#naam {
margin-left:30%;
clear: both;
}
#wrapper section {
margin-left: 1%;
display: inline-block;
border: 2px solid black;
}
#img img{
width: 25%;
height: 25%;
}
19/04/2024 20:22:11
20/04/2015 09:38:02
Hoi Peter,
Je code in JS Bin gezet.
Lijkt te gewoon te werken.
->
http://jsbin.com/xaneboponi/3/edit?html,css,output
En zonder inline:block
->
http://jsbin.com/quvicivesa/1/edit?html,css,output
Grt Pieter
Gewijzigd op 20/04/2015 09:42:57 door
Pieter R
20/04/2015 11:16:40
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.
20/04/2015 11:25:05
TLDR;
Probeer eens je img tag de volgende attributen mee te geven:
Code (php)
1
2
3
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.
20/04/2015 11:41:53
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.
Toevoeging op 20/04/2015 11:51:03:
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!
20/04/2015 11:52:07
Wanneer je een responsive ontwerp probeert te realiseren hoef je echter niet altijd met % te werken zoals margin-left:30%;
Misschien is het voor jou handig om naar een framework te kijken zoals
Bootstrap.
Je kunt ook alleen de image zelf de attributen meegeven zoals in mijn vorige post en dan even spelen met de max-width:;
Code (php)
1
2
3
4
5
#img img{
width: 35%;
height:auto;
display:inline-block;
}
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.
20/04/2015 12:02:55
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.
20/04/2015 13:18:06
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 :-)).
20/04/2015 14:47:14
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.
