Horisontel meny med vertikal kustering av text??

6 svar · 545 visningar · startad av eddy1 20 okt. 2008

eddy1Medlem sedan aug. 2001969 inlägg

Frågan20 okt. 2008 11:16#1

Hej

Jag har en vågrätt meny där jag vill att all text ska vara lodrätt justerad så texten är i botten.
Använder följande ex:

               <div id="menycontainer">
                    <ul>
                    <li><a href="#">meny 1</a></li>
                    <li><a href="#">meny 2</a></li>
                    <li><a href="#">meny 3</a></li>
                    <li><a href="#">meny 4</a></li>
                    </ul>
                </div>

#menycontainer ul{ float: left; margin-left: 0; padding-left: 0; width: 100%; height:71px; font-size: 70%;}
#menycontainer li{display: inline}
#menycontainer ul a{float: left; text-decoration: none; padding: 0.3em 2em; color: Black;} 

#menycontainer a:link{color: #000000;}
#menycontainer a:visited{color: #000000;}
#menycontainer a:hover{background:#FFFFFF; }
#menycontainer a#current{background:; color: #000000;}

Har provat med vertical-align överallt men det ger ingen förändring??
Höjd är ju 71px och jag vill ha den höjden så bakgrundfärgen ändras vid hovering genom hela höjden??
Måste gå fixa på något sätt eller?? Får snart använda mig av <table>
:bla

JAreMANNENMedlem sedan aug. 20002 272 inlägg

20 okt. 2008 11:39#2

Kan du inte använda dig av padding- eller margin-top??

eddy1Medlem sedan aug. 2001969 inlägg

20 okt. 2008 12:12#3

Provade det nu men får inte det att fungera... Var menar du att jag skule använda det? Allt flyttas ju ner, även hela <li> cellen...

bossseMedlem sedan juni 2003771 inlägg

20 okt. 2008 12:24#4

lägg till följande i #menycontainer ul a

position:relative;top:50px

tantenMedlem sedan nov. 20051 596 inlägg

20 okt. 2008 12:37#5

Att placera text som du vill, tycker jag är lättast genom att använda line-height:71px; i ul, då kommer du få hovern att fungera.
Sedan använder du padding-top i a:link för att få ner texten till botten.
Svårigheten kan vara att olika webläsare visar olika storlek på bokstäverna så att texten hamnar olika. Men det har du kanske redan fixat?

Rädd för att jag svarade för snabbt utan att kolla. Kommer tillbaka senare och ser om du fått det att fungera. Hinner inte kolla själv nu...

onkelborgMedlem sedan juli 2003555 inlägg

20 okt. 2008 17:05#6

Mitt förslag:

Li ska ha display: block; istället. Sedan clear: none; för att de ska lägga sig brevid varandra. Höjden borde ligga på li.

För att få rätt hover på länkarna:

#menycontainer ul li u a:link {color: pink; background: green;} /* Notera mitt välutvecklade sinne för vad som är estetiskt tilltalande*/

Tycker det borde fungera?

eddy1Medlem sedan aug. 2001969 inlägg

22 okt. 2008 15:42#7

Tack för hjälpen , löste sig med lite padding-top...