Søg
Avatar billede extream Nybegynder
28. juni 2005 - 13:19 Der er 12 kommentarer

centrer menu i en div

Jeg har følgende side hvor jeg ønsker at centrer menuen i den div den er omgivet af. Det skal yderligere være således at menuen har en width på 100%.

Siden er:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#TopMenu ul    {
    padding: 0px 0px 0px 0px;
    font-weight: 700;
    margin: 0px;
    font-family: verdana;
    list-style-type: none;
    text-align: center;
    width: 100%;
    }   
#TopMenu ul li    {
    display: block;
    padding: 0px 0px 0px 0px;
    float: left;
    margin: 0px;
    overflow: visible;
    width: 10px;
    list-style-type: none;
    text-align: center;
    }
</style>
</head>
<body>
<div style="width: 800px; background-color: #666666; height: 26px; text-align: center;">
<div id="TopMenu"><ul><li><a href="#" title="Dokumenter">Dokumenter</a></li><li><a href="#" title="Netværket" >Netværket</a></li><li><a href="#" title="Indsatsområder" >Indsatsområder</a></li><li><a href="#" title="Kurser">Kurser</a></li><li><a href="#" title="Kalender">Kalender</a></li><li><a href="#" title="Internationalt" >Internationalt</a></li><li><a href="#" title="Medier">Medier</a></li></ul></div>
</div>
</body>
</html>
Avatar billede roenving Novice
28. juni 2005 - 13:29 #1
Centrere 100% ?-)
Avatar billede schwarz84 Nybegynder
28. juni 2005 - 13:31 #2
Ja, du er kommet lidt på vildspor så. Det er helt oplagt at bruge en tabel her i stedet for en liste. Du kommer også noget op at slås med understøttelsen i forskellige browsere når du kombinerer display:block og float:left, siger min erfaring mig. Du skal også helst lade div'en TopMenu fylde hele div'en over, så undgås problemer. Dette virker (jeg har indenteret det pænere for læsbarhedens skyld:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            #TopMenu {
                width: 100%;
            }
            #TopMenu table    {
                padding: 0px 0px 0px 0px;
                font-weight: 700;
                margin: 0px;
                font-family: verdana;
                text-align: center;
                width: 100%;
            } 
            #TopMenu table td    {
                padding: 0px 0px 0px 0px;
                margin: 0px;
                overflow: visible;
                width: 10px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div style="width: 800px; background-color: #666666; height: 26px; text-atdgn: center;">
            <div id="TopMenu">
                <table>
                    <tr>
                        <td>
                            <a href="#" title="Dokumenter">Dokumenter</a>
                        </td>
                        <td>
                            <a href="#" title="Netværket" >Netværket</a>
                        </td>
                        <td>
                            <a href="#" title="Indsatsområder" >Indsatsområder</a>
                        </td>
                        <td>
                            <a href="#" title="Kurser">Kurser</a>
                        </td>
                        <td>
                            <a href="#" title="Kalender">Kalender</a>
                        </td>
                        <td>
                            <a href="#" title="Internationalt" >Internationalt</a>
                        </td>
                        <td>
                            <a href="#" title="Medier">Medier</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>
Avatar billede extream Nybegynder
28. juni 2005 - 13:32 #3
Alle menupunkterne skal centreres på siden + de skal have en width på 100% i den div de er omgivet af.
Avatar billede schwarz84 Nybegynder
28. juni 2005 - 13:33 #4
Ved ikke helt om jeg forstod dig rigtig. Hvis du vil centrere div'en på siden, kan du skrive:
margin-left: 50%;
margin-right: 50%;
i CSS'en.
Det samme gælder hvis du vil centrere tabellen i div'en.
Avatar billede roenving Novice
28. juni 2005 - 13:36 #5
-- den har jeg ikke set før, men den vil da lave problemer for browseren, for hvis der skal være en margin i begge sider, som er ½-delen af det omkransende element, vil der jo være plads til noget indhold ?-)
Avatar billede schwarz84 Nybegynder
28. juni 2005 - 13:40 #6
Ja, det er lidt af en hack, men jeg tror ikke umiddelbart at der er nogen pænere måde at centrere på. Jeg vil meget gerne høre hvis du kender en pænere måde.
Man kan også gøre det ved at skrive:
margin-left: auto;
margin-right: auto;
Det andet giver nok problemer i nogle tilfælde, som du skriver, så det var nok ikke noget ret god kode at sende ud. Jeg forsøger på at få det til at virke med ovenstående side, men det vil ikke umiddelbart.
Avatar billede schwarz84 Nybegynder
28. juni 2005 - 13:48 #7
Jeg er nødt til at smutte. Jeg kigger på det igen senere, hvis ingen har løst det.
Avatar billede extream Nybegynder
28. juni 2005 - 14:02 #8
Det skal laves i div. hvis jeg sætter margin-left: 50%; margin-right: 50%; bliver det godt nok centreret men bredden på siden bliver også meget større.
Avatar billede extream Nybegynder
28. juni 2005 - 14:02 #9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#TopMenu ul    {
    padding: 0px 0px 0px 0px;
    font-weight: 700;
    margin: 0px;
    font-family: verdana;
    list-style-type: none;
    text-align: center;
    margin-left: 50%;
    margin-right: 50%;
    width: 100%;
    }   
#TopMenu ul li    {
    padding: 0px 0px 0px 0px;
    float: left;
    margin: 0px;
    overflow: visible;
    width: 10px;
    list-style-type: none;
    text-align: center;
    }
</style>
</head>
<body>
<div style="width: 800px; background-color: #666666; height: 26px; text-align: center;">
<div id="TopMenu">
    <ul>
        <li>
        <a href="#" title="Dokumenter">Dokumenter</a>
        </li>
        <li>
        <a href="#" title="Netværket" >Netværket</a>
        </li>
        <li>
        <a href="#" title="Indsatsområder" >Indsatsområder</a>
        </li>
        <li>
        <a href="#" title="Kurser">Kurser</a>
        </li>
        <li>
        <a href="#" title="Kalender">Kalender</a>
        </li>
        <li>
        <a href="#" title="Internationalt" >Internationalt</a>
        </li>
        <li>
        <a href="#" title="Medier">Medier</a>
        </li>
    </ul>
</div>
</div>
</body>
</html>
Avatar billede hells Nybegynder
28. juni 2005 - 15:13 #10
Hvis du giver dit div med den faste bredde på 800px margin: auto; (eller margin-left: auto; margin-right: auto; om du vil), så får du den centreret i browsere, der understøtter standarden.
For at få divet centreret i IE kan du give body en text-align: center;. text-align: center; centrerer nemlig i IE også blockelementer. Du skal bare huske at definere text-align efter hvilken justering du vil have i de elementer, du har på siden.

Og lige et spørgsmål: hvorfor har du to div-tags rundt om menuen? Hvad med bare at have ét, give det id'en TopMenu og style det, som du har stylet det første div?

Mit forslag til en kode, der gerne skulle gøre hvad du vil have den til:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
    text-align: center;
}

#TopMenu {
    width: 800px;
    background-color: #666666;
    height: 26px;
    margin: auto;
    text-align: center;
}

#TopMenu ul    {
    padding: 0px 0px 0px 0px;
    font-weight: 700;
    margin: 0px;
    font-family: verdana;
    list-style-type: none;
    text-align: center;
    width: 100%;
    } 
#TopMenu ul li    {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    overflow: visible;
    list-style-type: none;
    display: inline;
    text-align: center;
    }
</style>
</head>
<body>
<div id="TopMenu">
    <ul>
        <li>
        <a href="#" title="Dokumenter">Dokumenter</a>
        </li>
        <li>
        <a href="#" title="Netværket" >Netværket</a>
        </li>
        <li>
        <a href="#" title="Indsatsområder" >Indsatsområder</a>
        </li>
        <li>
        <a href="#" title="Kurser">Kurser</a>
        </li>
        <li>
        <a href="#" title="Kalender">Kalender</a>
        </li>
        <li>
        <a href="#" title="Internationalt" >Internationalt</a>
        </li>
        <li>
        <a href="#" title="Medier">Medier</a>
        </li>
    </ul>
</div>
</body>
</html>

Jeg har ændret lidt, f.eks. har jeg udskiftet float: left; ved menupunkterne med display: inline;.
Avatar billede schwarz84 Nybegynder
28. juni 2005 - 18:55 #11
Ja, det gør det faktisk og her (bliver bredt) :-(
Vi er der næsten nu, men nu fylder menuen ikke hele bredden af din div.
Avatar billede schwarz84 Nybegynder
28. juni 2005 - 19:01 #12
Lidt mere pilleri gav en brugbar løsning. Dette virker i både Internet Explorer og i Firefox. Løsningen med en usorteret liste virker ikke umiddelbart i Firefox:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            #TopMenu {
                width: 800px;
                background-color: #666666;
                height: 26px;
                text-align: center;
                margin: auto;
            }
            #TopMenu table    {
                padding: 0px 0px 0px 0px;
                font-weight: 700;
                margin: 0px;
                font-family: verdana;
                text-align: center;
                width: 100%;
            } 
            #TopMenu table td    {
                padding: 0px 0px 0px 0px;
                margin: 0px;
                width: 10px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="TopMenu">
            <table>
                <tr>
                    <td>
                        <a href="#" title="Dokumenter">Dokumenter</a>
                    </td>
                    <td>
                        <a href="#" title="Netværket" >Netværket</a>
                    </td>
                    <td>
                        <a href="#" title="Indsatsområder" >Indsatsområder</a>
                    </td>
                    <td>
                        <a href="#" title="Kurser">Kurser</a>
                    </td>
                    <td>
                        <a href="#" title="Kalender">Kalender</a>
                    </td>
                    <td>
                        <a href="#" title="Internationalt" >Internationalt</a>
                    </td>
                    <td>
                        <a href="#" title="Medier">Medier</a>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
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
I dag 13:21 ms Forms Af leahcim i Andet software
I går 21: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
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
White papers
Flere white papers »