webForumDet fria alternativet

Utseende på meny

3 svar · 598 visningar · startad av mikaelsooh

mikaelsoohMedlem sedan feb. 2007200 inlägg
#1

Jag har ett par funderingar på en meny som jag skulle vilja förändra lite och vet inte riktigt hur jag ska göra det, om det går.

Jag har en meny där jag vill att varje rubrik ska avskiljas med ett streck som jag inte vill ska vara fulla höjden av själva "boxen".

Hoppas någon förstår hur jag menar, känns lite förvirrat beskrivet...

Hur som. På bilden nedan syns hur jag har det. De rödmarkerade strecken är de som jag vill förminska.

Bifogar även koden:

.menu { 
	margin:0 20px; 
	list-style:none; 
	height:35px; 
	position:relative; 
	font-family:arial, verdana, sans-serif; 
	background-color: black; 
	background-repeat: repeat-x; 
	background-attachment: scroll; 
	background-position: 0 0; 
	padding: 0; 

}

.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme*/
	position:absolute; 
	top:187px; 
	left:20px; 
	z-index:100; 
	font:0.9em Verdana, Arial, Helvetica, sans-serif; 
	margin:0; 
	padding:0; 
}

#mainlevelmainnav,#mainlevelmainnav ul { 
	float:left; 
	list-style:none; 
	line-height:1em; 
	font-weight:700; 
	background-image: none; 
	background-repeat: repeat; 
	background-attachment: scroll; 
	background-position: 0 0; 
	margin:0; 
	padding:0; 
}

#mainlevelmainnav a { 
	color: #bfbfbf; 
	display:block; 
	text-decoration:none; 
	position: relative; 
	width: 80px; 
	height: 20px; 
	padding: 10px 5px 5px 10px; 
}

#mainlevelmainnav li a.mainlevelmainnav span { 
	float:left; 
	font-weight:bold; 
	display:block; 
	padding:0 24px 0 12px; 
	height:20px; 
}

#mainlevelmainnav li a.mainlevelmainnav:hover { 
	color:#000; 
	background-color: #666; 
	background-image: url(../img/down.png); 
	background-repeat: no-repeat; 
	background-position: 90% center; 
}

#mainlevelmainnav li { 
	float:left; 
	padding:0; 
	border-right: 1px solid white; 
}
 
#mainlevelmainnav li ul  { 
	position:absolute; 
	left:-999em; 
	height:auto; 
	width:95px; 
	font-weight:400; 
	background:#36f; 
	margin:0; 
}
 
#mainlevelmainnav li li { 
	color: #bfbfbf; 
	background-color: black; 
	width:95px; 
	-moz-box-shadow: 10 10 5px #333; 
	box-shadow: 0 0 10px #333; }
 
#mainlevelmainnav li ul a { 
	width:80px; 
	height:30px; 
	color:#bfbfbf; 
	font-size:0.9em; 
	line-height:1em; 
	font-weight:400; 
	background-color: transparent; 
	border-top: 1px solid white; 
	-moz-box-shadow: 0 0 10px #333; 
	box-shadow: 0 0 10px #333; 
}

#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{ 
	left:-999em; 
}

#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
  ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul { 
  	background-repeat: no-repeat; 
  	background-attachment: scroll; 
  	left:auto; 
  	z-index:6000; 
  }

#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover { 
	color: black; 
	background-color: #73a0c5; 
	background-repeat: no-repeat; 
	background-attachment: scroll; 
	background-position: 98% 50%; 
	width: 95px; 
}

#mainlevelmainnav li a.mainlevelmainnav:hover span.down { 
	background-color: #f90; 
	background-repeat: no-repeat; 
	background-attachment: scroll; 
	background-position: right top; 
}
#mainlevelmainnav li ul a:hover {
color:black;
}
mikaelsoohMedlem sedan feb. 2007200 inlägg
#2

Noterade att strecken inte blev markerade alls. Men det är alltså de horisontella strecken jag avser.

nidronMedlem sedan jan. 2005257 inlägg
#3

Menar du den vita vertikala bordern för varje menyalternativ? :)
Du kan minska höjden på dem något genom att minska padding för länkarna:

#mainlevelmainnav a { 
	color: #bfbfbf; 
	display:block; 
	text-decoration:none; 
	position: relative; 
	width: 80px; 
	height: 20px; 
	padding: 0 5px 0 10px; /* padding: 10px 5px 5px 10px; */
}
mikaelsoohMedlem sedan feb. 2007200 inlägg
#4

nidron skrev:

Menar du den vita vertikala bordern för varje menyalternativ? :)
Du kan minska höjden på dem något genom att minska padding för länkarna:

#mainlevelmainnav a { 
	color: #bfbfbf; 
	display:block; 
	text-decoration:none; 
	position: relative; 
	width: 80px; 
	height: 20px; 
	padding: 0 5px 0 10px; /* padding: 10px 5px 5px 10px; */
}

Nu ska jag ägna mig åt bortförklaringar. För givetvis har du helt rätt. Dessutom var det, som du mycket riktigt uppfattade, inte några horisontella linjer utan vertikala.

Jag skyller på en ettåring som upptar all vaken tid under dagarna och gör att jag inte orkar tänka ordentligt på kvällarna...

Men, jag har en fundering till som jag i mitt tillstånd inte lyckas reda ut...

Egentligen skulle jag vara vilja ha kantlinjer på de inre avgränsningarna. Strecket som kommer till höger om "Gästbok" skulle jag egentligen vilja ha bort. Finns det nån enkel och smidig väg för detta måhända?

132 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)