Die Fehler im Code musst du korrigieren, keine Frage.
Ich kann dir aber sagen, dass man auf area-Tags keine CSS-Events legen kannst (mit JS ginge es vielleicht). Lege relativ-positionierte divs über das bild und statte die mit dem Hover aus; Image-Maps sind veraltet.
Dankeschön! 
Jetzt haben sie mich hier aber tatsächlich schon dazu gebracht, dass ich erst das Design an sich in Ordnung bringen will 
Image-Maps sind veraltet.
Wie kommst du zu dieser Erkenntnis?
Was ich mich auch noch frage: ich habe jetzt wie vorgeschlagen zu einem kostenpflichtigen Hoster gewechselt, One.com. Dort werde ich dann das valide Design einfügen. Diese ganze Sache, mit dem Header und den div-Containern, kommt die in das Stylesheet, da sie für die ganze Website gilt oder in irgend eine andere Datei. Auf npage war es nämlich so, dass man da den Punkt Design hatte, in den man den HTML-Text einfügt und dann war das Design auf der ganzen HP, ich vermute damit hat man das zweite Stylesheet, von dem explanator ja schon gesprochen hat, verändert.
In kurz: das seitenübergreifende Design (Header, div, etc.) kommt ins Stylesheet?
Die Frage ziehe ich wieder zurück, da ich glaube, es verstanden zu haben
Sollte charset=utf-8 nicht unter Anderem bewirken, dass die Umlaute richtig dargestellt werden?
Zum ImageMap: wir hatten in der siebten Klasse das Thema mal. Lang ist's her, kann also durchaus sein, dass es nicht mehr so modern ist 
Wie kommst du zu dieser Erkenntnis?
Ich zumindest habe schon ewig keine mehr gesehen. Und mir fällt spontan auch kein Use-Case ein, der nicht auch mit CSS2/3 realisierbar wäre.
Sollte charset=utf-8 nicht unter Anderem bewirken, dass die Umlaute richtig dargestellt werden?
Das soll dem Browser mitteilen, dass deine Seite UTF8-Codiert ist. Wenn sie das tatsächlich ist, stellt er auch Sonderzeichen korrekt dar. Wenn aber dein Encoding ANSI oder UNICODE ist, kommt größtenteils murks dabei raus. Das ist wie wenn du versuchst bei einem Schwaben einen berliner Dialekt festzustellen.
Ich zumindest habe schon ewig keine mehr gesehen. Und mir fällt spontan auch kein Use-Case ein, der nicht auch mit CSS2/3 realisierbar wäre.
Das soll dem Browser mitteilen, dass deine Seite UTF8-Codiert ist. Wenn sie das tatsächlich ist, stellt er auch Sonderzeichen korrekt dar. Wenn aber dein Encoding ANSI oder UNICODE ist, kommt größtenteils murks dabei raus. Das ist wie wenn du versuchst bei einem Schwaben einen berliner Dialekt festzustellen.
Ansi ist keine Zeichencodierung sondern das Normierungsinstitut: American National Standards Institute
siehe dazu ->http://de.wikipedia.org/wiki/Ansiund
UNICODE bildet nicht nur UTF-8 ab siehe dzau -> http://de.wikipedia.org/wiki/Unicode
- - - Aktualisiert - - -
@TiBo007 Wenn dein Design für dich in Ordnung ist, sag einfach Bescheid. Ich habe hier schon die komplette Vorlage inklusive deines Wunsches Vorliegen.
@TiBo007 Wenn dein Design für dich in Ordnung ist, sag einfach Bescheid. Ich habe hier schon die komplette Vorlage inklusive deines Wunsches Vorliegen.
Ist denn schon Weihnachten? 
Danke vielmals.
Ich habe es mir nochmal angeschaut und finde, dass der Inhalt zu nah an der Navigation und den "aside"-Boxen sind. Ich denke das muss man im CSS ändern, oder?
body { margin: 20px; background-color: white; min-width: 1115px;}So vielleicht? Ich habe noch nicht ausprobiert, daher weiß ich nicht ob 20px zu viel oder zu wenig Rand sind. Ich wollte das CSS aber auch nicht kaputt machen.
Der Übertragungsfehler, den du gestern als letztes noch erwähnt hattest, von mir hat bewirkt, dass der Inhalt, wenn die/der/das div "Navi" zu Ende ist, nach links verschoben ist, oder?
Da du ja neugierig bist, zeige ich dir mal wie deine Seite aussehen könnte.
Das könnte gut aussehen
Meinst du, die Sache mit dem Regal kriege ich hin, wenn ich noch mehr Ausgaben im Laufe des Jahres einfüge?
Das könnte gut aussehen
Meinst du, die Sache mit dem Regal kriege ich hin, wenn ich noch mehr Ausgaben im Laufe des Jahres einfüge?
ja klar doch.
Na jetzt bin ich wirklich neugierig geworden
Hattest du den gleichen Plan, wie Tobse?
P.S.
Kriegen wir es noch hin, dass die Farben ein bisschen mehr in den grünen Bereich gehen und weniger ins Gelbe? So ein Neongrün bis Lime. HTML-Notation laut gimp: 70d005
Ich kann auch die benötigten Grafiken dazu ändern, wenn du mir sagst, welche wir noch brauchen
1. Du kannst die Farben ändern, ja über CSS
2. Grafiken brauchst du nur 4 die beiden aus dem Kopfbereich, das Buch und das Regal.
3. du kannst ins Regal nach gleichem Muster mehrere Bilder platzieren, warum denn nicht.
4. Der Effekt wie du ihn haben willst, lässt sich so am einfachsten umsetzen, mit Area geht es jedenfalls nicht, wurde aber schon angesprochen.
5. warten wir erst mal bis du die Seite bei deinem neuen Hoster hochgeladen hast, das erscheint mir sinnvoller.
6. Wenn du weiter an der Seite Änderungen durchführen willst, solltest du HTML und CSS lernen.
Die Navigationsfarbe änderst du hier für alle Normalansichten:
#navi ul li a {
background-color: rgb(201, 255, 39);
}und für hover änderst du das an dieser Stelle:
#navi ul li a:hover {
background-color: rgb(181, 234, 19);
}
#navi li a:hover {
background-color: rgb(181, 234, 19);
}Mit welchem Editor arbeitest du?
Du hast da wieder viel Müll in deinem Quellcode erzeugt.
Nimm einen normalen Editor wie PSpad oder Notepad++ und speichere deine Dateien als UTF-8 ohne BOM ab. Gute Editoren können das.
Wenn du Änderungen vornimmst, validiere deinen Code: http://validator.w3.org/check?uri=http…=Inline&group=0
Dann siehst du auch was du falsch gemacht hast.
- - - Aktualisiert - - -
Im CSS kann man beim Regal statt einer Vergrößerung als Hover-Effekt bestimmt auch ein anderes Bild einfügen, oder?
Grundsätzlich gilt:
Überlege dir bevor du was entwickelst, wie es aussehen soll und welche Funktionalitäten rein sollen.
Spätere Änderungen sind immer teuer(Zeit und Geld).
Wenn du das bezahlen müsstest, würde dir die Agentur für jede Änderung eine Rechnung schreiben, denke immer daran.
Du hast bekommen was du wolltest, nun schau dir mal alle HTML-Elemente an und lies nach wozu die da sind. Beschäftige dich auch mit CSS. eine Gute Seite dazu ist
http://www.css4you.de/
Habe noch ein bisschen dran gearbeitet. Die YT-Videos machen noch Probleme, mache ich dann die Tage. Sonst müsste der Quelltext relativ valide sein. :)Ich werde auch noch versuchen einen Footer zu machen, damit da der Link zum Impressum rein kann. Probiere ich dann die Tage selber mal aus, ob ich das hinbekomme.
Ich habe noch geändert (was mir gerade so einfällt):
- ein Favicon eingefügt
- fehlende "alt" Angaben bei Bildern eingefügt
- aus der ID "Infobox" eine Class gemacht, da es ja mehr als ein Mal vorkommt
- den Font im CSS bestimmt
- den Border=0 bei Bildern im CSS festgelegt
- und natürlich einiges dabei gelernt, dank euch/dir
Ich habe nochmal selber probiert, statt der Vergrößerung, ein anderes Bild als Hover-Effekt zu nehmen. Blöderweise bleibt das neue Bild immer hinter dem alten (zu sehen auf der HP).
Der Code:
#shelf1 a img:hover { background-image: url(http://kleinundsmart.de/Bilder/TitelblattHover/1.AusgabeHover.png);
}Wäre es jetzt noch ein weiter Weg, um es richtig zu stellen, oder eine kleine Änderung?
Ich habe es schon mit dem z-index probiert, aber ich denke das hat nicht geklappt, weil das Hoverbild ja der gleiche div-Container ist.:?
P.S. Ich habe es!
Der Code ist jedoch nicht valide, da mit meiner Lösung src in img frei bleibt. Ist das schlimm?
Auch gelöst, habe einfach ein vollkommen transparentes Bild hochgeladen
Warum hast du das Design im Header geändert?
Ich finde das Bild rechts sehr schlecht, stark verpixelt, das Bild mit der Maus hingegen sah doch gut aus.
Dann noch was zu deinem Code:
<p style="text-align: center;">
</p>
<p>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;">Auf den weiteren Seiten findest Du folgendes:</span></span>
</p>
<p>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;"><strong>Archiv -</strong> alle Ausgaben aus den Jahren 2011/12</span></span>
</p>
<p>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;"><strong>Über das Magazin -</strong> unsere Entstehungsgeschichte</span></span>
</p>
Das erste P ist inhaltsleer, hat da also nichts zu suchen und kann komplett gelöscht werden.
Die anderen Ps haben alle Inlinestyles, du hast aber doch eine CSS-Datei, packe die Angaben also daran rein.
Strong sollte nicht verwendet werden.
2 mal Span ist unnötig, ein mal reicht.
Alle Elemente sind hier erklärt -> http://dev.w3.org/html5/markup/elements.html
Strong - schwer wichtig
Ich kann nicht sehen, warum die Worte Forum oder Archiv hier unheimlich wichtig erscheinen. Du könntest stattdessen b nehmen