Auf Thema antworten 2026

Beitrag

<blockquote data-quote="volli69" data-source="post: 1453119" data-attributes="member: 98199">Wie zentriere ich ein horizontal angeordnetes Menü?Vorab: ich habe Suchmaschinen und Foren benutzt, das Problem mehrfach beschrieben gefunden, allerdings ohne befriedigende Lösung.die index.html:-----------------------------------------------------------------[HTML]&lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot;&nbsp; type=&quot;text/css&quot; /&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/menue.css&quot;&nbsp; type=&quot;text/css&quot; /&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &nbsp; &lt;!-- start header --&gt;&nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;header_logo&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/modules/Forum/images/header_logo.png&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;!-- end header --&gt;&nbsp; &nbsp; &lt;!-- start navigation --&gt;&nbsp; &nbsp; &lt;ul class=&quot;cssmenu&quot;&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Aktuelles&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Unser Institut&lt;/a&gt;&nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Hauptstelle&lt;/a&gt;&nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Zweigstelle&lt;/a&gt;&nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &lt;/ul&gt;&nbsp; &lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dienstleistung&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Vorsorge&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kontakt&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Impressum&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;!-- end navigation --&gt;&nbsp;&lt;!-- start content --&gt;&nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;content_foto&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/modules/Forum/images/foto.png&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;content_text&quot;&gt;&lt;h1&gt;Das ........Aufgabe.&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;!-- end content --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- start footer --&gt;&nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;!-- end footer --&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]-----------------------------------------------------------------die styles.css:---------[CODE]body {&nbsp; &nbsp; font: 12px tahoma, Arial, Helvetica, sans-serif;&nbsp; &nbsp; line-height: 1.5em;&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; background:#363636;}a, a:link, a:active, a:visited {&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; }a:hover {&nbsp; &nbsp; text-decoration:underline;}#header {&nbsp; &nbsp; height: 265px;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; background:#363636 url(../images/bg_.png);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; margin:-130px 100px 0px 5px;&nbsp; &nbsp; }#header_logo {&nbsp; &nbsp; height: 115px;&nbsp; &nbsp; width: 939px;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto; &nbsp; &nbsp; margin-top: -100px; }#content {&nbsp; &nbsp; height: 701px;&nbsp; &nbsp; width: 979px;&nbsp; &nbsp; background:#363636 url(../images/bg_content.png);&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto; &nbsp; &nbsp; margin-top: 4px; }#content_foto {&nbsp; &nbsp; height: 701px;&nbsp; &nbsp; width: 946px;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto; &nbsp; &nbsp; margin-top: -685px; }#content_text {&nbsp; &nbsp; height: 01px;&nbsp; &nbsp; width: 846px;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; margin-top: -345px; }h1 {&nbsp; &nbsp; font-family:tahoma, Arial, Helvetica, sans-serif;&nbsp; &nbsp; font-size:12px;&nbsp; &nbsp; color:#241a10;&nbsp; &nbsp; font-weight:normal;}[/CODE]-----------------------------------------------------------------die menue.css---------[CODE]ul.cssmenu {&nbsp; position: relative;&nbsp; display: inline;&nbsp; margin-left: auto;&nbsp;}ul.cssmenu ul {&nbsp; position: relative;&nbsp; display: none;}ul.cssmenu li {&nbsp; position: relative;&nbsp; display: inline;&nbsp; float: left;}/* Menupunkt stylen */ul.cssmenu li a {&nbsp; font-family: arial, sans-serif;&nbsp; font-size: 12px;&nbsp; line-height: 40px;&nbsp; text-decoration: none;&nbsp; text-align: center;&nbsp; display: block;&nbsp; width: 120px;&nbsp; height: 40px;}ul.cssmenu li:hover &gt; a {&nbsp; background-color: #666666;&nbsp; color: #FFFFFF;&nbsp; font-weight: bold;}/* Untermenüpunkt einblenden */ul.cssmenu li:hover &gt; ul {&nbsp; position: absolute;&nbsp; top: 40px;&nbsp; left: -40px;&nbsp; display: inline;}/* ab zweite Ebene */ul.cssmenu li li:hover &gt; ul {&nbsp; top: 0px;&nbsp; left: 110px;}ul.cssmenu li li a {&nbsp; width: 150px;}/* Farben der einzelnen Ebenen (werden vererbt)*/ul.cssmenu a {&nbsp; color: #000000;&nbsp; background-color: #e4e4e4;}ul.cssmenu ul a {&nbsp; background-color: #d4d4d4;}ul.cssmenu ul ul a{&nbsp; background-color: #c4c4c4;}ul.cssmenu ul ul ul a{&nbsp; background-color: #b4b4b4;}&nbsp;/* zusätzliche Styleangaben für IE 6 *//* das Menü wird dort untereinander dargestellt */ul.cssmenu {&nbsp; _text-indent: 10px;}ul.cssmenu ul {&nbsp; _display: inline;&nbsp; _margin-left: 0px;&nbsp; _text-indent: 20px;}ul.cssmenu ul ul {&nbsp; _text-indent: 30px;}ul.cssmenu ul ul ul {&nbsp; _text-indent: 40px;}ul.cssmenu li {&nbsp; _float: none;}/* Menupunkt stylen */ul.cssmenu li a {&nbsp; _text-align: left;&nbsp; _width: 150px;}ul.cssmenu a:hover {&nbsp; _font-weight: bold;&nbsp; _background-color: #666666;}[/CODE]</blockquote>

[QUOTE="volli69, post: 1453119, member: 98199"] Wie zentriere ich ein horizontal angeordnetes Menü? Vorab: ich habe Suchmaschinen und Foren benutzt, das Problem mehrfach beschrieben gefunden, allerdings ohne befriedigende Lösung. die index.html: ----------------------------------------------------------------- [HTML]<link rel="stylesheet" href="css/styles.css" type="text/css" /> <link rel="stylesheet" href="css/menue.css" type="text/css" /> </head> <body>  <div id="header"> </div> <div id="header_logo"> <img src="http://www.psd-tutorials.de/modules/Forum/images/header_logo.png" /> </div>   <ul class="cssmenu"> <li><a href="#">Aktuelles</a></li> <li><a href="#">Unser Institut</a> <ul> <li><a href="#">Hauptstelle</a> <li><a href="#">Zweigstelle</a> </li> </ul> </li> <li><a href="#">Dienstleistung</a></li> <li><a href="#">Vorsorge</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul>   <div id="content"> </div> <div id="content_foto"> <img src="http://www.psd-tutorials.de/modules/Forum/images/foto.png" /> </div> <div id="content_text"><h1> Das ... ..... Aufgabe.</div> </div>   <div id="footer"> </div>  </body> </html>[/HTML] ----------------------------------------------------------------- die styles.css: --------- [CODE]body { font: 12px tahoma, Arial, Helvetica, sans-serif; line-height: 1.5em; margin: 0px; padding: 0px; color: #ffffff; background:#363636; } a, a:link, a:active, a:visited { color: #ffffff; text-decoration: none; } a:hover { text-decoration:underline; } #header { height: 265px; padding: 0px; background:#363636 url(../images/bg_.png); background-repeat:no-repeat; margin:-130px 100px 0px 5px; } #header_logo { height: 115px; width: 939px; margin-left: auto; margin-right: auto; margin-top: -100px; } #content { height: 701px; width: 979px; background:#363636 url(../images/bg_content.png); margin-left: auto; margin-right: auto; margin-top: 4px; } #content_foto { height: 701px; width: 946px; margin-left: auto; margin-right: auto; margin-top: -685px; } #content_text { height: 01px; width: 846px; margin-left: auto; margin-right: auto; margin-top: -345px; } h1 { font-family:tahoma, Arial, Helvetica, sans-serif; font-size:12px; color:#241a10; font-weight:normal; }[/CODE] ----------------------------------------------------------------- die menue.css --------- [CODE]ul.cssmenu { position: relative; display: inline; margin-left: auto; } ul.cssmenu ul { position: relative; display: none; } ul.cssmenu li { position: relative; display: inline; float: left; } /* Menupunkt stylen */ ul.cssmenu li a { font-family: arial, sans-serif; font-size: 12px; line-height: 40px; text-decoration: none; text-align: center; display: block; width: 120px; height: 40px; } ul.cssmenu li:hover > a { background-color: #666666; color: #FFFFFF; font-weight: bold; } /* Untermenüpunkt einblenden */ ul.cssmenu li:hover > ul { position: absolute; top: 40px; left: -40px; display: inline; } /* ab zweite Ebene */ ul.cssmenu li li:hover > ul { top: 0px; left: 110px; } ul.cssmenu li li a { width: 150px; } /* Farben der einzelnen Ebenen (werden vererbt)*/ ul.cssmenu a { color: #000000; background-color: #e4e4e4; } ul.cssmenu ul a { background-color: #d4d4d4; } ul.cssmenu ul ul a{ background-color: #c4c4c4; } ul.cssmenu ul ul ul a{ background-color: #b4b4b4; } /* zusätzliche Styleangaben für IE 6 */ /* das Menü wird dort untereinander dargestellt */ ul.cssmenu { _text-indent: 10px; } ul.cssmenu ul { _display: inline; _margin-left: 0px; _text-indent: 20px; } ul.cssmenu ul ul { _text-indent: 30px; } ul.cssmenu ul ul ul { _text-indent: 40px; } ul.cssmenu li { _float: none; } /* Menupunkt stylen */ ul.cssmenu li a { _text-align: left; _width: 150px; } ul.cssmenu a:hover { _font-weight: bold; _background-color: #666666; }[/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?