Jeena Paradies: Trennung von Inhalt und Layout!

Beitrag lesen

Hallo,

Eventuelle Anmerkungen im Sinn einer "Designbewertung" sind ebenfalls willkommen, da klemmt noch ein bißchen was in der zentralen CSS ...

Ich spreche hier mal nur kurz den Quellcode der Startseite an.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
Argh, warum steht da Windows auf deiner Seite ;-)

<div id="portrat"></div>
Wozu diese total unnötige Divsuppe? Das Bildchen von dir gehört doch auf jeden Fall zum Inhalt der Seite und sollte auf keinen Fall vom vorhandensein von CSS abhängig gemacht werden.

<div id="titel"><h1>Willkommen</h1></div>
Hier wieder unnötige Divs. <h1> lässt sich doch ohne das div außenrum wunderbar stylen, wozu hast du es denn eingebaut?

<div id="subnavi"><a class="navi" href="/index.php">Christoph Schnauß</a>&nbsp;&nbsp;&nbsp;  
</div>

Nanana, seit wann machen wir denn Abstände mit geschützten Leerzeichen? Wozu gibt es denn Margin und Padding? Findest du außerdem nicht auch, dass das was du hier darzustellen versuchst eher ein Absatz (oder gar eine ungeordnete Liste) mit Links ist? Aber ja stimmt darüber könnte man streiten.

<div id="linie"><hr></div>
Argh wieder ein total unnötiges Div. Wozu ist denn das nun wieder da außen herum um <hr>? Das <hr> kann man doch mindestens genau so gut ohne ein Div außenrum stylen, man könnte den "grafischen" Effekt auch genau so gut mittels eines borders am <div id="kopf"> erhalten, dein Konstrukt ist also eigentlich völlig unnötig.

<div id="navi"><br><br>
Hier wieder das gleiche wie oben schon, seit wann machen wir denn Abstände mittels <br>? Gibt es dazu nicht die wunderbaren CSS Eigenschaften wie Margin und Padding?

<a class="navi" href="/ueber/index.php">über diese Site</a><br>
Wozu hat jeder einzelne Link da noch eine extra Klasse? Die kannst du doch alle wunderbar über das Elternelement mit der ID "navi" erreichen und sparst nebenbei auch noch Quellcode wenn du das konsequent überall durchhälst, den man nicht mehr herunterladen muss.

<a class="navi" href="/privat/index.php">Persönliches</a><br>  
<a class="navi" href="/kontakt/index.php">Kontakt</a><br>  
<a class="navi" href="/prog/index.php">Scripts</a><br>  
<a class="navi" href="/projekt/index.php">Projekte</a><br>  
<a class="navi" href="/misc/index.php">Verschiedenes</a><br>  
<a class="navi" href="/links/index.php">Links</a><br>  
</div>

Was würde hier an dieser Stelle gegen eine Ungeordnete Liste von Links sprechen? In etwa so:

<ul id="navi">  
 <li><a href="/ueber/index.php">über diese Site</a></li>  
 <li><a href="/privat/index.php">Persönliches</a></li>  
 <li><a href="/kontakt/index.php">Kontakt</a></li>  
 <li><a href="/prog/index.php">Scripts</a></li>  
 <li><a href="/projekt/index.php">Projekte</a></li>  
 <li><a href="/misc/index.php">Verschiedenes</a></li>  
 <li><a href="/links/index.php">Links</a></li>  
</ul>

IMHO ist sie viel leichter stylebar und übersichtlicher.

<div id="seite">  
<div id="body">

Wozu verschachtelst du hier eigentlich ohne Sinn zwei Divs? Du grupierst doch hier gar nichts oder? Welchen Zweck hat das dann?

<p>&nbsp;</p>
Nanu seit wann machen wir denn Abstände mittels eines Absatzes, welcher dann ein geschütztes Leerzeichen enthält? Gab es denn da nicht wunderbare CSS Eigenschaften wie Margin und Padding?

<a href="http://selfhtml.christoph-schnauss.de" target="_top">Downloadangebot für SELFHTML [...]
Hm wozu ist dieses target="_top" eigentlich da? Ich sehe gar kein Frameset, welches es zu sprengen vermögen könnte.

<img border="0" src="grafik/backg0.png" style="position: absolute; right: 45%" alt="fraktale Grafik">
Stellt die Grafik nicht eigentlich auch einen Absatz dar? Deshalb sollte sie ja natürlich auch in ein <p></p> Konstrukt eingebettet werden. Danach hast du praktischerweise die möglichkeit ohne irgendwelche position: absolute; right: 45% Trixereien mit ganz ordinärem text-align: center; die Grafik genau in die Mitte zu bekommen. Außerdem solltest du der Grafik auch Höhe und Breite mitgeben. Die Border Eigenschaft gehört auch in die zentrale CSS Datei und nicht zu jedem einzelnen Bildchen.

Resüme

Du solltest dich dringend mit der klaren Trennung von Inhalt und Layout beschäftigen. Außerdem würde ich dir empfehlen das Kapitel CSS in SELFHTML zu studieren, dort findest du sicher noch mehr Anregungen. Auf jeden Fall soltest du möglichst vermeiden unnötig Divsuppe zu produzieren. Entgegen der Meinung vieler CSS Anfänger lassen sich die einzelnen Tags auch ohne ein Div außenrum direkt stylen.

Übrigens kann ich leider nichts zum Thema Holunderwein sagen, da ich selbst von Wein nicht so angetan bi,n dafür aber eher dem Ungespundeten Gerstensaft zugeneigt.

Grüße
Jeena Paradies

--
Weblogsoftware gesucht? Jlog
0 42

Holunder online ;-)

Christoph Schnauß
  • menschelei
  1. -2
    zu besoffen, um den Inhalt zu bewerten
    1. 0
      Christoph Schnauß
      1. 1
        Orlando
        1. 0
          Christoph Schnauß
          1. 0
            Orlando
        2. 0
          Ingo Turski
  2. 0
    Ingo Turski
    1. 0
      Christoph Schnauß
      1. 1
        Ingo Turski
        1. 0
          Christoph Schnauß
          1. 1
            Ingo Turski
            1. 0
              Christoph Schnauß
              1. 1
                Ingo Turski
                1. 0
                  Christoph Schnauß
              2. 1
                Detlef G.
                1. 0
                  Christoph Schnauß
    2. 0
      O'Brien
      1. 0
        Christoph Schnauß
        1. 0

          Holunder-Geplänkel

          O'Brien
          1. 0
            Christoph Schnauß
            1. 0
              O'Brien
  3. 0
    Reiner
    1. 0
      Christoph Schnauß
      1. 0
        Reiner
        1. 0
          Christoph Schnauß
  4. 5

    Trennung von Inhalt und Layout!

    Jeena Paradies
    • html
    1. 0
      Christoph Schnauß
      1. 2
        Ingo Turski
        1. 0
          Christoph Schnauß
      2. 1
        Jeena Paradies
        1. 0

          Trennung von Inhalt und Layout

          Christoph Schnauß
          • css
          1. 0
            Ingo Turski
      3. 1
        Detlef G.
    2. 0
      Martin Hölter
  5. 0
    Kalle_Worms
    1. 0
      Christoph Schnauß
  6. 0
    Tom
    1. 0
      Christoph Schnauß
  7. 0
    Rolf Rost
    1. 0
      Christoph Schnauß
  8. 0
    Christoph Schnauß