CSS Stylesheet Corner

23.05.2012 um 12:35 Uhr

Probleme mit dem Bildspeicher / Bilder in einen Eintrag einfügen

Jeder Blog hier bei Blogigo hat einen frei verfügbaren Bildspeicher zum Upload von Bilddateien.
Die Kapazität beträgt derzeit 50 Mbyte.

Innerhalb der Adminseite kann unter dem Menüpunkt "Dateien" auf den Bildspeicher zugegriffen werden.



Zu beachten ist jedoch, dass die dort angezeigten Bilder nicht die Bilder sind, die im Eintrag zur Verknüpfung kommen, sondern nur sogenannte "Thumbnails", also Vorschaubilder. Werden nicht alle, im Extremfall keine, Vorschaubilder angezeigt, bedeutet dies nicht, dass die "echten" Bilder nicht mehr vorhanden sind. Die Bilder können auch ohne den Filemanager von Blogigo betrachtet werden. Beim Upload von Bildateien wird automatisch ein Vorschaubild angelegt, dem Dateinamen wird ein Punkt vorangestellt.

Dies passiert durch die direkte URL-Eingabe in der Adresszeile des Browsers. Die genau Adresse und der Bildname (Achtung: Im Bildnamen wird Groß- und Kleinschreibung unterscheiden!) muss dazu allerdings bekannt sein.

Die Eingabe von "www.blogigo.de/MeinBlogname/Bild-1.jpg" ruft "Bild-1.jpg" aus dem Bildspeicher zur Ansicht im Browser auf. Die Eingabe von "www.blogigo.de/MeinBlogname/.Bild-1.jpg" ruft das Vorschaubild ".Bild-1.jpg" aus dem Bildspeicher zur Ansicht im Browser auf.

Solange die Bilder unter der einzugebenden Adresse im Browser verfügbar sind, lassen sich diese auch verwenden. Das Vorschaubild ist dazu nicht notwendig, erleichtert natürlich die Auswahl und Navigation.

Vereinzelt treten Probleme mit dem Upload, der Anzeige und dem Einbinden auf.
Abgesehen von technischen Problemen, ist dies häufig darauf zurückzuführen,
dass einige grundlegende Vorgehnsweisen nicht beachtet werden.
Eine beliebte Falle ist das ablegen von Bilddateien in nicht permanenten Ordnern.

Deshalb hier eine kurze Anleitung am Beispiel eines neu zu erstellenden Beitrages:

Zuerst wird ein neuer Eintrag wie üblich eröffnet.
Zum einfügen eines Bildes das Symbol mit dem Baum anklicken.



Es öffnet sich ein weiteres Menü, wo das Bild ausgewählt werden kann



Der Bildspeicher enthält den Hauptordner, der wie der Blogname lautet.
Die Bilder sind immer erreichbar unter "www.blogigo.de/MeinBlogname/Bildname.jpg"

Zusätzlich generiert Blogigo beim erstellen eines neuen Eintrages einen temporären Bildspeicher "New entry" (der später eigentlich den Namen des Eintrages haben sollte, aber das funktioniert schon lange nicht mehr.).
Standardmässig zeigt der Uploadpfad auf diesen Ordner. Es kann ohne Probleme dort, im Ordner "New entry" ein oder mehrere Bilder abgespeichert werden.



Das führt aber meistens zu Problemen, weshalb dieses Vorgehen zu vermeiden ist. Ich erkläre später warum.
Ich habe also hier zu dem neuen Eintrag das Bild "Bild-4.jpg" im Ordner "New entry" abgespeichert und betätige nun den "Einfügen" Button.



In der Vorschau wird das Bild angezeigt und man sieht auch die URL-Adresse: "www.blogigo.de/MeinBlogname/entry/0/Bild-4.jpg". Blogigo verwendet als Speicherort das Verzeichnis "entry" und (weil das mein erster Eintrag ist) das Unterverzeichnis "0". (Mein nächster Eintrag wurde dann mit "../entry/1/Bildname.jpg", mein dritter Beitrag mit ".../entry/2/Bildname.jpg" angelegt werden.)

Normalerweise sollte das alles so funktionieren, tut es aber nicht, wie ich gleich zeigen werde.

Nach dem veröffentlichen des Eintrages, (in der Vorschau ist alles wunderbar, das Bild wird angezeigt) ist oftmals dann zu sehen, dass das eingefügte Bild nicht angezeigt wird.





Auch eine Überprüfung über die direkte Adresseingabe ""www.blogigo.de/MeinBlogname/entry/0/Bild-4.jpg" verschafft keinen Erfolg.



Ein erneutes öffnen des Eintrages zeigt, dass das Bild nicht mehr vorhanden ist.



Das Bild ist definitiv weg!

Warum das Bild nicht korrekt gespeichert wird, kann ich nicht sagen, ich vermute einen Bug innerhalb des zuständigen Javascriptes, oder einer anderen Prozedur. Bei manchen funktioniert es, bei manchen nicht. Also auf jeden Fall nicht wirklich zuverlässig. Deshalb rate ich von der Verwendung des Speicherortes "New Entry" dringend ab.

Um nicht in diese böse Falle zu tappen, gibt es einen einfachen Weg.

An dem Punkt, wo der Speicherort des Bildes zu wählen ist, unbedingt den Hauptspeicherordner des Blogs auswählen und NICHT den Ordner "New entry".



Dann die entsprechende Bilddatei dort hochladen, oder eine bestehende Datei zum einfügen auswählen.
(Ich persönlich lade meine Bilder schon vor dem schreiben des Eintrages hoch, denn da gibt es nur den Hauptspeicherordner und ich tappe nicht aus Leichtsinn in die "New entry"-Falle.)



Sehr schön ist auch die korrekte URL-Adresse "www.blogigo.de/MeinBlogname/Bild-4.jpg" zu sehen.



Dann das Bild einfügen, den Eintrag fertigstellen und veröffentlichen.



Fazit: Wenn als Speicherort der Hauptordner benutzt wird, gehen die Bilder nicht verloren. Es kann vorkommen, dass die Vorschaubilder nicht verfügung stehen, aber die "echten" Bilder sind auf jeden Fall vorhanden. Sie können eben nur nicht mit dem Blogigio Filemanager betrachtet werden.


Manchmal fehlen bei Verwendung des IE-Explorers auch die Scrollbalken zur Bildnavigation, unter Verwendung von Firefox sind diese immer vorhanden. Alternativ kann die CSS-Steuerdatei für die Adminseite deaktiviert werden, dann ist auf jeden Fall immer ein vertikaler Scrollbalken vorhanden.

Um diese Bugs zu umgehen kann auch die Möglichkeit erwogen werden, auf externe Bildspeicher von Fremdanbietern zurückzugreifen. Anstatt der Blogigo-Adresse für das Bild ist dann die modifizierte Adresse des Drittanbieters im Menüpunkt, dort wo das Bild eingefügt werden soll, anzugeben.

Alternativ, um bei den Bordmitteln von Blogigo zu beiben, kann ein zusätzlicher Blog angelegt werden (jeder User kann bis zu 5 Blogs anlegen) und der neu angelegte Bildspeicher dieses zweiten Blogs für die Bilder im Ursprungsblog verwendet werden.

Ein defekter Bildspeicher kann vom User selbst nicht repariert werden.

Der Vollständigkeit halber möchte ich noch erwähnen, dass Bilder die aus den Ordnern gelöscht werden, dann natürlich auch aus den Beiträgen entfernt werden, da es sich lediglich um eine Verknüpfung des Bildes vom Speicherort im Eintrag handelt.

06.08.2011 um 21:35 Uhr

How to: Link´s richtig verlinken

Das einfügen von Links in Beiträge funktioniert seit einiger Zeit nicht mehr so, wie bisher gewohnt.

Die ursprünglich eingefügten Links führen dann entweder auf den eigenen Blog zurück, oder
es wird ein ungültiger Link wie z.B. "http://www.blogigo.de/Blogname/Linkadresse"
erzeugt. Diese Problematik hat im übrigen nichts mit dem "NoFollow" Attribut zu tun, das derzeitig
auf alle Links angewendet wird.

Deshalb ist folgendes zu beachten:

Link im gleichen Fenster öffnen:
Soll der Link im gleichen Fenster (Ziel: _self - In diesem Fenster/Frame öffnen) erscheinen,
muss die Link-URL mit einem führenden "http://" versehen werden. Soll der Link z.B. auf Google
verweisen muss die korrekte Link-URL " http://www.google.de" lauten und NICHT "wwww.google.de" lauten. Der Link wird dann sofort im gleichen Fenster, wie der Blog, angezeigt.

Link in einem neuen Fenster öffnen:
Soll der Link hingegen in einem neuen Fenster (Ziel: _blank - In neuem Fenster öffnen) angezeigt werden, ist obige Lösung nicht anwendbar. Es muss folgendermassen vorgegangen werden: Zuerst den Beitrag mit den Links
mit der Option "Ziel: _self - In diesem Fenster/Frame öffnen" mit korrekter Link-URL, also mit führendem "http://" veröffentlichen.
Danach den Eintrag zum wiederbearbeiten öffnen und dann die enthaltenen Links auf die Option "Ziel: _blank - In neuem Fenster öffnen" ändern und den Eintrag erneut veröffentlichen.
Die Links werden dann beim anklicken in einem neuen Fenster angezeigt.

Dieser Tipp basiert auf der Erkenntnis und dem Lösungsvorschlag von angelmagia .
Ihr vielen Dank dafür.

 

17.07.2011 um 17:30 Uhr

Änderung des Blogdesigns derzeit möglicherweise nicht sinnvoll

Von Änderungen in der Designdatei style.css wird aus meiner Sicht abgeraten, da
aus technischen Gründen die verwendeten Anführungszeichen (einfache und doppelte) und Backslashes nach dem abspeichern mit einem zusätzlichen Backslash versehen werden.

Dies betrifft dann den gesamten Inhalt der Datei style.css und nicht nur die geänderten Zeilen.

Durch diese angefügten Backslashes kann die Designdatei in weiten Teilen unbrauchbar werden.

Eine Maskierung der Anführungszeichen mit " oder die des Backslashes mit \ bringt auch keine Abhilfe, da die Maskierung wiederum nicht als solche erkannt wird und deshalb nicht als Anführungszeichen interpretiert wird. Wie gesagt: Es geht nur um diejenigen CSS Scripte, in denen Anführungszeichen und Backslashes enthalten sind und diese zwingend benötigt werden.

Bis auf Weiteres sollten Änderungen im Blogdesign also unterbleiben, wenn Anführungszeichen oder / und Backslashes enthalten sind. Diesen Umstand vor einer geplanten Änderung zu prüfen, macht, nach meiner Meinung, durchaus Sinn.

Lösungsvorschläge für dieses Problem sind jederzeit gerne willkommen!

edit 22.07.2011:
Der Fehler wurde behoben und die CSS Datei kann wieder wie gewohnt bearbeitet werde.
Trotzdem empfehle ich vor jeder Änderung, eine Sicherung der Designeinstellungen anzulegen.

 

04.04.2011 um 12:32 Uhr

Ansichtssache

Mit der Technik der "Cascading Style Sheets" werden mit einer relativ einfachen Vorgehensweise auch komplexe Webseiten ansprechend formatiert. Dies geschieht mit einer zentralen *.css Datei, die in der Startseite der Homepage eingebunden wird.

Schöne Sache! Kann aber manchmal auch ganz ordentlich in die Hose gehen. Was der Autor als seinen persönlichen guten Geschmack empfindet, kann ein Leser aus verschiedenen Gründen als geradezu "unlesbar" betrachten. Was mit dem einen Browser auf einem Monitor mit hoher Auflösung gut aussieht, kann mit einem anderen Browser bei geringerer Auflösung schon einen ganz anderen Eindruck hinterlassen. Ebenso sind exotische Schriftarten oft ein Handicap.

Mit einem einfachen Kniff lassen sich die Texte eines Blogs auch ohne die Wirkung der zentralen CSS-Steuerdatei anzeigen.

Mozilla-Firefox: In der Menüleiste des Browsers auf "Ansicht", "Webseiten-Stil" klicken und dann die Option "kein Stil" auswählen.
Zurück geht das Ganze wieder mit der Option "Standard-Stil".

Internet Explorer: Nicht ganz so einfach wie bei Firefox, aber dennoch möglich. Für den IE8/9 gibt es die kostenlosen Entwicklertools von Microsoft. Wurden diese installiert, gibt es auch dort eine Möglichkeit der Anzeige ohne CSS-Layout. Eine detaillierte Anleitung findet sich unter http://msdn.microsoft.com/de-de/library/cc817576.aspx.

Oft jedoch genügt auch eine einfache (temporäre) Anpassung der angezeigten Schriftgröße: Mit der Tastenkombination "Strg +" für vergrössern, bzw. "Strg -" für verkleinern kann der angezeigte Inhalt bezüglich der Schriftgrösse dem eigenen Geschmack angepasst werden. Die Standardeinstellung erhält man zurück durch die Tastenkombination "Strg 0" (Firefox), bzw. in der Menüleiste "Ansicht", "Zoom" und dann die Option "100%" auswählen(Internet Explorer).

24.11.2010 um 00:48 Uhr

Das Boxmodell, Berechnung von Breite und Höhe

Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Die Gesamtbreite eines Elements errechnet sich aus einer Addition

der Seite Breite des Elementinhalts (width),
des Seite Innenabstands (padding),
der Seite Rahmenstärke (border-width) und
des Seite Außenabstands (margin).

Dies gilt analog für die Seite Höhe (height) sowie generell für alle Seite Maßeinheiten; diese dürfen auch gemischt angewandt werden.

 

Beispiel:

Wird ein Element mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Innenabstand und Rahmen von je 20 Pixel Stärke auf allen Seiten definiert, beträgt die tatsächliche Breite letztendlich 280 Pixel (20 für border-left, 20 für padding-left, 200 für width, 20 für padding-right und 20 für border-right), die Höhe 180 Pixel (20 für border-top, 20 für padding-top, 100 für height, 20 für padding-bottom und 20 für border-bottom). Ein zusätzlich definierter Außenabstand müsste zu diesen Werten nochmals addiert werden.

20.11.2010 um 17:35 Uhr

Ist mein Blogigodesign geschützt?

Viele Blogianer sind mit den Standarddesignvorlagen von Blogigo nicht zufrieden und passen diese Vorlagen an ihren persönlichen Geschmack an, oder entwerfen gar neue individuelle Designs. Innerhalb der administrativen Oberfläche von Blogigo wird dies unter dem Menüpunkt "Gestaltung" und dann "Experte:CSS" bewerkstelligt. Es herrscht nun die Meinung vor, dass diese Designeinstellungen geschützt sind, das eigene Design also quasi unantastbar ist. Dies ist ein Irrglaube. Warum?

Blogigo benutzt zur Gestaltung des eigenen Blog´s die Technik mit Cascading Style Sheets (kurz: css), was man in Deutsch in etwa als "übergeordnete Stilvorlagen" übersetzen könnte. Der große Vorteil dieser Technik ist, dass durch das anlegen einer Stilvorlagendatei nicht jede Seite neu formatiert werden muss, sondern die Vorlage für alle Seiten des Blogs Gültigkeit haben.

Damit dies technisch auch funktioniert, muss auf der Startseite des Blogs ein Hinweis auf diese Stilvorlagendatei erfolgen. Öffnet man die Startseite des eigenen Blog´s in der Quelltextansicht findet sich dieser Verweis unter:

<link rel="stylesheet" type="text/css" media="screen" href="/style.css" />

Hier wird also klar definiert, wo sich die Stilvorlagendatei befindet. Diese Stilvorlagendatei "style.css" muss logischerweise öffentlich im Lesemodus zugänglich sein, denn sonst würden die Designelemente nicht wirken und der Blog würde ohne Formatierung erscheinen. Dies ist die normale Funktionsweise von Seiten, die auf Stilvorlagendateien basierende Designs verwenden. Unter Firefox lässt sich der Blog übrigens auch ohne die Formatierung durch die Stilvorlagendatei anzeigen:
Unter dem Menüpunkt "Ansicht", "Webseitenstil", einfach die Auswahl "kein Stil" auswählen.

Somit ist also klar, dass für jeden Blog die Stilvorlagendatei unter "http://www.blogigo.de/Blogname/style.css" zu finden und zu öffnen ist.

Wird diese Adresse in den Internetbrowser eingegeben, öffnet sich die Stilvorlagendatei und kann gelesen werden. Per copy and paste der Datei "style.css" in den Blogigo-CSS-Editor kann diese Stilvorlagendatei für den eigenen Blog übernommen werden. Es ist also jederzeit möglich, jegliches Blogdesign irgendeines Blog´s in seinen eigenen Blog zu übernehmen, oder als Vorlage zur eigenen Gestaltung zu nutzen.

Aufgrund der technischen Gegebenheiten ist es nicht möglich, ein individuelles Design vor einer Fremdverwendung zu schützen.

26.09.2009 um 18:35 Uhr

Aktuelles Projekt: 1-A-Kochblog Design

kassastra:

Liebster Aquarius,
könntest du denn für Peles und meinen "1-A-Kochblog" als oberversierter IT-Fuzzi so'n richtig schickes Design basteln???

Wir würden dir (fast) zu Füssen liegen, da wir mit Rezepten sortieren beschäftigt sind. Und ich habe auch nicht viel Ahnung von Design-Schnickschnack....

Würdest du??? *ganzliebhundedackelblick*

Link zum Blog: http://www.blogigo.de/1_A_Kochblog 

 

Aquarius antwortet:

Hier das CSS, als Vorlage diente das Blogigo Thema "Sub Lemon":

/*
Design 1-A-Kochblog
26. Septemer 2009
Version 1.0
Design Vorlage: Blogigo SubLemon
Modifications by Aquarius || http://www.blogigo.de/Stylesheet_Corner
*/
body{font-family: Arial, Helvetica, sans-serif;font-size: ::strFont_Size::px;line-height: 120%;background: url(http://www.blogigo.de/1_A_Kochblog/Makkaroni_01web.jpg) fixed;margin: 0;padding: 0;color: #FFC125;}
#rap{position: relative;width: 1024px;padding-right: 24px;}
#content{position: absolute;margin-left: 240px;width: 645px;overflow: hidden;top: 0px;voice-family: ""}"";voice-family: inherit;overflow: visible;top: 262px;background-color: #FFFFFF;color: #333333;opacity:0.6;filter:alpha(opacity=60);padding-left:15px;}
#menu{position: absolute;left: 40px;top: 262px;width: 184px;overflow: hidden;background-color: #FFFFFF;color: #333333;opacity:0.8;filter:alpha(opacity=80);font-size: 90%;padding-left: 15px;}
h1#header{width: 900px;margin-top: 0px;height: 260px;background: url(http://www.blogigo.de/1_A_Kochblog/headerweb.jpg) no-repeat 40px 0;text-align: right;
padding: 160px 0 0 0;}
h1#header a{font-size: 45px;text-decoration: none;padding-right: 15px;}
.credit{clear: both;}
#menu ul{padding: 0;margin: 0;}
#menu ul li{list-style: none;margin: 30px 0;font-weight: bold;}
#menu ul ul li{list-style: none;border: none;background: transparent;margin: 0;text-transform: none;letter-spacing:normal;font-weight: normal;}
h1 a:link, h1 a:visited{color: #cfa62e;text-decoration: none;background-color:#8B3626;}
h2{color: #f8e23f;border-bottom: 3px #f8e23f double;font-weight: normal;font-size: 120%;margin: 50px 0 25px 0;}
h3 a:link, h3 a:visited{font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 140%;font-weight: normal;color: #000000;text-decoration: none;}
h3 a:hover, h3 a:active{color: rgb(207,166,46);text-decoration: underline;}
.post{margin: 0 20px;}
.post .meta{border-bottom: 1px #e6e6e6 solid;padding-bottom: 5px;margin-bottom: 20px;}
.post-categories li{display: inline;margin-left: 4px;padding: 0;}
.post-categories{display: inline;margin: 0;padding: 0;}
a:link{color: #cfa62e;}
a:hover, a:active, a:visited:hover{color: black;}
a:visited{color: #cfa62e;text-decoration: none;}
#calendar table{border: 1px solid rgb(249,242,187);border-width: 0 2px 2px 1px;font-weight: normal;letter-spacing: normal;background: #ffffc8;text-align: center;width: 100%;}
#calendar table caption{border: 1px solid rgb(249,242,187);border-width: 1px 2px 0 1px;background: #ffffc8;height: 16px;padding: 6px 0;width: 100%;}
.credit{text-align: center;width: 821px;clear: both;margin: 0;padding: 20px 0 5px 0;font-size: 10px;color: rgb(200,200,200);}
#commentlist{margin: 0;padding: 0;}
#commentlist li{margin: 40px 20px;}
input, textarea{border: 3px double #afafaf;display: block;}
#content input, #content textarea{width: 400px;}
#calendar, #polltable{font-size: 70%;}

18.09.2009 um 15:21 Uhr

Lange Ladezeiten verhindern

Die Einbettung von Fotos und  Videos ist schwer in Mode gekommen bei vielen Blogigo Benutzern.

Eigentlich eine sehr schöne Sache.

Ich sage deshalb „eigentlich“, weil ein kleiner Haken dabei ist, der vielleicht beachtet werden sollte. Die Einbettung dieser Objekte wird immer über einen direkten Linkaufruf realisiert. Das bedeutet, dass beim Aufruf der Blogigo Seite immer auf die verlinkten, externen Ressourcen zugegriffen werden muss und zum teil erhebliche Ladezeiten, abhängig von Verfügbarkeit und Performance der externen Ressource entstehen. Wurde dann noch zusätzlich die Konfiguration der  Anzahl der anzuzeigenden Beiträge pro Seite auf einen hohen Wert gesetzt und die anzuzeigenden Beiträge bestehen hauptsächlich aus Bildern und/oder Videos, kann es passieren, dass die Blogigo Seite sehr lange lädt. Manche Browser brechen dann mit einem TimeOut Problem ab. lange Ladezeiten sind unschön und tragen nicht zur guten Laune bei.

Umgehen lässt sich dieser Effekt mit diesen Tipps:

- keine direkte Einbettung in den Beitrag, sondern via Linkeintrag
- Verlinkung über ein kleines Thumbnail-Bild des Fotos/Videos
- Benutzen des Blogigo internen Speicherplatzes
- Optimierung der Fotos auf Auflösung und Grösse. (Skalieren ändert die Grösse nicht!)
- Reduzieren der Anzahl der gezeigten Einträge pro Seite

Mit diesen Tipps lassen sich lange Ladezeiten nahezu umgehen.

19.08.2009 um 12:07 Uhr

Wirrungen im BODY

Es erreichte mich eine Frage zum Thema BODY. Ich nehme diese Frage zum Anlass für einen neuen Eintrag:

Grenzgänger schrieb:
ich hab auch ne frage: ich hab vor ein paar tagen angefangen, auch ein bisschen an meinem blogdesign herumzubasteln. ...vielleicht kommst du einfach mal kurz mit...schau, das bild im header ist irgendwie verrutscht und erscheint oben doppelt. ich bekomm das einfach nicht wieder weg. kann man da was machen?


Der vermeintliche Fehler "das bild im header ist irgendwie verrutscht und erscheint oben doppelt." ist eigentlich gar keiner.
Der Effekt des "doppelten Bildes" rührt daher, dass für die Section BODY und HTML die gleichen Einstellungen gelten.

Im CSS stellt sich dies folgendermassen dar:

body, html {
margin: 0px;
font-size: px;
font-family: courier new;
background: #FFFFFF url(http://Bild.jpg)  no-repeat; top right;
color: #222635;
}

Wie man hier sieht gelten für BODY und HTML die gleichen Einstellungen.

Um zu verdeutlichen, was ich meine füge ich nun eine MARGIN Einstellung ein, um die Ansicht Bereiche BODY und HTML  getrennt zu sehen:


body, html {
margin: 50px 50px 50px 50px;
background:#000000 url(http://Bild.jpg) no-repeat;
text-align:left;
font-size: ::strFont_Size::px;
line-height: 100%;
}

Wenn man sich nun das Design ansieht, wird klar was da passiert ist. Durch die Einstellung der Bildwiederholung auf "no-repeat" ist das Header Bild scheinbar durch die Überlagerung doppelt. Hier ist allerdings zu beachten, dass Mozilla Firefox und Microsoft IE diese Einstellungen differenziert interpretieren. IE übergeht die Einstellung und "überlagert" 1:1, wohingegen Firefox einen Standard Margin setzt. Dadurch kommt dieser Effekt zustande.

Im Vorliegenden Beispiel kann eine einfache Lösung gefunden werden:
Da im vorliegenden Design, die Funktion BACKROUND im Bereich HTML  für ein Bild als Pseudo-Header missbraucht wird, genügt es, das CSS dahingegehnd zu modifizieren, dass die BACKROUND Funktion nur für den Bereich BODY gültig ist:


body {
margin: 0px;
font-size: px;
font-family: courier new;
background: #FFFFFF url(http://Bild.jpg)  no-repeat;
color: #222635;
}

Korrekt wäre eine klare Definiton von #HEADER, in der dann das Bild eingefügt wird, z.B. so:

#header {
background: url(http://Bild.jpg) no-repeat;
background-position: 30px 8px;
width: 100%;
background-color: #E3E3F6;
padding: 30px 0 38px 0;
margin: 5px 0 0 0;
border-top: 1px solid #333366;
border-bottom: 1px solid #333366;
}

Natürlich muss dann auch das Bild aus der BACKROUND Anweisung im BODY entfernt werden.


Natürlich muss dann auch das Bild aus der BACKROUND Anweisung im BODY entfernt werden. Zu beachten ist  auch, dass die globale Farbangabe "color: #222635;" für alle nicht mit COLOR definierten HTML Bereiche dann explizit angegeben werden muss. In unserem Beispiel muss also für den Bereich H1 die Farbe angegeben werden:

h1 {
position: relative;
top: 0px;
width: 500px;
height: 200px;
margin: 100px 0 0 160px;
background: transparent;
color: #222635;
padding: 0;
z-index: 2;
text-align: right;
}
Wenn so vorgegangen wird, wäre folgendes möglich:

1. Definiton (Positon, Ränder, Farbe, Bild 1) von #HEADER
2. Definition (Farbe, Bild 2,Wiederholung, Position) von BODY für die gesamte Seite.

So wären verschiedene Bilder für verschiedene Bereiche möglich. Dieses Beispiel lässt sich im Prinzip auch auf andere Bereiche anwenden, wie sinnvollerweise z.B. für den Bereich MENUE und CONTENT.

 

25.06.2009 um 10:27 Uhr

Workshop: Die Bereiche

Es können immer nur die Elemente im Format angepasst werden, die in der html Datei auch zur Verfügung gestellt werden.
Steht das entsprechende Element in der html Datei nicht zur Verfügung, kann es auch nicht angepasst werden.
Sollen Elemente, die zur Verfügung stehen, nicht angezeigt werden, so ist das eigentlich auch nicht möglich.
Man kann sich natürlich mit dem Trick behelfen, dass dies "unerwünschten" Elemete einfach in einer bestimmetn Art und Weise
formatiert werden, die für unser Auge "unsichtbar" ist.

Bei blogigo sind die wichtigen Bereiche:

Body: der komplette Hintergrund der Seite (bzw. die Grundformatierung der gesamten Seite), über alles betrachtet. Der Body stellt also quasi die "Mauer" und die "Tapete" dar.
Rap: Gesamtbreite der Seite
Header: der Seitenkopf oder die Titelleiste, also die "Bordüre"
Content: Der eigentliche Eintragsbereich für die Beiträge.
Menu: Alles was in der "Seitenleiste" angezeigt wird, also z.B. "Navigation", "Letze Einträge", "Kalender", etc.

Grundlagen: http://www.blogigo.de/Stylesheet_Corner/Workshop-Grundlagen/4/
CSS-Bereiche: http://www.blogigo.de/Stylesheet_Corner/CSS-Bereiche-bei-blogigo/3/

25.06.2009 um 08:59 Uhr

Workshop: Grundlagen

Ziel des Workshops soll sein, selbstständig Designs für blogigo zu erstellen, oder
Designvorlagen entsprechend den eigenen Wünschen anzupassen.

Dies geschieht mit einem sogenannten Cascading Style Sheet, kurz CSS.
Details: http://www.blogigo.de/Stylesheet_Corner/Sinn-und-Zweck-von-Stylesheets/1/

Alle Aktionen beziehen sich immer auf das CSS, in blogigo zu finden unter
"Meine Weblogs" --> "Weblogname" --> "Gestaltung" --> "Experte:CSS"
Wenn am CSS gearbeitet wird, sind die Einstellungen für "Designvorlage",
"Schriftbild" und "Farben" hinfällig.
Anders gesagt: Das Erscheinungsbild des
Weblogs bezieht sich immer auf die Inhalte des CSS.

Trotzdem können die Konfigurationsmöglichkeiten für "Designvorlage",
"Schriftbild" und "Farben" hilfreich verwendet werden.

Zuerst suchst man sich eine Designvorlage aus, die den eignen Vorstellungen
am nächsten kommen. Danach ändert man diese Vorlage mit den Optionen für
"Schriftbild" und "Farben" entsprechend ab.

Es wird hierdurch ein angepasstes CSS erzeugt, das als Vorlage verwendet werden kann.
Dies ist oftmals einfacher, als von Grund auf ein neues CSS zu schreiben.

Die im Workshop beschriebenen Hilfen können sowohl für das ändern bestehender Designs verwendet
werden, als auch für das erstellen völlig neuer Designs.

In diesem Worksop wird auschliesslich über CSS für blogigo geschrieben, da blogigo
einige Besonderheiten aufweist und die Vielseitigkeit von CSS stark einschränkt.
Deshalb werden nur die Themen behandelt, die bei blogigo Designs angewandt werden können.

20.06.2009 um 15:32 Uhr

CSS-Bereiche bei blogigo

Wichtige CSS-Bereiche

Element CSS-Name(n) Erläuterung
1 body, html Gesamte Seite bzw. den Seitenhintergrund
2 h1, #header Titelleiste
3 #content Inhaltsbereich bzw. Hintergrund des Inhaltsbereichs
4 #menu Menü/Seitenleiste
5 h1 a, #header a Schrift des Titels
6 h2 Datum
7 .post Eintrag bzw. Eintragshintergrund
8 h3, .storytitle Titel des Eintrags (Schriftart mit h3 a bzw. .storytitle a formatieren)
9 .meta Autor
10 .storycontent Eintragstext
11 .feedback Kommentar- und Bearbeiten-Links
12 #menu ul, #menu ul li, #menu ul ul, #menu ul ul li Menü-/Seitenleistenbereiche: #menu ul formatiert i.d.R. den Titel der seitlichen Bereiche. Jeder der Bereiche besitzt außerdem eine ID mit der man den jeweiligen Bereich einzeln formatieren kann (z.B. nur den Bereich für die Navigation).
n/a a Links
n/a textarea Mehrzeilige Eingabefelder
n/a input Einzeilige Eingabefelder und Buttons

Wichtige CSS-Formatierungsbefehle

color: #123456; Schriftfarbe.
background-color: #123456; Hintergrundfarbe.
font-family: Arial; Schriftart.
font-size: 20px; Schriftgröße.
text-align: right; Textausrichtung: left, right, center oder justify (Blocksatz).
margin: 1px 3px 5px 0px; Außenabstand zum nächsten Element: oben, rechts, unten, links.
padding: 2px 0px 0px 5px; Innenabstand zum Elementrand: oben, rechts, unten, links.
border: 1px solid #123456; Rahmen: Dicke, Typ (z.B. solid, dotted, dashed), Farbe.
border-top: 2px dotted #123456; Wie border, aber Rahmen nur oben, nicht umgebend. Außerdem möglich: border-right, border-bottom, border-left.
background-image: url(URI); Hintergrundbild, wobei URI durch die Adresse des zu verwendenden Bildes ersetzt wird.
background-repeat: repeat y; Wiederholung des Hintergrundbildes: repeat (Kacheln), repeat-x (nur horizontal), repeat-y (nur vertikal) oder no-repeat (nicht wiederholen).

Informationen über diese und viele weitere CSS-Eigenschaften findest Du bei selfhtml.

20.06.2009 um 14:18 Uhr

Stylesheet-Sprachen, Versionen und Informationen

Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Für CSS gibt es genau wie für HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kümmert und sich dabei dem Regelwerk zur Entstehung der so genannten Recommendations (Empfehlungen) des W3-Konsortiums unterzieht.

Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und 1999 nochmals überarbeitet. 1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an den Versionen 2.1 und 3.0 parallel gearbeitet. Bei CSS 2.1 handelt es sich um eine korrigierte und geringfügig ergänzte Fassung der zweiten Ausgabe, deren vollständige Bezeichnung CSS Level 2 Revision 1 lautet. Sie ersetzt CSS 2, wird voraussichtlich im Laufe des Jahres 2007 den Status einer Empfehlung erlangen und in der vorliegenden Dokumentation bereits berücksichtigt. Folgende Symbole werden zur Auszeichnung der Sprachversionen verwendet:

Symbol Bedeutung
CSS 1.0 Bestandteil der ersten CSS-Version.
CSS 2.0 Bestandteil der zweiten CSS-Version.
CSS 2.1 Bestandteil der aktualisierten zweiten CSS-Version.

Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist diejenige Sprache, die speziell als Ergänzung für HTML geschaffen wurde und deshalb für HTML-basierte Web-Seiten optimiert ist. CSS steht für "Cascading Style Sheets". Andere Style-Sprachen sind die "Document Style Semantics and Specification Language" (DSSSL), die für SGML konzipiert wurde und ebenso wie SGML etwas "sophisticated" ist und die mittlerweile bekanntere "Extensible Stylesheet Language" (XSL), die als Formatierungssprache für XML entwickelt wurde (zu XSL siehe auch Kapitel Darstellung von XML-Daten).

Im Web können Sie die bisherige Entwicklung und die Weiterentwicklung von CSS auf den Seiten des W3-Konsortiums verfolgen:

englischsprachige Seite Einstiegsseite zu Stylesheets beim W3-Konsortium
Über diese Seite gelangen Sie zu Informationen über CSS, XSL und DSSSL sowie über Software-Projekte rund um Style-Unterstützung.

englischsprachige Seite Einstiegsseite zu CSS beim W3-Konsortium
Über diese Seite gelangen Sie direkt zu aktuellen Nachrichten und Informationen über CSS.

englischsprachige Seite CSS2-Spezifikation beim W3-Konsortium
Über diese Seite gelangen Sie direkt zur aktuellen CSS-Spezifikation.

englischsprachige Seite CSS 2.1-Entwurf beim W3-Konsortium
Über diese Seite gelangen Sie zum Arbeitsentwurf der künftigen CSS-Spezifikation.

englischsprachige Seite CSS3 - aktueller Entwicklungsstand beim W3-Konsortium
Über diese Seite gelangen Sie zu Arbeitsentwürfen der künftigen CSS-Spezifikation.

20.06.2009 um 14:17 Uhr

Sinn und Zweck von Stylesheets

Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.

Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente im Anzeigefenster des WWW-Browsers positionieren und Abstände definieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seiten-Layout und Textflusskontrolle bereit. Für die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Eigenschaften, um die künstliche Sprachausgabe zu steuern. Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors.

Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise in einer externen Datei zentrale Definitionen zum Aussehen eines Elements notieren und dieses Stylesheet in viele HTML-Seiten parallel einbinden. Alle Elemente der entsprechenden HTML-Dateien erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.

Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.