link som skiftar farge med musa over.

10. november 2006

Hei

Driver no på litt med heimeside. Har tenkt å lage meg nokre fine linkar som skal skifte farge når musa er over linken. Har tenkt på noke linknande denne http://www.w3schools.com/css/tryit.asp?fil...e=trycss_float5.

Har brukt denne koden. Den funka den, men eg fekk litt problem med den. Derfor lure eg på om noken her inne veit om ein slik kode? Vil at koden kunn skal gjelde for ein link, så kan eg berre lage fleire kodar etter kor mange linkar eg vil ha. Det blir mykje enklare når eg kan bestemme posisjonen for kvar link sjølv.

Blei kanskje litt dårleg forklart, men håpe det er forstårleg.

Takker

SilentBob · 10. november 2006

tja, får å bruke det eksemplet du linket til:

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.link1:hover {background-color:#ff3300}
a.link2:hover {background-color:#333333}
a.link3:hover {background-color:#aa3300}
a.link4:hover {background-color:#aaaaaa}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a class="link1" href="#">Link one</a></li>
<li><a class="link2" href="#">Link two</a></li>
<li><a class="link3" href="#">Link three</a></li>
<li><a class="link4" href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html>

Vet ikke om det var slik du hadde tenkt det...

SilentBob · 10. november 2006

om du også vil styre bakgrunnsfargen til hver av linkene (slik at ikke alle blir lilla) kan du bare sette inn:

a.link1{
background-color:black;
}
a.link2{
background-color:orange;
}

mellom a{} og a.link1:hover {background-color:#ff3300}....

håper det hjalp

10. november 2006

Eg har brukt den koden og forandra litt på den, men det var mykje problem med den. Det største problemet var at alle linkane i eg laga ( i tekstar og ) blei slik som desse linkane. Eg trur eg prøvde alt, men fekk ikkje det til å fungere uten at alle linkane såg like ut :hmm:

Endret 10. november 2006 av Slettet+65132

SilentBob · 10. november 2006

Eg har brukt den koden og forandra litt på den, men det var mykje problem med den. Det største problemet var at alle linkane i eg laga ( i tekstar og ) blei slik som desse linkane. Eg trur eg prøvde alt, men fekk ikkje det til å fungere uten at alle linkane såg like ut

7261252[/snapback]

Ja det er nok ikke "problemer" med koden, den gjør akkurat som den får beskjed om...men grunnen til at alle linkene blir like er pga at det i css koden står følgende:

a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}

det denne kodesnutten gjør er at den "tvinger" alle linker du lager til å se like ut.

men om du f.eks. setter: .meny bak a'en slik at koden ser slik ut:

a.meny
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}

vil alle linker som du lager bli seende ut som standar, mens de linkene du i html koden skriver som:

<a class="meny" href="#">Link one</a>

altså med en class="meny" mellom a og href vil bli seende ut som de ser ut i eksemplet.

Anbefaler at du går igjennom css tutorialen på w3schools.com slik at du får en basic fårståelse for hvordan css fungerer.

11. november 2006

Takker for svar

No har eg gjort som du sa, men alt blei sån som det ikkje skulle bli. Har lest ein god del på w3 og føle at eg kan det grunnleggande om css. Har prøvd å fikse på koden mange gangar før uten at det gjekk. Enten må det berre vere meg eller så er det noke galt med koden :hmm: Trur det berre er meg, men uansett. Er det ikkje det ein anna kode som eg kan bruke då?

Har tenkt litt på denne koden, men det er med bilde:

<div id="home">
   	<a href="index.php?side=meg&style=bluestyle"
   	onmouseover="changeImages('meg', 'images/meg-over.gif'); return true;"
   	onmouseout="changeImages('meg', 'images/meg.gif'); return true;"
   	onmousedown="changeImages('meg', 'images/meg-over.gif'); return true;"
   	onmouseup="changeImages('meg', 'images/meg-over.gif'); return true;">
   	<img name="Home" id="Home" src="images/meg.gif" width="95" height="30" border="0" alt="home" /></a>	</div>

Er det noke måte å få denne koden til å bruke fargar i staden for bilde. Diven har eg tenkt til å bruke til å plassere linken.

Endret 11. november 2006 av Slettet+65132

Nonsens · 11. november 2006

Bruker du 'class=' som i eksempelet ovenfor i forbindelse med linking så kan du ha hundrevis av forskjellige varianter. Du må selvfølgelig definere de ulike variantene (og gi de ulike navn), og det er selvfølgelig lurt å la 'standardutseendet' være det som brukes i vanlig tekst på siden din.

Link som blir rød et sted, link som har understreking og blir rosa et annet, link som ikke endrer seg i det hele tatt enda et sted osv er fullt mulig i samme dokument.

Endret 11. november 2006 av Nonsens

11. november 2006

Bruker du 'class=' som i eksempelet ovenfor i forbindelse med linking så kan du ha hundrevis av forskjellige varianter. Du må selvfølgelig definere de ulike variantene (og gi de ulike navn), og det er selvfølgelig lurt å la 'standardutseendet' være det som brukes i vanlig tekst på siden din.

Link som blir rød et sted, link som har understreking og blir rosa et annet, link som ikke endrer seg i det hele tatt enda et sted osv er fullt mulig i samme dokument.

7261543[/snapback]

Eg bruka både 'class=' og 'id='. Eg har prøvd med både class og id så eg trur ikkje det er der problemet er.

Nonsens · 11. november 2006

Sett inn koden nedenfor på denne siden: http://www.w3schools.com/css/tryit.asp?fil...e=trycss_float5

Så ser du gangen i det der jeg har laget 'gronn' og 'sort'.

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
a.gronn:hover {background-color:#00ff00}
a.sort:hover {background-color:#000000}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a class="gronn" href="#">Link two</a></li>
<li><a class="sort" href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html>

Endret 11. november 2006 av Nonsens

11. november 2006

Ja eg såg at dei to linkane skifta farge, men sette eg inn ein vanleg link til slutt får den samme farge og bakgrunn.

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
a.gronn:hover {background-color:#00ff00}
a.sort:hover {background-color:#000000}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a class="gronn" href="#">Link two</a></li>
<li><a class="sort" href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

<a href="http://www.hardware.no">link</a>

</body>
</html>

Då kan jo eg ikkje lage vanlege linkar uten og linke til ein kode i css fila?

Nonsens · 11. november 2006

Selvfølgelig kan du det. Du definerer såklart hvert sett med linker komplett med underline, color+++.

Det settet som du ikke gir noe spesielt navn er det som blir gjeldende der hvor du ikke bruker koden i linken. Hvis du endrer koden i den øverste delen av eksempelet så ser du at det blir gjeldende overalt unntatt der hvor .hover er angitt til å være noe annet.

Nonsens · 11. november 2006

Dette er nok et bedre eksempel på akkurat det du er ute etter:

http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

Det du definerer uten et eget navn (altså uten .one .two og lignende i CSS) vil bli gjeldende overalt der du ikke angir stilen i forbindelse med linking.

Endret 11. november 2006 av Nonsens

11. november 2006

Takker

Har eit også eit til problem som eg fant.

a.one:hover 
{
color: #ff0000; 
padding:10px 10px;
background: #66ff66;
}

Her blir berre linken sjåande slik ut når eg har musa over den. Ka skal eg skrive for å bestemme korleis linken skal sjå ut når eg ikkje har musa over den? Prøvde å skrive ein kode til med a.one:link i tillegg, med det funka ikkje. Så ka skal eg gjere?

Edit: Fant ut av det.

Endret 11. november 2006 av Slettet+65132

Logg inn

link som skiftar farge med musa over.

Anbefalte innlegg

Gjest Slettet+65132

Lenke til kommentar

Videoannonse

SilentBob

Lenke til kommentar

SilentBob

Lenke til kommentar

Gjest Slettet+65132

Lenke til kommentar

SilentBob

Lenke til kommentar

Gjest Slettet+65132

Lenke til kommentar

Nonsens

Lenke til kommentar

Gjest Slettet+65132

Lenke til kommentar

Nonsens

Lenke til kommentar

Gjest Slettet+65132

Lenke til kommentar

Nonsens

Lenke til kommentar

Nonsens

Lenke til kommentar

Gjest Slettet+65132

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer