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

computerphper Nybegynder

24. november 2005 - 18:11 Der er 20 kommentarer og
1 løsning

CSS rollover

Hej eksperter,

Jeg har lavet denne CSS rollover, men den kan kun vises i Firefox. Nogle forslag til løsningsmuligheder mht. Internet Explorer?

HTML-koden er som følger:

<div id="select_x">
<a href="/x/" class="x"></a>
<a href="/y/" class="y"></a>
</div>

CSS-koden er som følger:

#select_x { padding:20px; }

x.soeg {
background-image:url("x1.png");
width:386px;
height:160px;
display:table-cell;
border:0;
}

x.soeg:hover { background-image:url("x2.png"); }

y.indryk {
background-image:url("y1.png");
width:330px;
height:160px;
display:table-cell;
border:0;
}

y.indryk:hover { background-image:url("y2.png"); }

Synes godt om

computerphper Nybegynder

24. november 2005 - 18:13 #1

Der fejlede jeg da vist. CSS-koden er:

#select_x { padding:20px; }

a.x {
background-image:url("x1.png");
width:386px;
height:160px;
display:table-cell;
border:0;
}

a.x:hover { background-image:url("x2.png"); }

a.y {
background-image:url("y1.png");
width:330px;
height:160px;
display:table-cell;
border:0;
}

a.y:hover { background-image:url("y2.png"); }

Synes godt om

computerphper Nybegynder

24. november 2005 - 18:19 #2

Kort sagt, er det bare en CSS-kode der skifter baggrunden på et <a> når musen føres over, men dette virker _ikke_ i Internet Explorer og jeg har en stærk mistanke om at det er IE's sædvanlige skod fortolkning af alting - men derfor skal jeg jo stadig bruge en løsning på det, så ville være glad hvis en eller anden kendte en :)

Synes godt om

jamiros Novice

24. november 2005 - 18:29 #3

Prøv med disse :-)

a:link.y
a:visited.y
a:hover.y

Synes godt om

jamiros Novice

24. november 2005 - 18:32 #4

Altså:

a:link.x {
background-image:url("x1.png");
width:386px;
height:160px;
display:table-cell;
border:0;
}

a:hover.x { background-image:url("x2.png"); }

a:link.y {
background-image:url("y1.png");
width:330px;
height:160px;
display:table-cell;
border:0;
}

a:hover.y { background-image:url("y2.png"); }

Synes godt om

notes2c Nybegynder

24. november 2005 - 18:42 #5

Kunne dette ikke gøre det:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#select_x { padding:20px; }

a.x {
background-image:url(http://exp.dk/img/arrow-right.gif);
width:386px;
height:160px;
display:block;
float:left;
border:0;
}

a.x:hover { background-image:url(http://exp.dk/img/arrow-down.gif); }

a.y {
background-image:url(http://exp.dk/img/arrow-down.gif);
width:330px;
height:160px;
display:block;
float: left;
border:0;
}

a.y:hover { background-image:url(http://exp.dk/img/arrow-right.gif); }
</style>
</head>

<body>
<div id="select_x">
<a href="/x/" class="x"></a>
<a href="/y/" class="y"></a>
</div>

</body>
</html>

Synes godt om

computerphper Nybegynder

24. november 2005 - 18:47 #6

Jamiros: Virker ikke :(

notes2c: Det virker perfekt, smid et svar og få dine velfortjente point :)

Synes godt om

computerphper Nybegynder

24. november 2005 - 18:53 #7

Men jeg kan ikke få dem til at være centrerede?

Synes godt om

notes2c Nybegynder

24. november 2005 - 18:58 #8

Erstat background-image med eks background: url(http://exp.dk/img/arrow-right.gif) no-repeat center center;

eks:
a.y:hover { background:url(http://exp.dk/img/arrow-right.gif) no-repeat center center; }

Synes godt om

notes2c Nybegynder

24. november 2005 - 18:59 #9

Og det skal du gøre alle de steder hvor du benytter background-image

Synes godt om

computerphper Nybegynder

24. november 2005 - 19:07 #10

Det virker ikke. Kan jeg lave mit <div> centreret i stedet?

Synes godt om

notes2c Nybegynder

24. november 2005 - 20:39 #11

Nu må du lige er lidt mere præcis, hvad er du gerne vil centrere... Gik ud fra at det var dit billede....

Synes godt om

computerphper Nybegynder

24. november 2005 - 21:29 #12

Det er de 2 billeder, jeg gerne vil centrere - men jeg tænkte om det ikke var nemmere at centrere det <div> de er i?

Synes godt om

notes2c Nybegynder

24. november 2005 - 21:40 #13

Nej mener jeg, prøv dette...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#select_x { padding:20px; }

a.x {
background:url(http://exp.dk/img/arrow-right.gif) no-repeat center center;
width:386px;
height:160px;
display:block;
float:left;
border:0;
}

a.x:hover { background:url(http://exp.dk/img/arrow-down.gif) no-repeat center center; }

a.y {
background:url(http://exp.dk/img/arrow-down.gif) no-repeat center center;
width:330px;
height:160px;
display:block;
float: left;
border:0;
}

a.y:hover { background:url(http://exp.dk/img/arrow-right.gif) no-repeat center center; }
</style>
</head>

<body>
<div id="select_x">
<a href="/x/" class="x"></a>
<a href="/y/" class="y"></a>
</div>

</body>
</html>

Synes godt om

notes2c Nybegynder

24. november 2005 - 21:43 #14

Og du kan ikke formatere en styling med et html tag. Det giver ikke mening

Synes godt om

computerphper Nybegynder

24. november 2005 - 22:07 #15

notes2c: Det virker ikke, de flytter sig ikke en pixel :( Hvad kan det mon være på grund af? Jeg benytter XHTML, hvis du tror det har noget at sige. Er der andre måder at lave dem centreret på?

Synes godt om

notes2c Nybegynder

24. november 2005 - 22:21 #16

1) Ja XHTML kan have noget at sige, fortolkes dårligt.
2) Har du ikke et link til din side.
3) Ellers må du lægge din kode ind her incl billederne, så jeg kan se hvad der sker...

Synes godt om

notes2c Nybegynder

24. november 2005 - 22:22 #17

Har du prøvet mit eks, for her mener jeg det virker...

Synes godt om

computerphper Nybegynder

24. november 2005 - 22:47 #18

notes2c: Jeg kan ikke vise dig siden, desværre. Den er ikke åbnet endnu, så det går ikke. Den fulde kode kan jeg heller ikke vise, men jeg må vel prøve mig frem. Er der andre måder at få rolloveren vist i IE?

Synes godt om

notes2c Nybegynder

24. november 2005 - 22:54 #19

Uhm, så mu du vel ty til javascript... Men du må lige svare på hvorvidt mit eks gør det du ønsker ellers forstår jeg ikke hvor du vil hen...

Synes godt om

computerphper Nybegynder

26. november 2005 - 01:07 #20

Jeg kan ikke bruge javascript, da jeg benytter XHTML. Anyway, så får du point og så finder jeg selv lige ud af en løsning udfra det du har givet mig :) Takker!

Synes godt om

roenving Novice

29. november 2005 - 14:23 #21

Der er da ikke det fjerneste galt i at bruge javascript i xhtml ?-)

-- dog vil de fleste nutidige scripts være ugyldige, så de skal skrives om !-)

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
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

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