Utvikling av CSS

[mabb]

Heisann!

 

Jeg holder på å lage en liten webside og har funnet ut at jeg skal ha denne funksjonen i menyen:

 

onmouseover="this.style.backgroundColor='#ffffff';"

onmouseout="this.style.backgroundColor='transparent';"

 

Den gjør slik at bakgrunnen i cellen skifter farge nå man holder over den. Det eneste problemet er at det er noe tungvint å lime denne inn denne koden på hver eneste celle jeg ønsker denne funksjonen - dersom jeg ønsker å skifte farge så må jeg jo endre samtlige. Derfor lurer jeg på om det går an å få samme funksjon inn i en css fil ?!

 

På forhånd takk.

[jorgis]

Det der er JavaScript, men den "trigger" CSS. Du kan imidlertidig lage en funksjon av det i en ekstern fil. Det gjør at det blir bittelitt kortere, pluss at du kan endre fargene i .js-filen, istedenfor å gjøre det hundre ganger i HTML-filen.

 

onmouseover = "bakgrunnsfarge1();"
onmouseout = "bakgrunnsfarge2();"

 

Dette er uansett også veldig tungvindt, og det skal være en måte å fikse dette på i CSS, men det har ikke jeg peiling på. Du får håpe at en av kodeguruene kommer innom...

[Zethyr]

Vet ikke helt hvor semantisk korrekt dette er, men here goes:

<div id="menu>
<a href="#" class="opt"><span>Lipsum</span></a> <br />
<a href="#" class="opt"><span>Lipsum</span></a> <br />
<a href="#" class="opt"><span>Lipsum</span></a> <br />
</div>

#menu{
background-color: #111111;
}
.opt span{
background-color: transparent;
}
.opt:hover span{
background-color: #ffffff;
}

Jeg har ikke testet koden, men den burde vel funke...

til dere som lurer: orket ikke sette opp med lister, for så å fjerne ikoner osv... enklere å bruke '<br />', selv om det er feil...

[Arve Systad]

Kunne gjort det enklare, zethyr

 

<div id="menu>
<ul>
<li><a href="#">En link</a></li>
<li><a href="#">En link til</a></li>
<li><a href="#">Enda en link</a></li>
</ul>
</div>

 

og css delen:

 

div#menu ul {
margin: 0;
padding: 0;
}

div#menu ul li {
margin:0;
padding: 0;
}

div#menu {
width: npx;         /* "n" er et tall.*/
background: #(farge);         /* sett inn ønska farge */
}

div#menu a {
width: npx;       /* "n" er et tall.*/
height: npx;      /* "n" er et tall.*/
display: block;
}

div#menu a:hover {
background: #(farge);   /* Fargen du vil ha ved mouseover */
}

 

I tillegg må du angi fontstørrelser, font familie, fontfarger, osv osv... Gi oss gjerne link til sida, så skal du sjå du får masse bra svar

Endret 1. mai 2004 av arve87

[Zethyr]

ser ikke helt hvorfor du angir klasser på anchorene dine, Arve?

Det er bedre å skrive '.opt' fremfor '#menu a'

[Arve Systad]

ser ikke helt hvorfor du angir klasser på anchorene dine, Arve?

Det er bedre å skrive '.opt' fremfor '#menu a'

Hadde copynpasta din kode, og glømte å ta vekk litt...

[Zethyr]

:!:

 

edit: Husker ikke hvor jeg leste det, men når det gjelder css:

id'er er unike, så du trenger ikke angi element-type foran:

eks : div#menu = bad, #menu = good...

jo mer konsist jo bedre:

eks: #menu ul li a.blue = bad a.blue = good...

Endret 1. mai 2004 av Zethyr

[Arve Systad]

Når eg skriver

div#menu ul li a 

Vil stilregelen kun påvirke alle a-element, inni li inni ul inni #menu.

 

Skjønner?

Ellers måtte eg angitt en egen klasse til linkane i menyen, som eg finner unødvendig. Begge deler ville fungert like greit though, og ville ikkje utgjort en forskjell i praksis.

[Zethyr]

Skjønner at det bare påvirker <a> inni <li> inni <ul> inni #menu... Synes bare å huske et sted at dette var dårlig kode-praksis. Jeg gjør det samme selv, men lurer bare på om dette stemmer?

[Anders81]

<!--

A:link {text-decoration: none; color:#A01E16}

A:visited {text-decoration: none; color:#A01E16}

A:hover { text-decoration: underline; font weight: bold; color:#FFF8F0 }

-->

 

Kjører jeg på min, bytt ut color og text decoration etc. etter ønske.

Slenges inn i head'en.

EDIT: Ops, var visst php, men jeg regner med at du bruker dette?

Endret 2. mai 2004 av Anders81

[Zethyr]

#1 Det er ikke PHP

#2 HTML skal ikke brukes til å bestemme utseende på innholdet, bare strukturen !

[Anders81]

Hvis det der er html er jeg en grønn ost.

Er nok CSS da.. ikke flink med hva som er hva..

Endret 2. mai 2004 av Anders81

[Zethyr]

De tingene her: '<!--' og '-->' tilsier start og slutt på kommentarer. De tolkes ikke hvis ikke nettleseren er sikker på hva det er. Resten av koden ble brukt før css kom på 'markedet'...

[haugsand]

Zethyr: Koden Anders81 limte inn er css. Det er god kodepraksis å "skjule" css-kode i head for eldre nettlesere som ikke støtter css, ved å bruke html-kommentarer.

[Zethyr]

WOW! en eller annen tutorial har lurt meg grundig, i tillegg til at jeg trodde css burde være eksternt, inline eller internt i style-elementet ??

edit: SHIT !! jeg har bare sett feil hele tiden, men jeg påstår enda at det er feil måte å skrive css på utenfor style-elementer...

edit2: forvirret med ett eller annet man skrev i body eller noe før år 2000...

Endret 2. mai 2004 av Zethyr

[baRs]

Hvis du vil skifte farge, men slippe å gjøre det 1000 steder kan du bare:

 

<? $farge = "#ffffff"; //skift farge her ?>

onmouseover="this.style.backgroundColor='<? echo $farge; ?>';" 
onmouseout="this.style.backgroundColor='transparent';"

 

Denne løsningen har ingenting med CSS å gjøre, men er jo et alternativ..

 

EDIT: PHP!

Endret 2. mai 2004 av baRs

[Zethyr]

CSS er jo absolutt å foretrekke fremfor javascript eller liknende. Det er bare jeg som surret når jeg så css-kode i et html-dokument, noe jeg aldri har selv...

[Anders81]

Nå legges jo java rett inn i html også da, så hva er egentlig så farlig med å velge css når man først skal legge til ting rett inn i html? Du slipper uansett unna med å bruke den en gang per side.

[Zethyr]

ja, jeg vet, men jeg foretrekker å ha det ekstern pga gamle browsere + gjenbruk

huff så mye rot jeg stilte i stand her pga for rask lesning

[Cucum(r)]

Nå legges jo java rett inn i html også da, så hva er egentlig så farlig med å velge css når man først skal legge til ting rett inn i html? Du slipper uansett unna med å bruke den en gang per side.

Bare for å være pirkete, java og javascript er to vidt forskjellige ting.