16. maj 2005 - 21:54
Der er
39 kommentarer og 1 løsning
Tekst vil ikke stå i midten..
Hejsa.. Jeg har et problem med at teksten i min menu ikke vil stå align=middel.. Teksten står i toppen lige meget hvad jeg gør.. Jeg har forsøgt mig med align og jeg syntes også alt CSS som skulle kunne gøre det.. Margin virker f.eks. heller ikke.. Håber der er nogen der kan se hvordan jeg kan få teksten til at står i midten.. Mit CSS ser sådan her ud: -------------------------------------- .leftnav { font-family: Tahoma; font-size: 11px; color: #000000; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #f7f7f7; display: block; background-attachment: fixed; background-image: url(/images/gfx/menu-back.gif); background-repeat: no-repeat; background-position: left center; text-indent: 23px; height: 20px; } .leftnav a:link { font-weight: bold; font-family: Tahoma; text-decoration: none; color: #000000; /* dark blue */ display: block; text-indent: 23px; height: 20px; } .leftnav a:visited { font-weight: bold; font-family: Tahoma; text-decoration: none; color: #000000; /* dark blue */ display: block; text-indent: 23px; height: 20px; } .leftnav a:active { font-weight: bold; font-family: Tahoma; text-decoration: none; color: #000000; /* dark blue */ display: block; text-indent: 23px; height: 20px; } .leftnav a:hover { font-weight: bold; font-family: Tahoma; text-decoration: none; color: #FFFFFF; /* burgundy */ display: block; background-attachment: fixed; background-image: url(/images/gfx/menu-back1.gif); background-repeat: no-repeat; background-position: left center; text-indent: 23px; height: 20px; } -------------------------------------- Mit Html ser sådan her ud: -------------------------------------- <table width="200" border="0" cellpadding="0" cellspacing="0" class="streg-top1" ID="Table1"> <tr> <td valign="bottom"> <DIV class="leftnav"><strong><a href="#">produkter</a></strong></div> <DIV class="leftnav"><strong><a href="#">konfigurator</a></strong></div> <DIV class="leftnav"><strong><a href="#">inspiration</a></strong></div> <DIV class="leftnav"><strong><a href="#">designere</a></strong></div> <DIV class="leftnav"><strong><a href="#">forhandlere</a></strong></div> <DIV class="leftnav"><strong><a href="#">nyhedsbrev</a></strong></div> </td> </tr> </table> --------------------------------------
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
Måske sådan? <table style="width:200; border:0px;" cellpadding="0" cellspacing="0" class="streg-top1" ID="Table1"> <tr> <td style="vertical-align:bottom;"> <DIV class="leftnav"><strong><a href="#">produkter</a></strong></div> <DIV class="leftnav"><strong><a href="#">konfigurator</a></strong></div> <DIV class="leftnav"><strong><a href="#">inspiration</a></strong></div> <DIV class="leftnav"><strong><a href="#">designere</a></strong></div> <DIV class="leftnav"><strong><a href="#">forhandlere</a></strong></div> <DIV class="leftnav"><strong><a href="#">nyhedsbrev</a></strong></div> </td> </tr> </table> Apo
Stå i midten, horisontalt eller vertikalt ?-)
Du skriver: align=middel (Er det sådan du har forsøgt dig med? I så fald skal du skrive det således: align="middle" - Eller mere korrekt: vertical-align:middle; Apo
Eller hvis det er horisontalt du vil have det... style="text-align:center;"
I kan se menuen her:
http://www.web-ss.dk/menu.gif Så skulle i gerne kunne se hvad jeg mener, den skal stå middle vertikalt.. Og jeg har skrevet middle og ikke middel.. :-)
Rettelse til mit indlæg 22:05:22 : I så fald skal du skrive det således: valign="middle" - eller mere korrekt: vertical-align:middle;
Har forsøgt med: <td style="vertical-align:bottom;"> der sker ingenting..
Så skal du bruge vertical-align:middle; Pilene er det 'løs' grafik eller er de integreret i baggrunden?
Ved ikke om det kan have noget af gøre med at alle menupunkterne står inde i et td tag..
Det er intergret i baggrunden... det er de to her: background-image: url(/images/gfx/menu-back1.gif); og background-image: url(/images/gfx/menu-back.gif);
<ole> Som jeg forstår dig, vil du centrere div'enes indhold vertikalt. Der findes ikke en måde at centrere indhold vertikalt i HTML-elementer ... kun i tabel-celler. /mvh </bole>
Virker heller ikke med: vertical-align:middle Man kan slet ikke se forskel på teksten, den flytter sig overhovedet ikke..
-- så alternativerne er at give diverne en padding-top, som giver det ønskede resultat eller at bruge en tabel !-)
olebole... Det vil sige det skal laves i flere td'er Jeg har forsøgt med postion i CSS også men den flytter bare Block med ned.. Så det går heller ikke.. Det er jo kun teksten den skal flytte..
padding-top - Flytter også block med ned, og hover effekten ser dum ud.. Den vil så ikke tage det hele med..
Jeg forstår ikke rigtig, hvorfor du lægger design/grafik som beggrund. Hvorfor ikke lægge det ind i de elementer, hvor det retteligt hører hjemme?
Ahh... Jeg så din <DIV> som <TD> *LOL*
olebole: Ikke helt med... Hvordan det?
Jeg tror at olebole mener, at du skal bruge <td> i stedet for <div>: <table style="width:200; border:0px;" cellpadding="0" cellspacing="0" class="streg-top1" ID="Table1"> <tr> <td class="leftnav"><strong><a href="#">produkter</a></strong></td> </tr> <tr> <td class="leftnav"><strong><a href="#">konfigurator</a></strong></td> </tr> <tr> <td class="leftnav"><strong><a href="#">inspiration</a></strong></td> </tr> <tr> <td class="leftnav"><strong><a href="#">designere</a></strong></td> </tr> <tr> <td class="leftnav"><strong><a href="#">forhandlere</a></strong></td> </tr> <tr> <td class="leftnav"><strong><a href="#">nyhedsbrev</a></strong></td> </tr> </table> Apo
Hmmm.. Nu har jeg delt det mere op, men teksten står stadig i toppen: <table width="200" border="0" cellpadding="0" cellspacing="0" class="streg-top1" ID="Table1"> <tr> <td valign="middle" style="vertical-align:middle;"> <DIV class="leftnav"><strong><a href="produktvisning.aspx">produkter</a></strong></div> </td> </tr> <tr> <td valign="middle" style="vertical-align:middle;"> <DIV class="leftnav"><strong><a href="konfigurator.aspx">konfigurator</a></strong></div> </td> </tr> <tr> <td valign="middle" style="vertical-align:middle;"> <DIV class="leftnav"><strong><a href="inspiration.aspx">inspiration</a></strong></div> </td> </tr> <tr> <td valign="middle" style="vertical-align:middle;"> <DIV class="leftnav"><strong><a href="designere.aspx">designere</a></strong></div> </td> </tr> <tr> <td valign="middle" style="vertical-align:middle;"> <DIV class="leftnav"><strong><a href="findforhandler.aspx">forhandlere</a></strong></div> </td> </tr> <tr> <td valign="middle" style="vertical-align:middle;"> <DIV class="leftnav"><strong><a href="nyhedsbrev.aspx">nyhedsbrev</a></strong></div> </td> </tr> </table>
Så har jeg sat den på td: <table width="200" border="0" cellpadding="0" cellspacing="0" class="streg-top1" ID="Table1"> <tr> <td valign="middle" class="leftnav"> <strong><a href="produktvisning.aspx">produkter</a></strong> </td> </tr> <tr> <td valign="middle" class="leftnav"> <strong><a href="konfigurator.aspx">konfigurator</a></strong> </td> </tr> <tr> <td valign="middle" class="leftnav"> <strong><a href="inspiration.aspx">inspiration</a></strong> </td> </tr> <tr> <td valign="middle" class="leftnav"> <strong><a href="designere.aspx">designere</a></strong> </td> </tr> <tr> <td valign="middle" class="leftnav"> <strong><a href="findforhandler.aspx">forhandlere</a></strong> </td> </tr> <tr> <td valign="middle" class="leftnav"> <strong><a href="nyhedsbrev.aspx">nyhedsbrev</a></strong> </td> </tr> </table> Men virker stadig ikke..
<table width="200" border="0" cellpadding="0" cellspacing="0" class="streg-top1" id="Table1"> <tr> <td class="leftnav"><a href="produktvisning.aspx">produkter</a></td> </tr> <tr> <td class="leftnav"><a href="konfigurator.aspx">konfigurator</a></td> </tr> <tr> <td class="leftnav"><a href="inspiration.aspx">inspiration</a></td> </tr> <tr> <td class="leftnav"><a href="designere.aspx">designere</a></td> </tr> <tr> <td class="leftnav"><a href="findforhandler.aspx">forhandlere</a></td> </tr> <tr> <td class="leftnav"><a href="nyhedsbrev.aspx">nyhedsbrev</a></td> </tr> </table> -- og jeg fjernede også de (vel !-) overflødige strong-tags !-)
Har sat den ind roenving, men virker stadig ikke. og ja der var jo overflødige..
Kan det havde noget at gøre med at der er sat height på i CSS
Fjern display:block; fra .leftnav-definitionen ...
-- så er det på .leftnav a{} der skal display:block; !-)
Hvis jeg fjerner: height: 20px; i CSS og sætter den til 20 på <td> så bliver den middle
Og så jeg så height på i CSS på hover kun, så når man køre over den så laver den menupunktet større.. så det virker heller ikke
Og så jeg så height = Og sætter jeg så height
Prøv med attilføje line-height !-) height: 20px; line-height:20px; }
roenving du er hermed udnævnt til dagens mand i skysovs.. :-) Der er godt nok ikke så meget tilbage af dagen, men du har lige reddet min.. Det virker perfekt nu.. MANGE TAK!!! smid et svar, så er pointene dine. :-)
Velbekomme '-) -- men skal jeg have point skal det vel være på en deler med de andre, som har prøvet at løse problemet !-) -- og så synes jeg, at 150 point er alt for mange at uddele, så du bør også selv være med i deleren !o] -- forøvrigt fik jeg mistanken på et tidspunkt, hvor du selv havde prøvet noget, men ville ikke foreslå det, før jeg selv havde kigget på det, så alene af den grund er det rimeligt ...
Jeg var lidt fraværende, da løsningen endelig begyndte at køre, så jeg springer over :)
Lyder fornuftigt.. i andre kan lige ligge et svar også.. Og tak for hjælpen til alle.. Giver point imorgen, når i har svaret.. Lukker nemlig for idag..
Jeg var nød til at afbryde midt i det hele, så behold du pointene, Roenving :-) Apo
Tak for point ;~} -- hvadfor beholdt du ikke selv nogen ?-)
Vi tilbyder markedets bedste kurser inden for webudvikling