Avatar billede Lasse Novice
30. december 2011 - 16:14 Der er 10 kommentarer

Billede med mellemrum over sig

Jeg bruger IE8 og har foelgende html:

<html>

<head>
<style>

#container {
    position    : relative;
    background-color: red;
    padding        : 0;
    margin-right    : 5;
    width        : 30;
    vertical-align     : middle;
}

a {
    position    : absolute;
    top        : 0;
    right        : 0;
    vertical-align     : top;
}

.img_product {
    width        : 69;
    height        : 54;
    vertical-align    : bottom;
}

.img_tool {
    padding        : 0;
    margin        : 0;
    border        : 0;
    width        : 9;
    height        : 9;
}

</style>
</head>

<body>
<span id="container">
    <img class="img_product"/>
    <a href="#"><img src="x.png" class="img_tool" /></a>
</span>
<span >Beskrivelse</span>

</body>
</html>


Det er meningen at img_tool billedet skal vaere oeverst i img_product billedet, men der er et mellemrum. Hvorfor, og hvordan fikser jeg dette?
Avatar billede olebole Juniormester
30. december 2011 - 16:33 #1
<ole>

Du mangler enheder på alle dine CSS-værdier. Når tallet ikke er 0, skal det efterfølges af en enhed. Ellers kan browseren jo ikke vide, om der er tale om pixels eller engelske tommer  *o)

/mvh
</bole>
Avatar billede Lasse Novice
30. december 2011 - 16:35 #2
Jeg har lige proevet det i Chrome i Firefox, der virker det endnu vaerrere.... buuuh.....

Hvordan goer jeg foelgende i ALLE browsere:

Et billede skal ligge i en ramme(border). I hoejre hjoerne af dette billede skal der vaere en billede knap (a og img). Til hoejre for billedet skal det vaere tekst som er centreret vertikalt i forhold til billedet.
Avatar billede Lasse Novice
30. december 2011 - 16:39 #3
>>Ole

Tak for svaret, jeg har fulgt din henvisning, men resultatet er desvaerre det samme :-( Har du andre gode raad?
Avatar billede olebole Juniormester
30. december 2011 - 16:42 #4
Hvorfor er din container 30(?) bred, når dets indhold (produktbilledet) er 69(?)?
Avatar billede olebole Juniormester
30. december 2011 - 16:43 #5
Hvis det stadig ikke virker, må du lægge et link til et eksempel
Avatar billede keysersoze Guru
30. december 2011 - 16:46 #6
mon ikke også en DOCTYPE kunne hjælpe?
Avatar billede olebole Juniormester
30. december 2011 - 16:47 #7
@soze: Naturligvis! Det faldt mig ikke ind, men er naturligvis overordentlig vigtigt!  *o)
Avatar billede Lasse Novice
30. december 2011 - 19:35 #8
>>ole
Har aendret 30 til 69px og indsat DOCTYPE (4.01 transitional). Dette har medfoert at det heller ikke virker i IE - ha ha ha.

Siden har jeg lagt op: http://www.capp2.info/test.htm
Avatar billede olebole Juniormester
30. december 2011 - 20:41 #9
Dels disabler din DTD store dele af CSS i IE, og dels er din HTML kode ikke valid. Valider altid dine dokumenter hos W3C. Hvis koden ikke er valid, er browsernes visning mere eller mindre tilfældig.

Et absolut positioneret element fylder ikke noget og udspiler derfor ikke det omkransende element. Derfor er det røde span ikke større.

Et span er et inline element og kan derfor ikke modtage en højde. Hvis du retter dets display property til inline-block, giver det mening at sætte en højde på det.

At billedet ikke flyttes helt op i toppen skyldes a-elementets line-height - uanset, om det indeholder tekst eller ej. Sættes denne til 0, opstår der ikke luft over og under billedet.

Prøv dette i stedet for:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
    position    : relative;
    background-color: red;
    padding        : 0px;
    margin-right    : 5px;
    width        : 69px;
    height: 54px;
    display: inline-block;
    vertical-align     : middle;
}
a {
    position    : absolute;
    top        : 0px;
    right        : 0px;
    vertical-align     : top;
    line-height: 0;
}
.img_product {
    width        : 69px;
    height        : 54px;
    vertical-align    : bottom;
}
.img_tool {
    padding        : 0px;
    margin        : 0px;
    border        : 0px;
    width        : 9px;
    height        : 9px;
}
</style>
</head>
<body>

<p>
    <span id="container">
        <img src="" class="img_product" alt="">
        <a href="#"><img src="u4.png" class="img_tool" alt=""></a>
    </span>
    <span>Beskrivelse</span>
</p>

</body>
</html>

Avatar billede Lasse Novice
31. december 2011 - 07:43 #10
>>ole

Tak for de gode raad. Et lille side spg, kan du foreslaa en god bog til css, jeg har lidt svaert ved at forstaa de mange forskellige properties der kan saettes og deres konsekvens.

svar => point.
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