/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Mouseover på div box
Fra : Qilanto


Dato : 23-05-03 17:05

Jeg har en div box der ser således ud:

#menu_item {
background-color: #E8E8E8;
width: 126px;
margin-top: 1px;
}

Jeg vil gerne have baggrundsfarven til at skifte når musen er
over boksen #menu_item. Er det muligt? Menu_item er en lille boks
i en menu med et link.

Hvis ikke - hvad ville så være den nemmeste løsning (ikke
tables).



--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Erik Ginnerskov (23-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 23-05-03 17:41


"Qilanto" <mail@qilanto.dk> skrev
> Jeg har en div box der ser således ud:
>
> #menu_item {
> background-color: #E8E8E8;
> width: 126px;
> margin-top: 1px;
> }
>
> Jeg vil gerne have baggrundsfarven til at skifte når musen er
> over boksen #menu_item. Er det muligt? Menu_item er en lille boks
> i en menu med et link.

Du kan i css definere at links skal opføre sig sådan:

a.mlink:link,a.mlink:visited,a.mlink:active{
font-family:verdana,arial,sans-serif;
color:#000080;
display:block;
width: 140px;
text-decoration: none;
font-size:10px;
padding:3px;
background:transparent;
font-weight:normal;
}
a.mlink:hover {
background:blue;
color:white;
}

Derefter laver du dine links på denne måde:

<a class="mlink" style="display:block;padding:3px;" href="ny_side.htm">En ny
side</a>

Se det demonstreret på Hjemmesideskolen.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Qilanto (24-05-2003)
Kommentar
Fra : Qilanto


Dato : 24-05-03 18:59

Ja - my bad. Det virker også fint - lige bortset fra:

Jeg kan ikke få den til at blive samme størelse som teksten. Den vil lave
padding udenom teksten uden jeg ber den om det. Så den har samme størelse som
på den side du henviste til.

Er det mig der gør noget galt?

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (25-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 25-05-03 12:06


"Qilanto" <Qilanto@lazy.dk> skrev
> Ja - my bad. Det virker også fint - lige bortset fra:
>
> Jeg kan ikke få den til at blive samme størelse som teksten. Den vil lave
> padding udenom teksten uden jeg ber den om det. Så den har samme størelse
som
> på den side du henviste til.

Du skal vel bare ændre nogle værdier i den kode, jeg viste:

a.mlink:link,a.mlink:visited,a.mlink:active{
font-family:verdana,arial,sans-serif;
color:#000080;
display:block;
width: 140px;
text-decoration: none;
font-size:10px;
padding:3px;
background:transparent;
font-weight:normal;
}

Ret font-size, så den svarer til den øvrige tekst - eller slet den linje.
Fjern eventuelt også font-weight.
Ret font-family, så den svarer til den øvrige tekst - eller slet den linje.
Ret padding, så du er tilfreds med værdien - eller slet den linje.
Ret width, så det passer dit behov.
Ret color, så din menutekst får den farve, du vil have.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Lasse Reichstein Nie~ (23-05-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 23-05-03 17:48

Qilanto <mail@qilanto.dk> writes:

> Jeg har en div box der ser således ud:
>
> #menu_item {
> background-color: #E8E8E8;
> width: 126px;
> margin-top: 1px;
> }
>
> Jeg vil gerne have baggrundsfarven til at skifte når musen er
> over boksen #menu_item. Er det muligt? Menu_item er en lille boks
> i en menu med et link.

Du kan fx tilføje

#menu_item:hover { background-color:#000080; }

(Er der kun et menu_item? Når man skriver "#menu_item" henviser man
til et element med id="menu_item", og id'er skal være unikke, så der
må kun være et element der matcher).

Det virker dog ikke i Internet Explorer (den forstår ikke CSS2 så godt,
og i CSS1 virkede :hover kun på a-elementer).
Det man så normalt gør er at sætte :hover på a-elementet

#menu_item a:hover { display:block;
background-color:#000080; }

Man sætter display:block for at få a-elementet til at fylde hele den
omsluttende boks ud, og ikke kun der hvor der er tekst i linket.

> Hvis ikke - hvad ville så være den nemmeste løsning (ikke
> tables).


Javascript kan også bruges til at gøre ting ved mouseover, men det er
ikke nødvendigt her.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Qilanto (24-05-2003)
Kommentar
Fra : Qilanto


Dato : 24-05-03 02:49

Tak for hjælpen. Det virker fint nu.. og jeg brugte:

#menu_item a:hover { display:block;
background-color:#000080; }

Det var klart det letteste.

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (24-05-2003)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 24-05-03 19:30


"Qilanto" <Qilanto@lazy.dk> wrote in message news:bamj29$6d2$1@sunsite.dk...
> Tak for hjælpen. Det virker fint nu.. og jeg brugte:
>
> #menu_item a:hover { display:block;
> background-color:#000080; }
>
> Det var klart det letteste.
>
Godt råd, og godt du fulgte det. En lille tilføjelse: Du bør - når du bruger
a-markøren - sætte cursor:default, hvis ikke elementet er et aktivt link.
Ellers får du jo cursor:pointer (cursor:hand i IE) på elementet, hvilket
kan være vildledende.

Med venlig hilsen

Jørgen Farum Jensen
www.webdesign101.dk



Qilanto (24-05-2003)
Kommentar
Fra : Qilanto


Dato : 24-05-03 13:17

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> "Qilanto" <Qilanto@lazy.dk> wrote in message news:bamj29$6d2$1@sunsite.dk...
> > Tak for hjælpen. Det virker fint nu.. og jeg brugte:
> >
> > #menu_item a:hover { display:block;
> > background-color:#000080; }
> >
> > Det var klart det letteste.
> >
> Godt råd, og godt du fulgte det. En lille tilføjelse: Du bør - når du bruger
> a-markøren - sætte cursor:default, hvis ikke elementet er et aktivt link.
> Ellers får du jo cursor:pointer (cursor:hand i IE) på elementet, hvilket
> kan være vildledende.
>
> Med venlig hilsen
>
> Jørgen Farum Jensen
> www.webdesign101.dk
>
>


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Qilanto (24-05-2003)
Kommentar
Fra : Qilanto


Dato : 24-05-03 13:20

Sorry hvis jeg lavede et underligt post - ved ikke lige hvad der skete der :)

Men jeg har lige et spørgsmål mere. Er det muligt at lave en DIV box til et
link? Så den laver baggrundsfarven på boksen om så snart musen er inde i DIV
området - og DIV altså er et link.

Lige nu ser det sådan ud:
<div id="menu_item">
<a class="menu" href="test">link</a>
</div>

Hvilket jo kun giver mouse over på teksten. Jeg vil gerne have hele boksen til
at linke i stedet.

Anyone?

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (24-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 24-05-03 13:32


"Qilanto" <Qilanto@lazy.dk> skrev
> Men jeg har lige et spørgsmål mere. Er det muligt at lave en DIV box til
et
> link? Så den laver baggrundsfarven på boksen om så snart musen er inde i
DIV
> området - og DIV altså er et link.
>
> Lige nu ser det sådan ud:
> <div id="menu_item">
> <a class="menu" href="test">link</a>
> </div>
>
> Hvilket jo kun giver mouse over på teksten. Jeg vil gerne have hele boksen
til
> at linke i stedet.

Se mit svar 23/5 18:41

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Knud Gert Ellentoft (24-05-2003)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 24-05-03 14:02

"Jørgen Farum Jensen" <webmaster@webdesign101.dk> skrev :

Hej Jørgen Farum Jensen

Har du ikke mulighed for at bruge korrekt tidszone på din
computer?

Det andet er lidt irriterende.
--
Knud

Jørgen Farum Jensen (25-05-2003)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 25-05-03 20:25


> Hej Jørgen Farum Jensen
>
> Har du ikke mulighed for at bruge korrekt tidszone på din
> computer?
>
> Det andet er lidt irriterende.
> --
> Knud

Sorry - det er rettet nu.

Med venlig hilsen

Jørgen Farum Jensen
www.webdesign101.dk



Anders Wegge Jakobse~ (25-05-2003)
Kommentar
Fra : Anders Wegge Jakobse~


Dato : 25-05-03 11:33

"Jørgen" == Jørgen Farum Jensen <webmaster@webdesign101.dk> writes:

>> Hej Jørgen Farum Jensen
>>
>> Har du ikke mulighed for at bruge korrekt tidszone på din
>> computer?
>>
>> Det andet er lidt irriterende.
>> --
>> Knud

> Sorry - det er rettet nu.

Ikke helt:

Date Sun, 25 May 2003 21:25:27 +0200



--
/Wegge <http://outside.bakkelygaard.dk/~wegge/>

Jens Gyldenkærne Cla~ (25-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 25-05-03 11:57

Jørgen Farum Jensen skrev:

>> Har du ikke mulighed for at bruge korrekt tidszone på din
>> computer?

> Sorry - det er rettet nu.

Nu er tidszonen o.k., men klokkeslættet er stadig forkert (21:25,
læst kl. 12:56)
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408943
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste