Søg
Avatar billede meyer Nybegynder
05. juni 2008 - 08:05 Der er 16 kommentarer og
2 løsninger

ændre bredde

Kan man ændre bredden i de forskellige menuer her.
Og måske ændre fontstørrelse i undermenuerne ?

<div id="layer1" class="menu" >
  <ul>
HER F.EKS. 300px  <li><a href="default.asp">HVEM ER VI</a>
      <ul>
        <li><a href="">Menu1 sub 1</a>
          <ul>
          </ul>
          </li>
            <li><a href="">Menu1 sub 2</a>
          <ul>
            <li><a href="">subsub 1</a></li>
            </ul>
              </li>
                </ul>
                  </li>
HER f.eks. 200px  <li><a href="">PRODUKTER</a>
                <ul>
              </ul>
            </li>
          </ul>
</div>

CSS:

.menu {font-family: verdana; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; height:25px;  width: 114px; font-weight: bold; text-align:center; color:#ffffff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a {padding-right:0px;}
.menu ul li ul {display: none;}
.menu ul li ul li a {padding-right:0px;}

.menu ul li:hover a {color:#fff; background:#3E606F;}
.menu ul li:hover ul {display:block; position:absolute; top:25px; left:0; width:115px; }
.menu ul li:hover ul li a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#91aa9d; color:#fff; border-bottom :1px solid #193441;}
.menu ul li:hover ul li a:hover {background:#d1dbbd; color:#fff; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:115px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
Avatar billede fennec Nybegynder
05. juni 2008 - 08:18 #1
Ja det kan du godt. Jeg kan dog ikke se undermenuerne med den angivende kode, men overmenuen ændre du bare breden på (har kun taget breden med på eks):

.menu ul li a, .menu ul li a:visited {...width: 300px...}

Vil du ændre undermenuerne tror jeg det er denne dus skal ændre:
.menu ul li ul li a {padding-right:0px;width:200px;}
Avatar billede meyer Nybegynder
05. juni 2008 - 08:31 #2
Kan man ikke lave det direkte oppe i HTML-koden så jeg kan ændre det for hvert menupunkt? den du viser der er den ikke generel for alle menuer?
Avatar billede fennec Nybegynder
05. juni 2008 - 09:01 #3
Jo det kan du godt. Det skriver du bare direkte på linket:

<li><a href="default.asp" style="width:300px;">HVEM ER VI</a>
Avatar billede meyer Nybegynder
05. juni 2008 - 09:12 #4
Det ændrer desværre ikke noget - tror du ikke css'en overruler det?
Avatar billede mclemens Nybegynder
05. juni 2008 - 09:52 #5
Hmm, ændringen virker ok når jeg tester det ...
Er Hvem er vi ikke 300px bred når du tester nedenstående ?
Hvis ikke: Hvilken browser kører du med ?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

.menu {font-family: verdana; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; height:25px;  width: 114px; font-weight: bold; text-align:center; color:#ffffff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a {padding-right:0px;}
.menu ul li ul {display: none;}
.menu ul li ul li a {padding-right:0px;}

.menu ul li:hover a {color:#fff; background:#3E606F;}
.menu ul li:hover ul {display:block; position:absolute; top:25px; left:0; width:115px; }
.menu ul li:hover ul li a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#91aa9d; color:#fff; border-bottom :1px solid #193441;}
.menu ul li:hover ul li a:hover {background:#d1dbbd; color:#fff; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:115px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style>

</head><body>
<div id="layer1" class="menu" >
  <ul>
HER F.EKS. 300px  <li><a href="default.asp" style="width:300px;">HVEM ER VI</a>
      <ul>
        <li><a href="" style="width:200px;">Menu1 sub 1</a>
          <ul>
          </ul>
          </li>
            <li><a href="" style="width:200px;">Menu1 sub 2</a>
          <ul>
            <li><a href="">subsub 1</a></li>
            </ul>
              </li>
                </ul>
                  </li>
HER f.eks. 200px  <li><a href="">PRODUKTER</a>
                <ul>
              </ul>
            </li>
          </ul>
</div>



</body></html>
Avatar billede meyer Nybegynder
05. juni 2008 - 10:03 #6
Jo det er den faktisk :-)

Jeg kører med ie7

Hvordan løser jeg så det med bredden af undermenuer i css'en?
Avatar billede fennec Nybegynder
05. juni 2008 - 10:11 #7
Altså der hvor der står "Menu1 sub 1" og "Menu1 sub 2"?? Vil du også have dem i 300px så skriver du bare det på istedet for 200px;

<a href="" style="width:300px;">Menu1 sub 1</a>
Avatar billede fennec Nybegynder
05. juni 2008 - 10:15 #8
CSS'en som jeg (og mclemens) har brug virker i alle browsers. Har også testet i IE, FF og OP for at være sikker.

Hvis du ikke ser en ændring er det evt. fordi din browser har cashed siden. Prøv at trykke Ctrl+F5, når du opdatere. Det sletter browserens cashe.
Avatar billede meyer Nybegynder
05. juni 2008 - 10:28 #9
Ja den er jeg med på - må prøve at forklare mig bedre :-)

Som du kan se så kommer sub sub menuen jo 115px til venstre i css'en - hvordan får jeg den til at følge med den bredde jeg skriver når den laver linket med width:300px;?
Avatar billede fennec Nybegynder
05. juni 2008 - 10:38 #10
Ja, den var værre. For det skal sættes i CSS'et:
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:300px; top:0;}

Men det betyder så at det også bliver flyttet 300px hvis du laver undermenuer på "PRODUKTER".
Avatar billede meyer Nybegynder
05. juni 2008 - 10:51 #11
Kan du ikke gøre mig en tjeneste og se om den her er 300px bred - jeg kan IKKE få den til at ændre sig på min skærm lige meget hvor mange gange jeg opdaterer :-(

www.meyerweb.dk/ny/menuen.asp
Avatar billede meyer Nybegynder
05. juni 2008 - 10:55 #12
Med hensyn til subsubmenuen fandt jeg ud af at jeg kunne gøre sådan her:
<style type="text/css">
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:301px; top:0;}
</style>
ul>
            <li class="menu"><a href="">subsub 1</a></li>
            </ul>
Avatar billede meyer Nybegynder
05. juni 2008 - 11:06 #13
Glem det - havde glemt at skrive px efter 300... ser meget flov ud ;-)
Avatar billede meyer Nybegynder
05. juni 2008 - 11:29 #14
Gider I smide et svar så kan i dele

Tusind tak for hjælpen so far ... :-)
Avatar billede mclemens Nybegynder
05. juni 2008 - 11:30 #15
Mon ikke du bare skal have flere css selectors på
og så definere bredde og left individuelt ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

.menu {font-family: verdana; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; height:25px; font-weight: bold; text-align:center; color:#ffffff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a {padding-right:0px;}
.menu ul li ul {display: none;}
.menu ul li ul li a {padding-right:0px;}

.menu ul li:hover a {color:#fff; background:#3E606F;}
.menu ul li:hover ul {display:block; position:absolute; top:25px; left:0;}
.menu ul li:hover ul li a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#91aa9d; color:#fff; border-bottom :1px solid #193441;}
.menu ul li:hover ul li a:hover {background:#d1dbbd; color:#fff; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute;top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

.hvem a {width:300px;}
.hvem:hover ul a{width:200px;}
.hvem:hover ul li:hover ul {left:200px;}
.hvem:hover ul li:hover ul a{width:100px;}

.produkter a {width:200px;}
.produkter:hover ul a{width:300px;}
.produkter:hover ul li:hover ul {left:300px;}
.produkter:hover ul li:hover ul a{width:200px;}


</style>

</head><body>
<div id="layer1" class="menu" >
  <ul>
<li class="hvem"><a href="default.asp">HVEM ER VI</a>
      <ul>
        <li><a href="">Menu1 sub 1</a>
          </li>
            <li><a href="">Menu1 sub 2</a>
          <ul>
            <li><a href="">subsub 1</a></li>
            </ul>
              </li>
                </ul>
                  </li>
<li class="produkter"><a href="">PRODUKTER</a>
      <ul>
        <li><a href="">Menu2 sub 1</a>
          </li>
            <li><a href="">Menu2 sub 2</a>
          <ul>
            <li><a href="">subsub 1</a></li>
            </ul>
              </li>
                </ul>
            </li>
          </ul>
</div>



</body></html>



M.h.t. dynamisk generering af css(af php) så anbefaler jeg at du gør
det direkte på elementet med style="..." som i 05/06-2008 09:01:39.
- Men bredde og left ændres vel ikke så tit at css filen ikke lige
kan redigeres i ny og næ ?
Avatar billede mclemens Nybegynder
05. juni 2008 - 11:33 #16
Her er det ene :)
Avatar billede meyer Nybegynder
05. juni 2008 - 11:35 #17
mclemens>> Jeg er ved at lave en menu der kan køre fra databasen og med ASP - så man ved jo ikke hvor lange menuerne bliver før de er tampet ind - så det ville være rigtigt dejligt hvis jeg kunne generere dem dynamisk :-)

Prøver at få den lidt videre her:
www.eksperten.dk/spm/833923
Avatar billede fennec Nybegynder
05. juni 2008 - 11:55 #18
Her er mit svar.
.o) <-- One Eyed Jack
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
White papers
Flere white papers »