Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Ongewenst erven van stijlen

4 antwoorden
  • Ik zit met het probleem dat een IMG tag zijn stijl "over erft" van een parent stijl. En het lukt me niet om dat ongedaan te maken. Situatie: Op een gedeelte van mijn website wil ik alle afbeeldingen in het midden gecentreerd hebben, met een bordertje er omheen. Dit gedeelte staat in een DIV met als ID: "entriescontent" In de stylesheet heb ik gedefinieerd: [code:1:e29efe7e15] #entriescontent img{ display: block; margin-right: auto; margin-left: auto; border: 1px solid #333333; }[/code:1:e29efe7e15] Dit werkt prima. Echter, nu wil ik binnen de div "entriescontent" toch graag een plaatje hebben dat gewoon links staat uitgelijnd, en zonder border. Daarom heb ik een nieuwe style aan de stylesheet toegevoegd: [code:1:e29efe7e15] .imageleft img{ display: block; margin-right: auto; margin-left: 0px; border: none; }[/code:1:e29efe7e15] En in de HTML zet ik dan: [code:1:e29efe7e15] <div class="imageleft"> <img src="plaatje.jpg" /> </div> [/code:1:e29efe7e15] Helaas, de bewust afbeelding blijft de stijl van "entriescontent" gewoon gebruiken en trekt zich niks aan van "imageleft". Heeft iemand hier een verklaring voor, of nog beter, weet wat ik er aan kan doen?
  • Misschien werkt dit? Ff snel gekeken, niet getest: CSS:[code:1:8bc08ca5cc]#entriescontent img{ display: block; margin: 0 auto; border: 1px solid #333; } img.imageleft{ display: block; margin: 0; border: none; }[/code:1:8bc08ca5cc]HTML:[code:1:8bc08ca5cc]<div id="entriescontent"> <img src="plaatje1.jpg" /> <img src="plaatje2.jpg" class="imageleft" /> </div>[/code:1:8bc08ca5cc]Overigens vind ik wel dat je betere namen kan kiezen dan "imageleft", aangezien het hele punt van CSS in deze situatie is om structuur en stijl van elkaar te scheiden. Wat nou als je volgende maand besluit dat hij rechts uitgelijnd moet worden, dan verander je de stijl naar bijvoorbeeld "float: right;" en staat er in je HTML nog doodleuk "imageleft". Snap je een beetje waar ik heen wil? Hoe dan ook, ik vermoefd dat het bovenstaande zal werken (evt met een kleine correctie). - Bas
  • Dit heeft te maken met CSS-specificiteit. Regels met een id erin zijn altijd 'sterker' dan regels zonder. Wil je een regel met id erin overrulen, dan kun je dat doen door specifieker te zijn dan je reeds was. In dit geval wil je een id+element overrulen. Omdat een id altijd zwaar telt, kun je de sterke regel alleen overrulen door in de zwakke regel minstens een id toe te voegen, dus met #entriescontent .imageleft img moet het werken. Je hebt trouwens niet eens een div nodig, alleen de class op de img zetten en een regel voor #entriescontent .imageleft moet werken (id+class is sterker dan id+element). Zie voor meer info de google search naar [url=http://www.google.nl/search?q=css+specificity]CSS specificity[/url] (bijv. van Malarkey of HTML-dog).
  • @boelieboelie: Tnx! It does the job! Ik had geen idee hoe ik die onderlinge prioriteiten goed kon krijgen. Nou zo dus. Hier schiet mijn bescheiden CSS kennis duidelijk tekort :-) Interessante site overigens, ik ga ze eens nader bestuderen. @BasHamar: Je hebt gelijk over die benaming. Helaas gaat dat soms zo bij mij. Ik stuit onverwacht op een probleem, wil het snel oplossen, kan zo snel geen duidelijke naam verzinnen en gebruik dan maar het eerste wat in me opkomt. De oplossing werkte overigens niet helaas, maar uit boelieboelie's antwoord blijkt wel waarom. Bedankt allemaal.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.