Avatar billede bluesnix Nybegynder
07. november 2007 - 15:01 Der er 7 kommentarer

Aktive links skal være sorte og understreget

Hej

Jeg kan ikke lige umiddelbart gennemskue, hvorda jeg i min topmenu (#dTop) gør de aktive links sort og understreget (i min Joomla!-template). Jeg kan kun gøre dette med 'hover'. Nogen der kan hjælpe?

Koden ser således ud:


/**
*  Copyright www.joomlaDesigns.co.uk - 2007
*/

/* *********************** GENERAL SETTINGS    *********************** */
* {
    padding: 0px;
    margin: 0px;
}
html {
    height: 100%;
    padding-bottom: 0.1%; /* force scrollbars */
}
html, body{
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #333;
}
body#normal {background: #333;}

/*  Global Formatting */
h1,h2,h3,h4,h5,h6 {padding: 6px 0 4px;}
h1,.contentheading {font: normal 24px "Trebuchet MS",Verdana,sans-serif; color: #111; line-height: 24px; padding-bottom: 8px;}
h2 {font: bold 14px Verdans,sans-serif; letter-spacing: -1px; line-height: 18px; color: #111;}
h3 {font: bold 16px Verdana,sans-serif; line-height: 20px;}
h4 {font: bold 13px Verdans,sans-serif; line-height: 14px;}
h5 {font: bold 12px Verdans,sans-serif; line-height: 13px;}
h6 {font: bold 11px Verdans,sans-serif; line-height: 12px;}

td{font-size: 11px;}
th{font-size: 11px;}


a {color: #a9d132; text-decoration: none;}
a:hover {color: #000; text-decoration: underline;}
a.image, a.image:hover  {border:0;}
a.mainlevel {font: normal 1.2em sans-serif; line-height: 20px; background: url(../images/dot.gif) no-repeat left center; padding-left: 10px;}

li{list-style: none; }
#dMain ul {clear: both; padding: 6px 20px 12px;}

fieldset {
    width: 470px;
    padding: 5px;
    border: 1px solid #eee;
}
/* *********************** END GENERAL SETTINGS *********************** */

/* *********************** LAYOUT SETTINGS      *********************** */

/* top */
#dTop {
    border-top: 5px solid #000;
    background: #111 url(../images/grdnt_black.jpg) repeat-x;
    color: #FFF;
    padding: 24px 0;
}
#dTop .center {padding: 0;}
#dTop .left {font: normal 2em sans-serif; padding-left: 15px; line-height: 50px;}
#dTop .right {width: 150px;}
#dTop .search {padding-top: 15px;}
#dTop .topMenu {clear: both;}
#dTop .topMenu li {float: right; margin-left: 30px;}
#dTop a {color: #fff; font: normal 1.2em sans-serif; text-decoration: none;}
#dTop a:hover {color: #000;text-decoration: underline;}
#dTop form {float: right; padding: 0; margin: 0;}

/* newsflash */
#dFlash {
    background: #000 url(../images/flash.jpg) repeat-x;
    color: #FFF;   
}

/* main content styles */
#dMain {background: #FFF url(../images/main.jpg) repeat-x; padding: 10px; 0;}
.mid li,.mainright li,.mainleft li {list-style: disc;}
#dMain p {padding: 3px 0 4px;}

.componentheading {
    font: normal 1.4em Verdana,sans-serif;
    padding-bottom: 6px;
}
.sectiontableentry1,.sectiontableentry2 {padding: 2px 0;}

table.contentpaneopen {margin-right: 16px;}

.mosimage_caption {font-style: italic;}

.contenttoc {
    padding: 10px;
    text-align: left;
}
.contentpaneopen img {
    border: 5px solid #DDD;
    margin: 10px;
}
.buttonheading img {border: none; margin: 0;}

/* footer */
#dFooter {
    border-top: 5px solid #bce446;
    color: #CCC;
}
#dFooter a {color: #FFF;}

/* forms */
.left form {padding-bottom: 10px;}
form a {display: inline;}

/* misc */
.center {width: 760px; margin: 0 auto; padding: 12px 0;}
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.right {float: right;}
.small {color: #333;}
.createdate {padding-bottom: 6px; color: #999;}

/* column combinations */
.col2 .mainleft,.col2 .mainright {width: 78%; float: left;}
.col2 .mainright {float: right;}

.col3 .left,.col3 .right,.col2 .left,.col2 .right {width: 20%;}
.col3 .mid {float: left; width: 54%; margin: 0 2%;}

/* *********************** END LAYOUT SETTINGS  *********************** */
/**
*  Copyright www.joomlaDesigns.co.uk - 2007
*/
Avatar billede jokkejensen Novice
07. november 2007 - 15:34 #1
http://www.google.dk/search?hl=da&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=active+pseudo+class&spell=1

Nu kender jeg ikke til joomla, men er 100% sikker på de lige kan ændre klasse på det aktive menu punkt. Det vil lette det lidt, :active driller ofte i alle browsers.

/JJ
Avatar billede bluesnix Nybegynder
07. november 2007 - 15:46 #2
Tak! Jeg er ikke super skrap i CSS, så jeg tænkte på, om du kunne illustrere, hvordan koden så ville se ud, hvis jeg skulle ændre den?
Avatar billede comodin Nybegynder
07. november 2007 - 23:43 #3
du kan vel indsætte noget ligende:
a:active {color:#000; text-decoration:underline;} nedenunder dine andre a værdier
og denne i dine layout settings, under dine #top værdier:
#dTop a:active {color: #000;text-decoration: underline;}

måske...
Avatar billede roenving Novice
09. november 2007 - 04:29 #4
Ifølge css-standarden betyder :active et element, hvor man har trykket museknappen ned på, men bla. en enkelt mindre udbredt browser (IE !-) fortolker det som, at museknappen har været trykket ned og intet andet element i den aktuelle kontekst har fået focus, hvilket giver visse relativt uforudseelige forskelle på browsernes tolkning ...

-- for at være sikker på, at alle ser det samme, skal du enten server-side bestemme det (altså hardcode det eller lade et dynamisk sprog, f.eks. php eller asp[.net] kode det !-) eller med javascript teste matches og så sætte de nødvendige style-properties, når linket er til den aktuelle side !o]
Avatar billede bluesnix Nybegynder
09. november 2007 - 08:47 #5
Tak roenvig!

Så fik jeg et lille indblik i det, men det lyder til at være udenfor min rækkevidde, så jeg må vist acceptere, at min template ikke ser HELT lige sådan ud, som jeg skulle ønske - men det er heldigvis småting. :-)

Men nu ved jeg i hvert fald, hvordan jeg kan gå videre med det, hvis det skulle være. Send et svar, så får du points.
Avatar billede roenving Novice
09. november 2007 - 15:08 #6
Velbekomme '-)
Avatar billede roenving Novice
09. november 2007 - 15:09 #7
-- og der skal vist deles her, for 100 point er langt i overkanten !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester