CSS:Meny UL LI storlek | Hjälp

4 svar · 460 visningar · startad av theLostshirt 25 okt. 2005

theLostshirtMedlem sedan juni 20054 inlägg

Trådstart25 okt. 2005 18:04#1

Jag har lite problem med en meny, sitter och kollar på olika sidor om hur de
gjort sina CSS menyer och 'hover' men ingen löser riktigt mitt problem.
Såhär ska de seut.
Detta är det jag skrapat fram:

#meny ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#meny ul li {
	display:inline;
	height: 35px;
	width: 70px;
}
#meny ul li a {
	text-decoration: none;
	background-image: url(images/knapp/meny-normal.png);
	background-repeat: no-repeat;
}
#meny a:hover {
	color: #FFF;
	background-image: url(images/knapp/meny-hover.png);
	background-repeat: no-repeat;
}
#nytt a { /*'#aktiv a' istället för '#nytt a'.*/
	background-image: url(images/knapp/meny-aktiv.png);
}

<div id="meny">
<ul>
  <li id="nytt"><a href="/nytt/" title="Senaste nytt om Hantverksverkstaden - Butik Rustik">Nytt</a></li>	<!-- Nuvarande sida (gråKnapp) istället för if="nytt" -->
  <li id="kurser"><a href="/kurser/" title="Hitta kurser som vi håller i">Kurser</a></li>
  <li id="produkter"><a href="/produkter/" title="Se produkter som vi tarfram och producerar själva">Produkter</a></li>
  <li id="kafe"><a href="/kafe/" title="Vårat kafe i butiken">Kafé</a></li>
  <li id="info"><a href="/info/" title="Information om Hantverksverkstaden - Butik rustik">Info</a></li>
  <li id="lankar"><a href="/lankar/" title="Länkar till våra medarbetare">Länkar</a></li>
</ul>
</div>

Just nu är problemet att jag inte får storleken 70x35 runt länkarna, detta beskär alltså bilderna så det bara ser löjligt ut.

jarvkloMedlem sedan juli 20013 378 inlägg

25 okt. 2005 19:37#2

Hmm...

Blir det inte som du vill om du sätter height: och width på #meny ul li a också - så att varje <a> som ju också är inline-taggar fyller ut hela arean för "sin" #meny ul li ?

Och du... Välkommen till wF förresten :birp

theLostshirtMedlem sedan juni 20054 inlägg

25 okt. 2005 20:44#3

Det blev ingen skillnad, jag känner mig kass nu. Suttit hela dagen och kan bara inte tänka ut hur det ska vara.

Såhär ser det ut nu:
http://img461.imageshack.us/img461/4637/dummy5bw.png
--
Tack för välkommnadet, detta är mitt första inlägg.

InsiderMedlem sedan jan. 2000978 inlägg

25 okt. 2005 21:15#4

Som sagt, du behöver sätta en fast bredd och höjd på dina <A>, men för att göra det så måste de vara blockboxar. Det går inte att sätta höjd eller bredd på inline-element.
Ett inline-element genererar en block-box med egenskaperna display:block; eller float:left. (plus några till)
Då du vill ha en horisontell meny räcker det med:

#meny ul li a {
   float:left;
   height: 35px;
   width: 70px;
   text-decoration: none;
   background-image: url(images/knapp/meny-normal.png);
   background-repeat: no-repeat;
}

theLostshirtMedlem sedan juni 20054 inlägg

25 okt. 2005 22:03#5

Tack, jag tror inte jag har sovit tillräckligt..
Tack igen det känns bra att det finns de som tar sig tid.. :bire