Hab hier einige Vorlagen für CSS.
Wenn ich sie aber kopieren will um etwas rumzuprobieren (in Kompuzer Editor), dann kommt außer der Hintergrundfarbe gar nichts.
Ich dachte, daß zumindest die Rahmen usw. vorhanden sind.
Wo ist mein Denkfeheler?
Hier der Link mit den Vorlagen:
hoffmann.bplaced.net/hilfe.php?m … ele&stil=a
Tina
Das sind ja nur die css-Anweisungen du musst natürlich die dafür notwendigen div Container anlegen und diesen dann die id oder class geben!
Mit Code kopieren und loslegen 
Gruß
Camou 
Danke. Von Cotainer hab ich noch nie was gehört… seufz.
Hab aber nun was gefunden:
Ist es das, was Du meinst?
Wenn ja, wohin kommt dieser Teil dann?
In diesen Beispielen gibt es ja mehrere Rahmen mit div. Farben usw. sind das dann alles “Container”?
Tina
<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">body</span><span class="syntaxkeyword">><br /><!--</span><span class="syntaxdefault"> Anfang Das sind die div Container </span><span class="syntaxkeyword">--><br /><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"kopf"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">logo</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"inhalt"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">inhalt</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"fuss"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">fuss</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><!--</span><span class="syntaxdefault"> Ende </span><span class="syntaxkeyword">--><br /></</span><span class="syntaxdefault">body</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">html</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>So sehen dann div Container aus!
Welchen Editor benutzt du?
Gruß
Camou
Also an sich ist das nicht als allgemein verwendbare Vorlage
gedacht, sondern als Beispiel, um was zu lernen.
Zumindest die Hintergrundgraphiken sind teilweise wohl im Sinne
des Urheberrechtes Werke, und weil da nichts anderes steht, sind
die auch nicht direkt so ohne Nachfrage anderswo verwendbar.
Das CSS selbst hingegen schon, zumindest denke ich nicht, daß
eine mehr oder wenige triviale Aneinanderreihung von
Eigenschaften ein Werk im Sinne des Urheberrechts darstellt -
mögen ‘Designer’ allerdings auch anders sehen ;o)
Nur eigenen sich so spezielle Vorlagen nur zum lernen, nicht
einfach, um die unverstanden zu übernehmen…
Um zu verstehen, muß man sich eben die (X)HTML-Datei
angucken und wie die strukturiert ist (nicht nur div, da stehen
auch noch einige andere Elemente drin).
Und dann kann man sehen, wie sich die Eigenschaften jeweils
auswirken.
Wobei ich (X)HTML heutzutage auch noch anders schreiben täte
als 2003…
Solche Vorlagen beziehen sich eigentlich immer auf eine Datei,
welche die eigentliche Struktur und vor allem den Inhalt enthält.
Dies Beispiel hier enthält etwa keine Pixelgraphik, insofern muß
sich die Stilvorlage auch nicht um solche Probleme kümmern.
Darin kommen auch keine Tabellen vor, dafür gibt es da also
auch keine Dekoration, auf nicht für Formulare etc.
Generische Vorlagen habe ich auch schon geschrieben, das ist
eine Vorlage für ein ganzes Dateiformat. Da wird dann aber eher
nicht positioniert ;o)
Das Attribut style sollte man ansonsten ganz vermeiden und
stattdessen erstmal bei der Entwicklung und zum Vorzeigen bei
Fragen das Element style verwenden und dann später bei der
Veröffentlichung die Stilvorlagen in eine externe Datei
verschieben.
Das kann man auch in zwei Sätzen erklären!
[quote=“hoffmann”]Solche Vorlagen beziehen sich eigentlich immer auf eine Datei,
welche die eigentliche Struktur und vor allem den Inhalt enthält.[/quote]
@Hoffman: Ich will diese Vorlagen ja nicht übernehmen, ich hole mir Dateien und probiere damit rum, versuche zu verändern usw. Einfach zum üben. Habe mir auch die entsprechnde HTML Datei dazu angeschaut.
@Camuo: Ich habe den KompuZer. Aber irgendwie bin ich damit nicht ganz zufrieden.
also, ich habe mich nun etwas mit Containern auseinandergesetzt.
Soweit versteh ich das schon. Also mit der Positionierung, den Stapeln,usw.
Habe hier einen Code für zwei Container:
So wie ich das verstanden habe, kann ich den Containern nun Namen geben, zb. Kopf, Inhalt, Navigation usw. (Statt Layer1).
Dann kann ich doch mit:
die div. Container befüllen?
Tina
Wenn du einem div eine id gibts, verwendest du keine style-Attribut, sondern schreibst die dort enthaltenen Informationen ins CSS. So wie in deinem Beispiel ergibt das keinen Sinn. Zudem kannst du eine id nur einmal vergeben, sprich es dürfen keine zwei divs die gleiche id haben. In dem Fall müßtest du class nehmen. Allerdings gibts du damit den divs auch die gleichen Eigenschaften.
Aber es hat sich scheinbar nichts an den fehlenden Grundlagen geändert. Zwei gute Bücher, die das idiotensicher erklären sind HTML für Kids und CSS für Kids. Wobei man Erstgenanntes auch zuerst lesen sollte. Die Bücher sind auch für Erwachsene gut geeignet, weil sie didaktisch einfach besser sind, als die meiste Fachliteratur, egal ob online oder eben als Buch.
Damit herumprobieren ist eine sinnvolle Sache, so ist es gedacht ;o)
Grundkenntnisse in (X)HTML braucht man schon, um ein
Dokument sinnvoll zu strukturieren.
Der angesprochene Unterschied von id und class liegt darin, daß
man mit class grob gesprochen Elemente Klassen zuordnen
kann, wobei mehrere Elemente zu einer Klasse gehören können
und auch ein Element zu mehreren Klassen gehören kann.
Der Wert von class ist dann also der Name der Klasse, der bei
einer guten Struktur einen Hinweis auf dieselbe gibt, etwa wie
bei meinem Beispiel ‘kopf’, ‘inhalt’ , ‘fuss’, ‘menu’.
Mit dem Attribut id werden Elemente identifiziert, bei meinem
Beispiel etwa die Kapitel oder Abschnitte, damit man sie z.B. im
Menü direkt ansteuern kann.
Dann werden auch noch Elemente dekoriert, weil sie eine
bestimmte Funktionalität haben, die im Namen des Elementes
selbst steckt. Anders als die Zuordnung per class ist das eine
inhaltlich sehr wichtige Zuordnung, weil die unabhängig von der
konkreten Dekoration verständlich ist und Bedeutung hat.
Erst wenn es keine Elemente gibt, die Bedeutung einer benötigten
Struktur haben, verwendet man div mit einem Attribut class mit
eigenen Klassen.
Als konkreten Ansatz solltest du vielleicht einfach erstmal ein
Dokument erstellen, was die von dir gewünschten
Grundstrukturen aufweist.
Typisch sowas hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Projekttitel</title>
<style type="text/css">
</style>
</head>
<body>
<div class="kopf">
<h1>Projekttitel</h1>
</div>
<div class="inhalt">
<div class="kapitel"><h2>Kapitelüberschrift</h2>
<p>...</p>
<p>...</p>
</div>
<div class="kapitel"><h2>Kapitelüberschrift</h2>
<p>...</p>
<p>...</p>
</div>
</div>
<div class="menu">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="fuss">
...
</div>
<body>
</html>Wenn da, wo hier ‘…’ steht, relevanter Text drin steht, umso
besser, kann man sich eher vorstellen, wie das dann aussehen
wird, wenn das Projekt inhaltlich fertig ist.
Und dann fügst du zum Herumprobieren in das Element style im
Element head CSS-Anweisungen ein, erstmal mit verschiedenen
Farben und Rahmen für die verschiedenen Elemente und Klassen.
Z.B. div.kopf h1 {color:blue; backround:red;border:thin solid yellow}
Wenn das klappt, hast du doch offenbar verstanden, wie du diese
Elemente und Strukturen dekorieren kannst.
In einem zweiten Schritt kannst du dann versuchen, dort zusätzlich
oder alternativ zu Farbe und Rahmen Angaben zur Positionierung
zu notieren.
Dieser Artikel hier geht ja auch eher schrittweise vor, wie man
so eine Dekoration für ein konkretes Beispiel angehen kann, ist
vermutlich hilfreicher, als ein fertiges Beispiel:
hoffmann.bplaced.net/hilfe.php?m … =csserstes
Hallo Tinaro
Du meinst kompoZer?
Hier ist eine einfache Erklärung zum erstellen von divs mit KompoZer.Mit Bildern 
diese sagen manchmal mehr als tausend Worte.
Gruß
Camou
Sieht ja ganz plausibel aus, was der Entwickler von KompoZer
da beschreibt - mit so vielen Menüs und Bildern aber auch wieder
etwas umständlich und unübersichtlich ;o) Das ist fast
zwangsläufig so, wenn man sich die Struktur aus
Programmmenüs zusammensuchen muß, statt sie einfach zu
notieren…
Oft beschreiben ein paar Worte eben doch mehr als tausend
Bilder ;o)
[quote=„hoffmann“]Oft beschreiben ein paar Worte eben doch mehr als tausend
Bilder ;o)[/quote]Vielleicht
Gruß
Camou
Danke für Eure Hilfe.
Ich bin heute ganz schön weit gekommen:
Habe nun versch. divs angelegt/erstellt? diese gleich in css ausgelagert, 2 Seiten greifen nun darauf zu und: es funktioniert!!!
Kann verschiedene Rahmen machen, diese positionieren (wobei es meist ein Zufallschuß ist, wo die dann liegen. Muß mir den Aufbau des Bildschirms, wo was ist, noch mehr verinnerlichen 
)
Mohyra, danke für Deine Empfehlung der Bücher. Aber ich lerne am besten, wenn ich immer wieder rumprobiere. Klar, ich habe mir die HTML und css Grundlagen hier durchgelesen, auch alles schön mitgearbeitet. Mit Sicherheit sind meine Kenntnisse noch mehr als dürftig. Aber ich will dranbleiben…
Danke
Tina
Learning by Doing ist bei HTML und CSS durchaus die beste Methode etwas zu lernen. Wenn man aber nicht einmal weiß was HTML und CSS ist, oder ein Div, dann ist es wichtiger, sich diese Grundlagen erst einmal anzueignen. Spart Zeit und vor allem auch Nerven.
Learning by Doing ist bei HTML und CSS durchaus die beste Methode etwas zu lernen. Wenn man aber nicht einmal weiß was HTML und CSS ist, oder ein Div, dann ist es wichtiger, sich diese Grundlagen erst einmal anzueignen. Spart Zeit und vor allem auch Nerven.
Noch mal eine Frage zu den Vorlagen. bin mittlerweile schon recht weit gekommen, mit meinen Basteleien.
Und ja, ich verstehe es langsam 
Bei den obigen Vorlagen, wo ist da die Positin der einzelnen Rahmen angegeben? Sind alle Farben vorhanden, der z-index usw, wo ist aber die Position?
PS: habe nun ein super Editor Programm, das macht es um vieles einfacher.
Tina
Auf der Seite sind ja 13 verschiedene Stilvorlagen angegeben.
Welche meinst du?
Einige davon enthalten gar keine expliziten Positionierungsangaben.
Ist für ein Element die Eigenschaft position nicht angegeben, so
gilt automatisch der Wert static, also normaler Textfluß wie im
Quelltext angegeben.
Bei den Vorzeigebeispielen ist position:static teilweise sogar
explizit angegeben, nur um das für den Leser zu betonen.
In der Praxis läßt man das bei dem Wert meist weg, es sein denn,
man will einen vorherigen anderen Wert überschreiben.
Generell sorgt der browser selbst für eine sinnvolle Anordnung
des Inhalts. Der Autor muß da nur was angeben, wenn er eine
davon abweichende Positionierung haben möchte (womit der
Autor dann auch sehr viel Unfug anstellen kann ;o)
z-index muß man ja nur angeben, wenn man die Reihenfolge
der Darstellung gegenüber der Voreinstellung ändern will.
Prinzipiell werden erstmal positionierte über nicht positionierten
dargestellt und z-index wirkt nur auf positionierte (also nicht für
solche mit dem Wert static). Bei gleichem z-index entscheidet
ansonsten die Reihenfolge im Quelltext.
Problematisch ist eine Angabe zur Positionierung auch, wenn man
keine der Eigenschaften top oder bottom und left oder right
verwendet. Müßte man mal nachsehen, was dann das korrekte
Verhalten ist (und welche browser das dann richtig machen ;o)
Bei einigen alten Versionen von browsern war es auch
problematisch, für position: relative nur eine Verschiebung um 0
anzugeben, das wurde dann fälschlicherweise ignoriert und als
position:static angenommen ;o)
Der Fall ist relevant und oft gebräuchlich, um mit dem relativ
positionierten Element ein neues Bezugssystem für positionierte
Kindelementen aufzumachen, ohne das Element selbst zu
verschieben.
Es ist, glaub ich Vorlage 2 die ich mir zum experimentieren rausgesucht habe.
Z. B. die Navigation ist ja in einem bestimmten Abstand von oben. Wenn ich nun diesen Abstand verändern will.
Oder die beiden anderen Elemente. Also Inhalt und Kopf, sind ja auch in einem Abstand zur Seite. Wie “verschiebt” man die nach links oder rechts?
Z Index ist klar.
Tina
Das Dokument hat ja gleich zwei Navigationsbereiche, einmal
ul.menu (steckt in div.ulmenu) und einmal div.menu
ul.menu hat ja position:fixed angegeben (Vorsicht damit, wenn
nicht sicher ist, daß der Anzeigebereich groß genug ist, damit
alles sichtbar bleibt, sonst muß man tricksen).
Angegeben ist da:
top: 23em;
right: auto;
float: left;
width: 10em;Ist also offenbar 23em von oben entfernt und 10em breit.
Ich täte da heute eher notieren:
top:23em;
left:0.2em;
width: 10em;(das float ist da auch überflüssig oder allenfalls sinnvoll für
browser, die keine Positionierung hinbekommen).
Das andere Menü ist absolut positioniert:
div.menu
{
position: absolute;
line-height: 2em;
min-width: 42em;
top: 1em;
left: 1em;
right: 1em;
}Ist also oben mittig zentriert, sofern genug Platz ist, sonst ist
horizontales Rollen angesagt - sollte man an sich auch eher
vermeiden, gut, eine minimale Breite von 42em ist aber relativ
plausibel, liegt bei meinen Einstellungen grob bei 750 Pixeln.
Kopf und Inhalt sind einfach statisch positioniert, sind also im
normalen Textfluß.
Da kann man dann auch sinnvoll den Randabstand festlegen,
also mit margin, was ohnehin wichtig ist, damit die beiden Menüs
nicht relevante Teile davon verdecken.
Daher findet man da sowas wie
margin-left:12em;
beziehungsweise
margin-top: 6em;
