8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Bijdrager
    bvk

    css-perikelen; randje onder afbeelding, maar waarom?

    Ik heb op een site verschillende elementen, waaronder de volgende afbeelding, zie ook divje ‘mailons’.
    Het aantal pixels staat goed, maar ik krijg onder dit plaatje ‘mailons’ een kleine witte rand van ongeveer 2 a 3 pixels.

    Bij de andere afbeeldingen heb ik dat niet, maar waarom hier dan wel?
    Misschien zien jullie het, mijn dank is groot!
    ———————————————————
    deel vd code;

    #container {
    color: #D600A9;
    width: 888px;
    margin: 0px auto;
    background: #D600A9 url(‘../images/header_contact.jpg’) no-repeat top left;
    padding: 262px 0px 20px 0px;
    }

    #content {
    background: #FFF url(‘../images/content_roze.gif’) repeat-x bottom center;
    width: 340px;
    height: auto;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    position: absolute;
    z-index: 1;
    padding: 10px;
    padding-bottom: 40px;
    font-family: Georgia, “Times New Roman”, Times;
    font-size: 12px;
    color: #D600A9;
    }

    #adres {
    width: 200px;
    margin-left: 390px;
    margin-top: 170px;
    padding: 10px;
    background: #D600A9;
    position: absolute;
    z-index: 2;
    font-family: Georgia, “Times New Roman”, Times serif;
    font-size: 14px;
    color: white;
    }

    #som {
    width: 279px;
    height: 223px;
    margin-top: 20px;
    margin-left: 580px;
    z-index: 3;
    position: absolute;
    }

    #kind {
    width: 190px;
    height: auto;
    background: #FFF url(‘../images/content_roze.gif’) repeat-x bottom center;
    margin-top: 300px;
    margin-left: 430px;
    margin-bottom: 30px;
    padding: 10px;
    padding-bottom: 40px;
    position: absolute;
    z-index: 4;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    color: #D600A9;
    }

    #mailons {
    width: 150px;
    height: 150px;
    margin-top: 260px;
    margin-left: 710px;
    z-index: 5;
    position: absolute;
    background-color: #D600A9;
    }

    #kindjes {
    width: 100px;
    height: 70px;
    background: #D600A9;
    position: absolute;
    z-index: 6;
    margin-left: 670px;
    margin-top: 430px;
    }

    :finderoud: :finderoud: :apple:

    Bijdrager
    Wiebo

    Doe er even een linkje van de pagina bij

    Bijdrager
    madmax

    Staat er een link ofwel <a></a> om het plaatje? Sommige browsers zetten er dan standaard een rand omheen. Voeg dit eens toe aan je stylesheet:

    a img {
    border-width: 0;
    }

    Als je plaatje in een tabel staat kan het zijn dat je met een Doctype switch je probleem kunt oplossen, zie ook: http://www.tjkdesign.com/articles/imageintable.asp#issues

    TIP: maak je CSS wat compacter doot de waardes van je marges en paddings in ‘shorthand’ te plaatsen:

    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    wordt dan:
    margin: 30px 0 30px 30px;
    dat is dus deze volgorde:
    margin: top right bottom left; (boven beginnen, met de klok mee)…

    Bijdrager
    bvk

    Hier een link van de pagina:

    http://www.gmt-design.nl/lynx/mpp/pagina.asp?id=9

    Het gaat dan om de rand onder de afbeelding van de nieuwsbrief.
    Overigens heeft ie dat in Explorer niet…..

    Bijdrager
    madmax

    Ah, zoals ik al zei: probeer eens een Doctype switch, vervang de eerste regel van je code door deze:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

    en zoek zelf even op Google waar een Doctype goed voor is en hoe je CSS goed in kunt zetten… je gebruikt een totaal verkeerde Doctype met je opmaak in tabellen.

    Bijdrager
    tourist

    Voor de mailons_contact.jpg heb je geen afmetingen opgegeven. Misschien lost dat het op.

    Bijdrager
    tourist

    En nu ik je stylesheet bekijk zie ik dat je in #mailons een plaatje specificeert met de naam mailons_donateur.jpg (dat niet op de server aanwezig is), met afmetingen 150x150px. In je broncode specificeer je een plaatje met de naam mailons_contact.jpg (150x135px) zonder afmetingen.

    Op zich mag dat natuurlijk, een afbeelding specificeren in je broncode en een achtergrond in je stylesheet maar volgens mij is dat hier niet je bedoeling. In je geplakte code in je eerste post zie ik dat plaatje trouwens niet.

    Ik zou zeggen, maak die #mailons 150x135px, haal die verwijzing naar mailons_donateur.jpg weg en geef in ieder geval voor elke afbeelding de afmetingen op in je source. Wordt je pagina ook nog eens sneller van beweert men.

    Bijdrager
    bvk

    Thanx, Tourist en Madmax,
    beiden opties lijken me een verbetering :apple:
    Bedankt

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

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