Trenger litt CSS hjelp til en meny.

[graastein]

Hei alle

 

Jeg har en meny som skulle sett slik ut

 

 

Men om du går til denne linken så ser du at skriften ikke er plassert på samme plass som på bildet.

 

Prøvde med en vertical-align:bottom men det fungerte ikke.

 

Spesielt det med delingen av ordene blir feil. Hvordan fikser jeg dette i css-koden?

 

Her er koden for menyen:

  <ul id="menyen">
 	<li id="meny1"><a  href="#">vi fire</a></li>
 	<li id="meny2"><a  href="#">kiara</a></li>
 	<li id="meny3"><a  href="#">maria conrnelia</a></li>
 	<li id="meny4"><a  href="#">galleri</a></li>
 	<li id="meny5"><a  href="#">hus bygging</a></li>
 	<li id="meny6"><a  href="#">alt anna!</a></li>
</ul>

 

Standard oppsett sikkert.

 

Her er cssen:

ul, li {	/* list use for the menu  */
list-style-type: none;	/* suppression of list markers */
margin:0;
padding:0;


}

ul {
position: absolute;	/* positionning for IE5 and IE5.5 */
top: 0;
left: 0;
background: transparent url(images/menybilder.gif) top left no-repeat;	/* general menu background */
width: 426px;
text-align: center;

}
li {
float: left;



}

li a {	/* buttons dimensions and definitions */
display: block;	/* <a> placed in block to give it dimensions */
height: 66px;
width: 71px;
color: #fff;
font-size: 12px;
line-height: 50px;	/* line height to avoid paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;

}
li a:hover {
background: transparent url(images/menybilder.gif) top left no-repeat;

}
#meny1 a:hover {
background-position: -426px 0%;	/* background place offset for each button */
}
#meny2 a:hover {
background-position: -497px 0%;
}
#meny3 a:hover {
background-position: -568px 0%;
}
#meny4 a:hover {
background-position: -639px 0%;
}
#meny5 a:hover {
background-position: -710px 0%;
}
#meny6 a:hover {
background-position: -781px 0%;
}

 

Menyen er en variasjon av denne menyen: http://tutorials.alsacreations.com/modelesmenus/g02.htm

Endret 29. april 2006 av graastein

[Matsemann]

Kan vel bare opplyse om at du har en lignende tråd her:

http://norskwebforum.no/viewtopic.php?t=26028&highlight=

slik i tilfelle noen skulle komme med et likt forslag.

[graastein]

Kan vel bare opplyse om at du har en lignende tråd her:

http://norskwebforum.no/viewtopic.php?t=26028&highlight=

slik i tilfelle noen skulle komme med et likt forslag.

6011549[/snapback]

 

Ja, fikk hjelp der, iallfall til det ene problemet, det var denne linjen: line-height: 50px; /* line height to avoid paddings */

som gjorde at navnene delte seg feil.

 

vertical-align fungerer ikke til list-elemtenter så da får jeg bare bruke padding på toppen. Her ser du det endelige resultatet: Testsiden