Hallo,
ich möchte meine Homepage von der Formatierung mit Tabellen auf CSS umstellen. Allerdings sind die ersten Schritte mit CSS extrem nervig.
Im folgenden Beispielcode soll ein blauer Balken mit einem Menue dargestellt werden. Im IE 6.0 funktioniert eigentlich alles problemlos und CSS verhält sich so wie ich das gerne hätte. Der Firefox (0.9.1) stellt aber vieles (meiner Meinung nach) total falsch dar.
Die Zeile h1 {font-family: ar....... habe ich nur drinn, weil sonst das Menue im FF gar nicht dargestellt wird. Je nach positionierung der Elemente in der CSS-Datei wird der eine oder andere Punkt nicht richtig formatiert. Wenn der Block body {... ganz nach unten verschoben wird geht es wieder.
Im IE funktioniert der Code richtig. Der Text in der Menüzeile ist mittig.
Im FF ist die Darstellung falsch. Der Text in der Menüzeile hängt unten am Rand.
Ist mein CSS Code falsch oder der FF total verbuggt?
MfG Wolf
-------------------------
test.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" title="test stylesheet" />
</head>
<body>
<img src="logo.gif" alt="Logo" width="250" height="40">
<div id="topmenue">
<p>Startseite | Forum | Bilder </p>
</div>
<div id="varb">Variante B</div>
<div id="varc">Variante C</div>
Test Test
</body>
</html>
-------------------------
test.css:
body {
font-family:Arial,Verdana;
background-color:white;}
color:black;}
h1 {font-family: arial, tahoma, sans-serif;}
#topmenue {
margin-top:10px;
margin-bottom:20px;
background-color:Navy;
color:white;
font-weight:bold;
height:30px;
width: auto;
vertical-align: middle;
padding: 5pt;
text-align:center;}
#varb {
position:absolute;
top:250px; left:200px;
color:lime;}
#varc {
position:absolute;
top:150px; left:300px;
color:red;}
-------------------------