• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Falsche Anzeige einer Website in Firefox

C

chriszi

Neues Mitglied
Hallo,

ich habe eine Website für unsere Pfarrei geschrieben und habe sie immer nur mit dem IE angeschaut. Jetzt hab ich sie mit Firefox angeschaut und sie ist total verschoben. Weiß aber nicht wo mein Fehler ist/meine Fehler sind.

Danke für eure Hilfe
chriszi


Html Code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Homepage St. Josef</title>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    <meta lang="de" http-equiv="content-type" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

<style type="text/css">
<!--
#body  {
background-color: #FFFE9D;
}

#gesamtbereich {
width: 94%;
min-width: 705px;
margin-bottom: 20pt;
border-top: 2px;
border-left: 2px;
border-right: 2px;
border-color: #000000
}
/*------------------------------------------------------------*/
#kopfbereich {
width: 100%;
background-color: #628DE6
}

#titel {
font-size: 30pt;
float: left;
}

#titelbild {
float: right
}
/*------------------------------------------------------------*/
#inhaltsbereich {
width: 100%;
height: 700px;
}

#steuerung {
width: 20%;
height: 100%;
float: left;
background-image: url(hintergrundnavi.jpg)
}

#inhalt {
width: 80%;
height: 100%;
float: right;
text-align: left;
background-color: #FFFFFF
}
/*------------------------------------------------------------*/
#fussbereich {
width: 100%;

}

#fuss-links {
float: left;
width: 50%;
text-align: left
}

#fuss-rechts {
float: right;
text-align: right;
width: 50%
}
/*------------------------------------------------------------*/
-->
</style>

</head>

<body id="body">

<div id="gesamtbereich">

    <div id="kopfbereich">
        <div id="titel">
        Pfarrgemeinde St. Josef Neustadt
        </div>
        <div id="titelbild">
        <img src="kirchenbilder.jpg" alt=""/>
        </div>
    </div>

    <div id="inhaltsbereich">
        <div id="steuerung">
        Steuerung
        </div>
        <div id="inhalt">
        Inhalt
        </div>
    </div>

    <div id="fussbereich">
        <div id="fuss-links">
        &copy; 2010 by Pfarrgemeinde St. Josef Neustadt <br />
        Diese Seite ist f&uuml;r Mozilla Firefox optimiert.
        </div>
        <div id="fuss-rechts">

        </div>
    </div>
</div>
</body>
</html>
 
Da sind mehrere Fehler drin.

Der Erste war schon, dass du die Seite nur im IE getestet hast, wobei hier noch gut zu wissen wäre, welche Version vom IE, denn gerade die älteren Versionen neigen dazu, die CSS-Eigenschaften falsch umzusetzen. Firefox, Opera, Safari und die anderen Browser sind da deutlich besser.

Der zweite Fehler ist der, dass du keine Semantik in deiner Seite hast. Bei dir steht alles in divs, die sind aber nur zum gruppieren mehrerer Elemente gedacht. HTML hat was mit Semantik zu tun. So gibt es Tags für Überschriften (<h1> bis <h6>), Tags für Textabsätze (<p>), Tags für Listen (<ul>, <ol> oder <dl>) usw.
Da findest du genügend Beiträge zu, wenn du hier mal nach "Semantik + HTML" suchst.

Dritter Fehler, es fehlt der Link zur Seite, damit man so schöne Tools wie Firebug verwenden kann, denn das Bild, welches du dort eingebunden hast, befindet sich nicht auf meiner Festplatte, also kann ich den Originalzustand deiner Seite nicht reproduzieren, somit auch nicht effizient an die Fehlerbehebung gehen.

Und viertens ist etwas, das du ganz schnell von der Seite entfernen solltest, da es erstens laut deiner Aussage überhaupt nicht zutrifft und zweitens ein sehr schlechtes Licht auf dich als Entwickler wirft.
<div id="fuss-links">
&copy; 2010 by Pfarrgemeinde St. Josef Neustadt <br />
Diese Seite ist f&uuml;r Mozilla Firefox optimiert.
</div>
Zum Vergrößern anklicken....
Optimiert für Firefox, wenn du nur im IE getestet hast?

Eine fehlerfreie, semantisch korrekte Webseite ist für jeden Client optimiert, das muss nicht extra erwähnt werden, erstrecht nicht, wenn es nicht zutrifft.
 
Antwort

Danke für deine Antwort

_Thor_ schrieb:
Der Erste war schon, dass du die Seite nur im IE getestet hast, wobei hier noch gut zu wissen wäre, welche Version vom IE, denn gerade die älteren Versionen neigen dazu, die CSS-Eigenschaften falsch umzusetzen. Firefox, Opera, Safari und die anderen Browser sind da deutlich besser.
Zum Vergrößern anklicken....

Das weiß ich jetzt auch...

_Thor_ schrieb:
Der zweite Fehler ist der, dass du keine Semantik in deiner Seite hast. Bei dir steht alles in divs, die sind aber nur zum gruppieren mehrerer Elemente gedacht. HTML hat was mit Semantik zu tun. So gibt es Tags für Überschriften (<h1> bis <h6>), Tags für Textabsätze (<p>), Tags für Listen (<ul>, <ol> oder <dl>) usw.
Da findest du genügend Beiträge zu, wenn du hier mal nach "Semantik + HTML" suchst.
Zum Vergrößern anklicken....

Also wir haben schon eine Website in der Pfarrei. Die habe ich aber nicht entwickelt. Wir verwenden ein CMS System des Bistums. Und wollte jetzt nur das Grundgerüst erneuern. Deswegen auch keine Semantik.

_Thor_ schrieb:
Dritter Fehler, es fehlt der Link zur Seite, damit man so schöne Tools wie Firebug verwenden kann, denn das Bild, welches du dort eingebunden hast, befindet sich nicht auf meiner Festplatte, also kann ich den Originalzustand deiner Seite nicht reproduzieren, somit auch nicht effizient an die Fehlerbehebung gehen.


Und viertens ist etwas, das du ganz schnell von der Seite entfernen solltest, da es erstens laut deiner Aussage überhaupt nicht zutrifft und zweitens ein sehr schlechtes Licht auf dich als Entwickler wirft.

Optimiert für Firefox, wenn du nur im IE getestet hast?

Eine fehlerfreie, semantisch korrekte Webseite ist für jeden Client optimiert, das muss nicht extra erwähnt werden, erstrecht nicht, wenn es nicht zutrifft.
Zum Vergrößern anklicken....
Ok ich lad die Seite und die Bilder...gleich hoch und stell den Link rein

LG
 
chriszi schrieb:
Also wir haben schon eine Website in der Pfarrei. Die habe ich aber nicht entwickelt. Wir verwenden ein CMS System des Bistums. Und wollte jetzt nur das Grundgerüst erneuern. Deswegen auch keine Semantik.
Zum Vergrößern anklicken....
Dann muss ich dir leider sagen, dass du den Sinn von HTML wohl noch nicht verstanden hast, denn bei HTML geht es nur um die Semantik, HTML hat keine andere Aufgabe als deinem Inhalt eine Bedeutung zu geben. Deswegen sind die meisten Templates völliger Unsinn, weil man nie weiß, welchen Inhalt der Anwender dort hinein schreibt. Es macht keinen Sinn, Listenelemente in eine Tabelle zu schreiben oder Überschriften als div auszuzeichnen.

Die Wahl der Tags kann immer nur vom Autor der Seite gewählt werden, denn nur er weiß, welche Bedeutung er dem Inhalt geben will.


Ok ich lad die Seite und die Bilder...gleich hoch und stell den Link rein
Zum Vergrößern anklicken....
Damit lassen sich dann sicher die CSS-Fehler erkennen, aber die divs müssen trotzdem weg.
 
was meinst du mit tabellarische daten?
Tschuldigung bin html- Anfänger...

also unser cms sytem ist dp aufgebaut;
ich schreibe ein "grundgerüst" (kann man das so nennen?), dort fühge ich ein modul für die Steuerung und ein Modul für den Inhalt ein. (Module kann ich nicht ändern...)

Jetzt kann ich neue Seiten errichten. Der Rest macht das CMS
 
Was tabellarische Daten sind solltest du auch als HTML-Anfänger herausfinden können, denn dafür braucht man keine HTML-Kenntnisse, nur eine Suchmaschine deiner Wahl (html tabellarische Daten - Google-Suche).

Wenn dir das CMS die ganzen div erzeug hat, ist es ein sehr schlechtes CMS.

Ich nehme mal an, dass das hier die Überschrift der Seite sein soll, oder?
HTML: 
<div id="titel">Pfarrgemeinde St. Josef Neustadt</div>
Für einen Client, der dieses Interpretiert, hat der Text keine Bedeutung, denn ein div fasst nur mehrere Elemente zu einer logischen Gruppe zusammen. Du hast nur ein Element, also nichts zu gruppieren. Damit es als Überschrift erkannt wird, musst du es auch als solche auszeichnen.
HTML: 
<h1>Pfarrgemeinde St. Josef Neustadt</h1>
Das Bild kann dann als Hintergrundbild der Überschrift per CSS eingefügt werden.

Dies soll wohl eine Navigation werden.
HTML: 
<div id="steuerung">Steuerung</div>
Eine Navigation ist eine Auflistung von Verweisen, also eine Liste deren Listenelemente die Links enthält.
HTML: 
<ul id="navigation">
  <li><a href="">Link1</a></li>
  <li><a href="">Link2</a></li>
  <li><a href="">Link3</a></li>
  <li><a href="">Link4</a></li>
</ul>
So wird ein Menü ausgezeichnet. Ein div hat dort nichts zu suchen.

chriszi schrieb:
hier die website in der anlage
Zum Vergrößern anklicken....
Jetzt muss sich jeder, der dir helfen möchte, die Seite runterladen. Besser wäre es, wenn du sie auf einen Webspace hochlädst und den Link hier reinstellst.
 
doch ich brauch eine div um dort mein menu/steuerungsmodul einzufügen oder wie soll ich sonst die elemente plazieren?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben