css menu mit html 4 möglich?

jackie_o · 02.03.2005, 17:20

Hi zusammen,

wollte in eine alte Seite mit Tabellenlayout ein einfaches css hover menu einbauen. Geht das überhaupt?
(Nein, ich will nicht die ganze Seite neu mit divs bauen

)

Mein Hauptproblem ist, das ich beim Mozilla den linken abstand nicht wegkriege, obwohl alle margins und so auf 0 gestellt sind.

Hier mal eine Auszug aus dem Code:

HTML-Code:

<!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" />

<style type="text/css">
<!--
#mainnav{
   width: 200px;
   align: left;
   background: #789456;
   padding:0;
   margin:0;
}

  #mainnav ul{
   display: block;
   background: #ff0;
   margin: 0;
   list-style:none;
} 


 #mainnav li{
   margin:0;
   padding: 0;
}
#mainnav a{
  display: block;
  font-weight:bold;
  color: #fff;
  background: #f0f;
  text-decoration: none;
  padding: 0;
}
#mainnav a:hover,
#mainnav a:focus,
#mainnav a:active{
  color: #000; 
  background-color: #00f;
}


//-->
</style>

	<title>test</title>
</head>
<body>

			<div id="mainnav">
				<ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a><li><a href="#">Link 4</a></li></ul>
			</div>

</body>
</html>

Sorry, das die Liste so hinterinander weg geschrieben ist, aber sonst macht ie immer so blöde leerzeilen.

Gruß Jackie

02.03.2005, 17:29

dir fehlt noch ein padding:0 für die ul, dann klappts

Boris · 02.03.2005, 18:10

Nebenbei bemerkt: CSS Menüs haben nix mit "HTML 4" zu tun

321 · 02.03.2005, 18:56

hier mit dem padding bei #mainnav ul

HTML-Code:

<!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" />

<style type="text/css">
<!--
#mainnav{
   width: 200px;
   align: left;
   background: #789456;
   padding:0;
   margin:0;
}

  #mainnav ul{
   display: block;
   background: #ff0;
   margin: 0; padding: 0;
   list-style:none;
} 


 #mainnav li{
   margin:0;
   padding: 0;
}
#mainnav a{
  display: block;
  font-weight:bold;
  color: #fff;
  background: #f0f;
  text-decoration: none;
  padding: 0; 
}
#mainnav a:hover,
#mainnav a:focus,
#mainnav a:active{
  color: #000; 
  background-color: #00f;
}


//-->
</style>

	<title>test</title>
</head>
<body>

			<div id="mainnav">
				<ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a><li><a href="#">Link 4</a></li></ul>
			</div>

</body>
</html>

jackie_o · 03.03.2005, 12:27

Vielen Dank für die Hilfe!

Liebe Grüße Jackie

P.S. mit dem HTML 4 meinte ich glaub ich eher den Doctype, weil ja css je nach doctype mehr oder weniger gut interpretiert wird... oder wie soll ich das ausdrücken...

Boris · 03.03.2005, 13:01

Zitat:

P.S. mit dem HTML 4 meinte ich glaub ich eher den Doctype, weil ja css je nach doctype mehr oder weniger gut interpretiert wird... oder wie soll ich das ausdrücken...

Ja, und eben das stimmt nicht wirklich. Bei HTML 4.01 und XHTML 1.0 / 1.1 ändert sich nichts bei der CSS-Unterstützung. Ausnahme macht nur wieder der IE, wenn man ihn in den Quirksmodus wirft - dann hat er ein fehlerhaftes Boxmodel. Aber es gibt selbst da dann nicht mehr/weniger CSS unterstüzung, es ist unabhängig vom Doctype.