Avatar billede Keld Nielsen Professor
25. marts 2009 - 10:15 Der er 1 kommentar og
1 løsning

CSS problem i menu - Joomla

Jeg er igang med et site i Joomla, hvor menuen driller lidt.

Når jeg vælger en undermenu, ønsker jeg flg.:
1. Hovedmenuen skal stå samlet, som den gør som standard
2. Undermenuen skal placeres venstre-stillet, som hovedmenuen
3. Den aktuelle side skal også være markeret i undermenuen

Testsitet ligger her: http://lundogvinding.prolightweb.dk/

CSS'en ser sådan her ud:

@charset "utf-8";
body, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#FFF;
    background-color: #000;
    background-repeat: repeat;
    margin: 0px;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    height: 100%;
    text-align: center;
}
#container {
    position: absolute; left: 50%; top: 50%;
    width: 800;
    height: 600;
    margin-left: -416px;
    margin-top: -300px;
    padding: 15px;
}
#left_top {
    width: 350px;
    height: 175px;
    border: 1px solid #FFF;
    float: left;
}
#right_top {
    margin-left: 375px;
    width: 425px;
    height: 175px;
    border: 1px solid #FFF;
}
#content {
    width: 770px;
    height: 325px;
        padding: 5px 15px 0px 15px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    text-align: left;
        overflow: auto;
}
#content p{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    line-height: 18px;
}
#content p a:link, #content p a:visited{
    color: #CCC;
        text-decoration: none;
}
#content p a:hover{
    color: #FC3;
    text-decoration: none;
}
#content h1{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
}
#menu {
      width: 800px;
      height: 40px;
}
#menu ul{
      list-style-type: none;
      margin: 0;
      padding: 6px 0 0 0;
}
#menu li{
      font-size: 12px;     
      float: left;
      padding-right: 20px;
}
#menu a:link, #menu a:visited{
      color: #fff;
      text-decoration: none;
      text-transform: uppercase;
}
#menu a:hover{
          border-top: 2px solid #FFF;
}
#menu li.active a:link, #menu li.active a:visited{
      color: #666;
}
#menu li li{
      font-size: 10px;
      margin-top: -1px;   
      float: left;
      padding-right: 20px;
}
#menu li li a:hover{
          border-top: 1px solid #FFF;
}
#menu li li.active a:link, #menu li li.active a:visited{
      color: #666;
}
#footer {
    height: 12px;
    width: 800px;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #666;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    padding-bottom: 10px;
}
#footer p{
        margin-top: 2px;
}
Avatar billede olebole Juniormester
25. marts 2009 - 10:44 #1
<ole>

Funktionalitet er præcis, hvad CSS aldrig har været beregnet til at tage sig af. Det er, hvad script skal bruges til. Derfor har :hover da også været lige på nippet til at glide ud af CSS.

Af historiske hensyn fik den dog lov at blive - på trods af, man kunne forudse, at mange ville misbruge den til funktionalitet.

Brug JS i stedet  ;o)

/mvh
</bole>
Avatar billede Keld Nielsen Professor
01. april 2009 - 21:22 #2
Ja så, ....så måtter jeg jo plitte menuen i to ..og som blev det som ønsket!
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