Das gibt es doch nicht das die Seite nicht geht ?

visionsurfer

Hallo,
ich entwickel gerade diese Seite hier:

Im IE sieht alles super aus. Das Logo wird angezeigt und auch der rote Balken auf der rechten Seite.

Wenn ich mir die Seite aber im Firefox anschaue, ist kein Logo mehr zu sehen und auch kein roter Balken. Aber ich habe einen ganz normalen HTML Code verwendet.

Ich weiß nicht wie ich es hinbekomme das alles richtig angezeigt wird. Interessant ist, das weiter unten das Bild vom Kloster aber ohne Probleme zu sehen ist.

Hat noch jemand einen Tipp ?

Viele Grüße,
Visionsurfer

Fraggle

Guckst Du hier:
http://validator.w3.org/check?uri=http…er-group.net%2F

Wenn Du die Fehler durchgehst und mit selfhtml vergleichst, dann sollte es gehen (wenn ich fitter wäre, dann würde ich es direkt schreiben, aber so fit bin ich im html Code leider net )

Arbeit weniger mit Tabellen sondern ändere das mal in Div-Container um. Ist danach leichter zu handhaben, läßt sich wunderbar mit css formatieren und ist stilvoller
Auf jeden Fall auch für Dich als Schreiber später übersichtlicher.

visionsurfer

Hallo,
vielen Dank für die Antwort.

Ja wenn ich wissen würde, wie das mit dem DIV´s geht, dann würde ich es auch machen. Aber irgendwie habe ich noch keine gute Anleitung gefunden wie man schöne Templates anstatt mit Tabellen eher mit DIVS macht.

Gruß,
Visionsurfer

Fraggle

Also für den Einstieg kann ich http://www.knowware.de/?cat=3.1&book=home_html_css empfehlen. Wurde mir hier auch nahegelegt und ich bin nicht enttäuscht worden. Kostet auch nur 4€ und sollte auf jeden Fall an den Bahnhofsbüchereien zu finden sein.

Div Container sind recht einfach. Stell Dir eine Tabelle vor, dort ein Feld (also Zeile 2, Spalte 3 z.B.). Mit Div würde dann dieses Ding einen Namen erhalten. Per stylesheet wird es dann elegant orientiert (hoffe es ist richtig erklärt).

Dazu kann ich Dir die Erweiterung webdeveloper nahelegen. Sehr gut wenn man Seiten erstellt.

Hier mal ein sehr einfaches Beispiel einer Seite, die links eine Navigationsleiste hat, der obere Bereich über die gesamte Breite geht, der mittlere und untere Bereich jedeoch nicht über die Navigationsleiste hinaus.

Code

<!--oberer Bereich-->


<div id="top">
  <h1><img src="images/Banner.png" alt="" align="left" hspace="278" border="0"></h1>
  </div>


<!--Navigationsleiste-->
<div id="navi">
  <p style="color: red;">
  <img src="buttons/nav_aktivHome.png" alt="home" border="0">
  <img src="buttons/nav_Forschung.png" alt="Forschung" border="2">

  <a href="http://validator.w3.org/check?uri=referer"><img border="0"
  src="images/valid-html401.png"
  alt="Valid HTML 4.01!" height="31" width="88"></a>
  <a href="http://jigsaw.w3.org/css-validator/">


</div>


<!--Hauptfenster-->
<div id="main">
  <hr>

  <!--untere Leiste-->
  <div id="bottom">
    <hr>
  </div>
  </div>

Alles anzeigen

css dazu:

Code

/*Top*/
#top {
  padding: 10px;
  width: 1024px;
  height: 80px;
  position: fixed;
  top: 0px;
  left: 0px;
   text-align: right;
  z-index:2;
  background: url('images/background.gif') repeat-y fixed;
}


/*Navigationsleiste*/
#navi {margin: 10px;
      width: 130px;
      position: fixed;
      top: 90px;
      left: 10px;
}
/*Hauptfenster*/
#main {margin: 10px;
       width: 894px;
       position: absolute;
       top: 100px;
       left: 130px;
}
#mainlit {margin: 30px;
       width: 894px;
       position: absolute;
       top: 100px;
       left: 130px;
}
/*unterer Bereich*/
#bottom {margin: 0px;
         width: 894px;
         position: relative;
         top: 0px;
         left: 0px;
}

Alles anzeigen