Listen Menue zentrieren

Muckel

Hallo zusammen,

bin gerade mal wieder dabei ein wenig zu "basteln". Doch leider finde ich den Fehler nicht. Bei dem folgenden Listen-Menue sollte es eigentlich zentriert sein (links und rechts). Doch das klappt leider nicht und ich sehe den Fehler im Moment nicht. Daher hoffe ich, dass ihr mir helfen könnt.

Code

#menue {
    display:block;
    padding:0.5em;
    margin:0em;
    text-align:center;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid #000 0.05em;
}


#menue ul {
    display:block;
    padding:0em;
    margin:0em;
    list-style-type:none;
    text-align:center;
    font-size:0.8em
}


#menue ul li:before{content:"\00BB"; font-weight:bold; font-size:1.5em;}
#menue ul li:after{content:"\00AB"; font-weight:bold; font-size:1.5em;}


#menue ul li {
    float:left;
    margin:0 0.35em 0 0.35em;}

Alles anzeigen

Schon einmal vielen Dank, Muckel

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

koslowski

Hi,

Blockelemente können horizontal zentriert werden indem sie eine Breite und margin:0 auto; bekommen.

Muckel

Auch das habe ich probiert. Es klappt nur nicht. Habe halt ein ganz normales div-Element mit der id menue. In diesem DIV ist dann die ul-Liste. Die li-Elemente habe ich mit float umgebrochen.

Dem DIV-menue möchte ich entweder 'ne Hintergrundgrafik oder Bild geben. In jenem soll dann Hauptbereiche der Seite als Listen-Menü enthalten sein. Im Moment ist es Linksbündig und das möchte ich nicht. Zentrieren möchte ich es. Doch es wird im Firefox 3.6.10 unter Ubuntu nicht umgesetzt.

html-Gerüßt schaut so aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Tobias M&uuml;ller">
    <meta name="description" content="Test Layout f&uuml;r das Blog von Muckel.">
    <meta name="keywords" lang="de" content="Layout, Aussehen, Design, Test">
    <meta http-equiv="content-language" content="de">
    <meta name="robots" content="all">
    <title>Muckels neues Layout</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="titel">
    <h1>Titel der Webseite</h1>
    <p>Der Untertitel der Seite kann hier stehen.</p>
</div>
<div id="menue">
    <ul>
        <li><a href="#start" name="start" title="Startseite">Startseite</a></li>
        <li><a href="#" title="Fotografien">Fotografien</a></li>
        <li><a href="#" title="G&auml;stebuch">G&auml;stebuch</a></li>
        <li><a href="#" title="Kontaktformular">Kontaktformular</a></li>
        <li><a href="#" title="Impressum">Impressum</a></li>
    </ul>&nbsp;
</div>
<div id="mitte">
    <h1>Artikel Nummer 1</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<strong>Umbruch Anfang</strong><br style="clear:both;"/><strong>Umbruch Ende</strong> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>

Alles anzeigen

Und der CSS-Teil schaut so aus:

Code

* {
    margin:0;
    padding:0;
    border:none;
}


body {
    margin:0; 
    padding:0;
    color:#000000;
    background-color:#FFFFFF;
    font-family: Calibri, "Sans Serif", "Century Gothic";
    overflow:auto;
    border:none;
}


#titel {
    display:block;
    padding:0em;
    margin:0em;
    text-align:center;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:dotted #000 0.05em;
}


#menue {
    display:block;
    padding:0.25em;
    margin:0 auto;
    text-align:center;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid #000 0.05em;
}


#menue ul {
    list-style-type:/*circle*/none;
    display:block;
    margin:0em;
    color:#000;
}


/*
    #menue ul li:before{content:"\00BB"; font-weight:bold; font-size:1.5em;}
    #menue ul li:after{content:"\00AB"; font-weight:bold; font-size:1.5em;}
*/


#menue ul li {
    float:left;
    display:block;
    margin:0 auto;
}

Alles anzeigen

Finde den Fehler einfach nicht. Wie es ausschaut, könnt ihr dem Bild im Anhang entnehmen. Hoffe ihr könnt mir helfen!

LG Muckel

Blaui

versuchs mal im .menue mit text-align: center XD

Muckel

Hallo zusammen,

es funktioniert in dem man für die li-Elemente display-inline benutzt. So schaut das css nun aus:

Code

#menue {
    display:block;
    padding:0.25em;
    margin:0 auto;
    text-align:center;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid #000 0.05em;
}


#menue ul {
    list-style-type:/*circle*/none;
    margin:0;
    text-align:center;
    color:#000;
}


#menue ul li {display:inline;}


#menue ul li a {}


#menue ul li a:hover {}

Alles anzeigen

Vielen Dank
Muckel

koslowski

Zitat von Muckel

Auch das habe ich probiert. Es klappt nur nicht. Habe halt ein ganz normales div-Element mit der id menue. In diesem DIV ist dann die ul-Liste. Die li-Elemente habe ich mit float umgebrochen.

das kann ja auch nicht klappen, wenn li margin:0 auto bekommt.
Die ul bekommt die Breite (keine 100% !) und margin:0 auto;.

display:inline für li geht natürlich auch, da hat man allerdings nicht so viel Kontrolle über die Darstellung.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Listen Menue zentrieren

Jetzt mitmachen!