Online-CSS-Anfängerkurs für Dummies!?

Computer: Software & Programmierung HTML & CSS
#1

Huhu ihr lieben Homepage-Experten und -innen :smile:

ich mal wieder :smile:. Eine ganze Reihe Probs konnte ich mit eurer Hilfe schon lösen, aber ein Ende ist noch nicht in Sicht ;-/. Ich möchte erst endgültig anfangen, meine Seiten zu schreiben, wenn ich alles beeinander habe, was in so ziemlich jedes Dokument rein soll, damit ich nicht jede Arbeit 20fach machen muss, sondern mir eine Muster-Datei mit allen Einstellungen, Meta-Tags, etc. erstelle, in der ich dann immer nur den jeweiligen Text ändere, der grundsätzliche Aufbau aber steht…

Jetzt bin ich beim Thema CSS angelangt und ich brauche wieder Hiiiilfe, ich werde sonst waaaaaahnsinnig :wink: Kann mir bitte bitte jemand einen Link zu einer einfachen Anleitung für CSS geben? Also so eine Art Online-Ausgabe von „CSS für Dummies“? Ich brauche kein vollständiges Kompendium, das auch noch den hinterletzten Fall abdeckt, sondern etwas, was auch ein Anfänger verstehen und umsetzen kann. Ich muss nicht mithilfe von Stylesheets jedes einzelne Pixel von Hunderten von verschiedenen Objekten, Klassen und Schieß-mich-tot punktgenau steuern können, ich bin zufrieden, wenn ich meine Grafiken mit Hilfe von Tabellen so einigermaßen hinwursteln kann. Ich möchte lediglich meine Textformatierungen an zentraler Stelle machen, damit ich dies nicht in für jeden einzelnen Satz in jedem einzelnen Dokument wieder und wieder machen muss. Also die die Entsprechungen der Syntax für die Textformatierungen, die sonst im body- und font-tag vorgenommen werden, für H1-H6, p, normalen Text (text="#000066"), Einbinden einer Hintergrundgrafik, die auf allen Dokumenten gleich sein soll.

Bittebittebitte verschont mich mit Hinweisen auf das ach so hochgelobte Selfhtml!! Ich kann und will es nicht mehr sehen!! Wenn ich noch einmal aufgefordert werde, selfhtml aufzurufen, kriege ich einen hysterischen Schreikrampf :smile:))). Wenn mir diese Homepage nicht sooo wichtig wäre, hätte ich längst völlig entnervt aufgegeben :frowning:(((. Stefan Münz ist sicher ein Gott in seiner Welt und meinetwegen kann er auch alle Seligsprechungen dieser und jener Welt erhalten, aber für Anfänger ist er völlig ungeeignet. Ich quäle mich wegen der verschiedensten Probleme seit Stunden, Tagen und Wochen mit Selfhtml herum und schlage mir halbe bis dreiviertel Nächte um die OHren und verstehe doch fast nur Bahnhof. Da fliegen mir pausenlos Begriffe um die Ohren, die ich nicht verstehe. Versuche ich eine Erklärung zu finden, verstehe ich die Erklärung der Erklärung der Erklärung auch wieder nicht, weil mir wieder Begriffe um die Ohren fliegen, die ich nicht verstehe…

Ich bin und werde kein Webdesign-Profi, ich möchte lediglich ein Thema, das sehr am Herzen liegt, irgendwie auch anderen zugänglich machen. Und natürlich wünsche ich mir, dass es noch so einigermaßen gut aussieht. Aber mit Mitteln, die ein Anfänger noch irgendwie hinkriegt. Von Selfhtml bin ich einfach nur erschlagen und ich gebe auf, da rein zu sehen ;-/. Es ist, als hätte mir jemand in kyrillischen Schriftzeichen ein 5-Sterne-Kochbuch in die Hand gedrückt, obwohl doch nur ein paar Eier in die Pfanne klopfen will ;-(((

Also wisst ihr einen Anfänger -Kurs in CSS-Programmierung, die sich auf die wichtigsten Befehle beschränkt und einen nicht totknallt mit allen nur erdenklichen Möglichkeiten?

Danke für jeden Tipp :wink: Und liebe Grüße
Nena

#2

Huhu ihr lieben Homepage-Experten und -innen :smile:

… schon da :smile:

[…]
jedes Dokument rein soll, damit ich nicht jede Arbeit 20fach
machen muss, sondern mir eine Muster-Datei mit allen
Einstellungen, Meta-Tags, etc. erstelle, in der ich dann immer
nur den jeweiligen Text ändere, der grundsätzliche Aufbau aber
steht…

gutes Vorhaben!

Jetzt bin ich beim Thema CSS angelangt und ich brauche wieder
Hiiiilfe, ich werde sonst waaaaaahnsinnig :wink: Kann mir bitte
[…]

… schau doch mal bei Mün… war Spass. Bitte nicht schreien…!

CSS ist gar nicht schwer, wnen man mal die Sachen, die Du brauchst rauszieht ist das nicht mal viel.
Ich nehme an, Du hast mitgekriegt, das Du die Formatierungen aus dem html koplett rauslaesst und dafuer eine CSS-Datei anlegst, in der alles drinsteht.
Die bindest Du mit

in den Head jeder Datei ein.

Elemente werden in der Form

element { definition:wert; definition2:wert2; }

geschrieben.
Huebsch uebersichtlich wird es, wenn Du pro zeile nur eine Definition schreibst:

element {
 definition: wert;
 definition2: wert2;
}
element2
...

Cascading heisst, dass alle Elemente hierachisch angeordnet sind und man am bestn oben in der Hierachie anfaengt, zu definieren, denn jedes Elemant bekommt eh die Formatierungen der Elemente darueber mit.
Zu theoretisch? Ok., Beispiel:

Du schreibst

body {
 font-family: verdana, arial, helvetica;
 }

Dann musst Du fuer alle anderen Elemente nicht mehr die Schriftfamilie angeben, weil die fuer den Body ja geregelt ist - eine Ausnahme macht da nur td, weiss der Henker warum.

Ich mach mal ein sinnvolles Beispiel StyleSheet, dann sehen wir vieles klarer:
( /* … */ bedeutet einen Kommentar - wenn Du meinen Text in zB PhaseV reinkopierst, wirst Du es sehen)

body {
 background-image:url(grafik/back.gif); /\*Hintergrundbild\*/
 color: #000000; /\*Schriftfarbe\*/
 font-family: arial, helvetica, swiss, sans-serif; /\*Schriftart, siehe Anmerkung\*/
 font-size: 11px; /\*Schriftgroesse\*/
 }

/\*das gleiche (ohne Hintergrundbild) auch fuer td\*/

td {
 color: #000000;
 font-family: arial, helvetica, swiss, sans-serif;
 font-size: 11px;
 }

Mit diesen wenigen Zeilen hast Du schon fuer alle Seiten Schrift, Schriftgroesse und -art einheitlich festgelegt.

*) Anmerkung zur Schrift:
Du kannst mehrere Schriften zur Auswahl angeben - das ist sicherer weil ja nicht jeder Browser jede Schrift auf seinem System vorfinden wird.
Arial heisst bei Mac Helvetica (eigentlich: „Helvetica heisst bei Windoof Arial“, aber lassen wir das), Swiss ist auch gebraeuchlich fuer diese Schriften und -
wichtig: ganz hinten hab ich noch geschrieben „sans-serif“ - das sagt dem Browser „Wenn Du schon keine der Schriften findest, dann nimm wenigstenes eine ohne Serifen (also ohne Füsschen), damit es nicht ganz bloed aussieht“.

Was jetzt fehlt sind die LInks, die sind naemlich immer noch so, wie der Browser sie anzeigen wuerde - blau/lila und unterstrichen.
Da ein Link drei bzw sogar vier Zustände (normal, aktiv, besucht, Mausdrüber) haben kann braucht die Formatierung der Links auch noch mal Platz:

a:link {
 color: #FF0000;
 text-decoration: none;
 }
a:visited {
 color: #00FF00;
 text-decoration: none;
 }
a:active {
 color: #0000FF;
 text-decoration: none;
 }
a:hover {
 text-decoration: underline;
 }

Das sind die schicken Links ohne Unterstrich, die bei Mausberuehrung eine Unterstreichung bekommen.
Wie Du siehst, ist die Schriftfamile nicht definiert, das hatten wir ja schon im Body.

Wenn Du diese beiden Teile nutzt und anpasst, hast Du schon viel stehen.
Wahrscheinlich wirst Du dann noch feststellen, dass die Überschriften ganz anders aussehen, dann legst Du halt fuer die gewollte Ueberschrift eine neue Definition an und baust sie dir so wie du willst.
Gute Kandidaten sind da:

font-weight: normal; /\*nicht fett\*/
margin-top: 5px; /\*Anstand nach oben in Pixeln\*/
margin-bottom: 5px; /\*Anstand nach unten in Pixeln\*/

… und Klassen bekommen wir später, wenn wir sie brauchen :smile: - das reicht fuer heute.

Und wenn Du noch Fragen hast hast Du ja ein gutes Forum :smile:

Viel Glueck
Christian

#3

ich mal wieder :smile:. Eine ganze Reihe Probs konnte ich mit
eurer Hilfe schon lösen,

Ja, bist auch schon reichlich schnell erwachsen geworden. *g* (von wegen 15jähriges Mädel…)

aber ein Ende ist noch nicht in Sicht ;-/.
Ich möchte erst endgültig anfangen, meine Seiten zu
schreiben, wenn ich alles beeinander habe, was in so ziemlich
jedes Dokument rein soll, damit ich nicht jede Arbeit 20fach
machen muss, sondern mir eine Muster-Datei mit allen
Einstellungen, Meta-Tags, etc. erstelle, in der ich dann immer
nur den jeweiligen Text ändere, der grundsätzliche Aufbau aber
steht…

Ja, so mach(t)e ich das auch. Und bin schon länger als ein halbes Jahr am Info-Sammeln… :frowning:
Na, ja, dafür gibt’s dann *hier* Support ohne Ende: *g*

Jetzt bin ich beim Thema CSS angelangt und ich brauche wieder
Hiiiilfe, ich werde sonst waaaaaahnsinnig :wink: Kann mir bitte
bitte jemand einen Link zu einer einfachen
Anleitung für CSS geben? Also so eine Art Online-Ausgabe von
„CSS für Dummies“? Ich brauche kein vollständiges Kompendium,

Dave Ragget (Entwickler beim W3C), Deutsche Übersetzung unter, erkärt das sehr, sehr einfach und gut: http://www.siteform.de/tutorials/Style.html.
Dort kannst Du Dir die Sachen „rausziehen“, die Du wirklich benötigst. - So auf 2-, 3mal Lesen (Abschnitt für Abschnitt), bekommst Du’s auch nach und nach umgesetzt.

das auch noch den hinterletzten Fall abdeckt, sondern etwas,
was auch ein Anfänger verstehen und umsetzen kann. Ich muss
nicht mithilfe von Stylesheets jedes einzelne Pixel von
Hunderten von verschiedenen Objekten, Klassen und
Schieß-mich-tot punktgenau steuern können, ich bin zufrieden,
wenn ich meine Grafiken mit Hilfe von Tabellen so einigermaßen
hinwursteln kann.

Ich bin ja mal nicht so und lasse Dich auf eines meiner „noch unfertigen“ Projekte schauen: http://de.geocities.com/nsuro80web/index_cont.html

Schau Dir dort den Quelltext an… eine bessere Lösung für die Grafiken (statt in Tabellen) ist vielleicht, die x links oder x rechts im Fliesstext stehen zu haben; das macht vieles einfacher. Dazu habe ich zwei Sub-Styles verfügt:

.objl { float:left; margin-right:10px; }
.objr { float:right; margin-left:10px; }



Und der Text
geht ganz normal rechts dran vorbei,
usw., mit 10 Pixel Abstand zum Bild...

Im -Bereich beginnen diese mit einem Punkt (".objl").
Im Quelltext wird’s mit dem Attribut »class=„objl“« - ohne Punkt - zugewiesen.

In Sachen Grafiken (Hintergrundbild) einbinden u.ä. noch ein Tipp: Im CSS nimmt man IMMER NUR ‚einfache Anfuehrungszeichen‘ - keine „doppelten“! - Beispiel bei Pfadangaben ggf. wichtig:

&lt:stuck_out_tongue_winking_eye:RE>body { background-image:url(’\bilder\blauer_hintergrund.jpg’); } </PRE> Und jedes Attribut mit einem „;“ Semikolon abschliessen.

(…SelfHTML…) Da fliegen mir
pausenlos Begriffe um die Ohren, die ich nicht verstehe.
Versuche ich eine Erklärung zu finden, verstehe ich die
Erklärung der Erklärung der Erklärung auch wieder nicht, weil
mir wieder Begriffe um die Ohren fliegen, die ich nicht
verstehe…

Kann ich aber nun verstehen: zeitweise hatte ich schon 8 oder 10 Browser-Fenster auf… und die Verweise der Verweise der Verweise… verlieren sich in der Tiefe der… ja-was-weiss-ich.

Es ist, als hätte mir jemand in kyrillischen Schriftzeichen
ein 5-Sterne-Kochbuch in die Hand gedrückt, obwohl doch nur
ein paar Eier in die Pfanne klopfen will ;-(((

Mahlzeit! :smiley:)

Danke für jeden Tipp :wink: Und liebe Grüße
Nena

Also, siehe oben.

CU DannyFox64

#4

Tausend Dank - und neue Fragen *ggg*
Huhu Christian, huhu DannyFox,

lieben Dank für eure Tipps!! Vor allem dir Christian, für deine Mühe, gleich ein Anfänger-Tut zu schreiben !! Vielleicht kannst du es ja auch noch für deine HP verwenden, dann lohnte sich wenigstens die Arbeit für dich auch :wink: Und der Link von DannyFox ist auch super!!! Habe euch beide gut besternt *ggg*

Mir hats irre weiter geholfen, endlich mal einen Plan über den grundsätzlichen Aufbau zu kriegen. Weil wie will jemand Skilaufen lernen, der noch nicht mal die ersten Schritte auf seinen wackligen Beinchen voreinander bekommen hat, ohne auf die Schnauze zu fallen *ggg*.

Mit dem Grundwissen aus Christians Anfänger-Tut und dem Link von DannyFox bin ich jetzt doch schon ein ganzes Stück vorwärts gekommen und konnte mir viel selbst erarbeiten durch try-and-error. Und dadurch dass ich nicht mehr NUR Bahnhof verstand, und außerdem auch nicht mehr alles verstehen musste, um überhaupt die ersten Schritte machen zu können, konnte ich mir sogar aus meinem verhassten selfhtml noch ein paar Tipps rausziehen. :wink:). Jetzt kann ich sogar weitgehend auf Tabellen verzichten, ich habs raus bekommen, wie das mit dem Fließtext um die Grafiken geht *jubel*

Wenn ihr Lust habt, könnt ihr es euch das vorläufige Ergebnis unter http://www.regenbogenreich/muster.html angucken :smile:. Das css heisst „formate.css“ und ist gleich in der ersten Ebene mit untergebracht. Was sagt ihr dazu? Für einen Anfänger schon mal nicht übel :smile:) *euchundmirselberaufdieSchulterklopf".

So, nun denn zu meinen Fragen :smile:)). Glaubt ja nicht, dass ihr mich schon los seid *rotfl*

  1. Fallen euch noch wichtige Deffinitionen auf, die ich vergessen habe und die unbedingt benannt werden sollten?

  2. Wen ich ein css für die Formatierungs-Deffinitionen verwende, sind ja - was durchaus beabsichtigt war, aber u.U. dennoch Probleme aufwerfen kann, so ziemlich alle Formatierungssachen aus dem eigentlichen html-Dokument raus geworfen und in die Extra-Datei rein. Das heißt, ein User mit einem Browser der kein css verwerten kann, hat ein Problem :smile:. Ein eklig weißer Hintergrund mit langweiliger Schwarzer Schrift, keine Randabstände usw. Ist das heutzutage überhaupt noch ein Problem, das Herr oder Frau Webmaster berücksichtigen sollte oder darf ich getrost davon ausgehen, dass meine css von 99 % aller Besucher angezeigt bzw. ausgewertet werden kann?
    Dave schreibt hierzu so ziemlich am Ende der Seite, die DannyFox mir gegeben hat, dass man das Aussehen der Seite auch mit html beeinflussen könne. Aber heißt doch, dass dann für die Werte, die auf die genannte Weise im Dokument neu bestimmt werden, die Festlegungen im css ungültig werden, oder? Det macht doch keinen Sinn!? Oder habe ich einen Knick im Hirn?

  3. Wie ihr seht, habe ich auf meiner muster.html am oberen rechten Rand eine Grafik. Die soll auch genauso auf jeder meiner Seiten (mit Ausnahme der Startseite, die eine größere Ausgabe der Grafik enthält, und die Frameset-Seite die gar kein Logo bekommt) wiedergegeben werden. Gleichzeitig wäre es wunderschön, wenn ich es irgendwie steuern könnte, dass die Überschrift (also das was anstelle des Platzhalters „Thema des Dokuments“ halt jeweils oben drüber steht) auf gleicher Linie mit dem unteren Rand der Grafik stehen soll, und zwar ganz unabhängig von der Schriftgröße, die der einzelne User in seinem Browser eingestellt hat. Ich möchte die Schriftgrößen ehrlich gesagt nicht fest vorgeben, um User mit sehr guten bzw. sehr schlechten Augen nicht mit einer zu großen bzw. zu kleinen Schriftvorgabe nerven und von meiner Seite verscheuchen will. Gebe ich aber die Schriftgrößen nur relativ zur voreingestellten Angabe ein… und die margin-top-Angabe wiederum in Abhängigkeit von der jeweiligen Schriftgröße heißt das, je kleiner die Schrift, desto kleiner werden somit die Abstände vor der Überschrift - obwohl sie wegen der kleiner werdenden Schrift eigentlich größer werden müssten, damit die Überschrift auf einer Linie mit dem gif bleibt. Lässt sich das irgendwie lösen?

  4. DannyFox favorisiert für die Link-Formatierung keine Unterstreichung zu machen, bzw. erst wenn man mit der Maus drüber fährt. Aber ist es nicht so, dass dann ein Link - vor allem für Netz-Newbies - nur sehr schwer als Link zu erkennen ist? Wie gefällt euch meine Lösung?

  5. In einigen Anfänger-Anleitungen für Webseitengestaltung habe ich gelesen, dass man trotzdem eine Hintergrundfarbe definieren soll, wenn man ein background-image verwendet, weil es für das Auge angenehmer sei, wenn bei modem-usern die Grafik erst ein paar Sekunden später kommt. Ich habe versucht, eine hellblaue Hintergrundfarbe ins css einzubauen und danach die Hintergrundgrafik, mit dem Erfolg, dass ich vor einem weißen Hintergrund (IE 5.5 auf W2K) saß ;-(. Muss man sich bei css für eins von beiden entscheiden und kann nicht beide nacheinander verwenden?

Liebe Grüsslis
Nena

#5

Hallo Nena *wink*

kannst du es ja auch noch für deine HP verwenden, dann lohnte

hab ich beim Schreiben auch ueberlegt…

[…]
unter http://www.regenbogenreich.de/muster.html angucken :smile:. Das
css heisst „formate.css“ und ist gleich in der ersten Ebene
mit untergebracht. Was sagt ihr dazu? Für einen Anfänger schon
mal nicht übel :smile:) *euchundmirselberaufdieSchulterklopf".

*mitklopf*

  1. Fallen euch noch wichtige Deffinitionen auf, die ich
    vergessen habe und die unbedingt benannt werden sollten?

nein, mir nicht.
Und wenn Du noch was anderes brauchst, wird es dir ja auffallen und du fuegst es halt noch ein.

Und eine Klasse hast Du ja auch schon eingebaut.
Kurz zur Ergaenzung:
Du kannst auch eine allgemeine Klasse definieren, die Du dann nach Wunsch jedem Element zuordnen kannst.

Also wenn Du zB kleiner Schrift irgendwo haben moechtest, dann musst Du nicht

p.klein {
font-size: 80%;
}
td.klein {
font-size: 80%;
}

usw fuer jedes Element angeben, sondern es reicht, wenn Du einmal

.klein {
font-size: 80%;
}

schreibst.
Ab dann kannst Du jedem Element in der Seite einfach mit class=„klein“ die kleinere Schriftgroesse zuordnen, egal ob p, div, span, oder auch a.
Sehr nuetzlich.

  1. Wen ich ein css für die Formatierungs-Deffinitionen
    verwende, sind ja - was durchaus beabsichtigt war, aber u.U.
    dennoch Probleme aufwerfen kann, so ziemlich alle
    Formatierungssachen aus dem eigentlichen html-Dokument raus
    geworfen und in die Extra-Datei rein. Das heißt, ein User mit
    einem Browser der kein css verwerten kann, hat ein Problem :smile:.
    […]
    die Werte, die auf die genannte Weise im Dokument neu bestimmt
    werden, die Festlegungen im css ungültig werden, oder? Det
    macht doch keinen Sinn!? Oder habe ich einen Knick im Hirn?

…nop, imo nach nicht.
CSS hat gebau diesen Sinn, html wieder zu html und nicht mehr zu einer Formatierungskruecke zu machen - denn am Anfang wollte mit html niemand formatieren.
Und das was Du jetzt geschrieben hast ist wunderbar sauberes html *lob*.
Und ich glaube, dass die Zahl der nicht CSS-Browser unter 1% liegen duerfte - und die, die kein CSS koennen, die wissen das auch - weil sie gerade mit ihrem Palm oder in ihrem Audi A8 surfen :smile:

  1. Wie ihr seht, habe ich auf meiner muster.html am oberen

…dafuer bin ich im Mom schon zu muede - ich kuemmer mich spaeter, ok?

  1. DannyFox favorisiert für die Link-Formatierung keine
    Unterstreichung zu machen, bzw. erst wenn man mit der Maus
    drüber fährt. Aber ist es nicht so, dass dann ein Link - vor
    allem für Netz-Newbies - nur sehr schwer als Link zu erkennen
    ist? Wie gefällt euch meine Lösung?

Gutes Argument fuer den Unterstrich. - Und sonst ist das Geschmackssaeche - ich entscheide das nach Zielgruppe.
Wenn es stylish sein soll ohne Unterstrich, bei Kunden mit vielen Endkunden aber lieber mit.
Ach ja, ich mag die Loesung.

  1. In einigen Anfänger-Anleitungen für Webseitengestaltung
    habe ich gelesen, dass man trotzdem eine Hintergrundfarbe
    definieren soll, wenn man ein background-image verwendet, weil
    es für das Auge angenehmer sei, wenn bei modem-usern die
    Grafik erst ein paar Sekunden später kommt. Ich habe versucht,
    eine hellblaue Hintergrundfarbe ins css einzubauen und danach
    die Hintergrundgrafik, mit dem Erfolg, dass ich vor einem
    weißen Hintergrund (IE 5.5 auf W2K) saß ;-(. Muss man sich bei
    css für eins von beiden entscheiden und kann nicht beide
    nacheinander verwenden?

Ich habs sicherheitshalber gerade bei genau der gleichen Konstallation und mit Mozilla ausprobiert und es geht.
body {
background-color: #145236;
background-image:url(grafik/_back.gif);
}
Das funktioniert. (Gut, die Farbe ist gewoehnungsbeduerftig :smile:

Viele Gruesse
Christian

#6

Huhu Christian :smile:)) *zurückwink*

mit untergebracht. Was sagt ihr dazu? Für einen Anfänger schon
mal nicht übel :smile:) *euchundmirselberaufdieSchulterklopf".

*mitklopf*

*froi* :smile:))

Und ich glaube, dass die Zahl der nicht CSS-Browser unter 1%
liegen duerfte - und die, die kein CSS koennen, die wissen das
auch - weil sie gerade mit ihrem Palm oder in ihrem Audi A8
surfen :smile:

hihi, oki :smile:) DAMIT kann ich leben *grins*

  1. Wie ihr seht, habe ich auf meiner muster.html am oberen

…dafuer bin ich im Mom schon zu muede - ich kuemmer mich
spaeter, ok?

*Jubelhüpfspringjodeljabbajabbaduuuuuu* :smile:)))). Brauchst du nicht mehr, ich glaube ich habs selber gelöst :smile:)))). Mit den guten alten Tabellen :smile:)))) Hat mich den ganzen Abend try-and-error gekostet, aber jetzt gehts :smile:)))))
Siehe dort: http://www.regenbogenreich.de/muster.html

Gutes Argument fuer den Unterstrich. - Und sonst ist das
Geschmackssaeche - ich entscheide das nach Zielgruppe.
Wenn es stylish sein soll ohne Unterstrich, bei Kunden mit
vielen Endkunden aber lieber mit.
Ach ja, ich mag die Loesung.

Zielgruppe sind Menschen, die um ein Haustier trauern. Also quer durchs Gemüsebeet - und sicherlich auch Leute, die nicht wirkliche Internetprofis sind…

Grafik erst ein paar Sekunden später kommt. Ich habe versucht,
eine hellblaue Hintergrundfarbe ins css einzubauen und danach
die Hintergrundgrafik, mit dem Erfolg, dass ich vor einem
weißen Hintergrund (IE 5.5 auf W2K) saß ;-(. Muss man sich bei
css für eins von beiden entscheiden und kann nicht beide
nacheinander verwenden?

Ich habs sicherheitshalber gerade bei genau der gleichen
Konstallation und mit Mozilla ausprobiert und es geht.
body {
background-color: #145236;
background-image:url(grafik/_back.gif);

Sööööltsam, jetzt gehts bei mir auch!? Ich hatte doch zig mal geschaut, ob ich vielleicht einen Tippfehler hatte und sah keinen? Naja, wie auch immer, jetzt funzts auch bei mir :smile:

Das funktioniert. (Gut, die Farbe ist gewoehnungsbeduerftig

Stimmt, aber ich habe dann doch lieber meine Farben genommen *ggg* :smile:))

Öööööhm… eine Frage auch noch zu deiner Meinung bzgl. der Bildausrichtung und den einfachen bzw. doppelten Anführungszeichen bei DannyFox. Was hältst du davon?

Ich glaube, dann bin ich durch das Thema css so einigermaßen durch. Vielleicht gäbs noch tags, die ganz supertolle Wirkung hätten, aber ich möchte mich auch nicht ein halbes Jahr mit allen möglichen Varianten beschäftigen, bevor die Seite on gehen kann. Bin und werde ja kein Profi-Webdesigner *ggg* Und es kommen noch ein paar Probs :wink:. Aber nicht mehr heute :smile:))

Liebe Grüsslis
Nena

#7

Huhu DannyFox :smile:))

ich mal wieder :smile:. Eine ganze Reihe Probs konnte ich mit
eurer Hilfe schon lösen,

Ja, bist auch schon reichlich schnell erwachsen geworden. *g*
(von wegen 15jähriges Mädel…)

Häh? Den versteh ich nicht :smile:)

Ja, so mach(t)e ich das auch. Und bin schon länger als ein
halbes Jahr am Info-Sammeln… :frowning:
Na, ja, dafür gibt’s dann *hier* Support ohne Ende: *g*

Neeee, also ein halbes Jahr möchte ich nicht für brauchen, bis meine HP steht :smile:)). Allerdings hört vermutlich die Bastelei an einer HP nie auf *ggg*

Dave Ragget (Entwickler beim W3C), Deutsche Übersetzung
unter, erkärt das sehr, sehr einfach und gut:
http://www.siteform.de/tutorials/Style.html.

War ein superklasse Tipp, danke :smile:)

Schau Dir dort den Quelltext an… eine bessere Lösung für die
Grafiken (statt in Tabellen) ist vielleicht, die x links oder
x rechts im Fliesstext stehen zu haben; das macht vieles
einfacher. Dazu habe ich zwei Sub-Styles verfügt:

.objl { float:left; margin-right:10px; }
.objr { float:right; margin-left:10px; }

Und der Text
geht ganz normal rechts dran vorbei,
usw., mit 10 Pixel Abstand zum Bild…

Im
-Bereich beginnen diese mit einem Punkt
(".objl").
Im Quelltext wird’s mit dem Attribut »class=„objl“« - ohne
Punkt - zugewiesen.

Also seltsam, ich habs probiert, bei mir klatscht auch das eigentlich Bild, das rechts sein sollte, an den linken Rand. Außer dass ich der Unterklasse einen anderen Namen gegeben habe, habe ich es aber nicht anders gemacht!?

<B>im css:</B>
&lt:stuck_out_tongue_winking_eye:RE>
.bildre {
float:left;
margin-left:10px;
}
</PRE>
<B>im html-dokument:</B>
&lt:stuck_out_tongue_winking_eye:RE><img src=„bilder/ccc36.gif“ width=„122“ height=„120“ border=„0“ class=„bildre“>
</PRE>
Spinn ich jetzt? Bei dir gehts, bei mir nicht? Warum dat denn? Siehst du vielleicht einen Tippfehler, den ich nicht sehe? Mit meinen Deffinitionen für den img-tag gehts, dann muss ich halt in Kauf nehmen, dass bei linken Bildern auch ein linker Rand und bei rechten Bildern auch ein rechter Rand mit dazu kommt. Dafür brauche ich aber auch nicht bei jeder Grafik an die Klassendeffinition zu denken :smile: Oder gibts u.U. bei anderen Browsern Probleme so?

In Sachen Grafiken (Hintergrundbild) einbinden u.ä. noch ein
Tipp: Im CSS nimmt man IMMER NUR ‚einfache Anfuehrungszeichen‘

  • keine „doppelten“! - Beispiel bei Pfadangaben ggf. wichtig:

auch komisch. Weder bei Christian, noch bei Dave noch in selfhtml habe ich das gelesen. Funzt doch auch so!? Vielleicht nicht bei jedem Browser? Aber warum liest man/frau das sonst nirgends?

Danke + liebe Grüsslis
Nena

#8

Huhu DannyFox :smile:))

Winke-Winke zurück… :smile:)

.objl { float:left; margin-right:10px; }
.objr { float:right; margin-left:10px; }

Also seltsam, ich habs probiert, bei mir klatscht auch das
eigentlich Bild, das rechts sein sollte, an den linken Rand.
Außer dass ich der Unterklasse einen anderen Namen gegeben
habe, habe ich es aber nicht anders gemacht!?

im css:

.bildre {
float:left;
margin-left:10px;
}

Spinn ich jetzt? Bei dir gehts, bei mir nicht? Warum dat denn?
Siehst du vielleicht einen Tippfehler, den ich nicht sehe? Mit

Nö, war wohl 'n copy-and-paste-Fehler ;o)

Beim „.bildre“ muss es dann ja auch heissen:

float:right;

Und dann funzt das auch bei Dir!

Wenn ich da richtig zwischen den Zeilen gelesen habe… die Seitenabstände nach aussen { margin:… } kannst Du auch verändern:

.bild { margin-top:12pt; margin-right:2.5em; 
 margin-bottom:8pt; margin-left:10px; }

…das war die Langversion, wenn Du jeden Wert einzeln notieren willst. Kurzschriftversion:

.bild { margin:12pt 2.5em 8pt 10px; 
 /\* Kommentar: ergibt genau dasselbe wie oben \*/ }

in der Reihenfolge: oben rechts unten links,
also einmal von 12 Uhr aus gesehen
im Uhrzeigersinn um das Viereck gehen,
dann stimmt’s!

meinen Deffinitionen für den img-tag gehts, dann muss ich halt
in Kauf nehmen, dass bei linken Bildern auch ein linker Rand
und bei rechten Bildern auch ein rechter Rand mit dazu kommt.
Dafür brauche ich aber auch nicht bei jeder Grafik an die
Klassendeffinition zu denken :smile:

Klassendef… Oder gibts u.U. bei anderen Browsern Probleme so?

Auf seeehr alten Browsern: bei einem Freund (Netscape 3.0) habe ich mich fast schief gelacht… aber ich meine, das brauchst Du nicht mehr zu berücksichtigen.

In Sachen Grafiken (Hintergrundbild) einbinden u.ä. noch ein
Tipp: Im CSS nimmt man IMMER NUR ‚einfache Anfuehrungszeichen‘

  • keine „doppelten“! - Beispiel bei Pfadangaben ggf. wichtig:

auch komisch. Weder bei Christian, noch bei Dave noch in
selfhtml habe ich das gelesen. Funzt doch auch so!? Vielleicht
nicht bei jedem Browser? Aber warum liest man/frau das sonst
nirgends?

…weil’s ja (fast) immer auch ohne ‚die Zeichen‘ funzt. Bei Probs mit der Interpretation des HTML (z.B. bei Übertragungsfehlern vom Server) sowie bei ‚Leer zeichen‘, Sønderzeicheñ, Groß-/kleinschreibung in Dateinamen oder Pfaden, ist das mit den ‚Anführungszeichen‘ am sichersten… UND: Lesen konnte ich das schon: aber es wird so by the way erwähnt, und dass auch nur das W3C-Konsortium so’n Kram empfiehlt… %-)

Danke + liebe Grüsslis
Nena

Ja, Grüsslis zurück -
ich sag mal: Auf gut Funzli ;o)

DannyFox64

#9

Hallo Nena,

Und ich glaube, dass die Zahl der nicht CSS-Browser unter 1%
liegen duerfte - und die, die kein CSS koennen, die wissen das
auch - weil sie gerade mit ihrem Palm oder in ihrem Audi A8
surfen :smile:

hihi, oki :smile:) DAMIT kann ich leben *grins*

ich will das noch mal kurz ergaenzen - natuerlich gibts jede Menge Browser, die neuere CSS-befehle nicht unterstuetzen, aberdie Basics sollten dich durchgesetzt haben.
Und von denen reden wir ja hier - wie Du ja auch unten sagst.

Zielgruppe sind Menschen, die um ein Haustier trauern. Also
quer durchs Gemüsebeet - und sicherlich auch Leute, die nicht
wirkliche Internetprofis sind…

das spricht fuer den Strich.
My two cents.

Öööööhm… eine Frage auch noch zu deiner Meinung bzgl. der
Bildausrichtung und den einfachen bzw. doppelten
Anführungszeichen bei DannyFox. Was hältst du davon?

hm, ich hab das bei Danny auch gelesen und nicht verstanden - ich wuesste nicht, wo ich Anfuehrungsstriche in CSS einbaue.
Und gerade auf die Schnelle bei Selfhtm… - aeh, bei einer Seite die ich nicht mehr erwaehnen darf :smile: hab ich auch nix gefunden.

In diesem Sinne einen schoenen Abend noch
Christian