Externe CSS-Datei erstelle und nun????

[Hypopotamus]

Ich bin sowas von stolz auf mich. Habe es geschafft eine externe CSS-Datei zu erstellen und es funktioniert auch. ABER: ich möchte nun bestimmte Bereiche damit formatieren. Am besten Ihr schaut mal auf www.bunte-blumenwelt.de . Da gibt es eine Hauptüberschrift und dann die Linie. Darunter eine andere Überschrift und Fließtext. Fließtext ist p . Das kommt ja automatisch wenn ich einen Absatz mache. Aber wie bringe ich es soweit, daß die anderen Texte mit anderen Auszeichnungen gekennzeichnet werden. Einfachste Lösung wäre natürlich einfach h1 h2 etc. in den Quelltext zu schreiben. Oder wie macht Ihr das?

[Günter Pischel]

Hallo Claudia,

leider kann ich dir hier nicht helfen...

...aber mit gutem Recht kannst du stolz auf deine Arbeit sein - suuuuuper.


Beste Advents-Grüße aus Garbsen

Günter Pischel

[Fläcky]

Guten Abend Claudia,

Schau mal hier nach:

http://de.selfhtml.org/css/formate/einbinden.htm

Du kannst die ganze Datei SHTML herunterladen und als Nachschlage werk benutzen. Ich habe es für meine Diplomarbeit auch gemacht.

Darin sind viele Links und ganze Beispiele, Kopierbar zum Einsetzen in die eigene HP. Auch interne und externe css sind erklärt.

PS Die Bilder von Feuer und Eis funktionieren , aber die Legenden unter den Bildern

MfG Fläcky

[RoadRunner]

Hallo Claudia

Ja, ich würde das in dem Fall über <h1> und <h2> lösen. Es handelt sich ja um Titel. In anderen Fällen lässt sich jedes beliebige "Tag" mittels class="beliebigername" einer Gruppe zuteilen.

Im Übrigen kann ich mich meinem Vorschreiber Günter nur anschliessen: Wirklich super gemacht!

Gruss Roger

[Joe-Holzwurm]

Hallo Claudia,

Deine Homepage sieht fantastisch aus. Da bekomme ich direkt Lust, meine Homepage auch zu überdenken. Aber man kann eine Homepage ja auch nicht dauernd ändern.

Zu Deinem Problem: Ich verwendet CSS-Dateien nur für die Standardfälle. Wenn irgend etwas anders formatiert sein soll, so formatiere ich dies einzeln direkt im HTML-Code. Ich weiß nicht, ob es sich lohnt, für alle möglichen Details die CSS-Datei zu erweitern.

[Fläcky]

Hallo Joe-Holzwurm,

Muss Dir wenigstens teilweise widersprechen, .

externe css haben insofern eine Berechtigung, als dass diese die Einheit einer HP ganz erheblich fördern - Format oder Schrift sind weniger Fehler ausgeliefert. Allerdings fallen diese dann überall an (und auf).

Viel wichtiger scheint mir aber das Argument "Platzverbrauch". Dies ist besonders wichtig bei "Gratisprovider" da oft relativ wenig MB zur Verfügung gestellt werden. Und Bilder (WebShows) benötigen doch einiges an MB's.

MfG Fläcky

[Hypopotamus]

@Fläcky: Der Text muß natürlich noch geändert werden. Aber momentan kämpfe ich an anderer Front. Selfhtml kenne ich natürlich. Aber ehrlich gesagt ich lerne wenig bis gar nichts aus solchen "Büchern". Bin eher der Typ: Learning by Doing.

@alle: Danke für Eure Hilfe. Ich habe das ganze jetzt über H1 und H2 gelöst. Und bin auch schon ein bißchen weiter. Auf jeden Fall freut es mich, wenn das was jetzt zu sehen ist, schon mal gut ankommt. Wie Fläcky schon geschrieben hat, unter Blumengalerie in der Galerie Feuer und Eis kann man schon erste Bilder bewundern. Allerdings die Bildunterschriften muß ich noch ändern.

[KlaWeLi]

Auf jeden Fall freut es mich, wenn das was jetzt zu sehen ist, schon mal gut ankommt.

Hallo Claudia,

ich bin beeindruckt, Glückwunsch

Ich kann mich noch daran erinnern, wie Du vor etwa einem Jahr (wenn ich mich recht erinnere) recht hilflos vor einer zu gestaltenden Homepage gesessen hast (jedenfalls war das mein Eindruck )

Echt klasse, was Du jetzt auf die Beine gestellt hast! Weiter so!
Mit welchem Editor arbeitest Du (GoLive?)

[Hypopotamus]

Hallo Klaus,
du hast recht. Es ist ungefähr ein Jahr her. Aber ich gebe nicht so leicht auf.
Ich verwende Adobe Golive. Am Anfang war ich wirklich der Verzweiflung nah, aber mittlerweile fange ich an zu verstehen, wie die Zusammenhänge sind.

[KlaWeLi]

Ich verwende Adobe Golive. Am Anfang war ich wirklich der Verzweiflung nah, aber mittlerweile fange ich an zu verstehen, wie die Zusammenhänge sind.

Ich habe u.a. auch GoLive (weil es wohl neben Dreamweaver die meisten Möglichkeiten/Freiheiten bietet) und schon mehrere Versuche unternommen, damit etwas auf die Beine zu stellen. Bis jetzt habe ich aber immer wieder aufgeben müssen Mag auch sein, daß es ein Zeitproblem ist und/oder ich zu anspruchsvoll bin. Aber an Deinem Beispiel sehe ich, daß man mit dem Programm wohl tatsächlich arbeiten kann

[Fläcky]

Hi Claudia,

meine ganze Homepage calendarium ist mit GoLive erstellt worden. (PC-Versoin 6.0)

Es gibt auf der Dateienansicht oben rechts ein Signet das aussieht wie eine Treppe. Hier kannst Du eine externe css importieren und bearbeiten.

Zudem ist hier ein Link für einen CSS-Editor. Dieser ist gut neben GoLive zu gebrauchen.
http://www.bradsoft.com/download/index.asp "TopStyle Lite 3.10 (1.75MB) Free"

MfG Fläcky

[stefant]

Hi Claudia,

um den Garten bist Du echt zu beneiden und um die Homepage auch! Garten, Fotografieren, Diashows machen, Homepage gestalten ...., es scheint, dass Dein Tag 26 Stunden hat.

Ich bin nun nicht der grosse HTML-Crack (ich suche meist auch nur in SelfHTML). Du kannst natürlich die Überschriften h1 bis h6 entsprechend definieren und damit etwas zweckentfremden. Du kannst dir aber in der per css auch eigene Klassen definieren. eine weiter Möglichkeit sind sognannte IDs. Mit diesen beiden Selektoren kannst Du so ziemlich alles definieren.

Eine sehr gute Referenz ist das Buch "CSS-Praxis" von Kai Laborenz, mit 35 Euro aber nicht gerade ein Schnäppchen. Aber ja vielleicht was untern Weihachtsbaum.

[Digiknipser]

Hallo Claudia,

das Layout meiner gesamten Webpage beruht nur auf css. Du kannst nicht nur einzelnen Tags Attribute zuweisen, sondern auch (Unter-)Klassen von Tags definieren.

Ersterer Fall wäre

p
{
font-family : Arial;
color : blue;
font-style : normal;
font-weight : normal;
text-decoration : none;
font-size:8pt;
}

Damit erhalten alle Bereiche zwischen <p> und </p> diese Formatierung, außer, Du hast den Inhalten dazwischen etwas anderes zugewiesen.

Klassen von Styles werden mit einem . definiert. Beispiel:

p.Ueberschrift1
{
font-family : Arial;
color : blue;
font-style : normal;
font-weight : bold;
text-decoration : none;
font-size:10pt;
}

Der Aufruf im HTML-Code lautet dann

<p class="Ueberschrift1"></p>

Auf diese Weise kannst Du ziemlich einfach jedem Bereich eine Formatierung zuweisen.

Wenn Du eine allgmeingültige Klasse definieren willst, schreibst Du

.Ueberschrift1
{
font-family : Arial;
color : blue;
font-style : normal;
font-weight : bold;
text-decoration : none;
font-size:10pt;
}

Dann kannst Du diese Formatierung in jedem beliebigen Tag verwenden, z.B.

<p class="Ueberschrift1"></p>

<td class="Ueberschrift1"></td>

<span class="Ueberschrift1"></span>

etc.

Ich hoffe, das hilft Dir weiter!

Viele Grüße,

-Gernot

[Hypopotamus]

@stefant: Danke für den Buchtip. Mal sehen ob das Christkind noch was mehr bringt. Ja manchmal bräuchte mein Tag wirklich 26 Stunden, allerdings die meiste Zeit verbringe ich wahrscheinlich mit Lisa. Alles andere versuche ich so drumrum zu organisieren.

@Gernot: Danke danke danke. Das ist super, genau die Erklärung die ich brauchte. Habe nämlich schon überlegt wie ich diese Fließtext <p> noch in Unterkategorien unterteile. Habe jetzt einfach Überschrift 3 genommen, aber das ist ja auch nicht so der Hit. Immerhin ist der Text in HTML-Quelltext jetzt sehr übersichtlich geworden, seit ich die externe CSS Datei verwendet habe.

[Hypopotamus]

Für alle die es interessiert. Ich habe jetzt unter der Rubrik Feuer und Eis, sämtliche Bilder eingefügt und auch die Bildunterschriften richtig eingesetzt. Habe allerdings schon bemerkt, für Nicht-DSL-Nutzer wird das ganze ziemlich mühsam. Aber noch mehr wollte ich die Bilder nicht verkleinern, und da es fast nur Nahaufnahmen sind, hat eine niedrigere JPEG-Einstellung zu schlechten Ergebnisse geführt. Aber das hilft nunmal nicht.

[Hypopotamus]

Noch eine Frage: Mir ist aufgefallen, daß der Text nicht getrennt wird. Ist das bei Webseiten normal oder kann man da was einstellen. Bei langen Wörtern entstehen doch ziemlich unschöne Lücken.

[Andreas]

Silbentrennung gibt's im Internet leider nicht. Wenn Du die Spalten auf eine feste Breite setzt, kannst Du lange Worte ggf. manuell umbrechen, aber bei relativen Tabellenbreiten geht das natürlich nicht. Versuche ggf. mal, den Text als Blocksatz (text-align: justify) zu setzen, evtl. sieht es so ein wenig besser aus, wenngleich die unschönen Lücken dann zwischen den Worten entstehen. Zumindest für Internet-Explorer-Nutzer kannst Du evtl. auch noch den Scrollbalken einfärben, damit er besser zur restlichen Seite paßt, hier ist der nötige Code (kommt in den body-Bereich vom Stylesheet, die Farben nach je Belieben verändern):

Code: Alles auswählen

scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dcolor: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #000000;

Ansonsten wirklich eine super Arbeit, Kompliment!

[Hypopotamus]

Hallo Andreas,
wenn Du mir den Code schon so anbietest habe ich ihn auch gleich eingebaut. Auch wenn ich selbst nicht in den Genuß komme, da ich Mozilla benutze.

[Echidna]

Hallo Claudia,

was die Erstellung einer Homepage angeht, kann ich Dir nicht weiterhelfen. Ich habe davon so viel Ahnung wie der Wolf vom Schafehüten.

Optisch finde ich Deine Seite aber klasse!! Großes Lob

Sie ist nicht überladen mit Bildern oder Farben. Die Navigation erscheint einfach. Jetzt warte ich nur noch auf die Rezepte.

Ich finde, man spürt, daß Du mit Herzblut bei der Sache bist.

Gruß

Echidna

[Hypopotamus]

@Echidna: Danke für das Lob. Da arbeite ich doch gerne weiter an den Bildern. Ich denke die Rezepte kommen ganz am Schluß

@alle: Ein problem habe ich momentan mit der Übersichtsseite Galerie. Ich habe die Linien mit CSS und dem Befehl borderbottom gestaltet. Nun muß diese Linie aber nicht über die ganze Tabelle gehen sondern soll nur so breit sein, wie der Text. Und das ist natürlich bei jeden Text anders. Darum dachte ich mir, ich gebe es immer vor dem Text in Prozentzahlen an. z.B. mit Abstand/Rand links. Kriege es aber nicht hin. Gibt es da noch andere Möglichkeiten?