Avatar billede ravnborg Nybegynder
07. august 2005 - 23:34 Der er 10 kommentarer og
1 løsning

valign i tabel.

Jeg har rodet lidt rundt her i eksperten.dk og fundet ud af at valign i en tabel ved hjælp at CSS er lidt af et problem.

men.....
jeg har en menu som er lavet i en tabel, hvor næsten alt er defineret af CSS. Alt tekst står fint placeret i centrum, men da jeg så satte et billede ind sammen med teksten, faldt teksten ned i bunden af tabel-feltet.

Hvordan får jeg det op i midten igen?

table.menu {border: 1px solid #393939;}

td.menu, .overskrift {font: bold 11px verdana, sans-serif;text-align: center;}

a.menupunkt {
  text-decoration: none;
  background-color: #EBE9E9;
  color: #717171;
  border-top : 1px solid #EFE3D5;
  border-left : 1px solid #EFE3D5;
  border-bottom : 1px solid #6D6D6D;
  display: block;
  line-height: 22px;
  width:99%;
}


<tr><td class=menu><a href="terning.asp" class=menupunkt>Terning kast<img src="pic/icon_elev.gif" alt="" width="16" height="22" border="0"></a></td></tr>
Avatar billede busschou Praktikant
07. august 2005 - 23:37 #1
problemet er jo at det er på din <td> der alignes, og såvel tekst som billedet er inde i dit <a> tag
Avatar billede busschou Praktikant
07. august 2005 - 23:38 #2
<tr><td class=menu>Terning kast<a href="terning.asp" class=menupunkt><img src="pic/icon_elev.gif" alt="" width="16" height="22" border="0"></a></td></tr>
--
Så bør den kunne laves med vertical-align:middle
Avatar billede busschou Praktikant
07. august 2005 - 23:40 #3
eller
<tr><td class=menu><a href="terning.asp" class=menupunkt>Terning kast</a><img src="pic/icon_elev.gif" alt="" width="16" height="22" border="0"></td></tr>
--
Altså så ikke både tekst og billede på een gang er samme link
--
Men bortset fra det så hedder det valign hvis du benytter det direkte i din <td> og hvis du benytter det i css hedder det vertical-align:middle
Avatar billede busschou Praktikant
07. august 2005 - 23:42 #4
ellers skal du prøve at style <a> til vetical-align:middle , men det ved jeg ski ikke om virker, måske ;o)
Avatar billede ravnborg Nybegynder
07. august 2005 - 23:51 #5
Hvis jeg fjerner mit billede fra <a> bliver det smidt ned på næste linie.
Og jeg kan ikke få vertical-align:middle til at virke i <a>.
Avatar billede roenving Novice
08. august 2005 - 10:21 #6
Det er da fint centreret ?-)

<style type="text/css">
table.menu {border: 1px solid #393939;}

td.menu, .overskrift {font: bold 11px verdana, sans-serif;text-align: center;height:100px;}

a.menupunkt {
  text-decoration: none;
  background-color: #EBE9E9;
  color: #717171;
  border-top : 1px solid #EFE3D5;
  border-left : 1px solid #EFE3D5;
  border-bottom : 1px solid #6D6D6D;
  display: block;
  line-height: 22px;
  width:99%;
}
</style>

<table class="menu">
  <tr>
    <td class=menu>
      <a href="terning.asp" class=menupunkt>Terning kast<img src="pic/icon_elev.gif" alt="" width="16" height="22" border="0"></a></td>
    </tr>
</table>
Avatar billede ravnborg Nybegynder
08. august 2005 - 10:54 #7
Tekst og billede skal være på samme linie, så prøv at sætte  width=200 i tabellen. Teksten står i bunden af feltet mens billedet står fint i midten.
Avatar billede roenving Novice
08. august 2005 - 11:08 #8
align="absmiddle" på img-tagget gør tingen i IE, FF1 og Opera8 !-)
Avatar billede ravnborg Nybegynder
08. august 2005 - 11:21 #9
Det virker sku'

jammen så igen tak ;-) (husk svar)
Avatar billede roenving Novice
08. august 2005 - 11:22 #10
Velbekomme '-)
Avatar billede roenving Novice
08. august 2005 - 11:40 #11
-- tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester