Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

probleempje met css (class id)

Drewster
11 antwoorden
  • hallo allemaal ik wil meerdere foto's op 1 pagina de zelfde opmaak geven de foto's zijn links naar een popup van de originele foto. De foto's krijgen een witte border rand en als je met de muis er over gaat moet deze witte rand veranderen naar bruin.

    In de css moet ik een #content img aanmaken om de border van de foto's uit te zetten anders zet hij er een blauwe rand omheen? Iemand een idee hoe ik de border rand gewoon met het div class kan opmaken?

    Het werkt zo als ik het nu heb wel, maar… ik wil deze css ook gebruiken op andere pagina's maar daar staan foto's zonder link. En die krijgen dan geen border meer.

    [quote:b93b2067c4]#content {
    float: left;
    width: 540px;
    color: #FFFFFF;
    font-size: 80%;
    padding:20px 10px 10px 10px;
    }

    #content img {
    border:0 solid;
    }
    .fotolink a {
    float:right;
    border: 1px solid #fff;
    height:140px;
    width:100px;
    margin:0 10px 0 10px;
    }
    .fotolink a:link {
    border: 1px solid #fff;
    }
    .fotolink a:hover {
    border: 1px solid #9d8c5e;
    }
    [/quote:b93b2067c4]

    Zo heb ik het in de css staan.
    En zo in de html.

    [quote:b93b2067c4]<div class="fotolink"><a title="klik voor ware grote" href="javascript:;" onclick="Lvl_openWin('mijn_edels/img_mijn_edels/jul.htm','','550','768','0','0','1','width=550,height=768');return document.MM_returnValue"><img src="mijn_edels/img_mijn_edels/jul_verkleind.jpg" alt="" width="100" height="140"></a></div>
    [/quote:b93b2067c4]

    Wie help me uit de brand..
  • In plaats van [code:1:87640f80b1]#content img {
    border:0 solid;
    }
    [/code:1:87640f80b1]Doe je
    [code:1:87640f80b1]
    a img{
    border: none;
    }
    [/code:1:87640f80b1]
    Op dezelfde plek in je CSS, de volgorde is hier van belang.
  • Bedankt voor je reactie. Maar ik bedoel dat als er een foto aan de pagina word toegevoegd deze een witte border krijg toegewezen van de css (nu staat de border uit als er een foto word geplaatst) en als de foto een link is, dat deze dan een bruine border krijg zodra je er met de muis op komt "soort" rollover. dit moet mogelijk zijn met a: hover functie zo ver ik weet. Het werkt nu wel. Alleen de foto's krijgen geen borderrand als ze geplaatst worden.
  • Je hebt hier eigenlijk een conflict met specificiteit. Beiden selecters, [i:aab8f1a969]#content img[/i:aab8f1a969] en [i:aab8f1a969].fotolink a[/i:aab8f1a969], wijzen soms naar zelfde elementen en dan wordt er gekeken door de browser welke selecter meer specifiek is (via een punten systeem), of welke later komt als ze even specifiek zijn. In dit geval zijn ze niet even specifiek omdat een id selecter (100 punten) een stuk speciefieker is dan een class selecter (10 punten) en dus zullen altijd de regels achter [i:aab8f1a969]#content img[/i:aab8f1a969] (101 punten) worden uitgevoerd hier (lees meer over specificiteit hier, als je wilt).
    Meest elegante oplossing is denk ik de anchors waarbinnen je een img stopt een class meegeven en die stylen…je kan natuurlijk ook gewoon:
    [i:aab8f1a969]#content .fotolink a {….}[/i:aab8f1a969]
    gebruiken ipv;
    [i:aab8f1a969].fotolink a {….}[/i:aab8f1a969]
    Dat zou ook moeten werken, en dan hoef je niets te verranderen in je markup…

    [i:aab8f1a969]edit:ff iets beter gemaakt[/i:aab8f1a969]
  • Ik gebruik ook een #content img… maar ik zag hier (http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=171797) dat het beter was om een class te gebruiken als er meerdere foto's op 1 pagina kwamen. Maar het lukt me niet met een class dan krijg ik ipv van een witte rand een blauwe rand en als ik er op klik een rode rand dat zijn zo ver ik weet de gewone standaard link kleuren. (dit gebeurt als ik de border bij #content img op 1 px zet.



    Maar als ik nu een foto plaats wat geen link moet worden. Dan heeft deze niet de witte border rand omdat die op geen staat. Of zie ik nu iets over het hoofd? Ik heb zo goed als geen ervaring met css dus dat zou heel goed kunnen.
  • Ok, als ik het goed begrijp wil je sowieso een witte rand om een plaatje…

    Dan zou het volgende moeten werken (heb ff een plaatselijke copy gemaakt van je site):[code:1:29bf67b4de]#content img{ /* plaatjes die ergens anders in de site staan */
    border: 1px solid #fff;
    float:left; /* moet je zelf invullen */
    margin:1px 2px 3px 4px; /* moet je zelf invullen */
    }
    #content .fotolink img { /* plaatjes in de zelfde div maar ongelinkt */
    border: 1px solid #fff;
    float:right;
    margin:0 10px 0 10px;
    }
    #content .fotolink a img { /* border en margin om het plaatje verwijderen */
    border: none; /* zodat je niet twee borders krijgt om een */
    margin: 0; /* gelinkt plaatje */
    }
    #content .fotolink a{
    float:right;
    border: 1px solid #fff;
    height:140px;
    width:100px;
    margin:0 10px 0 10px;
    }
    #content .fotolink a:hover{
    border: 1px solid #9d8c5e;
    }[/code:1:29bf67b4de]Enige vreemde is dat in IE 5.5 en lager er links en rechts een margin van 3 pixels om het gelinkte plaatje zit, ik weet niet waar dit door wordt veroorzaakt. Je zou dit kunnen oplossen door een conditionele comment te plaatsen in de markup.
    Zoiets als:[code:1:29bf67b4de]<!–[if lt IE 6]
    <style type="text/css">
    #content .fotolink a img {margin: 0 -3px;}
    </style>
    <![endif]–>[/code:1:29bf67b4de]Maar om een of andere reden wil IE5.5 en lager bij mij alleen conditionele comments lezen als er geen versie wordt gespecificeerd, misschien weet iemand anders er wel een oplossing voor, ik ben uitgevloekt… :evil:

    En in IE 5.01 krijg ik een heel vreemd effect als ik de muis van het gelinkte plaatje af beweeg…misschien iets in de javascript…

    [i:29bf67b4de]edit: aanvulling; Als je het niets kan schelen dat er nog mensen zijn die IE gebruiken of nog niet naar IE7 hebben geupgrade dan was het een stuk makkelijker geweest want dan kan je gewoon op de img het hover effect laten toepassen maar dat willen de oudere versies van IE niet doen…omdat Microsoft een hele grote #$%#* in zijn #@$* heeft zitten waardoor het het niet rechtlijnig kan denken… :evil: [/i:29bf67b4de]
  • Ik heb gisteren iets te snel geantwoord, zo werkt 't wel geloof ik:
    [code:1:74e64f6fa1]a img{
    border: none;
    }
    .fotolink img{
    float:right;
    border: 1px solid #f00;
    height:140px;
    width:100px;
    margin:0 10px 0 10px;
    }
    .fotolink a:link img{
    border: 1px solid #f00;
    }
    .fotolink a:hover img {
    border: 1px solid #9d8c5e;
    } [/code:1:74e64f6fa1]
  • [quote:90424ff19e="berkery"]Ik heb gisteren iets te snel geantwoord, zo werkt 't wel geloof ik:
    [code:1:90424ff19e]a img{
    border: none;
    }
    .fotolink img{
    float:right;
    border: 1px solid #f00;
    height:140px;
    width:100px;
    margin:0 10px 0 10px;
    }
    .fotolink a:link img{
    border: 1px solid #f00;
    }
    .fotolink a:hover img {
    border: 1px solid #9d8c5e;
    } [/code:1:90424ff19e][/quote:90424ff19e]

    Dat werkt prima in firefox en in IE7 maar niet in IE6 IE5.5 en IE5.01…omdat een hover effect daar alleen mag werken op een anchor en nergen anders op.
  • Hallo,

    Dit is precies zoals ik het bedoel :) mijn dank is weer groot, ook de uitleg er bij hoe en wat is ook ideaal, weer iets geleerd.

    Ik controleer mijn site eigenlijk alleen in IE 6 en IE 7 en FF. omdat ik denk dat dit de grootste gebruikers groep is op het moment.

    Nou heb ik nog 1 ander klein foutje maar dat ligt na mijn idee niet aan de html of het scripje. Maar.. de popup van de kleine foto. die werk in IE 6 en FF gewoon goed maar in IE 7 maakt ie er gewoon een normale pagina van :-? enig idee waarom dit gebeurd en of er een oplossing voor is? Ik gebruik dit scripje [code:1:c06d7a7f58]<script language="JavaScript" type="text/JavaScript">
    <!–
    function Lvl_openWin(u,n,w,h,l,t,c,f,x) { //v2.0 4LevelWebs
    var ww=((screen.width-w)/2);if(c==1){l=ww;t=(screen.height-h)/2;}if(c==2){l=ww}
    f+=',top='+t+',left='+l;LvlWin = window.open(u,n,f);LvlWin.focus();
    document.MM_returnValue=false;
    }
    //–>
    </script>[/code:1:c06d7a7f58]

    en dit staat allemaal in de html van de link.
    [code:1:c06d7a7f58]<div class="fotolink"><a title="klik voor ware grote" href="javascript:;" onclick="Lvl_openWin('mijn_edels/img_mijn_edels/jul.htm','','550','768','0','0','1','width=550,height=768');return document.MM_returnValue"><img src="mijn_edels/img_mijn_edels/jul_verkleind.jpg" alt="" width="100" height="140"></a></div>[/code:1:c06d7a7f58]
    Zit er ergens een fout of heb ik iets gebruik waar IE7 niet mee overweg kan of zijn ze dit gedeelte vergeten in te bouwen bij IE7? :P
  • Nou ja, ik weet niet, maar hier werkt de popup gewoon prima in Fx, IE5.01, IE5.5, IE6, IE7 en Opera… 8)
  • Je heb gelijk, er zat bij mij iets niet goed. heb even alle browsegeschiedenis verweiderd en het werkt. thnx voor de tip anders was ik nou nog aant puzzelen.

Beantwoord deze vraag

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