Formatierung mittels CSS klappt nicht

[Claus]

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

[Regina Schaukrug]

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

[Claus]

Vielen Dank,

ich habe es jetzt auch selber gesehen 😟.

Claus

[Regina Schaukrug]

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…

[ottogal]

äh, merdé.

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

[Claus]

Ist es so besser?

Claus

[JürgenB]

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

[Regina Schaukrug]

<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.

[Claus]

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

[Claus]

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

[MudGuard]

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

[Regina Schaukrug]

So geht es. Behauptet PC-Welt.

[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.

Claus

[Matthias Apsel]

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

[Klawischnigg]

Hi there,

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