• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zeitgemässe Alternative für "background"

antonia

Neues Mitglied
Hallo liebe Fories,

nach stundenlangem, vergeblichen Suchen in verschiedenen html-Hilfeseiten versuche ich mein Glück bei Euch.

Ich suche eine zeitgemäße Alternative für:

<body onLoad="setNaviState()" background="images/icons/back.jpg"
style="background-repeat:repeat" bgproperties="fixed">

Mein Dreamwiever erzählt mir: Das Tag: "body" hat kein Attribut: "bgproperties" in den aktuellen Versionen.[HTML 4.0]

Ich bin blutiger Anfänger und falls diese Frage extrem naiv sein sollte, bitte ich schon mal im Vorfeld um Entschuldigung.

Wahrscheinlich werden weitere Infos benötigt. Ich reiche gerne alles nach sobald ich weiss, was notwendig ist.

Liebe Grüße und vielen Dank im Voraus

Antonia
 
Hallo Threadi,

erwähnte ich schon, dass ich ein html-Blondchen bin? Ich weiss zwar, was ein css- style ist und ich glaube auch zu wissen, wo ich ihn einfügen müßte aber den Style selbst zu schreiben übersteigt meine Fähigkeiten (Asche auf mein Haupt...).

Ich benötige eine genaue Anweisung.

Liebe Grüße

Antonia

Ich habe eine Alternative gefunden! Und es war so einfach, dass es direkt peinlich ist...

Vielen Dank für Eure Mühe

Antonia
 
Zuletzt bearbeitet von einem Moderator:
Ich suche eine zeitgemäße Alternative
Zeitgemäß ist es, mit HTML nur noch die logische Struktur festzulegen, d.h. Du gibst Deinem Inhalt mit HTML eine Bedeutung. Du zeichnest Textabsätze aus, Überschriften, Listen, Adressen, tabellarische Daten usw. Nichts, was Du mit HTML machst, solltest Du aufgrund des Aussehens im Browser machen, HTML ist nicht für die Darstellung im Browser zuständig.
HTML ist für die Semantik.

Strikt davon trennen solltest Du Layout und Design, das macht man mit CSS. Trennung von Inhalt und Layout nennt man das.

Grobe Fehler sind Layouten mit Tabellen oder Layouten mit <div>. Beides ist sinnfrei, mit HTML macht man kein Layout. Egal mit welchem Tag.

Informiere Dich darüber, ein paar Links hast Du ja auch schon bekommen. Wenn Du möchtest, dass wir Deinen Code untersuchen und Dir Tipps geben, kannst Du das gerne machen. Hier gibts viele Spezialisten, die Dir da sehr gut weiterelfen können und wollen.

Viel Erfolg,
-Efchen
 
Hallo Fories,

hm, bis ich den html und css Kinderschuhen entwachsen bin, steht mir anscheinend noch ein weiter Weg bevor.

Die Alternative für

<body onLoad="setNaviState()" background="images/icons/back.jpg"
style="background-repeat:repeat" bgproperties="fixed">

sieht folgendermaßen aus:

<body onLoad="setNaviState()" style="background-image:url(back.jpg)">

Ob das jetzt das Ei des Kolumbus ist kann ich nicht beurteilen aber Dreamveawer ist damit zufrieden und auch beim validieren gab es keine Fehlermeldung.

Hallo Elfchen,

beim lesen Deiner Zeilen wächst mein Verdacht, dass ich wohl noch einiges an der HP verändern muss.

Wenn sich jemand tatsächlich die Mühe machen würde, mal einen Blick auf meine HP zu werfen, wäre ich mehr als Dankbar. Nach dem momentanen Stand meines Wissens sind meine Grenzen erreicht.

Ich bin mir nicht sicher, ob es erlaubt ist, meinen Link in diesem Teil des Forums einzustellen. Falls ich eine grobe Regelwidrigkeit begehe, lieber Administrator, einfach löschen....

Sibirische Katze und Neva Masquarade der Cattery Edgewood Dirk

Liebe Grüße

Antonia
 
Ich bin mir nicht sicher, ob es erlaubt ist, meinen Link in diesem Teil des Forums einzustellen.

sollten wir jetzt telepathische fähigkeiten haben? ^^

Falls ich eine grobe Regelwidrigkeit begehe, lieber Administrator, einfach löschen....

kannste lange drauf warten, bis die das machen...

wenn ich mir deine seite spontan ansehe und validieren lasse, stell' ich folgendes sofort fest:

- spezialzeichen wie "&" werden nicht korrekt maskiert, das kann zu fehlern führen. ( --> &amp; muss das sein)
- <body onLoad="setNaviState()" style="background-image:url(back.jpg)">
ist ebenfalls unvorteilhaft - was is' denn nu, wenn der benutzer JS abgeschaltet hat?
- WYSIWYG-editoren - gleich welcher - produzieren unsauberen code. der eine mehr, der andere weniger. für größtmögliche kontrolle vor ungewollten einträgen, den code IMMER selber in einem editor wie z.b. notepad++ schreiben.
- strukturierung bei dir: horror, eingerückt ist auch nichts. das macht vielleicht bei visuellen editoren nichts, aber stell' dir mal vor, du musst was auf die schnelle abändern und hast eben mal keinen WYSIWYG zur hand
- ein oder zwei META-angabe sind sowas von falsch geworden

aber ich kann dich beruhigen, HTML und CSS richtig zu lernen ist ein aufwand von einem vierteljahr, wenn überhaupt.

Nils aka XraYSoLo
 
Das mit dem Link ist schon okay, das ist für solche Zwecke ja sogar erwünscht. Denn so kann man am besten helfen.

Ich liste einfach mal alles auf, was änderungswürdig ist. Bitte versteh das nicht als niederschmetternde Kritik. Es könnte mehr sein, als Du befürchtest, aber das sagt nichts über Dich und Deine bisherige Arbeit aus. ALso nicht persönlich nehmen :-)
Und wenn Dir das ein oder andere nichts sagt, einfach danach googlen, was Du nicht selber rausfindest, fragst Du nach. Ich klatsch Dir keine dicken Dinger hin, die ich Dir dann nicht auch erkläre. Nur Eigeninitiative sehe ich gerne.

1. Du brauchst einen Doctype, der alle Browser in den Standards Mode versetzt. Deiner tut das nicht. Der IE wird damit in den Quirks Mode versetzt, dann verwendet er ein falsches Box Model und dann gibt es Darstellungsunterschiede.
2. EIn Link zu nem Stylesheet (<link>) gehört in den <head>, nicht in den <body>
3. EIn Menü ähnelt am ehesten einer Liste, sollte daher als solche ausgezeichnet werden (<ul>).
4. Du solltest alles, was zum Layout und zur Darstellung gehört, in ein externes Stylesheet schreiben (Trennung von Inhalt und Layout). So Dinge wie "<p align=center>" sind eigentlich tabu.
5. <u>, <b> und <i> sind tabu, weil diese keine Semantik vermitteln.
6. <strong> dient dazu, einen Text als "besonders wichtig" zu kennzeichnen. Willst Du das bei Deiner Überschrift zusätzlich zur Tatsache, dass es eine Überschrift ist? Wenn der Text nur fett sein soll, dann mach das mit CSS: font-weight:bold.
7. EIne Adresse wird mit <address> ausgezeichnet.

Insgesamt eigentlich für ein "html-Blondchen" ein ganz gutes Ergebnis. Die Trennung von Inhalt und Layout muss man sich angewöhnen, das kommt mit der Zeit. Man muss drauf schauen, dass man keine veralteten HTML-Attribute einsetzt, die eigentlich für Layout/Design sind (wie "align").
Wichtig ist noch, dass Du den eigentlichen Sinn von HTML verstehst, was sich hinter "Semantik" versteckt, aber das sieht für den Anfang bei Dir schon ganz gut aus.
Toll ist, dass Du keine Tabellen zu Layoutzwecken missbrauchst, wie man das in den 1990er Jahren machen musste, weil es kein CSS gab und Du verwendest keine Frames (weil die nur Nachteile haben).

Deine Site tut sich noch ein wenig schwer, wenn man die Schrift vergrößert (nicht Zoom, nur Text!), weil sich das Menü dann in den Content schiebt. Aber das wird auch mit der Zeit.

Nee, ehrlich, ich habe schlimmeres erwartet, wenn alle Blondchen ihre erste Webseite so bauen, dann siehts schlimm aus mit dem typischen Bild von der dummen Blondine, dann ist das Image überholt! ;-)

In dem Sinne wünsche ich ein schönes Wochenende, wenn noch Fragen offen sind, trotzdem fragen! Ich werde schon antworten!

-Efchen

P.S.:
HTML und CSS richtig zu lernen ist ein aufwand von einem vierteljahr, wenn überhaupt.
Ich behaupte, ich könnte jemandem, der Interesse an der Materie hat und Spaß und lernbegierig ist, HTML an einem Nachmittag erklären. CSS kommt mit der Zeit, das meiste ist nur wie Vokabeln lernen, man muss wissen, welche Eigenschaften es gibt und was sie machen. Da stimme ich allerdings mit dem Vierteljahr überein :-)
 
Hallo Elfchen,

erst einmal vielen Dank für die Mühe, die Du Dir gemacht hast!

Bevor ich alles auf 60 Seiten falsch ändere, frage ich lieber nach...

1. Zum Doctype: Ist es so in der Kombination richtig?

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

2. Kann ich die Zeile:

<div class="navi"><!--#include virtual="navi.inc.htm" --></div>

einfach so in den <head> verschieben? Das ist vermutlich der <link>,
den Du meinst?
Ich habe den Großteil des <head>, das javascript und
die css styles von einer Bekannten bekommen, die alles wiederum auch
zur Verfügung gestellt bekam und ungefair genauso viel
(oder besser gesagt, genauso wenig) Ahnung hat,wie meine Wenigkeit.
Ich habe nach bestem Wissen und Gewissen darin herumgeschrieben
und meinen Bedürfnissen angepasst aber eine rechte Ahnung von dem,
was ich da tue, hatte ich nicht wirklich...


3. Welches Menü meinst Du?

4. Ich werde mit css noch reichlich Zeit verbringen müssen...

5. Was ist die richtige Alternative für <u>?

6. <strong> habe ich nachträglich eingefügt, damit google auf die
<h1> Überschriften zugreifen kann.

7. Werde ich umändern.

Ich warte gespannt auf Deine Antwort und werde mich dann
gleich an die Arbeit machen.

In den letzten Wochen habe ich eine gefühlte Ewigkeit damit
verbracht, nach Lösungen für meine Probleme im Internet zu suchen.
Das war viiiel Eigenintiative! Darum, liebes Elfchen hoffe ich,
Du nimmst mir den einfachen Weg nicht übel.

Liebe Grüße

Antonia
 
Hallo XraYSoLo,

ich war der Meinung, eine Überprüfung der HP gehört in einen anderen Teil des Forums und ich könnte eventuell Haue bekommen, wenn ich den Link hier einstelle. Scheint aber in Ordnung zu sein, ich habe noch keine blauen Flecken.

Lass mir für den Anfang meinen Dreamviewer. Wenn ich etwas fortgeschrittener bin, wird mein Ergeiz, alles 100%tig ordentlich haben zu wollen, dafür sorgen mit einem Editor zu arbeiten
icon7.gif


<body onLoad="setNaviState()" style="background-image:url(back.jpg)">

hast Du einen besseren Vorschlag? Ich bin für alles offen.

"- ein oder zwei META-angabe sind sowas von falsch geworden" - könntest
Du mir genauer sagen welche METAs Du meinst und was daran falsch ist?

mit der Strukturierung kann ich fürs Erste leben, da ich im Laufe der letzten Wochen den Inhalt beinahe auswendig gelernt habe...

Liebe Grüße

Antonia
 
- <link rev="made" href="mailto:[email protected]"> hab' ich in der form noch wie was von gelesen
- <link rel='stylesheet' href='styles/tree.css'> hast du oben schonmal, außerdem mögen METAs keine invertierten kommata, wird ausschließlich in anführungszeichen geschrieben

HTML:
body { background-image:url(back.jpg);  }

reicht in der form vollkommen, weil es aus ohne dieses "setNaviState()" (wozu ist das eigentlich?) tut. bei definitionen gilt immer: je weniger desto besser, sonst überlädst du das alles nur unnötig.

ich verwend' dreamweaver auch für größere sachen, daran solls nicht liegen, ALLERDINGS hab' ich auch mit reinen editoren angefangen, is' einfach für die eingewöhnung besser.

ABER: ich lieb' katzen über alles, demnach sehe ich die ganzen fehler doch nicht so hart ;-).

Nils aka XraYSoLo
 
Lass mir für den Anfang meinen Dreamviewer. Wenn ich etwas fortgeschrittener bin, wird mein Ergeiz, alles 100%tig ordentlich haben zu wollen, dafür sorgen mit einem Editor zu arbeiten
icon7.gif


Liebe Grüße

Antonia

Hallo Antonia,

m.E. spricht nichts gegen Dreamweaver, schließlich hat der ja auch eine Code-Ansicht.
Die WYSIWYG-Ansicht kannst Du verwenden, wenn Du Text schreibst, da er dann
Umlaute und Sonderzeichen gleich richtig codiert...

Grüße
Bernhard
 
Hallo Nils,

ich habe auch erst gedacht, ich kann das "setNaviState()" weglassen. Aber dann funktioniert die Farbveränderung in der Navigation nicht mehr. Da ich dieses Skript übernommen habe, kann ich nichts über den Aufbau und die Zusammenhänge sagen (Buch mit sieben Siegeln...). Learning by doing und looking was dabei so passiert ist auf Dauer ziemlich frustrierend und die Möglichkeiten eher eingeschränkt
icon9.gif
. Aber ich arbeite daran und gelobe Besserung.

Für: <link rev="made" href="mailto:[email protected]">

habe ich nun: <meta http-equiv="reply-to" content="[email protected]"> eingefügt

hab ich mir von der Seite eines Freundes rauskopiert. Ist das besser?


Da ich nicht wirklich weiss, was diese Änderungen bewirken, muss ich die Konsequenzen einfach abwarten und immer mal wieder doof fragen.

Ob ich: <link rel='stylesheet' href='styles/tree.css'> ändern kann, muss ich ausprobieren. Die Zusammenhänge kann ich nicht durchschauen.

Aber wir (meine Miezen und ich) wären Dir sehr verpflichtet, wenn Du eine bessere Idee hast. So sehen die ersten Zeilen der navi.inc aus:

<link rel='stylesheet' href='styles/tree.css'>
<script type="text/javascript" src="jscript/tree.js"></script>
<p align="center"><a target="_blank" href="http://www.zooplus.de"><img src="images/icons/zooplus.gif" alt="" width="150" height="75"></a></p>

<p> <img src="images/icons/foot.gif" alt="Sibirische Katzen der Cattery Edgewood Dirk, Home" width="23" border="0">&nbsp;<a href="index.shtml">Home</a><br>

kann ich das einfach ändern ohne dass mir alles auseinanderfällt? Nun ja, ich könnte es mal ausprobieren und schauen,was passiert. Fischen im trüben nennt man das wohl.

Erst mal vielen Dank für die Tipps

Antonia

Inzwischen habe ich einiges bei Stephan Münz nachgelesen und langsam gehen bei mir die Lichtlein:idea: an. Die Fehler werden nach und nach ausgemerzt.

Ich werde allerdings vorsichtig sein. Trotz der Fehler scheint Google ganz zufrieden zu sein. Die HP hat einen fulminanten Start auf Platz fünfzehn bei den mir wichtigen keywords hingelegt und damit bin ich schon sehr glücklich!

Nochmals vielen Dank für die Anregungen und Tipps, hier ist es wirklich nett:grin:

Liebe Grüße

Antonia
 
Zuletzt bearbeitet von einem Moderator:
1. Zum Doctype: Ist es so in der Kombination richtig?
Sieht gut aus. Mehr dazu findest Du hier: LANtastic’s Artikel DTD - Document Type Declaration - Das richtige Doctype

2. Kann ich die Zeile:
<div class="navi"><!--#include virtual="navi.inc.htm" --></div>
einfach so in den <head> verschieben?
Nein, Inhalt muss innerhalb des Bodys stehen.

Das ist vermutlich der <link>, den Du meinst?
Nein, ich meinte schon <link> und nicht <div> :-)
Das ist er: <link rel='stylesheet' href='styles/tree.css'>

3. Welches Menü meinst Du?
Na, Dein Menü: Home, News, Über uns, Unsere Katzen, ...

5. Was ist die richtige Alternative für <u>?
Wenn Du etwas nur unterstreichen willst, ohne damit eine besondere Aussage zu treffen, geht das in CSS mit: text-decoration:underline.
Aber: Wenn Du das tust, weil Du dem Inhalt damit eine Bedeutung geben willst, dann musst Du zunächst nach dem richtigen HTML-Tag suchen. Soll es wichtig sein? Dazu gibt es <em>. Soll es besonders wichtig sein? Dazu gibt es <strong>. Oder ist es eine Überschrift? ...
Und: Man sollte auf Webseiten eigentlich nichts unterstreichen, was kein Link ist, weil die Nutzer das gewohnt sind, dass alles unterstrichene ein Link ist und sie dann darauf klicken wollen.

6. <strong> habe ich nachträglich eingefügt, damit google auf die
<h1> Überschriften zugreifen kann.
Verstehe ich nicht. Was meinst Du mit "zugreifen"? Google sieht da, dass es sich bei dem Text um eine besonders wichtige Überschrift handelt.

Grüße,
-Efchen
 
Zurück
Oben