php - Problemer med aktivt menupunkt, HJÆLP - Udvikleren.dk

Tags: menu active html css php

<< < 1 2 > >>

Bruger #17820 @ 18.01.14 16:16

Hej!

Har problemer med at style mit aktive menupunkt. "Boksen" skal have en hvid baggrundsfarve - men bliver kun hvid lige bag teksten, i stedet for at udfylde det hele...

Her er koden:

HTML kode

 <nav>
 
     <ul>
     
     <?php if ($this_page == "index.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="index.php" class="<?php echo $active_class ?>">Forside</a></li>
         
     <?php if ($this_page == "om.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="om.php" class="<?php echo $active_class ?>">Om os</a></li>
         
     <?php if ($this_page == "malselv.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="malselv.php" class="<?php echo $active_class ?>">Mal selv</a></li>
         
     <?php if ($this_page == "galleri.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="galleri.php" class="<?php echo $active_class ?>">Galleri</a></li>
         
     <?php if ($this_page == "kontakt.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="kontakt.php" class="<?php echo $active_class ?>">Kontakt</a></li>
     
     
     </ul>
 
 </nav>

CSS kode

 .menu{
     float: left;
     text-align: center;
     overflow:visible;
     padding: 1%;
     display: inline;
     margin: 0 1% 0 0;
     background-color:#3376bc;
     width:16.7%;
     border-top-left-radius: 0.6em;
     border-top-right-radius: 0.6em;
     font-family: font-family: 'Noto Serif', serif;
     font-size: 1.1em;    
 }
 
 /*nav ul{
     background-color: #CCC;
     width: 100%;
 }*/
 
 .menu a{
     text-decoration: none;
     color: white;
 }
 
 .menu a:visited{
     text-decoration: none;
 }
 
 .menu:hover{
 }
 
 .menu a:hover{
     text-decoration: underline;
 }
 
 .menu a.active{
     -webkit-appearance:none;
     background-color:#fff;
     color:#03C;
         }

Håber der er nogen, der kan hjælpe! På forhånd tak.

20 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #17820 @ 18.01.14 19:21

Hvis jeg gør det, så kommer der slet ingen hvid :-(

Bruger #6559 @ 18.01.14 19:22

843

Prøv lige at linke dit nyeste css

Bruger #17820 @ 18.01.14 19:24

CSS kode

 nav{
     overflow:hidden;
     width: 80%;
     padding-top: 2%;
 }
 
 .menu{
     float: left;
     text-align: center;
     overflow:visible;
     display: inline-block;
     margin: 0 1% 0 0;
     background-color:#3376bc;
     border-top-left-radius: 0.6em;
     border-top-right-radius: 0.6em;
     font-family: font-family: 'Noto Serif', serif;
     font-size: 1.1em;    
 }
 
 /*nav ul{
     background-color: #CCC;
     width: 100%;
 }*/
 
 .menu a{
     padding: 1%;
     width:16.7%;
     text-decoration: none;
     color: white;
 }
 
 .menu a:visited{
     text-decoration: none;
 }
 
 .menu:hover{
 }
 
 .menu a:hover{
     text-decoration: underline;
 }
 
 li.active{
     -webkit-appearance:none;
     background-color:#fff;
     color:#03C;
     display:block;
         }

Bruger #6559 @ 18.01.14 19:27

843

CSS kode

 nav{
     overflow:hidden;
     width: 80%;
     padding-top: 2%;
 }
 
 .menu{
     float: left;
     text-align: center;
     overflow:visible;
     display: inline-block;
     margin: 0 1% 0 0;
     background-color:#3376bc;
     border-top-left-radius: 0.6em;
     border-top-right-radius: 0.6em;
     font-family: font-family: 'Noto Serif', serif;
     font-size: 1.1em;    
 }
 
 /*nav ul{
     background-color: #CCC;
     width: 100%;
 }*/
 
 .menu a{
     padding: 1%;
     width:16.7%;
     text-decoration: none;
     color: white;
 }
 
 .menu a:visited{
     text-decoration: none;
 }
 
 .menu:hover{
 }
 
 .menu a:hover{
     text-decoration: underline;
 }
 
 ------
 menu.active{
     -webkit-appearance:none;
     background-color:#fff;
     color:#03C;
     display:block;
         }
 -------

Ok prøv med dette. Og du skal også huske at rette dit php script så din klasse bliver sat på dit li .menu element i stedet for dit a tag.

Har markeret hvor jeg har lavet en rettelse

Bruger #17820 @ 18.01.14 19:34

Nu har jeg sat din css kode ind, og rettet i php - men ved ikke om jeg har gjort det rigtigt?
Det ser i hvert fald ikke rigtigt ud i browseren.

PHP kode

 <nav>
 
     <ul>
     
     <?php if ($this_page == "index.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="<?php echo $active_class ?>"><a href="index.php" class="menu">Forside</a></li>
         
     <?php if ($this_page == "om.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="<?php echo $active_class ?>"><a href="om.php" class="menu">Om os</a></li>
         
     <?php if ($this_page == "malselv.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="<?php echo $active_class ?>"><a href="malselv.php" class="menu">Mal selv</a></li>
         
     <?php if ($this_page == "galleri.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="<?php echo $active_class ?>"><a href="galleri.php" class="menu">Galleri</a></li>
         
     <?php if ($this_page == "kontakt.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="<?php echo $active_class ?>"><a href="kontakt.php" class="menu">Kontakt</a></li>
     
     
     </ul>
 
 </nav>

Bruger #6559 @ 18.01.14 19:39

843

Du må gerne have flere klasser på et tag. Du skal beholde din menu klasse på som vil sørge for at din tab for sin "base" udseende og så skal .active sørge for at den for den udseende den har når den er valgt.

PHP kode

 <nav>
 
     <ul>
     
     <?php if ($this_page == "index.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu <?php echo $active_class ?>"><a href="index.php" class="menu">Forside</a></li>
         
     <?php if ($this_page == "om.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu <?php echo $active_class ?>"><a href="om.php" class="menu">Om os</a></li>
         
     <?php if ($this_page == "malselv.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu <?php echo $active_class ?>"><a href="malselv.php" class="menu">Mal selv</a></li>
         
     <?php if ($this_page == "galleri.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="<?php echo $active_class ?>"><a href="galleri.php" class="menu">Galleri</a></li>
         
     <?php if ($this_page == "kontakt.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu <?php echo $active_class ?>"><a href="kontakt.php" class="menu">Kontakt</a></li>
     
     
     </ul>
 
 </nav>

Desuden tror jeg faktisk også at den css jeg skrev før skal have en lille modification mere, så det kommer til at ligne dette:
.menu.active{
-webkit-appearance:none;
background-color:#fff;
color:#03C;
display:block;
}
-------

(Havde glemt et punktum).

Bruger #17820 @ 18.01.14 19:45

Det dur slet slet ikke :-( ØV. Menupunkterne begynder bare at flytte rundt, og det gør resten af indholdet også. Den hvide farve forsvinder helt...

Bruger #6559 @ 18.01.14 19:46

843

Hvis det ikke er et problem kan du så prøve at ligge du ud igen, så jeg kan se det?

Bruger #17820 @ 19.01.14 12:14

Hej Martin

Jeg har nu lagt siden online med ændringerne ovenfor :-)

Bruger #6559 @ 22.01.14 18:32

843

Hej Camilla,

Jeg beklager jeg ikke lige svarer før nu. Ok så må vi prøve at tage den lidt mere metodisk.

Start med at fjerne "menu" klassen fra dine a tags under dine li tags. Så burde de antage en mere anstændig form.

Derefter vil jeg sætte en width: 100px på din .menu klasse og en padding på 10px;

For at man kan læse din "aktiv" fane vil jeg sætte color på følgenden måde:

.menu.active a { color: "farven"; }

Håber det guider dig i den rigtige retning.

<< < 1 2 > >>

Problemer med aktivt menupunkt, HJÆLP

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler