images nemen andere waarde aan dan ingesteld

[Verwijderd]

Ik ben nog niet zo heel lang bezig met html,css en php, maar vind het steeds leuker en interresanter worden namate ik meer en meer leer.

Ik ben dan ook begonnen aan een eigen website waar ik het o.a. over fotografie wil gaan hebben.

Alles lukt aardig en ik heb al een stukje online gezet om te testen in verschillende browsers, maar ik zie al een probleem, warvan ik de oplossing niet kan vinden de images aan de linkerzijde van de pagina zijn nl ongeacht welke waardes ik invoer altijd 188px breed.

De img code die ik gebruik is bijvoorbeeld:

code:

[img]"images/mat/sony-p31.jpg"[/img]

De breedte is dus ingesteld op 130px en de hoogte 86px, maar als ik de site inlaad word het plaatje 188px bij 86px weergegeven en dat gebeurt bij alle plaatjes die aan de linker zijde staan.

het stukje css waar ik de plaatjes aan de linkerzijde defineer is

code:

#cont img.left {
            float: left;
            margin: 5px 10px 0 0;
        border: 1px solid #e0e0d0;
      }

(Ook als ik de margin geheel op 0px blijven de plaatjes aan de linker zijde 188px breed)

Ik snap er niets van om eerlijk te zijn, want als ik een waarde hard invoer in de img-tag mag hij toch niet zomaar een andere waarde toegewezen krijgen als de pagina geladen word??

Het is ook alleen aan de linkerzijde, de plaatjes aan de rechterkant worden wel zoals bedoeld weergegeven.

O-ja ook even de pagina waar het omgaat voor het geval er extra info over de opmaak nodig is:

http://awol.be/index.php?page=about

[ Voor 10% gewijzigd door Verwijderd op 21-02-2006 13:03 ]

[André]

In je #content .left staat een width: 188px die daar voor zorgt, haal die maar eens weg.

[Verwijderd]

Verrek ja dat is em.

Ik dacht dat de class .left in div content geheel losstond van de class aangegeven in de img, maar blijkbaar bent verplicht iedere class een unieke naam te geven, zodat dit soort dingen voorkomen worden.

Weer wat geleerd mijjn dank

[crisp]

#content .left is een sibling-selector en matched daarom alle elementen binnen #content die een class 'left' hebben. Daarnaast gaat CSS boven HTML-attributen.
Als je enkel directe children van een bepaald element wilt targetten kan je de child-selector gebruiken (in alle browsers behalve IE < 7):

Cascading Stylesheet:

#content>.left

Eventueel zou je ook gewoon styles kunnen overrulen door specifieker te zijn, of net zo specifiek maar rekening houdend met volgorde:

Cascading Stylesheet:

#content .left {
  width: 180px;
}
#content #cont img.left {
  width: auto;
}

Dit heeft alles te maken met specificity en cascading.

[ Voor 15% gewijzigd door crisp op 21-02-2006 13:26 ]