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

Dreispaltiges Layout funktioniert nicht

R

Rex Dynasty

Neues Mitglied
Guten Abend Forum-Mitglieder,

ich bin HTML-Neuling und möchte gleich zur Sache kommen;
Auf der SELFHTML-Seite wird ein Beispiel für ein dreispaltiges Layout gegeben, das im Endzustand so aussieht:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  ul#Navigation {
    font-size: 0.83em;
    [B]float: left; width: 18em;[/B]
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    [B]float: right; width: 12em;[/B]
    margin: 0; padding: 0;
    border: 1px dashed silver; background-color: #eee;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    [B]margin: 0 12em 0 16em;[/B]
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
</style>
</head>
<body>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Info">
    <strong>Info-Box</strong>
    <p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
       im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
    <p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
       die Angabe einer Breite verzichtet werden und die Seite den ihr zur
       Verfügung stehenden Raum ausnutzen.</p>
    <p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
       Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
       durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
  </div>

  <div id="Inhalt">
    <h1>CSS-basierte Layouts</h1>
    <h2>3-spaltiges Layout</h2>
    <p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
       um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
       die Schriftgröße der Navigation und Info-Box ist etwas verringert,
       um den relativ geringen Breiten Rechnung zu tragen.</p>
    <p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
       Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
       können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
    <p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
       gehalten und passt sich flexibel an die Fensterbreite an.</p>
  </div>

</body>
</html>
Ich übernahm einige Teile für meine Seite, wobei das Resultat so aussieht:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<title>Hasan Ali Yücel Egitim Fakültesi - Lehrer für DaF</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0; padding: 0;
    border: 1px dashed silver; background-color: #eee;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 0 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
</style>
<meta name="description" content="Diese Seite ist den Studenten der Deutschlehrerausbildung der Istanbul Universität ab dem I. Semester des Jahres 2006 gewidmet">
<meta name="keywords" content="Hasan Ali Yücel Egitim Fakültesi, Almanca Ögretmenligi">
<meta name="author" content="evren">
<meta name="editor" content="html-editor phas<!--DATE-->26.04.2009 15:04:54<!--/DATE-->e 5">
</head>
<body div style="background: transparent url([URL]http://img511.imageshack.us/img511/1417/762pxbackground.jpg[/URL]) repeat;" text="#000000"  bgcolor="#FFFFFF" link="#0000FF" alink="#0000FF" vlink="#0000FF">
<h1><u><b><p align="center"><font face="Calibri">Hasan Ali Yücel Egitim Fakültesi</font></p></b></u></h1>
<h1><u><b><p align="center"><font face="Calibri">Almanca Ögretmenligi</font></p></b></u></h1>
<h2><b><blink><font color="#000000">VI. Semester</font></blink></b></h2>

<ul id="Navigation">
<li><p align="center"><a href="#Fächer">Fächer</a></p></li>
<ul>
<li><b><u><a href="Fremdsprachenlehre im Primarbereich.htm"><font color="#0000FF">FS-lehre im Primarbereich</font></a></u></b></li>
<li><b><a href="Französisch.htm"><font color="#0000FF">Französisch</font></a></b></li>
<li><b><a href="Spezielle Lehrmethoden.htm"><font color="#0000FF">Spezielle Lehrmethoden</font></a></b></li>
<li><b><a href="Literarische Textanalyse und Lehre.htm"><font color="#0000FF">Literarische Textanalyse & Lehre</font></a></b></li>
<li><b><a href="Neue Trends in der Deutschlehre.htm"><font color="#0000FF">Neue Trends in der Deutschlehre</font></a></b></li>
<li><b><a href="Geschichte der türkischen Bildung.htm"><font color="#0000FF">Geschichte der türkischen Bildung</font></a></b></li>
<li><b><a href="Messung und Bewertung.htm"><font color="#0000FF">Messung und Bewertung</font></a></b></li>
<li><b><a href="Leistungen für die Gesellschaft.htm"><font color="#0000FF">Leistungen für die Gesellschaft</font></a></b></li>
</ul>
<li><p align="center"><a href="#Prüfungsergebnisse">Prüfungsergebnisse</a></p></li>
<ul>
<li><b><a href="Zwischenprüfungsergebnisse.htm"><font color="#0000FF">Zwischenprüfungen</font></a></b></li>
<li><b><a href="Finalprüfungsergebnisse.htm"><font color="#0000FF">Finalprüfungen</font></a></b></li>
</ul>
<li><p align="center"><a href="#Nützliche Links">Nützliche Links</a></p></li>
<ul>
<li><a href="DaF Links.htm"><font color="#0000FF">DaF Links</font></a></li>
<li><a href="Sonstige Links.htm"><font color="#0000FF">Sonstige Links</font></a></li>
<li><a href="[url=http://www.istanbul.edu.tr/].:: İ S T A N B U L Ü N İ V E R S İ T E S İ ::.[/url]"><font color="#0000FF">Istanbul Universität</font></a></li>
<li><a href="[url=http://transkript.istanbul.edu.tr/]İ.Ü. ÖĞRENCİ İŞLERİ BİLGİ SİSTEMİ[/url]"><font color="#0000FF">ANO-Übersicht</font></a></li>
<li><a href="[URL]http://www.istanbul.edu.tr/hay/[/URL]"><font color="#0000FF">Hasan Ali Yücel Egitim Fakültesi</font></a></li>
<li><a href="[URL]http://groups.google.com.tr/group/fsuneuemethoden?hl=tr&lnk=[/URL]"><font color="#0000FF">Google Group fsuneuemethoden</font></a></li>
<li><a href="[url=http://groups.google.com/group/hayefdaf?hl=tr]hayefdaf | Google Gruplar[/url]"><font color="#0000FF">Google Group hayefdaf</font></a></li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><a href="Über den Autor.htm">Über den Autor</a></center>
<center><a href="[EMAIL="[email protected]"]mailto:[email protected][/EMAIL]">E-Mail an Autor</a></center><br>
<p align="center"><a href="Hasan Ali Yücel Egitim Fakültesi - Lehrer für DaF.html">Nach oben</a></p>

<div id="Info">
<strong>Info-Box</strong>
<p>Abc.</p>
<p>Def.</p>
<p>Ghi.</p>
</div>

<div id="Inhalt">
<h1>Willkommen</h1>
<p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.</p>
<p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
<p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.</p>
</div>
</body>
</html>

Was mache ich falsch?

Ich danke für jegliche Hilfestellungen im Voraus.

Gruß,

Rex D.
 
Hmm,

kannste evtl. deinen Code auf eine Seite hochladen? Möchte das jetzt nicht für mich selbst machen. Wenn man den Code direkt mit der Erscheinung vergleichen kann, findet man den Fehler meistens schneller.

MfG
 
Rex Dynasty schrieb:
Was mache ich falsch?
Zum Vergrößern anklicken....
Sag Dus uns bitte.

Was auf jeden Fall nicht zeitgemäß ist, sind Deine Tags für physische Textauszeichnung und die Verwendung von HTML-Attributen für das Aussehen. Mit HTML beschreibt man nur die logische Struktur des Inhalts. Den trennt man strikt von Layout+Design und macht letzteres ausschließlich in CSS.
 
Efchen schrieb:
Sag Dus uns bitte.

Was auf jeden Fall nicht zeitgemäß ist, sind Deine Tags für physische Textauszeichnung und die Verwendung von HTML-Attributen für das Aussehen. Mit HTML beschreibt man nur die logische Struktur des Inhalts. Den trennt man strikt von Layout+Design und macht letzteres ausschließlich in CSS.
Zum Vergrößern anklicken....


Wenn ich eine Ahnung hätte, würde ich nicht fragen. Noch bin ich leider ein totaler noob. :oops:
 
Wir haben Dich um einen Link zur Seite gebeten. Ein Archivfile aus einer unsicheren Quelle werde ich mir nicht runterladen. Bitte lad die Site irgendwo hoch, dass man sich das ansehen kann.
Du willst was von anderen, dann solltest Du es den anderen so leicht wie möglich machen :-)

"Sag Dus uns doch bitte" bezog sich darauf, dass Du uns Code hinklatscht, und dann einfach schreibst "Was mache ich falsch?" Ich für meinen Teil habe keine Lust, den Code zu lesen und mir vorzustellen, wie das wohl aussehen könnte (meist ist es dann in der Realität noch anders) und werde mir auch nicht die Arbeit machen, den Code in Dateien zu kopieren, diese bei mir abzuspeichern und dann das auszuprobieren. Aber ohne Browser kann ich halt auch meine Web-Developer-Tools nicht benutzen und eine Antwort zu geben, wäre wie ein Ratespiel.

Also stell die Seite bitte online und beschreibe, was Dir daran nicht gefällt. Dann kannst Du auf viele qualifizierte Antworten hoffen.

Grüße,
-Efchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben