Søg
Avatar billede -kenner- Nybegynder
02. juni 2005 - 12:19 Der er 21 kommentarer og
1 løsning

CSS menu, bg change onMouseOver, vil ikke stå i center vertikalt.

Hej eksperter,

Jeg har denne kode, som laver hele cellen til et link, men jeg kan ikke få tekstn til at stå i center vertikalt. jeg har forsøgt med denne kode, men teksten bliver i toppen.

Mvh Kenneth

Koden:

<style type="text/css">
  TABLE.menu A {display:block;width:100%;}
  TABLE.menu A:link, TABLE.menu A:visited, TABLE.menu A:active {
        background-color:#d0d0f0;
  }
  TABLE.menu A:hover {
        background-color:#e0e0f0;
  }

</style>

<table border="0" cellspacing="0" cellpadding="0" class="menu">
                                    <tr height="40">
                                        <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
                                        <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
                                        <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
                                        <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
                                        <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
                                    </tr>
                                </table>
Avatar billede jaiz Nybegynder
02. juni 2005 - 12:31 #1
lav din tr til ="30" måske
Avatar billede fennec Nybegynder
02. juni 2005 - 12:34 #2
Det står nu centreret hos mig. Det er ikke fordi det kun er linket som har en baggrundsfarve. Se f.eks her:

<style type="text/css">
  TABLE.menu A {display:block;width:100%;}
  TABLE.menu A:link, TABLE.menu A:visited, TABLE.menu A:active {
        background-color:#d0d0f0;
  }
  TABLE.menu A:hover {
        background-color:#e0e0f0;
  }

</style>

<table border="1" cellspacing="0" cellpadding="0" class="menu">
  <tr>
    <td align="center" valign="center" width="75" height="40"><a href="#">Forside<br>kjksd sb</a></td>
    <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
    <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
    <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
    <td align="center" valign="center" width="75" height="30"><a href="#">Forside</a></td>
  </tr>
</table>
Avatar billede notes2c Nybegynder
02. juni 2005 - 12:45 #3
Kunne du ikke bare gøre:

<style type="text/css">
  TABLE.menu A {display:block;width:100%;}
  TABLE.menu A:link, TABLE.menu A:visited, TABLE.menu A:active {
        background-color:#d0d0f0;
  }
  TABLE.menu A:hover {
        background-color:#e0e0f0;
  }
  table.menu td {
        width:75px;
        vertical-align: middle;
        text-align: center;
        height: 40px;
  }

</style>

<table border="0" cellspacing="0" cellpadding="0" class="menu">
<tr>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
</tr>
</table>
Avatar billede -kenner- Nybegynder
02. juni 2005 - 16:30 #4
Sorry, style tagget skal se sådan ud (jeg havde glemt at sætte height til 100%):
<style type="text/css">
  TABLE.menu A {display:block;width:100%;height:100%;}
  TABLE.menu A:link, TABLE.menu A:visited, TABLE.menu A:active {
        background-color:#d0d0f0;
  }
  TABLE.menu A:hover {
        background-color:#e0e0f0;
  }

</style>

notes2c > Cellernes højde ændre sig ikke, selv om jeg sætter den til 150px, så er den stadig lige så høj, som teksten.
Avatar billede -kenner- Nybegynder
02. juni 2005 - 16:34 #5
Det kan også være at det kan løses anderledes, men det jeg vil gøre, er at ændre baggrunds farven på hover, og en anden farve på active. Så er det lige meget, om det kun er teksten, som er et link, eller om det er hele cellen.
Avatar billede roenving Novice
03. juni 2005 - 00:16 #6
valign="middle" hedder det ved vertikale ting ...
Avatar billede -kenner- Nybegynder
03. juni 2005 - 10:32 #7
roenving > Ja, men det bliver i toppen selv om jeg ændre det til valign="middle" :/
Avatar billede -kenner- Nybegynder
03. juni 2005 - 11:11 #8
Jeg har prøvet at sætte et <img src="#" width="1" height="5"> ind for at præsse teksten ned, men så bliver der et tomt felt oven over.

Hvis det kan gøres anderledes, så baggrunden bliver ændret på active, og teksten kan komme til at stå centreret både horisontalt, og vertikalt, så fortæl!
Avatar billede notes2c Nybegynder
03. juni 2005 - 12:11 #9
Dit problem er som jeg ser det, at du laver dit a tag om til block element og lader det fylde 100% i højden. Det gør jo at det er umuligt at lave vertical align, for der er ikke noget at aligne, fylder jo 100% og inde i den blok stå teksten jo som bekendt i toppen. Så mit forslag vil virke hvis du vælger at sætte a tag'et højde til alt andet en 100%, eksempel vis:

  TABLE.menu A {display:block;width:100%;height:50%;}

Prøv dette så kan du se hvad jeg mener
Avatar billede -kenner- Nybegynder
03. juni 2005 - 15:04 #10
Det ændre ikke noget, for teksten står stadig i toppen.

Det behøver ikke at være en block, jeg skal bare have en menu, som skifter baggrundsfarve på hover, og på active, og som du ved, så skal teksten stå centreret både horisontalt, men også vertikalt.
Avatar billede notes2c Nybegynder
04. juni 2005 - 11:37 #11
Det skal virke, så der må være noget andet som gør at det ikke virker. Og jo a tag skal være en block for ellers vil den ikke fylde hele cellen. Har du ikke et link man kan kigge på, eller også så læg hele koden ind, så man lige kan lure lidt
Avatar billede -kenner- Nybegynder
22. juni 2005 - 17:43 #12
Hvilken doctype bruger du?
Avatar billede notes2c Nybegynder
23. juni 2005 - 13:03 #13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede -kenner- Nybegynder
26. juni 2005 - 11:16 #14
Her kommer hele koden så:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <title>Min sides menu</title>
    </head>

    <body bgcolor="#ffffff">
   
    <style type="text/css">
  TABLE.menu A {display:block;width:100%;height:100%;}
  TABLE.menu A:link, TABLE.menu A:visited, {
        background-color:#C0C0C0;
  }
  TABLE.menu A:active{
      background-color:#A9A9A9;
  }
  TABLE.menu A:hover {
        background-color:#D3D3D3;
  }
  table.menu td {
        width:80px;
        vertical-align: middle;
        text-align: center;
        height: 40px;
  }

</style>

<table border="0" cellspacing="0" cellpadding="0" class="menu">
<tr>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
</tr>
</table>
    </body>

</html>
Avatar billede notes2c Nybegynder
26. juni 2005 - 21:47 #15
Jamen du sætter jo stadigvæk højden til 100%, det er der dit problem ligger:

Du skriver:
TABLE.menu A {display:block;width:100%;height:100%;}

Ændre det til:
TABLE.menu A {display:block;width:100%;}

Og sæt så lige border til 1 på tabellen, så vil du hurtig se forskellen...
Avatar billede -kenner- Nybegynder
27. juni 2005 - 10:15 #16
Oay, nu er jeg med, men du har misforstået det lidt så, fordi jeg vlik have det til at se sådan ud: www.sejberg.com. Altså skal baggrunden fylde mere end teksten, det var derfor jeg satte højden til 100%
Avatar billede notes2c Nybegynder
27. juni 2005 - 11:54 #17
Okay, så kan vi benytter lidt padding til at styre luften i top og bund:

Så prøv lige dette:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <title>Min sides menu</title>
    </head>

    <body bgcolor="#ffffff">
 
    <style type="text/css">
  TABLE.menu A {display:block;width:100%;
          padding: 5px 0;
        margin:0;
}
  TABLE.menu A:link, TABLE.menu A:visited {
        background-color:#C0C0C0;
  }
  TABLE.menu A:active{
      background-color:#A9A9A9;
  }
  TABLE.menu A:hover {
        background-color:#D3D3D3;
  }
  table.menu td {
        width:80px;
        vertical-align: middle;
        text-align: center;
        background-color:#C0C0C0;
  }
</style>

<table border="1" cellspacing="0" cellpadding="0" class="menu">
<tr>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
<td><a href="#">Forside</a></td>
</tr>
</table>
</body>

</html>
Avatar billede -kenner- Nybegynder
27. juni 2005 - 12:34 #18
Okay, det virker fint, men jeg har lig en lille finesse, som skal på plads.

Jeg benytter Iframe, så når man kommer ind på siden, vises en i framet, og så skal menulinket være på Active, hvordan organisere jeg det?
Avatar billede -kenner- Nybegynder
27. juni 2005 - 12:34 #19
Koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <title>Min sides menu</title>
    </head>

    <body bgcolor="#ffffff">
 
    <style type="text/css">
  TABLE.menu A {display:block;width:100%;
          padding: 5px 0;
        margin:0px;
}
  TABLE.menu A:link, TABLE.menu A:visited {
        background-color:#C0C0C0;
  }
  TABLE.menu A:active{
      background-color:#A9A9A9;
  }
  TABLE.menu A:hover {
        background-color:#D3D3D3;
  }
  table.menu td {
        vertical-align: middle;
        text-align: center;
        background-color:#C0C0C0;
  }
</style>

<table border="0" cellspacing="0" cellpadding="0" class="menu" width="750">
<tr>
<td width="80"><a href="home.html" target="HovedFrame">Forside</a></td>
<td width="80"><a href="noget.html" target="HovedFrame">Forside</a></td>
<td width="80"><a href="noget.html" target="HovedFrame">Forside</a></td>
<td width="80"><a href="noget.html" target="HovedFrame">Forside</a></td>
<td width="80"><a href="noget.html" target="HovedFrame">Forside</a></td>
                <td width="47%"></td>
            </tr>
</table>
        <iframe src="home.html" align="center" name="HovedFrame" width="100%" height="500" scrolling=="no" frameborder="0"></iframe>
    </body>

</html>
Avatar billede notes2c Nybegynder
27. juni 2005 - 13:01 #20
Det tror jeg faktisk ikke du kan. En mulighed var måske at give menupunkterne hver sin id som du så sætter focus på via javascript. Men synes ikke selv det er nogen god løsning. Men hvorfor overhovedet have det aktivt, det bliver det jo når du klikker på linket...
Avatar billede -kenner- Nybegynder
27. juni 2005 - 15:07 #21
Det ser da ikke så fedt ud, at man er inde på Home, men fanebladet er ikke aktivt.
Avatar billede notes2c Nybegynder
27. juni 2005 - 15:17 #22
Det kan du måske godt have ret i, men du er enten vist nødt til at kode dig ud af det. Noget  med at sætte en klasse på det aktive link, eller sådan noget....

Men det er jo en anden problematik et det dit spørgsmål gik ud på.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
49 min siden Hvilken type mus Af mort1 i PC
I går 13:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging
09/0816:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
White papers
Flere white papers »