Hallo,
Ich habe einen Entwurf für eine Website gemacht, deren Inhalte aus einer MySQL-Datenbank über PHP ausgelesen werden. Formatiert ist das Ganze über eine css-Datei.
Die Größe ist auf 800x600 beschränkt, die Positionierung erfolgt in der Mitte des Bildschirms.
Die einzelnen Seiten werden über einen Navi-Bereich gewählt, wodurch jeweils der entspre-chende Datensatz aus der db-Tabelle gelesen wird. Alle Seiten erhalten die selbe Formatierung (bis auf <li> und <span>-Sachen, die spezifisch für den jeweiligen Inhalt sind).
Wofür ich nun keine Lösung finde, ist folgendes:
a) Im Firefox "springen" die Seiten jeweils um ein paar Pixel. Also wenn ich auf der Startseite bin und gehe dann auf die zweite Seite, Elternarbeit, dann rutscht alles ein Stück nach links, auf der nächsten Seite wieder nach rechts. (Nur auf den letten drei Seiten hört es auf) .
Die Formate sind erzwungerermaßen dieselben, denn es ist dieselbe css-Datei, und das Anzeigen der Seite erfolgt über eine (natürlich auch wieder für alle Seiten gleiche) Datei anzeigen.php (Im Internet Explorer tritt das Phänomen nicht auf).
b) Das zweite (geringere) Problem ist, dass ich im Firefox keinen Abstand des Textes im content (und der grau unterlegten h1-Überschrift) vom Navi-Bereich hinkriege. Wahrscheinlich liegt es am Boxmodell, das der IE bekanntlich z. T. falsch interpretiert, aber wahrscheinlich denke ich ähnlich falsch, denn im IE klappt es. Egal, ob ich margin, padding oder sonstwas setze, ich bekomme es nicht von der dünnen Linie um den Navi-Block weg.
Die Website ist testweise auf:
http://rkrah.rk.funpic.de/schule2/index.php
(kostenlos, desbalb bitte Werbung wegklicken)
Der gesamte 800x600 große Bereich ist durch <div id=content> formatiert.
#content {
font-size: 0.85em;
width: 760px;
margin: 0px auto;
text-align:left;
padding-top:5px;
line-height:1.5em;
font-family:Arial, Helvetica, sans-serif;
border:1px solid silver;
padding-left:5px; padding-right:2px;
background-color:#EDEDF8;
}
Der Navi-Bereich hat folgendes Format (es gibt links und rechts ein Menü):
#menucontainer,#menucontainer2 {
border:1px solid #606060;
background-color:#dddddd;
width:120px;
padding:0px;
margin:0px 0px 0px 0px;
line-height:26px;
}
#menucontainer {
float:left;
line-height:26px;
}
#menucontainer2 {
padding-left:1px;
float:right;
line-height:20px;
}
.menutitle {
margin:0px 0px 0px 0px;
padding:0px;
background-color:#cccccc;
font-weight:bold;
border-bottom:1px solid #606060;
}
Für Antworten und Tipps bin ich sehr dankbar.
Viele Grüße
Robert