Avatar billede NielsErikP Mester
29. marts 2011 - 00:30 Der er 14 kommentarer og
1 løsning

HTML/CSS--- Menu'er???

Hej...
Jeg går på et kursus, hvor vi arbejder med CMSimple..
Jeg vil indsætte min egen dropDown menu på siden..
Men er løbet ind i et problem med CSS'en.
Når man "hover" over "Dagens menu", flyder farven med ned i menu'en der dropper ned, ideen er at selve "Dagens Menu" skal have farven og når man så "hover" over de forskellige menu'er :
Forretter--- Hovedretter-- og Desserter, skal disse lige ledes have "farven".
Tjek siden ud her  :

  http://www.thlangs.dk/onsdag/nielserik/

Og her er så CSS'en som jeg har lavet den indtil videre  :

* {
          list-style-type: none;
          text-decorartion: none;
  }
#EgenMenuFarve {
          background: black;
}
#EgenMenu {
              margin: 0px;
              padding: 0px;
}
#EgenMenu a {
              color: BurlyWood;
              font-size: 11px;
              font-weight:  bold;
}
#EgenMenu li {
              background: #524F62;
              text-align: center;
              position: relative;
              float: left;
              display: block;
              height: auto;
              line-height: 30px;
}
#wit1, #wit2, #wit3, #wit4 {
      border-right: 2px dotted black; 
      width: 105px;
}
#wit3 ul {
        margin: 0px;
        padding: 0px;
        display: none;
        width: 105px;
        height: auto;
}
#wit5, #wit6, #wit7, #wit8 {
      border-right: 2px dotted black;
      width: 100px;
}
#wit9 {
      border-right: 2px dotted black;
      width: 106px;
}
#EgenMenu li:hover {
        display: block;
        background-color: #FFFACD;
}
#EgenMenu li:hover ul {
      display:block;
}

#wit3:hover ul li:hover {
        display: block;
        background: #FFFACD;
}


Håber der er nogen med lidt erfaring, der kan hjælpe med en løsning på problemet.

På forhånd Tak..!!!
Avatar billede zips Juniormester
29. marts 2011 - 17:02 #1
Ret din #EgenMenu li:hover ul til dette
#EgenMenu li:hover ul {
    background: #524F62;       
    display:block;
    position: absolute;
}
Avatar billede NielsErikP Mester
29. marts 2011 - 17:18 #2
Hej...
Tak for det, det var også et problem jeg skulle have arbejdet på du der løste, med "position:absolute;" sådan at "tablen ikke udvider sig sammen med DropDownMenu'en.
Men mit egentlige problem bestod egentligt i at sætte bredden på den menu der falder ned.og samtidig få "bjælken" med farven "#FFFACD" til at fylde hele denne bredde, når jeg ":Hover" over eksempelvis, "Forretter, Hovedretter, Desserter"
Avatar billede zips Juniormester
29. marts 2011 - 17:27 #3
Lav en #EgenMenu li li:hover{ med de style du ønsker skal være for dine dropdown
Avatar billede NielsErikP Mester
29. marts 2011 - 18:08 #4
Hej...
Prøvede at lave en #EgenMenu li li:hover{style}.
Men der kom "bjælken" godt nok til at fylde de 200px som jeg satte den til, men selve menu blocken fulgte ikke med i bredden.
Når jeg så ændrede width'en i #wit1, #wit2, #wit3 osv... til
200 px, ændrede bredden sig godt nok, men nu lagde mine menu punkter sig efter hinanden f.eks foretterHovedretter og på næste linje Desserter, tjek evt. selv ud på :

    http://www.thlangs.dk/onsdag/nielserik/


Her er nuværende CSS  :

* {
          list-style-type: none;
          text-decorartion: none;
  }
#EgenMenuFarve {
          background: black;
}
#EgenMenu {
              margin: 0px;
              padding: 0px;
}
#EgenMenu a {
              color: BurlyWood;
              font-size: 11px;
              font-weight:  bold;
}
#EgenMenu li {
              background: #524F62;
              text-align: center;
              position: relative;
              float: left;
              display: block;
              height: auto;
              line-height: 30px;
}
#wit1, #wit2, #wit3, #wit4 {
      border-right: 2px dotted black; 
      width: 105px;
}
#EgenMenu li ul {
        display: none;
}
#wit5, #wit6, #wit7, #wit8 {
      border-right: 2px dotted black;
      width: 100px;
}
#wit9 {
      border-right: 2px dotted black;
      width: 106px;
}
#EgenMenu li:hover {
        display: block;
        background-color: #FFFACD;
}
#EgenMenu li:hover ul {
        background: #524F62;       
        display:block;
        position: absolute;
}
#wit1 ul, #wit2 ul, #wit3 ul, #wit4 ul, #wit5 ul, #wit6 ul, #wit7 ul, #wit8 ul, #wit9 ul {
        margin: 0;
        padding: 0;
        float: left;
        width: 200px;
}
#EgenMenu li li:hover {
        margin: 0;
        padding: 0;
        background: #FFFACD;
        width: 200px;
        height: auto;
}


Håber der er nogen der kan se det jeg ikke lige kan få øje på.

På forhånd tak...!!
Avatar billede zips Juniormester
29. marts 2011 - 20:20 #5
Er det som dette du ønsker http://zips.be/test/cmsimple3_2/
Avatar billede NielsErikP Mester
29. marts 2011 - 22:47 #6
Hej...
Ja...Ligenøjagtig sådan.
Så stiller jeg lige et spørgsmål, hvoedan har du strikket det sammen med samme billed og sammen menu'er osv..
Avatar billede zips Juniormester
29. marts 2011 - 23:36 #7
At lave en kopi af siden, er nemt når man som jeg, har lavet en hel del sider i CMSimple.

Jeg ville dog lave den menu dynamisk, så man ikke skal rette i sin template hver gang man laver eller sletter en side.
Avatar billede NielsErikP Mester
30. marts 2011 - 00:31 #8
Og det er noget du vil indvie, en ny begynder i...????
Forstår ikke helt, hvad du mener med dynamisk..!!!
Man er jo ligesom nød til at oprette <ul> med <li> for at danne en menu og så style den med CSS'en.
Men tilbage til mit spørgsmål, hvor laver jeg fejlen i men CSS..
Sådan at jeg ikke kan frembringe samme resultat som dig.
Avatar billede zips Juniormester
30. marts 2011 - 08:21 #9
Her er link til den css som jeg bruger, http://zips.be/test/cmsimple3_2/templates/niels/stylesheet.css

Med dynamisk, mener jeg at det er et php script som laver din menu.

Og jo jeg hjælper gerne med det :-)

Der er nogle her http://www.cmsimplewiki.com/doku.php/start
Samt jeg og andre også hjælper med CMSimple her http://www.cmsimpleforum.com
Avatar billede NielsErikP Mester
30. marts 2011 - 13:47 #10
Hej...
Ja så var jeg her..Har bare ikke været på comp. før nu..
Tak for dit CSS link, Det vil jeg lige tjekke ud, har åbenbart lige en brist i min tankegang, siden jeg ikke lige kunne se det.
ÅÅÅrrh.. Jeg er ny indenfor HTML/CSS..og vil gerne have fat i det.
Ved godt PHP og JavaScript er næste skridt i rækken af at kode hjemmesider.. og højst sandsynlig også den måde du får det bedste resultat på.
Men jeg er fuldstændig Blank, når det kommer til PHP/JavaScript..
Jeg vil tjekke de der CMSimple link ud du her har lagt...
Skulle jeg få lyst til at du hjælper, skal jeg så bare sende dig privat besked her på Eksperten.dk..
Syntes du har ydet en indsats for at hjælpe mig, så læg venligst et svar og få dine point.

Take Care..!!
Avatar billede zips Juniormester
30. marts 2011 - 22:10 #11
Her er et svar :-)

Skriv gerne en PM hvis du stå med et problem, eller bare vil høre lidt om muligheder med CMSimple.
Avatar billede NielsErikP Mester
30. marts 2011 - 23:36 #12
Hej...
Her dine point..en fornøjelse at dele dem ud her.
Tak skal du have Zips.
Vil lige høre, hvordan det kan være du har ændret line-height's til 29px istedet for 30px...og så har du ændret #wit9{ width til 112 px} der har jeg 106px og ændrer jeg den til 112px ryger menu punktet "BilledBehandling" ned i næste linje. Jeg har lige ledes bibeholdt en {line-height på 30px}.
En af de ting jeg kan huske irriterede mig mest ved CMSiple i starten var at det meste var sat op i tables, og jeg havde ellers lige fået lært at tables ikke skal bruges til design/layouts, men kun til tabuleret data.

Nå men tusind tak for hjælpen Zips.. og jeg vil prøve så småt at sætte mig lidt ind i PHP/JavaScripts.. sådan jeg kan få lært at lave den menu dynamisk... Så jeg vil på det bestemte ikke afvise at du på et tidspunkt måske finder en PM fra mig.
Avatar billede zips Juniormester
31. marts 2011 - 09:46 #13
Som du sikkert har set, så er min menu lavet så der ikke er nogen hvid kant rundt, der er kode fejl i din template, så det har jeg rettet i min, derfor er værdier, ikke helt ens, i min og din css.

Du har helt ret, table er til tabuler data, derfor er der heldigvis mange som lave dem i div nu, listen af alle template udbyder, både i table og div, findes her http://www.cmsimpleforum.com/viewtopic.php?f=13&t=1744

Tak for point :-)
Avatar billede NielsErikP Mester
31. marts 2011 - 12:40 #14
Hej..
Ja..jeg kan godt se, at de er kant rundt på min side. men jeg har ikke ændret template på afgørende områder, så der må ifølge dig være kodefejl i den template, CMSimple er født med.
Er det noget du vil forklare mig...???

Vil prøve at holde mig til <div>'s fremover...!!!
Avatar billede zips Juniormester
31. marts 2011 - 13:04 #15
Nej fejlen er din, du har indsat 2 kommntar, den ene er rigtigt lavet, mens den anden er &lt;!-- osv og det tolkes som tekst, derfor er den vist.

Når man slutter en table og starter en ny som du gør, giver det et mellemrum, jeg har ikke den table i min template som du har, min menu er indsat i en div

Så hvis du retter din kommentar samt din menu fra table til div, så vil du se at det hjælper.
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