1. Wim (v/h tralala)
  2. de Cock
  3. Templates
  4. maandag 09 november 2020
In de CSS van een gebruikt template staan alle img's in beginsel op 100%. Dat wil ik niet altijd. Als ik beeld naast tekst zet en links of recht uitlijn, krijgt het de breedte die ik via JCE opgeef. Maar een beeld onder of boven tekst wordt dan toch altijd weer 100% van de beschikbare ruimte.
Die 100%-bepaling van het template wil ik opheffen in custom-css. Dat lukt niet met bijvoorbeeld width:none of auto. Hoe lukt dat wel?
Interlijn.nl, praktisch webdesign.
Geaccepteerde antwoord Pending Moderation
Hoi Wim,

Twee vragen:
Heb je, na het aanbrengen van jouw custom CSS, in je browser console gecheckt of die CSS wel wordt toegepast?
En: welk eindresultaat wil je precies bereiken voor de afbeelding boven een artikel?

Maurice
  1. 2 weken geleden
  2. Templates
  3. # 1
Geaccepteerde antwoord Pending Moderation
Hi Maurice, ja custom.css werkt.
Wat ik wil bereiken is dat een afbeelding die onder of boven tekst staat (dus op een vrije regel) niet automatisch op volle breedte wordt vertoond. Daarom wil ik weten hoe ik de templatebepaling width:100% teniet kan doen. Die regel uit het template slopen kan natuurlijk ook, maar dat is dirty en niet duurzaam.
Ik maakte de site voor iemand anders, pro deo, dus ik zal de inhoud niet steeds zelf kunnen sturen.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 2
Geaccepteerde antwoord Pending Moderation
Avond,

en onderstaande code werkt dat dan wel?
width: auto !important;

groeten Ron :)
  1. 2 weken geleden
  2. Templates
  3. # 3
Geaccepteerde antwoord Pending Moderation
Helaas, !important helpt niet.
Ik begin te vrezen dat ik iets in de core-css van het template moet uitcommenten.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 4
Geaccepteerde antwoord Pending Moderation
Heb je al in de instellingen van jouw template gekeken. Daar kan het ook nog staan. Welke template gebruik je?
  1. 2 weken geleden
  2. Templates
  3. # 5
Geaccepteerde antwoord Pending Moderation
Vreemd dat !important; niet werkt, zou eigenlijk wel het geval moeten zijn.
Heb je daarna ook in de console gekeken of jouw custom code wel laadt (en niet wordt overklast door iets anders)?

Kunnen we misschien meekijken? Heb je een link?
  1. 2 weken geleden
  2. Templates
  3. # 6
Geaccepteerde antwoord Pending Moderation
Zo ziet het er nu uit:
https://interlijn.nl/img-css.jpg
In plaats van 'auto' probeerde ik ook al none, 0, inherit of helemaal niks, met of zonder !important. Een ander percentage helpt ook niet, want zou per afbeelding anders kunnen zijn.
Ik vind het een steeds sterkere uitdaging worden om te weten hoe je zo'n 100%-bepaling overrulet.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 7
Geaccepteerde antwoord Pending Moderation
In jouw afbeelding zie ik nog een stukje code dat volgens mij van invloed is. Het staat direct onder de template code die je hebt overschreven: .img.
  1. 2 weken geleden
  2. Templates
  3. # 8
Geaccepteerde antwoord Pending Moderation
Maurice, je bracht me op een idee. Niet om ".img" aan te passen, maar juist "img". Als ik daar met Inspector 'height:auto' uitschakel, wordt de afbeelding zo groot als zelf opgegeven. Maar ja, blijft de vraag: hoe overrule ik dat met custom-css? Niet met none, of 0 of inherit.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 9
Geaccepteerde antwoord Pending Moderation
Wim,

Voor zover ik weet, zorgt de 'auto' waarde bij Hoogte ervoor dat de afbeelding kan schalen naar gelang de resolutie van het apparaat waarmee de pagina wordt bekeken.

Misschien kun dit combineren met max-width, als volgt:


img {
max-width: 100%;
height: auto;
}


max-width zorgt ervoor dat de afbeelding op oorspronkelijke grootte wordt getoond, maar nooit groter (dus als de afbeelding 500 pixels breed is, en je bladspiegel 900, dan wordt hij niet op volle breedte getoond.
Misschien moet je dit ook even inpassen in je eerdere custom code.

Laat me even weten hoe dit uitpakt.
  1. 2 weken geleden
  2. Templates
  3. # 10
Geaccepteerde antwoord Pending Moderation
Helaas Maurice, werkt niet. Ook niet met 2 x !important.
Overigens, een afbeelding van 500px wordt in een bladspiegel van 900px met max-width:100% volgens mij 900 breed getoond.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 11
Geaccepteerde antwoord Pending Moderation
Staat jouw website lokaal of kan ik er met een link zelf ook naar kijken?
  1. 2 weken geleden
  2. Templates
  3. # 12
Geaccepteerde antwoord Pending Moderation
Hi Maurice, gaat om deze pagina: [verwijderd]
Waarschuwing: zeer religieuze zaken...
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 13
Geaccepteerde antwoord Pending Moderation
Dank je.

Pas jouw eerdere custom code als volgt aan:


.view-category .item img, .view-article .item img {
max-width: 100%;
}


De breedte van de body is 1100 pixels maximaal, dus als je ervoor zorgt dat je afbeeldingen (bijvoorbeeld) maximaal 550 pixels breed zijn dan beslaan ze maximaal de helft van de breedte.
  1. 2 weken geleden
  2. Templates
  3. # 14
Geaccepteerde antwoord Pending Moderation
H punt pindakaas.
Die 100% moet dus juist worden weggewerkt.
Ik denk dat ik die regel maar uit het template sloop. Zal er toch vrijwel zeker nooit van komen om die te updaten.
Daarmee zou mijn 'probleem' zijn opgelost. Maar het zint me nog altijd niet dat ik dit niet met fatsoenlijke css kan oplossen.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 15
Geaccepteerde antwoord Pending Moderation
Die 100% moet dus juist worden weggewerkt.


Middag,

als je die op 50% zet of andere getal kom je dan niet bij het gewenste resultaat?

Groeten Ron :)
  1. 2 weken geleden
  2. Templates
  3. # 16
Geaccepteerde antwoord Pending Moderation
Bij het plaatsen van de afbeelding (/images/PROEF_FOTOS/LPK_groepsfoto_2011.jpg) wordt er een inline-css gebruikt. Deze overrulled altijd de custom.css, wat je daar ook ingeeft. Bij betreffende afbeelding is de breedte 656px en de hoogte 519px. Zorg er dus altijd voor dat, als je een afbeelding plaatst, deze geen inline-code bevat. De inline-css wordt aangemaakt bij het importeren, daar kun je ook geen waarde ingeven, zodat de afbeelding wordt geimporteerd op de waarden die het beeld heeft. Vervolgens kun je met css de beelden gaan stylen.
Bijlagen
  1. 2 weken geleden
  2. Templates
  3. # 17
Geaccepteerde antwoord Pending Moderation
Hi Patrick, dit is allemaal wel bekend.
Je bent wat op een verkeerd been gezet omdat de inhoud van de hier geposte pagina inmiddels door de gebruikers is aangepast – daarom heb ik die nu maar verwijderd.
Het oorspronkelijke probleem was én is nog altijd: als je een foto op een lege regel plaatst onder of boven de tekst, krijgt die niet de opgegeven gewenste breedte, maar wordt die altijd 100% omdat dat in het template zo is vastgelegd.
De vraag was en is nog steeds: hoe overrule ik in custom.css de template-css van "img {width:100%;}"?

Het is nu een interessante, technische vraag.
Voor het smoel van deze website vinden we wel een oplossing.
Interlijn.nl, praktisch webdesign.
  1. 2 weken geleden
  2. Templates
  3. # 18
Geaccepteerde antwoord Pending Moderation
kan je de naam van de gebruikte template hier posten.
Ik heb al vele template gebruikt maar nog nooit eerder gemerkt dat als ik in een
artikel een foto plaats dat die dan automatisch naar 100 % gezet word.
Ik begin er eerder aan te denken dat er in de website al gebruikt wordt gemaakt
van override's aanpassing je zou eens kunnen kijken in map Templates: Aanpassen > html
of het niet daar ergens vandaan kan komen
Bijlagen
lvda
  1. 2 weken geleden
  2. Templates
  3. # 19
Geaccepteerde antwoord Pending Moderation
Hallo Wim,

en die 50% waar ik over spreek hier boven wat gebeurt er dan?

Kan je weer een link delen waar het probleem zich nog voordoet.

Groeten Ron :)
  1. 2 weken geleden
  2. Templates
  3. # 20
  • Pagina :
  • 1
  • 2


Er zijn nog geen reacties op dit bericht.
Wees een van de eersten om op dit bericht te reageren!