Panoramamann
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:
-----------------------------------------------------------------
-----------------------------------------------------------------
die styles.css:
---------
-----------------------------------------------------------------
die menue.css
---------
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>
<!-- start header -->
<div id="header">
</div>
<div id="header_logo">
<img src="http://www.psd-tutorials.de/modules/Forum/images/header_logo.png" />
</div>
<!-- end header -->
<!-- start navigation -->
<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>
<!-- end navigation -->
<!-- start content -->
<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>
<!-- end content -->
<!-- start footer -->
<div id="footer">
</div>
<!-- end footer -->
</body>
</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;
}-----------------------------------------------------------------
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;
}
Zuletzt bearbeitet von einem Moderator:
barucht das jeweilige Element eine Breite. ohne width nehmen Blockelemente immer den gesamten Bereich ein, und es gibt kein Margin. wenn du dir nicht sicher bist, gib unterschiedlichen Elementen eine Hintergrundfarbe, damit sie im Browser (erstmal) sichtbar sind.
