Ocean Mist – Blog dreispaltig über die gesamte Seite
-
Guten Tag an die freundlichen Helfer hier!
Wir sind Neulinge auf dem Gebiet CSS, deshalb wird um Nachsicht gebeten. Das kostenpflichtige CSS-Modul haben wir erworben -in Perfektion natürlich auch ein Buch über CSS- und stehen nun wie die Kuh vom Tore. Wir wollen,
– dass der Blog dreispaltig ist,
– über die gesamte Bildschirmbreite geht und
– Keywörter und Metatags unterbringen.Was müssen wir Wo dazu einfügen? Hinzugezogene Laienexperten haben die Ansicht vertreten, dass wir das vorgegebene Design nicht ändern können. Nun bleibt uns nur noch die Hoffnung auf dieses Forum, auch wenn wir uns damit als blutige Anfänger outen müssen.
Wir freuen uns über jede Antwort.qc und Autoren
Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).
-
Das ist leicht gefragt, aber schwer beantwortet.
Am besten sucht ihr euch ein 3-Spalten-Layout aus den Themes aus (Darstellung – Themes) und passt es erstmal an. So kann man durch Trial & Error viel über CSS lernen.
(Jetzt hier ein komplettes 3-Spalten-Layout per CSS zu erklären würde den Rahmen sprengen.)
Die gesamte Bildschirmbreite zu nutzen ist keine gute Idee. Auf meinem 30″ Cinema Display (eine dreiste Lüge, ich habe keinen ;-) ist eine Webseite, die über die gesamte Monitorbreite geht kaum lesbar. Gut lesbar sind eher kürzere Zeilen (siehe Zeitungslayout). Daher würde ich empfehlen eine max. Breite festzulegen. Z.B. 1024 Pixel (und um Luft/Platz für Scrollbalken zu lassen eher ein bisschen weniger… z.B. 960 Pixel) Natürlich wird die Breite kontrovers diskutiert, aber das sind meine Erfahrungswerte.
Wie das genau zu ändern ist hängt von der CSS-Datei des Themes ab.
Keywörter und Metatags können hier bei WordPress.com nicht hinzugefügt werden. Ist aber auch nicht schlimm, da ihre Wirkung auf Google sehr gering ist, da damit zuviel Schindluder getrieben wurde.
Die „Laienexperten“ (ein freilaufendes Oxymoron!) haben Unrecht. Mit dem CSS-Upgrade kann genau das Design verändert werden (aber nicht die Templates also die HTML-Vorlage der Seite).
Gruß, Torsten
-
Hallo Torsten,
besten Dank für die Antwort, obwohl wir damit noch keinen Schritt weiter sind. Aber wir tasten uns vor, sofern Du uns weiter behilflich bist.
Welches dreispaltige Template würdest Du empfehlen? Prämisse ist, dass wir eigentlich das Template bisher vom Aufbau hier gern behalten würden. Und „ureigentlich“ haben wir dieses Modul nur erworben, um genau die oben genannten Zwecke zu verwirklichen.
Keywörter und Metatags sind zu verschmerzen.
Die von Dir angegebene Breite haben wir erfolglos versucht. Es fehlt und schlichtweg der Punkt, wo wir beginnen können. Durch die Foren haben wir uns auch schon gewälzt.
Vielleicht kannst Du hierzu einfach mal ein wenig Hilfestellung geben.
Beste Grüße und vorausschleichender Dank,
qc
-
-
-
Da, wie schon geschrieben, kein Zugriff auf die HTML-Templates besteht, könnt ihr aus einem 2-Spalten-Layout kein 3-Spalten-Layout machen, denn dazu müsstet ihr eine zweite Sidebar hinzufügen. Ihr müsst euch ein 3-Spalten-Theme nehmen und es anpassen. Was euch gefällt kann ich schlecht raten. Schaut einfach unter Darstellung – Themes die Themes durch (mit einem Klick darauf könnt ihr euch eure Inhalte in dem neuen Look angucken inkl. Links anklicken etc. – erst wenn ihr rechts oben auf aktivieren geht, wird das Theme gewechselt).
Gruß, Torsten
P.S.: Ich verwende das 3-Spalten-Layout Andreas09.
-
Heia!
Ich habe mir die CSS-Quelle von Ocean-Mist einmal angeschaut.
Folgt einfach meiner Anleitung und ihr werdet besser verstehen, wie was zu machen ist.
Mit drei Spalten ist da zwar nichts zu machen, aber das Folgende könnt ihr dann inhaltlich auf jedes beliebige Stylesheet übertragen.01. Speichert euch einmal eine beliebige Blogseite von eurem Blog auf die Festplatte.
Das Ocean-Mist-Layout wird automatisch mitgespeichert. Falls nicht, ihr habt es ja sowieso.
02. Schaut euch den HTM-Quelltext eurer Blogseite an.
03. Darin werdet ihr sehen, daß der Quelltext aus sehr vielen ineinander verschachtelten div-Tags besteht.
Diese Tags müßt ihr bearbeiten!
04. Jedes div-Tag besitzt entweder ein id-Attribut, ein class-Attribut oder sogar beides.
05. Alle diese id und class-Attribute werden in der Stylesheet-Datei definiert.
06. Euer gesamter Blog befindet im HTML-Container namens: <div id=“page“>
07. In der css-Datei wird dieser Container wie folgt referenziert: #page { styleblabla }
08. Suchet jetzt in der css-Datei über die Suchfunktion eures Texteditors den Text #page
(Vorsicht! Im stylesheet befindet sich auch eine Klasse gleichen Namens: .page)
09. In Zeile 15 müßtet ihr fündig werden. Ich entnehme eurer ersten Antwort auf zodiacs Kommentar, daß ihr dort schon einmal angekommen seid, eure manuelle Größenänderung aber kein sichtbares Resultat erbracht hat.
10. Damit ihr die Veränderung sehen könnt, müßt ihr IMMER den bearbeiten div-Container temporär optisch hervorheben. Dazu müßt ihr den Hintergrund des div-Containers einfärben und den bestehenden Hintergrund auskommentieren, falls einer dasein sollte.
Zu Übungszwecken solltet ihr anhand eurer auf Festplatte gespeicherten Datei davon reichlich Gebrauch machen.
Speichert den Originalstylesheet zum späteren Vergleich und/oder weitere Manipulationen nochmals separat ab!
11. Im Style für den Container mit der ID page seht ihr den Hintergund als:
background: url(images/bg_main.gif) top repeat-y;
12. Kommentiert diese gesamte Stilangabe für #page aus, indem ihr zu Beginn der Zeile diese beiden Zeichen setzt:
/* und an das Ende diese beiden Zeichen: */
14. Fügt unter die auskommentierte Zeile diese Zeile ein:
#page {display: block; width: 90%; background-color:white; /*background: url(images/bg_main.gif) top repeat-y;*/ text-align: left; margin: 0 auto;}
Ihr seht, daß ihr auch Teilangaben auskommentieren könnt. Dieses Detail solltet ihr euch unbedingt merken!
15. Breitenangaben werden besser <b>NICHT</b> über Pixel, sondern über <b>Prozentangaben</b> gemacht!
Unterschiedliche Monitorgrößen spielen so keine Rolle mehr.
16. Aktualisiert die Seite im Browser! Ihr seht jetzt ein viel breites Layout, weil der Hintergrund zu Testzwecken sichtbar gemacht wurde. Ohne Farbänderung hättet ihr davon nichts gesehen. Vermutlich dachtet ihr deshalb, es hätte sich bei euch gar nichts verändert. Ihr seht also, Farben können sehr nützlich sein.
17. Als nächstes seht ihr aber auch, daß die anderen div-Container größenunverändert geblieben sind.
Das liegt einfach daran, daß jeder einzelne div-Container in diesem Stylesheet verändert werden muß. *Gähn* Leider ist das ziemlich mühselig.
Aber ein paar Schritte helfe ich euch noch weiter.
18. Sucht im stylesheet in Zeile 19 die Zeichenfolge: #content
19. Gefunden? Kommentiert die gesamte Zeile wie unter 12. beschreiben aus und fügt darunter folgende Zeile ein:
#content {background-color:yellow;float: left; display: block; width: 80%; margin: 0 0 0 7px; overflow: hidden;}
20. Aktualisiert die Seite im Browser! Die Auswirkung springt euch ins Auge.
21. Nun ist aber die Textbreite immer noch unverändert.
Eure Texte liegen natürlich wieder in einem anderen Container *gähn* und der heißt (Zeile 30): .entry
Kommentiert die Zeile wie unter 12. aus und fügt darunter diese Zeile ein:
.entry {float: right; background-color:#ffffcc; display: block; width: 80%; margin: 0;}
22. Die Klasse .entry kommt auch in Zeile 31 vor *stöhn*! Ändert die width-Angabe dort wie oben in 80%
23. Aktualisiert die Browseransicht! Wenn ihr nicht farbenblind seid, erkennt ihr genau, welche Container ihr verändert habt.
24. Aber die Breite des Containers hat sich immer noch nicht verändert. Tja, warum einfach, wenn es auch schwierig geht ;-)
25. Ich weiß, es nervt. Die Klassen .post und .page sind Schuld!
Sucht im Stylesheet die Klassen .page (Zeile 22) und .post (Zeile 23) und macht aus beiden width-Angaben 100%
26. Aktualisiert die Browseransicht! Voila – jetzt paßt es.
27. Den Rest des Stylesheets (z.B. div id=“header“) müßt ihr ebenso anpassen.Weiter will ich aber nicht, denn das würde definitiv zu weit gehen.
Der grundsätzliche Ansatz dürfte aber klar geworden sein. Ein div-Container hängt vom anderen ab.
Arbeitet mit Farben, damit ihr die Veränderungen auch sehen könnt. Wenn ihr nichts seht, habt ihr euch vertippt oder ein anderer div-Container verhindert die Veränderung.
Mit einer dreispaltigen Formatvorlage könnt ihr prinzipiell wie hier beschrieben arbeiten.
Da sind lediglich die div-Container anders verschachtelt.
Macht euch immer Sicherheitskopien und benutzt fleissig Quelltextkommentare!
Erledigt eure Versuche immer nur mit euren Festplattenkopien, denn es wird euch einige Zeit und Nerven kosten, das Layout nach euren Wünschen anzupassen!
Da werdet ihr auch bald merken, daß eine kleine Veränderung bei den diversen Größenangaben das ganze Layout zerstören kann.
Aber Übung macht den Meister!
Apropos! Das Buch über CSS hättet ihr euch doch sparen können. Mensch Leute!
Bei http://de.selfhtml.org/ gibt es doch alles, was nicht nur das Anfängerherz begehrt, anschaulich, umsonst und sogar als Download. Das ist nicht zu toppen!
Viel Spaß und viel Erfolg! -
Manchmal bin ich selbst ein wenig gagga!
Die Zeilenangaben beziehen sich auf Zeilennummern, wie sie nach der Auskommentierung der angesagten Styles lauten.
Und unter Punkt 25 bin ich mit .post und .page durcheinander gekommen.
Erste Klasse = Zeile 23, zweite = Zeile 24.
Ich denke, so ist es richtig.
Und ich sag jetzt mal besser: Solche Feinheiten lauten ohne Gewähr.
- Das Thema ‘Ocean Mist – Blog dreispaltig über die gesamte Seite’ ist für neue Antworten geschlossen.
de.WordPress.com Forums 