7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    14coen

    Afbeelding voor een gedeelte weergeven met CSS

    Hallo iedereen,

    Ik wil een afbeelding voor een gedeelte laten weergeven. Nu heb ik deze in een Divje gezet met de volgende css code:
    [code:1:abe2566f7c]
    width:190px;
    padding:0 -10px 0 -10px;
    [/code:1:abe2566f7c]

    Maar dit lukt niet, de afbeelding is 220 x 90 pixels. Aan allebij de kanten (links en rechts) moet 10 pixels eraf gesneden worden. Dat zou zo moeten werken, maar de div rekt in IE gewoon mee en in FF gaat de afbeelding er gewoon overheen.

    Ga nou niet zeggen: gebruik photoshop en snij er aan allebij de kanten 10 pixels af, want dat kan niet omdat het een “live” foto is van KNMI.nl.

    Link naar een voorbeeld: http://www.linkstraat.nl/test

    Vriendelijke groeten,
    Coen Keijzer

    Geblokkeerd
    Anoniem

    Hmm, dan zet jer er toch nog een layer overheen met een border ofzo?:)
    Of kan dat niet?

    Bijdrager
    tennapel

    De HTML
    [code:1:b348a19799]
    <div id="test">
    <img src="http://www.knmi.nl/waarschuwingen_en_verwachtingen/images/knmi_web_weersverwachting.png" title="Weersverwachtingen" />
    </div>

    De bijbehorende CSS:
    [code] #test {
    border : 1px solid red;
    width : 200px;
    overflow : hidden;
    }
    #test img {
    border : 0;
    margin : 0 0 0 -10px;
    padding : 0;
    }
    [/code][/code:1:b348a19799]

    Bijdrager
    14coen
    ”joram”

    Hmm, dan zet jer er toch nog een layer overheen met een border ofzo?:)
    Of kan dat niet?

    Ik heb het net opgelost met overflow:hidden;

    Bijdrager
    tennapel
    ”14coen”
    ”joram”

    Hmm, dan zet jer er toch nog een layer overheen met een border ofzo?:)
    Of kan dat niet?

    Ik heb het net opgelost met overflow:hidden;

    Inderdaad. Voortaan eerst langer pielen voor je een vraag post. Ik heb net 5 minuten verkwist.

    Bijdrager
    XXX

    [code:1:5499411a18]
    width: 190px;
    height: 90px;
    overflow:hidden;
    [/code:1:5499411a18]

    door overflow:hidden toe te voegen dwing je de box om jouw formaat aan te houden ipv de maat van de content

    Bijdrager
    addyboy

    [code:1:6aa1ed2ad1]
    background: url(image.jpg) no-repeat 0 -10px 0 -10px;
    width: 190px;
    height: ?px;
    [/code:1:6aa1ed2ad1]

    ?

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.