Avatar billede Slettet bruger
18. maj 2009 - 23:24 Der er 7 kommentarer og
1 løsning

A, IMG og border

Hej eksperter,

Jeg har et problem med en dynamisk ramme omkring billedlinks. Herunder ses et kodeeksempel.


--- index.css ---
*
{
    margin:        0px;
    padding:    0px;
}
img
{
    border:                none;
}
a
{
    display:            block;
    margin:                2px 4px;
    padding:            5px;
}
a:hover
{
    padding:            4px;
    border:                1px solid rgb(185, 215, 255);
    background:            rgba(205, 225, 255, .75);
}

--- index.html ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <a href="">
            <img src="index.jpg">
        </a>
    </body>
</html>


Tydeligvis ikke den ønskede effekt. Hvordan kan problemet løses? Jeg har eksperimenteret med at lade border være på img, men derved opnås blot flere problemstillinger (og en ordentlig gang slamkode).

Tak.
Avatar billede Slettet bruger
18. maj 2009 - 23:25 #1
Rettelse til index.css:

*
{
    margin:        0px;
    padding:    0px;
}
img
{
    border:                none;
}
a
{
    margin:                2px 4px;
    padding:            5px;
}
a:hover
{
    padding:            4px;
    border:                1px solid rgb(185, 215, 255);
    background:            rgba(205, 225, 255, .75);
}

display:block var et mislykket eksperiment.
Avatar billede fusion-it Nybegynder
18. maj 2009 - 23:27 #2
Prøv at sæt dit link i en div og giv div' en en clsss :)

Kik evt her:
http://www.eksperten.dk/spm/870189
Avatar billede fusion-it Nybegynder
18. maj 2009 - 23:29 #3
Skulle nærmere sige giv din div et ID :))
Avatar billede Slettet bruger
18. maj 2009 - 23:43 #4
Så er fidusen vel at anvende egenskaberne ved display:block. Problemet er bare, at billederne skal kunne stå ved siden af hinanden, hvorfor div er udelukket.
PS: Span virker ikke - been there, done that.
Avatar billede fusion-it Nybegynder
19. maj 2009 - 00:56 #5
Brug float så kan du godt have den stående sådan ::)
Avatar billede fusion-it Nybegynder
19. maj 2009 - 00:59 #6
Sådan :)

<div>
<div style="float:left;width:50px; "><img src="billede.jpg"></div>
<div style="float:left;width:50px; "><img src="billede.jpg"></div>
<div style="float:left;width:50px; "><img src="billede.jpg"></div>
</div>
Avatar billede fusion-it Nybegynder
19. maj 2009 - 01:20 #7
Iøvrigt kan du også gøre sådan det vil oxo virke

<div>
<img src="billede.jpg" style="float:left;width:50px; ">
<img src="billede.jpg" style="float:left;width:50px; ">
<img src="billede.jpg" style="float:left;width:50px; ">
</div>
Avatar billede Slettet bruger
25. maj 2009 - 17:51 #8
Det virker perfekt! Mange tak :)


index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <a href="">
            <img src="index.jpg">
        </a>
        <a href="">
            <img src="index.jpg">
        </a>
        <a href="">
            <img src="index.jpg">
        </a>
    </body>
</html>


index.css

*
{
    margin:        0px;
    padding:    0px;
}
img
{
    display:            block;
    border:                none;
}
a
{
    display:            block;
    float:                left;
    margin:                2px 4px;
    padding:            5px;
}
a:hover
{
    padding:            4px;
    border:                1px solid rgb(185, 215, 255);
    background:            rgba(205, 225, 255, .75);
}


Svar søges!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester