CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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>

Synes godt om

Belinda Juniormester

02. april 2012 - 22:27 #2

Okay - men så får jeg et nyt problem - at det bliver placeret udenfor tabellen.

Synes godt om

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.

Synes godt om

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?

Synes godt om

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;
}

Synes godt om

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) ?

Synes godt om

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:-)

Synes godt om

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

Synes godt om

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)

Synes godt om

Belinda Juniormester

03. april 2012 - 07:24 #10

Ja, jeg må bare arbejde videre med det. Tak for hjælpen.

Synes godt om

Belinda Juniormester

03. april 2012 - 07:29 #11

I må skrive svar så I kan få point.

Synes godt om

Slettet bruger

03. april 2012 - 08:25 #12

svar

Synes godt om

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>

Synes godt om

Belinda Juniormester

03. april 2012 - 17:10 #14

Hej Ole

Nu har jeg uploadet koden her:
http://web-veggie.freehostia.com/test/ops1.htm
http://web-veggie.freehostia.com/test/style1.css

:-)
Belinda

Synes godt om

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

Synes godt om

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

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS