Avatar billede Belinda Juniormester
02. april 2012 - 21:33 Der er 15 kommentarer og
1 løsning

Placering af id background-image

Hej 

Jeg har problemer med at få vist et billede i nederste højre hjørne på min side - som jeg mener jeg har skrevet i min css-fil - men det har jeg åbenbart ikke for billedet står placeret i toppen til venstre i td'en....

Kode fra css:
#printer-icon {
  background-image:url(../billeder/printer.png);
  background-repeat:no-repeat;
  background-position: absolute bottom right;
  width:48px;
  height:48px;
    }
Kode fra siden:
<div><a href="java script:window.print()" title="udskriv opskriften" id="printer-icon" ></a></div>

Håber nogen kan hjælpe.

Belinda
Avatar billede Slettet bruger
02. april 2012 - 21:55 #1
Det er div'en du skal positionere.
- positioneringen af baggrunden handler om dens position indenfor linket.

#printer-icon {position:absolute; right:0px; bottom:0px; width:48px; height:48px;}


<div id="printer-icon">
    <a href="java script:window.print()">
        <img src="../billeder/printer.png" title="udskriv opskriften">
    </a>
</div>
Avatar billede Belinda Juniormester
02. april 2012 - 22:27 #2
Okay - men så får jeg et nyt problem - at det bliver placeret udenfor tabellen.
Avatar billede Slettet bruger
02. april 2012 - 22:44 #3
background-position skal højst have to parametre (hvor kommer
absolute fra, og du har byttet om på horizontal og vertical position):
background-position: right bottom;
http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

a-elementer er inline, så for at få width og height til at virke skal du sætte display til block eller inline-block.
Avatar billede Belinda Juniormester
02. april 2012 - 22:54 #4
Efter dette er jeg tilbage til udgangspunktet. Billedet står placeret i toppen til venstre i td'en....


#printer-icon {
    display:block;
    background-position: right bottom;
        width:48px;
    height:48px;}

så er det andre ideer?
Avatar billede Slettet bruger
02. april 2012 - 23:03 #5
Kan du vise en side med et eksempel på problemet?

Jeg kan ikke se hvor du har dit billede nu, men jeg ville prøve med:
#printer-icon {
  display: inline-block;
  background-image:url(../billeder/printer.png);
  background-repeat:no-repeat;
  background-position: right bottom;
  width:48px;
  height:48px;
}
Avatar billede Slettet bruger
02. april 2012 - 23:08 #6
CSS-positionering og tabeller spiller ikke specielt godt sammen..
- Har du mulighed for "bare" at placere den i selve tabellen ?
(f.eks. i en ekstra row nederst..)

Kan vi se det i funktion (link) ?
Avatar billede Belinda Juniormester
02. april 2012 - 23:14 #7
desværre virker det heller ikke - jeg har ikke siden oploadet nu - så jeg må nok opgive det for nu. Mange tak for hjælpen:-)
Avatar billede Belinda Juniormester
02. april 2012 - 23:27 #8
Hej
Ja, det er nok det med tabellen der giver balleden. Jeg håbede bare på en smart måde lige at få sat print-iconet ind i bunden af siden. Sådan bliver det så ikke. I skal begge have tak for hjælpen og må dele pointene.

Belinda
Avatar billede Slettet bruger
02. april 2012 - 23:55 #9
Du kunne jo give den lidt mere luft fra bunden af siden:

#printer-icon {position:absolute; right:25px; bottom:25px; width:48px; height:48px;}

- kombineret med lidt (mere) margin under tabellen (så de ikke overlapper)
Avatar billede Belinda Juniormester
03. april 2012 - 07:24 #10
Ja, jeg må bare arbejde videre med det. Tak for hjælpen.
Avatar billede Belinda Juniormester
03. april 2012 - 07:29 #11
I må skrive svar så I kan få point.
Avatar billede Slettet bruger
03. april 2012 - 08:25 #12
svar
Avatar billede olebole Juniormester
03. april 2012 - 14:28 #13
<ole>

Der er ingen problemer med tabeller og CSS. Til gengæld tror jeg, I roder background-position og position sammen. I er aldrig blevet rigtigt enige om, hvorvidt der skal bruges det ene eller det andet ... og de to har vidt foskellige resultater.

@webbea: Skal tingen løses, må du nok vise noget kode. Så er der til gengæld heller ikke tvivl om, at det kan løses  =)

/mvh
</bole>
Avatar billede Belinda Juniormester
03. april 2012 - 17:10 #14
Avatar billede Slettet bruger
03. april 2012 - 18:57 #15
Ahh. Der er ingen doctype - så er det jo nærmest tilfældigt hvor den ender : )

Jeg har bikset lidt med det (uden at ændre andet en printer-knappen).
- Hvis du indsætter en ny <tr> nederst, således:
</td>
<td width="30"></td>
</tr>

<tr><td colspan="5" align="right" height="1"><img src="printer.png" title="udskriv opskriften" onclick="window.print()" style="position:relative;top:-48px;left:-30px;cursor:pointer;"></td></tr>

</table>

</body>
</html>
Så ser det rimeligt ud : )
- den har sin style "inline" - så #printer-icon kan fjernes, både fra style1.css og hele den "gamle" div
Avatar billede Belinda Juniormester
03. april 2012 - 20:51 #16
Hej T4NK32

Tak for hjælpen - sikke en dumhed med doctypen - sådan går det ind imellem når man ikke tænker sig om....
Men nu står printeren hvor den skal:-)
Mange tak :-)

Belinda
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