Menü zentrieren?

madace · 12.06.2006, 09:11

Moin Jungs und Mädels,

irgendwie steh ich gerade auf dem Schlauch.
Wie kann ich bei folgendem Code das Menü in der Tabellenzeile zentrieren?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css">

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 5px 3.0em;
text-decoration: none;
float: left;
color: black;
background-color: #FEB400;
border: 1px solid #000000;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> test</title>

<style type="text/css">
<!--
.ueberschrift {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 38px;
}

.Stil9 {color: #000000}
body {
	background-color: #E4E9EB;
}
.ver11 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #000000;
}
.ver9 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-decoration: none;
	color: #000000;
}

-->
</style>
</head>

<body vlink="#000000" alink="#000000" link="#000000">
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="780"  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <!--DWLayoutTable-->
      <tr>
        <td width="20" bgcolor="#000000"><img src="bilder/leer2.gif" width="1" height="10"></td>
        <td width="780" bgcolor="#FCB402"><br>
		<div class="hovermenu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="privates.html">Privates</a></li>
            <li><a href="berufliches.html">Berufliches</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
          </ul>
        </div>          </td>
        <td width="34" bgcolor="#000000"><img src="bilder/leer2.gif" width="1" height="10"></td>
      </tr>
      <tr>
        <td bgcolor="#000000"><img src="bilder/leer2.gif" width="1" height="10"></td>
        <td><!--DWLayoutEmptyCell-->&nbsp;</td>
        <td bgcolor="#000000"><img src="bilder/leer2.gif" width="1" height="10"></td>
      </tr>

    </table></td>
  </tr>
</table>
</body>
</html>

Danke schonmal!

Gruß,
madace

Nele · 12.06.2006, 11:02

Indem du der ul einen Abstand nach links gibst.

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 40px; /*zum Beispiel*/
height: 20px}

Falls das gesamte Gebilde variabel in der Breite wäre, müßtest du der ul eine feste Breite und margin:0 auto; vergeben. Zusätzlich bräuchte die Tabellenzelle, in der die Navigation steckt, noch ein text-align:center; (für Internet Explorer), welches du über eine extra class vergeben könntest.

madace · 12.06.2006, 11:09

Zitat:

Zitat von Nele

Indem du der ul einen Abstand nach links gibst.

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 40px; /*zum Beispiel*/
height: 20px}

(..)

Also in Dreamweaver, erreiche ich damit den gewünschten Effekt. Der IEX 6 zeigt es auch richtig an, aber FF 1.5 leider nicht.

Nele · 12.06.2006, 12:38

Also bei mir geht es im FF 1.5.0.4.

Welche Version genau hast du denn ? Gibt's ein online-Beispiel ?
Ich hatte deinen gesamten Quelltext rauskopiert und dann getestet. Keine Ahnung warum es bei dir nicht will ...

madace · 12.06.2006, 13:32

Na ja nicht so schlimm, hab' mir jetzt ein anderes Menü gebastelt.