Tekst med hoover

[dot_]

Kveldens andre og mest sannsynlig siste spørsmål.

 

Jeg ønsker en form for hoover-effekt over en rekke lister, eks.:

 

<p> The Bourne Identity (1988) (TV) <IMG class="displayed" src="4star.gif" alt="left"> </p>

 

Spørsmålet mitt blir, er det lett å få til dette (effekten som bl.a. blir brukt for illustrasjonene).

 

Jeg ser for meg en noe diskre hoover, som dekker hele teksten.

 

Endret 19. april 2007 av dot_

[eigan]

Du kan bruke: p:hover i css, men det støttes ikke av alle nettlesere.

 

Når du skal liste noe, bruker vi noe som heter <ul>

Det fungerer slik:

<div id="liste">
<ul>
  <li><a href="#">The Bourne Identity (1988) (TV) <img class="displayed" src="4star.gif" alt="left"></a></li>
  <li><a href="#">James Bond (2002) (Film) <img class="displayed" src="2star.gif" alt="left"></a></li> 
  <li><a href="#">Gladiator (2000) (Film) <img class="displayed" src="2star.gif" alt="left"></a></li>
</ul>
</div>

 

I CSS kan du skrive da:

#liste {
width: 160px;
}

#liste ul {
width: 200px;
list-style-type: none;
}

/* LISTENS BAKGRUNNS- OG TEKST FARGE */
#liste li a {
display: block;
background: #ededed;
color: #333;
width: 160px;
padding: 5px;
}

/* DETTE SJER NÅR MUSA GÅR OVER */
#liste li a:hover {
background: #333;
color: #ededed;
}

Det koden gjør er å endre bakgrunns og tekst fargene på linkene. De ligger i en liste som er satt til block, noe som gjør at det blir en boks, og mer rom.

 

Du kan selvfølgerlig bare sette teksten inn i en link(<a>tekst</a>) så definerer du den med css (a:hover { color: red; } ), Men i denne sammenhengen når du skal lage lister, er det best med <ul>

 

//Fjern block hvis du ikke vil ha den store boksen rundt dem..

 

Tips: Søk før du spør...

Endret 19. april 2007 av Einar

[dot_]

Klikk for å se/fjerne innholdet nedenfor

Du kan bruke: p:hover i css, men det støttes ikke av alle nettlesere.

 

Når du skal liste noe, bruker vi noe som heter <ul>

Det fungerer slik:

<div id="liste">
<ul>
   <li><a href="#">The Bourne Identity (1988) (TV) <img class="displayed" src="4star.gif" alt="left"></a></li>
   <li><a href="#">James Bond (2002) (Film) <img class="displayed" src="2star.gif" alt="left"></a></li> 
   <li><a href="#">Gladiator (2000) (Film) <img class="displayed" src="2star.gif" alt="left"></a></li>
</ul>
</div>

 

I CSS kan du skrive da:

#liste {
width: 160px;
}

#liste ul {
width: 200px;
list-style-type: none;
}

/* LISTENS BAKGRUNNS- OG TEKST FARGE */
#liste li a {
display: block;
background: #ededed;
color: #333;
width: 160px;
padding: 5px;
}

/* DETTE SJER NÅR MUSA GÅR OVER */
#liste li a:hover {
background: #333;
color: #ededed;
}

Det koden gjør er å endre bakgrunns og tekst fargene på linkene. De ligger i en liste som er satt til block, noe som gjør at det blir en boks, og mer rom.

 

Du kan selvfølgerlig bare sette teksten inn i en link(<a>tekst</a>) så definerer du den med css (a:hover { color: red; } ), Men i denne sammenhengen når du skal lage lister, er det best med <ul>

 

//Fjern block hvis du ikke vil ha den store boksen rundt dem..

 

Tips: Søk før du spør...

8426703[/snapback]

 

Takk, igjen!

Endret 19. april 2007 av dot_