"Isolere" ut deler av CSS

[Anxe]

Morn godtfolk.

 

Jeg har funnet en fin liten dropdown-meny jeg vil bruke på siden min, men personen som har skrevet koden har kun brukt "standard" oppsett på css'en (li, ul a osv) slik at når jeg kliner denne css'en inn i min css så føkker den opp hele sida mi.

 

Er det en _veldig_ enkel måte å løse dette på, f.eks. ved å bruke en div-tag? Eller må jeg begynne å skrive om alle class'ene i html'en og hele css'en?

[Steinmann]

Gi <ul> en ekstra klasse eller en id bare?

Hvordan er strukturen nå?

[Anxe]

CSS:

 

/* the menu */

ul,li,a {
 display:block;
 margin:0;
 padding:0;
 border:0;
}

ul {
 width:120px;
 border:1px solid #9d9da1;
 background:#007CBC;;
 list-style:none;
}

li {
 position:relative;
 padding:1px;
 padding-left:2px;
 background:;
 z-index:9;
}
 li.folder	{ background:; }  
 li.folder ul {
 	position:absolute;
 	left:90px; /* IE */
 	top:5px;
 }  
 	li.folder>ul { left:110px; } /* others */

a {
 padding:2px;
 border:1px solid white;
 text-decoration:none;
 color:white;
 font-weight:none;
 width:100%; /* IE */
}
 li>a { width:auto; } /* others */

li a.submenu {
 background:;
}

/* regular hovers */

a:hover {
 /*border-color:gray;
 background-color:#bbb7c7;
 color:black;*/
}
 li.folder a:hover {
 	background-color:#bbb7c7;
 }

/* hovers with specificity */

li.folder:hover { z-index:10; }  
 
ul ul, li:hover ul ul {
 display:none;
}

li:hover ul, li:hover li:hover ul {
 display:block;
}  

 

HTML:

 

<ul id="menu">	
  
   <li class="folder">   
   <a class="submenu"> Om studiet </a>
   <ul>
    <li><a href="hh"> Studiet </a></li>
    <li><a href="hh"> Her holder vi til </a></li>
   </ul>
  </li>
  
   <li class="folder">
   <a class="submenu"> Om seminaret</a>
   <ul>
    <li><a href="hh"> Seminaret </a></li>
    <li><a href="hh"> Seminar 2006 </a></li>
    <li><a href="hh"> Seminar 2005 </a></li>
   </ul>
  </li>
  <li class="folder"><a href="hh"> Forum </a></li>
  <li class="folder"><a href="hh"> Bilder </a></li>
  <li class="folder"><a href="hh"> Lenker </a></li>
  <li class="folder"><a href="hh"> Kontakt oss </a></li>
</ul>

Endret 31. mars 2007 av Anxe

[Steinmann]

Sett #menu forran alle elementene i css koden din.

og første linje kan du endre litt:

#menu * {
margin: 0;
padding: 0;
osv

#menu li {
position:relative;
padding:1px;
padding-left:2px;
background:;
z-index:9;
}

 

Der det starter med ul, for eksempel ul ul { må du skrive ul#menu ul {

 

Got it?

[Anxe]

Jupp, var noe sånt jeg hadde begynt å prøve på. Problemet mitt oppstår på disse stedene:

 

li {
position:relative;
 padding:1px;
 padding-left:2px;
 background:;
 z-index:9;
}
 li.folder  { background:; }  
 li.folder ul {
 	position:absolute;
 	left:90px; /* IE */
 	top:5px;
 }  
 	li.folder> ul { left:110px; } /* others */

 

  li>a { width:auto; } /* others */

 

	li:hover ul, li:hover li:hover ul {
 display:block;
}

Hvor putter jeg inn #menu i disse tilfellene?

 

 

 

Edit: Slenger bare inn det jeg har gjort jeg, kanskje du kan rette?

 

#menu * {
 font-family: verdana;
 font-size:12px;
}

/* the menu */

#menu ul,li,a {
 display:block;
 margin:0;
 padding:0;
 border:0;
}

#menu ul {
 width:120px;
 border:1px solid #9d9da1;
 background:#007CBC;;
 list-style:none;
}

#menu li {
 position:relative;
 padding:1px;
 padding-left:2px;
 background:;
 z-index:9;
}
 #menu li.folder { background:; }  
 #menu li.folder ul {
 	position:absolute;
 	left:90px; /* IE */
 	top:5px;
 }  
 	#menu li.folder>ul { left:110px; } /* others */

#menu a {
 padding:2px;
 border:1px solid white;
 text-decoration:none;
 color:white;
 font-weight:none;
 width:100%; /* IE */
}
 #menu li>a { width:auto; } /* others */

#menu li a.submenu {
 background:;
}

/* regular hovers */

#menu a:hover {
 /*border-color:gray;
 background-color:#bbb7c7;
 color:black;*/
}
 #menu li.folder a:hover {
 	background-color:#bbb7c7;
 }

/* hovers with specificity */

#menu li.folder:hover { z-index:10; }  
 
ul#menu ul, li:hover ul#menu ul {
 display:none;
}

#menu li:hover ul, li:hover li:hover ul {
 display:block;
}  

 

Edit nr. 2: Holder det å skrive ul id i html'en, eller må jeg ha med li id og a id og alt mulig sånt i tillegg?

Endret 31. mars 2007 av Anxe

[Steinmann]

#menu * {
 font-family: verdana;
 font-size:12px;
 display:block;
 margin:0;
 padding:0;
 border:0;
}

/* the menu */

ul#menu {
 width:120px;
 border:1px solid #9d9da1;
 background:#007CBC;;
 list-style:none;
}

#menu li {
 position:relative;
 padding:1px;
 padding-left:2px;
 background:;
 z-index:9;
}
 #menu li.folder { background:; }  
 #menu li.folder ul {
 	position:absolute;
 	left:90px; /* IE */
 	top:5px;
 }  
 	#menu li.folder>ul { left:110px; } /* others */

#menu a {
 padding:2px;
 border:1px solid white;
 text-decoration:none;
 color:white;
 font-weight:none;
 width:100%; /* IE */
}
 #menu li>a { width:auto; } /* others */

#menu li a.submenu {
 background:;
}

/* regular hovers */

#menu a:hover {
 /*border-color:gray;
 background-color:#bbb7c7;
 color:black;*/
}
 #menu li.folder a:hover {
 	background-color:#bbb7c7;
 }

/* hovers with specificity */

#menu li.folder:hover { z-index:10; }  
 
ul#menu ul, li:hover ul ul {
 display:none;
}

#menu li:hover ul, li:hover li:hover ul {
 display:block;
}  

 

8281593[/snapback]

that should do it, hvis jeg ikke misset noe

[Anxe]

Hmm, jeg får fortsatt noe feil ass... noe som ikke stemmer her.

 

http://logistikk.hist.no/mf/dropdowntest2.php

 

Når man holder pekeren over f.eks. "om studiet" så skal det dukke opp subkategorier som har blå bakgrunn. Nå er de feilstilt og vises ikke (du må bevege pila til høyre for å kunne se sublinkene.)

 

Holder det med ul id="menu" eller må det være med li og a- id også?

[Steinmann]

Virker som om du har noe problemer med fargene. For den kommer frem, bare med feil bakgrunn

[Anxe]

Nja, men det er ikke bare det... det er noe feil med bredden på sublinkene også. De er satt riktig til høyre, men er for langt fra kanten på venstresiden. Så det er noe med subfolderne som ikke stemmer...