Meny funkar inte riktigt...

8 svar · 418 visningar · startad av streetrobban 29 dec. 2006

streetrobbanMedlem sedan jan. 20011 140 inlägg

Frågan29 dec. 2006 12:02#1

Hejsan, jag hittade ett script som jag nu försöker style efter mitt behag. Men det funkar inte riktigt som jag vill.

Jag vill att menyvalen ska "sitta ihop". Det ska alltså inte vara något mellanrum mellan de olika "blocken" man klickar på. Just nu är det ca 10px mellan "blocken" när de inte är utfällda, och ca 3px mellan "blocken" när de är utfällda. Annars ligger ju texterna på rätt ställen etc. Det är bara mellanrummen jag vill ha bort :)

Jag bifogar scritet i en zip-fil så ni själva kan se vad jag menar.

meny.zip (11 kB)

bossseMedlem sedan juni 2003772 inlägg

29 dec. 2006 14:07#2

Detta var en jobbig meny!
Du får helt enkelt minska padding-top och padding.bottom på alla ställen, kanske till 2px.
Sedan kanske du får lägga in border:1px solid #EDECE9; också.
D.v.s. samma borderfärg som bakgrunden.
Allt detta görs i filen sddm.css

F.ö. är väl border: 0px solid #FFFFFF; som finns på ett ställe onödigt.
Går väl lika bra med border: 0;

Detta är lite klurigt då den ej visas lika i t.ex. InternetExplorer och Firefox.
Annars har jag en nästan likadan listmeny på min sida, helt utan mellanrum HÄR
Du kan ju kolla den också

streetrobbanMedlem sedan jan. 20011 140 inlägg

29 dec. 2006 14:38#3

Men om jag ändrar padding så flyttas ju texten mot kanten av rutan, den ska fortfarande ligga med samma luft omkring sig till rutan, men rutorna ska flyttas närmre varandra.

bossseMedlem sedan juni 2003772 inlägg

29 dec. 2006 17:44#4

OK! Lägg då bara till detta för navbar i css-filen.

.navbar
{ width:140px;background-color: #EDECE9;
}

streetrobbanMedlem sedan jan. 20011 140 inlägg

2 jan. 2007 12:30#5

Det blir ingen skillnad, här är hela CSS filen.

.navbar
{
  width: 140px; background-color: #EDECE9;
}  

.mainDiv
{
  width: 140px;
  margin-top: 0px;
}

.topItem
{
  font: bold 10px Arial,verdana,sans-serif;
  letter-spacing: 0;
  padding-top: 5px;
  background: url("arrow-up-title.jpg") no-repeat 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  width: 140px;
  height: 20px;
  color: #706861;
  cursor: pointer;
  text-indent: 15px;
}

.topItemOver
{
  text-indent: 15px;
  padding-top: 5px;
  font: bold 10px Arial,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-up-title.jpg") no-repeat 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  height: 20px;
  width: 140px;
  color: #000000;
  cursor: pointer;
}

.topItemClose
{
  text-indent: 15px;
  padding-top: 5px;
  font: bold 10px Arial,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-down-title.jpg") no-repeat 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  height: 20px;
  width: 140px;
  color: #706861;
  cursor: pointer;
}

.topItemCloseOver
{
  text-indent: 15px;
  padding-top: 5px;
  font: bold 10px Arial,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-down-title.jpg") no-repeat 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  height: 20px;
  width: 140px;
  color: #000000;
  cursor: pointer;
}

.dropMenu
{
  font: bold 10px Arial,verdana,sans-serif;	
  background-color: #EDECE9;
  color: #000;
  border: 0px solid #FFFFFF;
  border-width: 0 0px 0px 0px;
  filter: alpha(opacity=50);
  padding-top: 5px;
  padding-bottom: 5px;
}

.subMenu
{
   display: block;
}

.subItem
{
   margin-left: 7px;
   margin-top: 2px;
   height: 18px;
   font: 10px Arial,verdana,sans-serif;	
   text-decoration: none;
   color: #215dc6;
   
}

.subItem a
{
   margin-left: 7px;
   font: 10px Arial,verdana,sans-serif;	 	
   text-decoration: none;
   color: #706861;
}

.subItemOver
{
   margin-left: 7px;
   margin-top: 2px;
   padding-bottom: 0px;
   font: 10px Arial,verdana,sans-serif;	  
   height: 18px;
   color: #000000;
}

.subItemOver a
{
   margin-left: 7px;
   font: 10px Arial,verdana,sans-serif;
   cursor: pointer;	
   color: #000000;
   text-decoration: none;
   cursor: pointer;
}

.drop
{
   border-left: 1px solid #EDECE9;
   border-right: 1px solid #EDECE9;	
}

bossseMedlem sedan juni 2003772 inlägg

2 jan. 2007 21:27#6

Jag får inget mellanrum, vare sig i infällt eller utfällt läge.
Skillnaden är att den blir något högre i Firefox än i InternetExplorer.
Du kan själv kolla koden nedan, filerna som tillhör måste ligga i samma mapp i detta fallet,
alltså pilarna, js-filen och css-filen.

<html>
<head>
<title>JSwitch Slide Menu</title>
<link rel="stylesheet" type="text/css" href="sddm.css">
</head>
<body>
<div class="navbar">
<div class="mainDiv">
<div class="topItem">Mastery of Weapon</div>        
<div class="dropMenu">
	<div class="subMenu" style="display: none;">
		<div class="subItem"><a href="#">Bicheon</a></div>
	        <div class="subItem"><a href="#">Heuksal</a></div>
	        <div class="subItem"><a href="#">Pacheon</a></div>
	</div>
</div>
</div>
<div class="mainDiv">
<div class="topItem">Mastery of Force</div>        
<div class="dropMenu">
	<div class="subMenu" style="display: none;">
		<div class="subItem"><a href="#">Cold Mastery</a></div>
		<div class="subItem"><a href="#">Lightning Mastery</a></div>
		<div class="subItem"><a href="#">Fire Mastery</a></div>
		<div class="subItem"><a href="#">Force Mastery</a></div>
        </div>
</div>
</div>
<div class="mainDiv">
<div class="topItem">Defensive Tools</div>        
<div class="dropMenu">
	<div class="subMenu" style="display: none;">
		<div class="subItem"><a href="#">Armous</a></div>
		<div class="subItem"><a href="#">Protector</a></div>
		<div class="subItem"><a href="#">Garment</a></div>
        </div>
</div>
</div>
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>
</body>
</html>

streetrobbanMedlem sedan jan. 20011 140 inlägg

3 jan. 2007 14:24#7

Jaha, nu funkar det. Men det blir mellanrum igen om jag lägger in allt i en tabell. Även fast jag använder cellspacing 0, och cellpadding 0.

bossseMedlem sedan juni 2003772 inlägg

3 jan. 2007 14:55#8

Du får nog visa hur du lägger in det då!
Alltså visa hela html-koden.
Omöjligt att svara dig annars.
Varför blanda in en tabell förresten?

streetrobbanMedlem sedan jan. 20011 140 inlägg

8 jan. 2007 13:25#9

Jag bifogar en zip-fil med alla filer i. Tabellen vill jag ha för att det ska passa in på sidan.

meny.zip (6 kB)