H. Henning: Anfängerprobleme

Hallo,

ich habe mich durch die SELFHTML Dokumentation gearbeitet und damit anfänglich meine Seiten erstellt.
An manchen Enden verstehe ich die Doku allerdings nicht wirklich oder finde die benötigte Funktion gar nicht.
Deshalb die Fragen hier in geballter Form - sorry - bin halt Newby.
Ich hoffe ich mache das Hervorheben richtig:
Hier meine Dateien:

layout.css

[code lang=css]
body { background-color:#FFFFFF; color:#000000; }
a:link { color:#000000; }
a:visited { color:#999999; }
a:active { color:#FF0202; }
  div.rand { margin-top:10px; margin-left:30px; margin-right:30px; }
P, H1 { font-family: Arial, Helvetica, sans-serif; }
P { font-family: Arial, Helvetica, sans-serif; }
[/code lang=css]

background.php (php weil später auch noch Datenbankabfragen dazukommen sollen)

[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<div class="rand">
<span style="font-family:'Arial'">
</head>
<body>
<img src="Balken.jpg" width="1000" height="141" style="float:middle; margin-bottom:0px" alt="Balken">
<br>
<div align="justify"><span style="font-size:15pt; margin-bottom:50px"><a href=index.php>HOME</a> <a href=portrait.php>PORTRAIT</a> <a href=wissenswertes.php>WISSENSWERTES</a> <a href=shop.php>SHOP</a> <a href=aktuelles.php>AKTUELLES</a> <a href=kontakt.php>KONTAKT</a></span>
<br>
</html>
[/code lang=html]

index.php

[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="layout.css">
  </head>
  <body>

<?php

//Hintergrund
  include ("background.php");

echo "<br>";
  echo "<span style='font-size:19pt'>Hallo liebe Leserschaft!</span><br>";
  echo "<br>";
  echo "<span style='font-size:13pt'>Text<br>";
  echo "<br>";
  echo "<br>";
  echo "<br>";

?>
<br>
</body>
</html>
[/code lang=html]

So - folgende Fragen dazu:
1. Die erste ist natürlich ob ich völligen Unsinn zusammengetippt habe, der nicht den Richtlinien entsprich und auch in keiner Form Strict tauglich ist, oder grobe Schnitzer drinnen sind, wo jeder normale Mensch gleich die Hände über dem Kopf zusammenschlägt.
2. Dann habe ich das Problem wenn ich das Bild in Background.php links setze wird der nachfolgende Text danebengeklatscht, obwohl ein Break folgt - warum ist das so?
3. Die Links nach dem Bild möchte ich auf die Breite des Bildes bringen, habe aber keine Funktion für erzwungenen Blocksatz gefunden, um auf 1000 Pixel zu "Dehnen"wie geht das sauber?
4. Warum funktioniert der Abstand nach unten bei den Links nicht=
5. Wie kann ich dem Fließtext unten eine feste Breite zuteilen (auch auf die Breite des Bildes?

Vielen Dank im Voraus schon mal für die Mühe - und sorry, bin halt Anfänger, der sich noch nicht ganz scher ist, ob das alles so richtig ist, was er da tut...

H. Henning

  1. <div class="rand">

    Wo geht dieser DIV wieder zu?

    <span style="font-family:'Arial'">

    Wo geht dieses Span wieder zu?

    </head>
    <body>

    Der body wird auch nicht geschlossen?

    <img src="Balken.jpg" width="1000" height="141" style="float:middle; margin-bottom:0px" alt="Balken">
    <br>
    <div align="justify">

    Wo geht dieser DIV wieder zu?

    <span style="font-size:15pt; margin-bottom:50px"><a href=index.php>HOME</a> <a href=portrait.php>PORTRAIT</a> <a href=wissenswertes.php>WISSENSWERTES</a> <a href=shop.php>SHOP</a> <a href=aktuelles.php>AKTUELLES</a> <a href=kontakt.php>KONTAKT</a></span>

    Diesen Span machste wieder zu. Warum die anderen tags nicht?

    <br>
    </html>
    [/code]lang=html]

    index.php

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
      <title>Title</title>
      <link rel="stylesheet" type="text/css" href="layout.css">
      </head>
      <body>

    <?php

    //Hintergrund
      include ("background.php");

    echo "<br>";
      echo "<span style='font-size:19pt'>Hallo liebe Leserschaft!</span><br>";
      echo "<br>";
      echo "<span style='font-size:13pt'>Text<br>";

    Dieser Spab geht auch nicht zu?

    echo "<br>";
      echo "<br>";
      echo "<br>";

    ?>
    <br>
    </body>
    </html>

      
      
    Weiß jetzt nicht genau, ob das Schließen der tags dir alle Probleme erspart, denke mal eher nicht. Aber alle Elemente, die man öffnet, sollten auch wieder geschlossen werden.  
    Das ist mir nur auf die schnelle aufgefallen.  
      
    Gruß,  
    Thorsten F.
    
  2. hi,

    1. Die erste ist natürlich ob ich völligen Unsinn zusammengetippt habe, der nicht den Richtlinien entsprich und auch in keiner Form Strict tauglich ist, oder grobe Schnitzer drinnen sind, wo jeder normale Mensch gleich die Hände über dem Kopf zusammenschlägt.

    <head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <div class="rand">
    <span style="font-family:'Arial'">
    </head>

    Hoppla, was haben Div und Span denn im Head verloren? Gar nichts.

    <body>
    <img src="Balken.jpg" width="1000" height="141" style="float:middle; margin-bottom:0px" alt="Balken">

    Da du einen Strict-Doctype gewählt hast, darf body keine inline-Elemente wie Img als direkte Nachfahren enthalten.

    <br>

    Abstände mache bitte über CSS.

    <div align="justify">

    Ausrichtung mache bitte über CSS.

    <span style="font-size:15pt; margin-bottom:50px">

    CSS-Formatierungen lagere bitte aus, anstatt solche inline-Styles zu benutzen.

    <a href=index.php>HOME</a> <a href=portrait.php>PORTRAIT</a> <a href=wissenswertes.php>WISSENSWERTES</a> <a href=shop.php>SHOP</a> <a href=aktuelles.php>AKTUELLES</a> <a href=kontakt.php>KONTAKT</a></span>

    Ein solches Menü ist eine AufLISTung von Links - also nutze auch eine Liste zur Auszeichnung.
    http://css.maxdesign.com.au/listamatic/

    1. Dann habe ich das Problem wenn ich das Bild in Background.php links setze wird der nachfolgende Text danebengeklatscht, obwohl ein Break folgt - warum ist das so?

    Wie hast du denn das Bild "links gesetzt"?

    1. Die Links nach dem Bild möchte ich auf die Breite des Bildes bringen, habe aber keine Funktion für erzwungenen Blocksatz gefunden, um auf 1000 Pixel zu "Dehnen"wie geht das sauber?

    Gar nicht.
    "Einzeiligen Blocksatz" gibt es nicht.

    1. Warum funktioniert der Abstand nach unten bei den Links nicht=

    Welcher Abstand nach unten? Du hast nicht mal den Div, der deine Linkwurst einrahmt und eigentlich eine Liste sein möchte, ordentlich beendet.

    1. Wie kann ich dem Fließtext unten eine feste Breite zuteilen (auch auf die Breite des Bildes?

    Welcher Fließtext?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Da du einen Strict-Doctype gewählt hast, darf body keine inline-Elemente wie Img als direkte Nachfahren enthalten.

      Nicht? Wie macht man das dann korrekt? Bilder in Listen, Divs, Textabschnitte einpacken?

      1. hi,

        Da du einen Strict-Doctype gewählt hast, darf body keine inline-Elemente wie Img als direkte Nachfahren enthalten.

        Nicht?

        Nicht, nein, genau.

        Wie macht man das dann korrekt? Bilder in Listen, Divs, Textabschnitte einpacken?

        Body nur mit Block Elementen befüllen.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Body nur mit Block Elementen befüllen.

          Ok. <img> ist keines.

          Aber so ein einsames Bild ist kein Textabschnitt. Es ist auch keine Liste. Und wenn es auch keine Überschrift ist 8was Bilder i. d. R. nicht sind) bleibt nur noch ein Div? Ja?

          1. Hallo Nusshörnchen,

            Aber so ein einsames Bild ist kein Textabschnitt. Es ist auch keine Liste. Und wenn es auch keine Überschrift ist 8was Bilder i. d. R. nicht sind) bleibt nur noch ein Div? Ja?

            In vielen Fällen dienen Bilder nur zur "Dekoration", damit gehören sie eindeutig in den Bereich der Darstellung und damit ins CSS. Was ich damit sagen will ist, wenn das Bild nicht die Funktion einer Überschrift oder einer anderen Art von Inhalt hat, dann sollte es ein Hintergrundbild sein. Bilder, die zum Inhalt gehören, können zum Beispiel Auflistungen von Bildern oder Teil eines Textabschnittes sein. Das kommt ganz auf das Bild und den Inhalt an.

            gruss,
            OhneName

  3. Hallo H.,

    1. Die erste ist natürlich ob ich völligen Unsinn zusammengetippt habe, der nicht den Richtlinien entsprich und auch in keiner Form Strict tauglich ist, oder grobe Schnitzer drinnen sind, wo jeder normale Mensch gleich die Hände über dem Kopf zusammenschlägt.

    Dafür gibt es bereits eine fertige Software, die das für dich übernimmt, nennt sich Validator.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/
    http://www.validome.org/
    Da kannst du deine Seite hochladen und kannst dann die dort angezeigten Fehler verbessern.

    gruss
    OhneName

  4. Hi,

    Ich hoffe ich mache das Hervorheben richtig:

    nicht ganz :-)

    <head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <div class="rand">
    <span style="font-family:'Arial'">

      
    <div> und <span> sind nur im <body> erlaubt. Auf das style-Attribut solltest Du verzichten, binde entsprechende Angaben in Deinem externen Stylesheet ein. Zudem solltest Du bei Schriftarten \*immer\* eine generische Schriftfamilie anfügen, hier also sans-serif.  
      
    Welche inhaltlichen(!) Erwägungen haben zu Deinem class="rand" geführt?  
      
    
    > ~~~html
      
    
    > <body>  
    > <img src="Balken.jpg" width="1000" height="141" style="float:middle; margin-bottom:0px" alt="Balken">  
    > 
    
    

    <img> ist direkt in <body> nicht erlaubt. Verwende idealerweise nur URIs (und Dateinamen) in Kleinschrift. "middle" ist kein gültiger Wert für die float-Eigenschaft. Ist "Balken" wirklich eine sinnvolle Information, die dargestellt werden soll, wenn die Grafik nicht angezeigt werden kann? Falls nicht: Handelt es sich bei der Grafik wirklich um _Inhalt_, oder ist es nur eine Verzierung, die ergo in den CSS-Code gehört?

    <br>

    In annähernd 100% aller Fälle, in denen "<br>" im Code steht, ist dies falsch, weil nicht der Inhalt(!) eines Zeilenendes vermittelt werden soll, sondern die Darstellung eines Zeilenumbruchs. Nach meinem Dafürhalten ist dem auch hier so.

    <div align="justify">

    align ist eine darstellungsbezügliche Angabe und gehört somit nicht in den HTML-Code. Verwende CSS für *alles*, was mit Darstellung zu tun hat. Zudem ist Blocksatz in vielen Fällen schwer lesbar.

    <span style="font-size:15pt; margin-bottom:50px">

    Dieses <span>-Element ist Inline, daher wird der vertikale Außenabstand nicht wirken. "pt" ist für Bildschirmmedien eine vollkommen ungeeignete Einheit, verwende für alle schriftbezüglichen Größen "em" oder "%".

    <a href=index.php>

    Setze *alle* Attributwerte *immer* in Anführungszeichen. Auch dann, wenn sie es nicht zwingend müssen. Allgemein solltest Du Dich in Richtung XHTML orientieren.

    HOME</a> <a href=portrait.php>PORTRAIT</a> [...]

    Eine Liste von Links ist in erster Linie eine Liste, also i.d.R. ein <ul>, manchmal ein <ol>, selten ein <dl>.

    <br>
    </html>

    HTML erlaubt es zwar (im Gegensatz zu XHTML), auf den </body>-Tag zu verzichten; das ist aber kein Grund, es auch zu tun ;-)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>

    [...]

    <body>
      <?php
      include ("background.php");

      
    Bei allen (in Worten: allen) clientseitigen Belangen ist jeder (in Worten: jeder) serverseitige Code völlig nutzfrei und allenfalls hinderlich. Eliminiere den PHP-Code \*vollständig\* und betrachte ausschließlich die \_Ausgabe\_ des Scripts. Deine background.php wiederholt DOCTYPE, <head> etc. und führt somit zu hochgradig invalidem HTML.  
      
    
    > 1. Die erste ist natürlich ob ich völligen Unsinn zusammengetippt habe,  
      
    Ich sage es mal so: eine Handvoll nicht überraschender Anfängerfehler ;-)  
      
    
    > 2. Dann habe ich das Problem wenn ich das Bild in Background.php links setze wird der nachfolgende Text danebengeklatscht, obwohl ein Break folgt - warum ist das so?  
      
    Frage nicht nach Detailproblemen, solange die Grundlagen inkorrekt sind. Sorge also zunächst für ein(!) HTML-Dokument, welches über ein semantisches Markup verfügt, und füge diesem mit entsprechendem CSS-Code die von Dir gewünschte Darstellung bei - in genau dieser Reihenfolge. Erst dann kümmere Dich um die Generierung des Codes durch Deinen Server.  
      
    
    > Vielen Dank im Voraus schon mal für die Mühe - und sorry, bin halt Anfänger, der sich noch nicht ganz scher ist, ob das alles so richtig ist, was er da tut...  
      
    \*Alles\*, was mit Darstellung zu tun hat, ist CSS. \*Nichts\*, was in HTML notiert wird, hat mit Darstellung zu tun. Trenne Struktur und Layout strikt. Das ist zwar am Anfang mehr Mühe, erleichtert es Dir dann aber sehr schnell und sehr viel.  
      
    Cheatah  
    
    -- 
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
    X-Will-Answer-Email: No  
    X-Please-Search-Archive-First: Absolutely Yes
    
  5. <html>
    <head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <div class="rand">
    <span style="font-family:'Arial'">
    </head>
    <body>

    ...

    Also dieses div und der span gehören nicht in den head sondern in den body!

    Ausserdem ist es "richtiger" den Links die Font-Angaben direkt per CSS zu geben statt ein span drumherum zu bauen. Idealerweise via class/id statt mit style="".

    echo "<br>";
      echo "<span style='font-size:19pt'>Hallo liebe Leserschaft!</span><br>";
      echo "<br>";
      echo "<span style='font-size:13pt'>Text<br>";
      echo "<br>";
      echo "<br>";
      echo "<br>";

    Das kann man viel besser lösen!
    (die PHP echos habe ich mal weggelassen)

    HTML:
    <p id="begruessung">Hallo liebe Leserschaft!</p>
    <p class="text">Text</p>

    CSS:

    p#begruessung
    {
    font-size:19pt;
    margin-top:19x;
    }

    p.text
    {
    font-size:13pt;
    margin-top:19x;
    margin-bottom:57px;
    }

    1. Dann habe ich das Problem wenn ich das Bild in Background.php links setze wird der nachfolgende Text danebengeklatscht, obwohl ein Break folgt - warum ist das so?

    Der Übeltäter heißt vermutlich: style="float:...

    1. Hi,

      <p id="begruessung">Hallo liebe Leserschaft!</p>

      bist Du sicher, dass das keine Überschrift sein soll? Nach Fließtext sieht es jedenfalls nicht aus.

      <p class="text">Text</p>

      Fließtext, der als Text klassifiziert wird? Wie ungewöhnlich.

      Cheatah

      --
      X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      1. Hi,

        <p id="begruessung">Hallo liebe Leserschaft!</p>

        bist Du sicher, dass das keine Überschrift sein soll? Nach Fließtext sieht es jedenfalls nicht aus.

        Wer weiß. Ich habe dazu keine Informationen.
        :)

        <p class="text">Text</p>

        Fließtext, der als Text klassifiziert wird? Wie ungewöhnlich.

        Ja klar. Man kann es auch weg lassen und sagen
        <p></p>

        und die Schriftangaben ohne class/id allen Textabschnitten zuweisen, oder das gleich im body festlegen.

  6. Hallo nette Newsgroup,

    vielen Dank für die vielen Antworten auf mein erstes Posting.
    Entschuldigung für das Doppelposting, aber unter dem Begriff verstehe ich eher ein Posting in mehreren Foren.

    Hier erst mal die neuen Dateien, die dank Euch entstanden sind:

    layout.css
    [code lang=css]
    body {
    background-color : #ffffff;
    color : #000000;
    }
    a:link {
    background-color : #ffffff;
    color : #000000;
    }
    a:visited {
    background-color : #ffffff;
    color : #999999;
    }
    a:active {
    background-color : #ffffff;
    color : #ff0202;
    }

    div.rand {
    margin-top : 10px;
    margin-left : 30px;
    margin-right : 30px;
    }
    P, H1 {
    font-family : Arial, Helvetica, sans-serif;
    }
    P {
    font-family : Arial, Helvetica, sans-serif;
    }

    p#begruessung {
    font-size : 19pt;
    margin-bottom : 10px;
    }

    p.fliess {
    font-size : 13pt;
    margin-bottom : 50px;
    }

    ul#navlist
    {
    margin-left: 0;
    margin-bottom: 50px;
    padding-left: 0;
    white-space: nowrap;
    font-family: arial, helvetica, sans-serif;
    font-size: 13pt;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a { padding: 5px 22px; }

    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #A90029;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: #fff;
    background-color: #999999;
    text-decoration: none;
    }

    background.php
    [code lang=html]
    <html>
    <head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    </head>
    <body>

    <div class="rand">

    <img src="kopf.jpg" width="1000" height="141" style="left; margin-bottom:-10px" alt="kopf">

    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="index.php" id="current">HOME</a></li>
    <li><a href="portrait.php">PORTRAIT</a></li>
    <li><a href="wissenswertes.php">WISSENSWERTES</a></li>
    <li><a href="shop.php">SHOP</a></li>
    <li><a href="aktuelles.php">AKTUELLES</a></li>
    <li><a href="kontakt.php">KONTAKT</a></li>
    </ul>
    </div>

    </body>
    </html>

    index.php
    [code lang=html]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
      <title>Title</title>
      <link rel="stylesheet" type="text/css" href="layout.css">
      </head>
      <body>

    <?php

    //Hintergrund
      include ("background.php");

    echo ("<p id='begruessung'>Hallo liebe Leserschaft!</p>");
      echo ("<p class='text'>Fliesstext: Juchu ich bin ein Fliesstext! Fliesstext: Juchu ich bin ein Fliesstext! Fliesstext: Juchu ich bin ein Fliesstext!</p>");

    ?>
    </body>
    </html>

    Ich hoffe ich habe alles richtig verstanden und umgesetzt.
    Sieht soweit auch recht gut aus.
    Der W3C Valicator findet im CSS keine Fehler - die HTML Validatoren können mit PHP leider nicht umgehen.
    Deshalb noch mal:
    1. Die Frage ob es dem "Strict" gerecht wird - und vielleicht sogar in Richtung XHTML sauber funktionieren könnte.
    2. wie ich den unteren Text im Flattersatz auf die Breite des Bildes umbrechen kann.
    3. welche Einheit statt pt die bessere ist - em oder % - und ob px richtig ist oder ob da auch etwas anderes vernünftiger ist.

    Zu den aufgekommenen Fragen, die ich nicht im Text beantwortet hatte:
    4. class="rand" habe ich verwendet um einen Rand um die Seite zu bauen, was ich optisch ansprechender finde als "rangeklatschte" Elemente.
    5. <img> ist direkt in <body> nicht erlaubt: wie setze ich denn das Bild (es ist der Kopf oben, der auf jeder Seite sein soll) sonst ein - im CSS?

    Vielen Dank schon mal wieder im Voraus...

    H. Henning

    1. hi,

      Der W3C Valicator findet im CSS keine Fehler - die HTML Validatoren können mit PHP leider nicht umgehen.

      Das können andere Clients wie Browser genauso wenig.

      Stelle also dein Script über HTTP abrufbar zur Verfügung, dann kannst du seine Ausgaben auch über HTTP validieren lassen.

      Oder nutze die Möglichkeit, den Validator über einen Dateiupload mit zu validierenden Dokumenten zu füttern; Manuell, oder aus einem Browser heraus, der entsprechendes anbietet - Opera bspw. über [strg]+[alt]+[v.].

      Deshalb noch mal:

      1. Die Frage ob es dem "Strict" gerecht wird - und vielleicht sogar in Richtung XHTML sauber funktionieren könnte.

      Validiere deinen Code.

      1. wie ich den unteren Text im Flattersatz auf die Breite des Bildes umbrechen kann.

      In dem du ihn in ein Element packst, welchem du die gleiche Breite gibst, wie dem Bild.

      1. welche Einheit statt pt die bessere ist - em oder % - und ob px richtig ist oder ob da auch etwas anderes vernünftiger ist.

      Generell überlässt du mit relativen Maßeinheiten wie em oder % dem Nutzer mehr Freiheiten. Welche davon du nimmst, ist dir überlassen.

      Weitere interessante, zum Teil auch eher für absolute Schriftgrößen votierende Meinungen findest du im SELFHTML Weblog, Grundsatzdebatten im Webdesign - (Keine Antwort auf) Die Frage nach der richtigen Schriftgröße

      1. <img> ist direkt in <body> nicht erlaubt: wie setze ich denn das Bild (es ist der Kopf oben, der auf jeder Seite sein soll) sonst ein - im CSS?

      Als Hintergrundbild, oder halt in einem weiteren Block Element - und ja, dieser Frage wurde sich im Threadverlauf schon gewidmet, also etwas aufmerksamer lesen.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }