Claus: Formatierung mittels CSS klappt nicht

problematische Seite

Hallo,

ich designe gerade eine neue Website für meine Schwester und benutze CSS zur Formatierung (position:absolute). Bisher hat das wunderbar geklappt, aber diesmal verspult es mir das ganze Layout (siehe Website). Die CSS validieren, aber irgendwo muß doch der Fehler sein. Ich wäre für Tips sehr dankbar.

Claus

  1. problematische Seite

    Klar. Du hast was falsch gemacht. Und stell auch gleich auf HTML5 um.

    1. problematische Seite

      Vielen Dank,

      ich habe es jetzt auch selber gesehen 😟.

      Claus

      1. problematische Seite

        Apropos "sehen":

        Die graue, verstümmelte Schrift ist, äh, merdé. Denk mal an die Patienten. Die sind nicht alle 15 und manche haben mit den Augen Probleme…

        1. problematische Seite

          äh, merdé.

          Es heißt weder merdé noch mèrde, sondern merde. (Wenn schon so gewähltes Französisch, dann korrekt...)

          1. problematische Seite

            Ist es so besser?

            Claus

            1. problematische Seite

              Hallo,

              Ist es so besser?

              nein. Wenn du die Seite schon neu machst, solltest du dich auch unbedingt mit html5 und den neuen Elementen beschäftigen. Die DIV-Supe ist dann nicht mehr nötig.

              width: 150%;

              Du magst wohl überflüssige Scrollbalken?. Ich nicht. Auch ist der Kopfbereich breiter als mein Bildschirm. Im Smartphone sehe ich mir das jetzt erst garnicht an.

              Gruß
              Jürgen

            2. problematische Seite

              <a href="aktuelles.html"><img src="images/icon_01.png" alt="" width="107" height="168"></a>
              

              Noch nicht. Wenn Du den Link schon als Grafik präsentierst, dann bitte mit besetztem title und alt.

              Dann wäre noch die Sache mit dem Icon. Das kann man mit CSS formatieren.

              img.HauptMenueIcon {
                 width:  107px;
                 height: 168px;
              }
              

              (Größenangabe besser in rem)

              <a href="aktuelles.html" title="Aktuelles aus der Praxis"><img class="HauptMenueIcon" src="images/icon_01.png" alt="icon"></a>
              

              Zuletzt stellt sich die Frage, ob der Text wirklich Teil der Grafik sein muss. HTML kann prima Text darstellen. Dann erübrigt es sich auch eine Div-Suppe anzurühren:

              Statt also eine div-Suppe zu rühren:

              <div id="icon_01"><a href="aktuelles.html"><img src="images/icon_01.png" alt="" width="107" height="168"></a></div>

              kann man - ich sagte ja schon: auf HTML5 umstellen - so loslegen:

              <nav class="MainNav">
                 <a href="aktuelles.html" Accesskey="A">Aktuelles</a><a href="anfahrt.html" Accesskey="f" >Anfahrt</a>
              </nav>
              

              und im CSS:

              
              #accesskeys{
                 text-decoration: underline;
              }
              
              nav.MainNav a:link {
                  display: inline-block; 
                  height: 18.8rem;
                  width:  11rem;
              
                  background-repeat: no-repeat 
                  background-position: top, center;
                  padding-top: 17.3rem;
                  text-align: center;
              }
              
              
              nav.MainNav a:hover, nav.MainNav a:focus {}
              
              
              nav.MainNav a:active {}
              
              nav.MainNav a:target {}
              
              
              nav.MainNav a [href="aktuelles.html"] {
                 background-image: url("/icons/aktuelles.png");
              }
              
              nav.MainNav a [href="anfahrt.html"] {
                 background-image: url("/icons/anfahrt.png");
              }
              
              

              Auch kannst Du aus <div id="header"> einfach <header> machen. footer gibt es auch...

              <p>
              <strong>Herzlich Willkommen auf meiner Website!</strong>
              </p>
              
              <h2>Herzlich Willkommen auf meiner Website!</h2>
              

              Gunnar als unser Hardcore-Benutzbarkeitswächter sagt Dir sicherlich was noch fehlt.

              1. problematische Seite

                Ok, hab's verstanden. Ich muß mich aber zuerst mal in HTML 5 einlesen. Nach jahrelanger Pause mache ich jetzt zum ersten Mal wieder Webdesign, und bisher habe ich meine ganzen Code als XHTML 1.0 Transitional geschrieben. Ich habe im SelfHTML Blog eine gute Einführung in HTML 5 entdeckt, die ich mir gerade durchlese. Und dann werde ich im Wiki Artikel zu den von euch erwähnten Elementen wie nav durchlesen. Vielen Dank für euer Feedback!

                Claus

                1. problematische Seite

                  P.S.: Als ich versucht habe, das HTML5-Element <header> in meinen Code einzufügen, mußte ich feststellen, dass mein Editor Bluefish 2.2.7 die Syntax dieses neuen Befehls nicht hervorhebt (bei <nav> dasselbe). Was kann ich da tun? Ich arbeite mit Bluefish sehr gern und würde ungern den Editor wechseln. Ich habe schon versucht, das über 'Bearbeiten -> Einstellungen' entsprechend anzupassen, aber ohne Erfolg.

                  Claus

                  1. problematische Seite

                    Hi,

                    P.S.: Als ich versucht habe, das HTML5-Element <header> in meinen Code einzufügen, mußte ich feststellen, dass mein Editor Bluefish 2.2.7 die Syntax dieses neuen Befehls nicht hervorhebt

                    Gibt es evtl. eine extra Syntax Definition für HTML5 in Bluefish?

                    cu,
                    Andreas a/k/a MudGuard

                  2. problematische Seite

                    1. problematische Seite

                      Im alten XHTML-Dokument ging es nicht, aber als ich ein neues HTML5-Dokument angelegt habe, hat es funktioniert. Vielleicht erkennt Bluefish den DOCTYPE.

                      Claus

                      1. problematische Seite

                        Hallo Claus,

                        Im alten XHTML-Dokument ging es nicht, aber als ich ein neues HTML5-Dokument angelegt habe, hat es funktioniert. Vielleicht erkennt Bluefish den DOCTYPE.

                        header ist ja auch kein gültiges XHTML-1.

                        Bis demnächst
                        Matthias

                        --
                        Rosen sind rot.
  2. problematische Seite

    Hi there,

    in Deutschland darf man "Energetische Psychologie" bewerben? Wtf???