|
| 2 menuer med hver sin farve? Fra : Simon Larsen |
Dato : 01-07-06 00:07 |
|
Dette er min kode for nogle links og når man kører musen over et
link lyser det rødt. Ganske enkelt er det jo.
Nu er det sådan at jeg har 2 menuer på samme side den ene menu
skal være med sort skrift og den anden kaldet
menu-prislister skal have denne nuance #cc9933. Hvordan gøres
dette?
#menu-prislister {font-size:1.9em; font-family:Monotype Corsiva;
color: #cc9933;
padding-top:30px;padding-left:220px;padding-right:120px;
text-align:center;}
a {font-size:1.7em; font-family: Monotype Corsiva; padding:0px;
color:black; background:transparent;
text-decoration:underlined;}
a:hover {color:red; background:transparent;}
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Kerim Ellentoft (01-07-2006)
| Kommentar Fra : Kerim Ellentoft |
Dato : 01-07-06 00:35 |
|
Simon Larsen skrev:
>Nu er det sådan at jeg har 2 menuer på samme side den ene menu
>skal være med sort skrift og den anden kaldet
>menu-prislister skal have denne nuance #cc9933. Hvordan gøres
>dette?
Man læser http://www.html.dk/tutorials/css/lektion7.asp,
--
Kerim
Som ikke bruger Spamfighter, der spammer nyhedsgrupperne
og sender indlæg to gange.
Svar under det du citerer og citer kun det du svarer på - tak.
| |
Rune Jensen (01-07-2006)
| Kommentar Fra : Rune Jensen |
Dato : 01-07-06 07:52 |
|
"Simon Larsen" wrote in message...
> Dette er min kode for nogle links og når man kører musen over et
> link lyser det rødt. Ganske enkelt er det jo.
> Nu er det sådan at jeg har 2 menuer på samme side den ene menu
> skal være med sort skrift og den anden kaldet
> menu-prislister skal have denne nuance #cc9933. Hvordan gøres
> dette?
>
>
> #menu-prislister {font-size:1.9em; font-family:Monotype Corsiva;
> color: #cc9933;
> padding-top:30px;padding-left:220px;padding-right:120px;
> text-align:center;}
>
> a {font-size:1.7em; font-family: Monotype Corsiva; padding:0px;
> color:black; background:transparent;
> text-decoration:underlined;}
>
> a:hover {color:red; background:transparent;}
tilføj (ikke afprøvet, men bør virke):
#menu-prislister a{color: #c93}
lige efter definitionen af a, og før a:hover. Dette fordi visse browsere
vil have a og pseudo-elementer i en bestemt rækkefølge.
Med hensyn til background, så er den fra starten transparent på både a
og pseudo-elementet... nogen grund, til du har den? Ligeledes er a
normalt understreget, og det burde således heller ikke være nødvendigt
at lave en text-decoration: underlined.
MVH
Rune
| |
Dennis Munding (01-07-2006)
| Kommentar Fra : Dennis Munding |
Dato : 01-07-06 09:42 |
|
Hej Rune!
"Rune Jensen" <rune.jensen@villabynet.dk> skrev i en meddelelse
news:44a61a28$0$1974$456a7185@news.cirque.dk...
> tilføj (ikke afprøvet, men bør virke):
>
> #menu-prislister a{color: #c93}
Og for at undgå en advarsel i valideringen, skal der lige tilføjes:
background-color:inherit;
// "inherit" nedarver baggrundsfarven fra "moder-elementet" - så vidt jeg er
informeret - hvis man bruger "transparent" får man også en advarsel/fejl i
valideringen.
så linien ser således ud:
#menu-prislister a{color: #c93;background-color:inherit;}
> lige efter definitionen af a, og før a:hover. Dette fordi visse browsere
> vil have a og pseudo-elementer i en bestemt rækkefølge.
Så lærte jeg også noget nyt i dag... Tak for det.
> Med hensyn til background, så er den fra starten transparent på både a
> og pseudo-elementet... nogen grund, til du har den? Ligeledes er a
> normalt understreget, og det burde således heller ikke være nødvendigt
> at lave en text-decoration: underlined.
M.h.t. background, så kan det skyldes valideringen, at den er sat - uden
background-color får man som nævnt ovenfor en advarsel, hvis ikke den er
defineret, men jeg mener også, at det gør sig gældende, hvis man sætter den
til transparent...?
Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
http://www.cantica.dk/, http://www.pe-vagtservice.dk/,
http://www.eds-denmark.dk/
| |
Simon Larsen (01-07-2006)
| Kommentar Fra : Simon Larsen |
Dato : 01-07-06 23:26 |
|
Dennis Munding wrote in dk.edb.internet.webdesign.html:
> Hej Rune!
> "Rune Jensen" <rune.jensen@villabynet.dk> skrev i en meddelelse
> news:44a61a28$0$1974$456a7185@news.cirque.dk...
> > tilføj (ikke afprøvet, men bør virke):
> >
> > #menu-prislister a{color: #c93}
>
> Og for at undgå en advarsel i valideringen, skal der lige tilføjes:
> background-color:inherit;
> // "inherit" nedarver baggrundsfarven fra "moder-elementet" - så vidt jeg er
> informeret - hvis man bruger "transparent" får man også en advarsel/fejl i
> valideringen.
>
> så linien ser således ud:
> #menu-prislister a{color: #c93;background-color:inherit;}
>
> > lige efter definitionen af a, og før a:hover. Dette fordi visse browsere
> > vil have a og pseudo-elementer i en bestemt rækkefølge.
>
> Så lærte jeg også noget nyt i dag... Tak for det.
>
> > Med hensyn til background, så er den fra starten transparent på både a
> > og pseudo-elementet... nogen grund, til du har den? Ligeledes er a
> > normalt understreget, og det burde således heller ikke være nødvendigt
> > at lave en text-decoration: underlined.
>
> M.h.t. background, så kan det skyldes valideringen, at den er sat - uden
> background-color får man som nævnt ovenfor en advarsel, hvis ikke den er
> defineret, men jeg mener også, at det gør sig gældende, hvis man sætter den
> til transparent...?
>
>
> Med venlig hilsen
> --
> Dennis Munding
> Web-master
> http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
> http://www.cantica.dk/, http://www.pe-vagtservice.dk/,
> http://www.eds-denmark.dk/
>
>
Hej Dennis,
Jo tak det hjalp på at teksten til menuen fik en anden farve, men og det er her
min nybegynder spørgsmål kommer ind i billedet, hvordan får jeg så den selvsamme
tekst til at få "a:hover"-funktionen?
Årsagen til at jeg bruger text-dekoration:underlined er at da mine links i den
første menu min såkladte "hovedmenu" blev skabt var de ikke understreget og jeg
læste at det var en dårlig idé ikke at have dem understreget, da det kunne
forvirre brugeren.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Dennis Munding (02-07-2006)
| Kommentar Fra : Dennis Munding |
Dato : 02-07-06 08:46 |
|
Hej Simon!
>> Rune Jensen skrev i en meddelelse 1/7-2006, kl. 8:51:
>>
> > tilføj (ikke afprøvet, men bør virke):
> >
> > #menu-prislister a{color: #c93}
Simon Larsen skriblede d. 2/7-2006, kl. 00:26:
> Hej Dennis,
>
> Jo tak det hjalp på at teksten til menuen fik en anden farve, men og det
> er her
> min nybegynder spørgsmål kommer ind i billedet, hvordan får jeg så den
> selvsamme
> tekst til at få "a:hover"-funktionen?
Således:
#menu-prislister a:hover{color: #fff(VÆLG SELV
FARVE);background-color:#000(VÆLG SELV FARVE);}
Du kan også bruge en klasse istedet:
I CSS'en:
a.menu2 {color:#000;background-color:#fff;} //sort tekst med hvid baggrund
a.menu2:hover {color:#fff;background-color:#000;} // hvid tekst med sort
baggrund
Og i html'en:
<a class"menu2" href="...">Link-tekst</a>
> Årsagen til at jeg bruger text-dekoration:underlined er at da mine links i
> den
> første menu min såkladte "hovedmenu" blev skabt var de ikke understreget
> og jeg
> læste at det var en dårlig idé ikke at have dem understreget, da det kunne
> forvirre brugeren.
Ok, men det er ikke nødvendigt at specificere det.
Som standard er alle links understreget. D.v.s. at selv om du fjerner
"text-decoration:underline;", så vil dine links stadig være understreget,
medmindre du laver en klasse (class), hvor specifikationerne er anderledes -
det er det gode ved klasser - de er meget alsidige og fleksible. De kan
bruges flere gange på samme side, hvorimod id'er (#) kun kan bruges én gang
på hver side.
Og ja - det er en god idé at have understreget sine links, eller på anden
måde fremhævet teksten, så brugeren kan se, at der er tale om et link.
Jeg er selv ret ny i "branchen", og jeg lavede samme "stunt" i starten,
indtil jeg blev gjort opmærksom på, at det var svært at skelne links fra
brødtekst.
Vi lærer så længe vi lever, og det er fejlene vi lærer mest af...
Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
http://www.cantica.dk/, http://www.pe-vagtservice.dk/,
http://www.eds-denmark.dk/
| |
Allan Vebel (02-07-2006)
| Kommentar Fra : Allan Vebel |
Dato : 02-07-06 23:15 |
|
Simon Larsen skrev:
> hvordan får jeg så den selvsamme tekst til at få
> "a:hover"-funktionen?
Du kan også definere at de to menuer ligger i hver sin
blok, så er det bare at tilgå de enkelte blokke med css,
eksempel:
<div id="menublok1">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="menublok2">
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
og
#menublok1{
/* definitioner på selve blokken */
}
#menublok1 a{
color:blue;
background:inherit;
}
#menublok1 a:hover{
color:white;
background:blue;
}
#menublok2{
/* definitioner på selve blokken */
}
#menublok2 a{
color:red;
background:inherit;
}
#menublok2 a:hover{
color:white;
background:red;
}
i css-filen.
Skal du også lave noget på <ul> og <li>, hedder den bare
#menublok1 ul{
/* */
}
og / eller
#menublok1 li{
/* */
}
Der er uanede muligheder.
--
Allan Vebel
http://html-faq.dk
| |
Rune Jensen (02-07-2006)
| Kommentar Fra : Rune Jensen |
Dato : 02-07-06 21:05 |
|
"Dennis Munding" wrote in message...
> "Rune Jensen" skrev i en meddelelse
> > lige efter definitionen af a, og før a:hover. Dette fordi visse
browsere
> > vil have a og pseudo-elementer i en bestemt rækkefølge.
>
> Så lærte jeg også noget nyt i dag... Tak for det.
Selvtak. Det er faktisk, som Jørgen siger, en standard og ikke en
browserfejl, som jeg troede
> M.h.t. background, så kan det skyldes valideringen, at den er sat
Det er selvfølgelig rigtigt nok. Og den gør jo ingen skade.
> - uden
> background-color får man som nævnt ovenfor en advarsel, hvis ikke den
er
> defineret, men jeg mener også, at det gør sig gældende, hvis man
sætter den
> til transparent...?
Der er jeg faktisk lidt blank. Måske andre ved det?
MVH
Rune
| |
Jørgen Farum Jensen (02-07-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 02-07-06 23:17 |
|
Rune Jensen wrote:
> "Dennis Munding" wrote in message...
>
>
>>"Rune Jensen" skrev i en meddelelse
>
>
>>>lige efter definitionen af a, og før a:hover. Dette fordi visse
>
> browsere
>
>>>vil have a og pseudo-elementer i en bestemt rækkefølge.
>>
>>Så lærte jeg også noget nyt i dag... Tak for det.
>
>
> Selvtak. Det er faktisk, som Jørgen siger, en standard og ikke en
> browserfejl, som jeg troede
>
>
>>M.h.t. background, så kan det skyldes valideringen, at den er sat
>
>
> Det er selvfølgelig rigtigt nok. Og den gør jo ingen skade.
>
>
>>- uden
>>background-color får man som nævnt ovenfor en advarsel, hvis ikke den
>
> er
>
>>defineret, men jeg mener også, at det gør sig gældende, hvis man
>
> sætter den
>
>>til transparent...?
>
>
> Der er jeg faktisk lidt blank. Måske andre ved det?
>
Simpelt: W3C's validator er fejlbehæftet på dette
punkt og enkelte andre punkter - jf. Jeffrey
Zeldmans "Designing with web standards."
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
Jørgen Farum Jensen (01-07-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 01-07-06 09:59 |
|
Rune Jensen wrote:
> lige efter definitionen af a, og før a:hover. Dette fordi visse browsere
> vil have a og pseudo-elementer i en bestemt rækkefølge.
Ikke "visse browsere", /alle/ browsere
skal som følge af CSS-logikken have a-markørens
pseudoklasser serveret som følger:
a
a:link
a:visited
a:focus
a.hover
a:active
Læs mere om hvorfor på websiden
www.meyerweb.com/eric/css/link-specificity.html
Mit råd er at droppe a:active. Formdeklarationer
for denne tilstand tolkes forkert af IE.
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
|
|