CSS wird nicht korrekt angezeigt bei blogger.com

[JanH78]

Hallo miteinander,

bei meinem Blog auf blogger.com gibt es ein kleines styling Problem. Ich nutze die Vorlage Simple mit eigenen Farbschema. Das bisschen CSS, um das es hier geht, habe ich mir nur zusammengegoogelt. Im html habe ich von Hand kaum Veränderungen gemacht, diese wurden auch wieder rückgangig gemacht. Man kann von einer unveränderteten Vorlage ausgehen. Im Vorlagendesigner kann man vordefinierte Änderungen machen, die wohl ins html eingepflegt werden. Benutzerdefiniertes CSS kann man da auch hinzufügen. Ich vermute, dass CSS eine Höhere Priorität hat und vom Browser berücksichtigt wird. Wie genau habe ich keine Ahnung. Ich vermute, dass es zu Komplikationen kommt. Ich würde gern das CSS nutzen.

Die Link-Eigenschaften für die normale Textgröße kann man nur global im Vorlagendesigner einstellen. Da ich nur die Links im Blogpost permanent unterstrichen haben wollte, habe ich eine klasse .linkfarben a { text-decoration:underline; }(hatte ich gefunden, wo ein User Farben ändern wollte) definiert, die ich im Blogpost in der html-Ansicht mit einem div-container aufrufe. Die Überschriften h1, h2, h3 habe ich mit text-shadow: 0px 2px 3px #888; color: #863; definiert. Die Schatten funktionieren, nur die Textfarbe ist da das Problem.

Nun die Fehlerliste: In der Einzelansicht erscheint die Blogüberschrift h1 im wie vom Vorlagendesigner eingestellten dunkelbraun. Als Bemerkung: Sie ist dort standardmässig ein Link.

In der Gesamtansicht ist die Blogpostüberschrift h2 im für Links definierten weinrot. Als Bemerkung: Sie ist dort auch standardmässig ein Link.

Die Überschrift h3 in der Sidebar funktioniert, da sie standardmässig kein Link ist.

Am Ende des Kommentarfelds sind die Links "abmelden" und "per E-Mail abonnieren" unterstrichen, was nicht eingestellt oder gewünscht ist. Auch trotz fehlenden Div-Container im Blogpost ist dieser Fehler vorhanden.

Hier das CSS:

.Header h1
{
text-align: center;
color: #863;
text-shadow: 0px 2px 3px #888;
}
::-moz-selection
{
background: #e6c4ac;
color: #8b4513;
}
::selection
{
background: #e6c4ac;
color: #8b4513;
}
h3
{
text-shadow: 0px 2px 3px #888;
color: #863;
}
h2
{
text-shadow: 0px 2px 3px #888;
color: #863;
}
.linkfarben a
{
text-decoration: underline;
}
.post-footer
{
border-radius: 3px;
}
blockquote:before
{
content: open-quote; font-family: 'Times New Roman'; font-size: 3em;
}
blockquote
{
quotes: '\201C';
border-radius: 3px;
font-family:Times New Roman;
font-style:italic;
color:#5a2906;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
padding: 15px;
background-color: #e6c4ac;
}
.post
{
text-align: justify; margin-right: 23px;
}
body
{
background-attachment: fixed;
background-color: #8b4513;
background-image: -moz-linear-gradient(#8b4513, #c57a45);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8b4513), to(#c57a45));
background-image: -webkit-linear-gradient(#8b4513, #c57a45);
background-image: -o-linear-gradient(#8b4513, #c57a45);
}

Das html liegt aus Platzgründen bei Pastebin: neuer Link
Das Blog ist Jans [piratiges] Blog

Die Fehler tauchen im Firefox, Chrome und Opera gleichermaßen auf. Leider habe ich bis auf ein bisschen Myspace und Tumblr keine Erfahrung mit html/css. Den Fehler habe ich trotz Suchen und Ausprobieren bisher nicht gefunden.

Nachtrag 1:
Da der Text hier seine Formatierung verloren hat, habe ich erstmal ein Redesign am Blog(Simple Vorlage neu laden) versucht und es dadurch noch schlimmer gemacht. Das Css habe ich wieder original so eingefügt und die Farben im Vorlagendesigner verändert, doch jetzt hat das Blog noch mehr Bugs. Oh man ist mir das jetzt peinlich. Den Text hier werde ich noch heute Nacht nochmals formatiern, aber erstmal gucke ich nach dem Blog. Sorry für die Unannehmlichkeiten.

Nachtrag 2:
Durch das Neuinstallieren der Vorlage sind die Fehler geblieben und ein ein weiterer hinzugekommen: Der Hintergrund, der einen Farbverlauf hat ist nicht mehr fixed und fängt unten im Blog an und ist scrollbar, obwohl er mit background-attachment: fixed; definiert ist, was davor ja auch funktioniert hat. Die Vorlage Simple ist bis auf das CSS und die neuen Farebn jedenfalls Original.

Danke fürs Lesen und eventuelle Helfen. Hoffentlich fängt euer Montag besser an, als meiner.

 

[Wustersoss]

Hallo,

als Erstes mal der Link
Editing CSS in the Template Designer - Blogger Help
Dort wird einem erklärt wie man das bisschen CSS, um das es hier geht wieder glatt bügelt.

Aus deiner Fehlerbeschreibung werde ich nicht schlau. Das, was du als CSS gepostet hast, stimmt nicht mit dem Quellcode überein. Es gibt dort nämlich 2 Styletags in deinem Blog. Der eine ist vom Template

<style id='page-skin-1' type='text/css'><!-- /* ----------------------------------------------- Blogger Template Style Name:     Simple Designer: Josh Peterson URL:      www.noaesthetic.com ----------------------------------------------- */

und der andere folgt direkt darauf

<style id='template-skin-1' type='text/css'><!-- body { min-width: 930px; } .content-outer, .content-fauxcolumn-outer, .region-inner { min-width: 930px; max-width: 930px; _width: 930px; } .main-inner .columns { padding-left: 0px; padding-right: 260px; } .main-inner .fauxcolumn-center-outer { left: 0px; right: 260px; /* IE6 does not respect left and right together */ _width: expression(this.parentNode.offsetWidth - parseInt("0px") - parseInt("260px") + 'px'); } .main-inner .fauxcolumn-left-outer { width: 0px; } .main-inner .fauxcolumn-right-outer { width: 260px; } .main-inner .column-left-outer { width: 0px; right: 100%; margin-left: -0px; } .main-inner .column-right-outer { width: 260px; margin-right: -260px; } #layout { min-width: 0; } #layout .content-outer { min-width: 0; width: 800px; } #layout .region-inner { min-width: 0; width: auto; } --></style>

vielleicht repariert du erst mal das.

Du kannst jedes HTML-Tag aus der Vorlage ansprechen und verändern, dafür gibt es unzählige Klassen und auch IDs, damit es einem so einfach wie möglich gemacht wird.

Für CSS-Attribute gibt es Anleitungen. Man sollte sich damit befassen und lernen wie man einen HTML-Tag mit CSS verändert, danach umsetzen und wenn es dann nicht funktioniert wie beschrieben, das Forum bemühen.
Aber so wie du vorgehst machst du dir keine Freunde, weil jeder der dir helfen will, davon ausgeht, dass du nicht verstehst was da umgesetzt werden soll und es am Ende anders machst. Dafür Zeit zu investieren macht dann keinen Spass.

In deinem Fall bedeutet es, dass es ohne ein Mindestmaß an Theoriekenntnissen nicht viel gehen wird.

 

[JanH78]

Hallo Wustersoss,

zu erst einmal Danke, dass du mir trotzdem geantwortet hast.
Den Link habe ich gelesen und das body gegen .body-fauxcolumn-outer getauscht. .body-fauxcolumn-outer div {
background: none;
} habe ich hinzugefügt. Beides ohne sichtbaren Effekt.

Dass style id='page-skin-1' und style id='template-skin-1' beide im Quelltext vorhanden sind, darauf habe ich keinen Einfluss. Die Elemente habe ich nicht per Strg+f (page /skin /id) im html_Editor von Blogger.com gefunden. Bei 3 anderen Blogger.com-Blogs habe ich das auch im Quelltext gesehen. Scheint wohl standardmässig so zu sein. Wie gesagt, war alles weitestgehend original. Nur das css habe ich eingefügt. Ich vermute, dass der Fehler bei Blogger.com liegt. den trotz entfernen der .linkfarben-Klasse werden die Links unter dem Kommentarfeld immer noch unterstrichen angezeigt. Im html-Editor habe ich nur einmal underline gefunden und das war für a:hover. Ich werde das Template halt nochmal neu aufsetzen.

Dass ich das bisschen css mir nur zusammengegoogelt habe, war etwas unglücklich ausgedrückt. Ich habe nicht nur einzelne Bausteine fertig eingefügt, sondern sie für meine Wünsche verändert. Ich glaube schon, dass ich prinzipiell verstanden habe, worum es geht. Eine Liste, die aussagt, welche Elemente im Blog mit css wie angesteuert werden habe ich nicht gefunden. Da hätte ich mir viel Ausprobieren gespart. Ich bin eher ein Mensch, der zielgerichtet Probleme und Aufgabenstellungen abarbeitet. Das Lernen von Sachen, die ich nicht brauche, liegt mir nicht. Um es Abzukürzen, ich habe den Farbverlauf beim Hintergrund, die Klasse .linkfarben mit den div-Containern und die Schatten für h1,2,3 entfernt. Die unterstrichenen Links kann ich auch im Blogpost einfügen. Den Rest gibts halt nicht.

Eigentlich bin ich ein Freund von genauen, aufschlussreichen Fehlermeldungen und dachte, das hätte ich hier auch umgesetzt. Die Fehler konnte man sich ja auch "live im Blog" anschauen. Was war denn unklar? Was sollte eine gute Fehlermeldung beinhalten? Ich frage hier, da ich grundsätzlich gerne Fehlermeldungen an Entwickler schicke und würde mich gern verbessern.

 

[Wustersoss]

So habe noch mal den ganzen Quellcode nach dem Wort abmelden durchsucht, kann aber nicht gefunden werden, genauso wie per E-Mail abonieren bei mir nicht erscheint.(Javascript an). Eventuell ist das systembedingt und nur du siehst es als Admin. Ich als User seh das jedenfalls nicht. Ansonsten lassen sich naürlich alle Elemente per Javascript ansprechen und auch im Stil verändern.

Wahrscheinlich brauchst dir also darum keine Sorgen zu machen. Designfehler scheint es ja sonst nicht zu geben.
Interessant finde ich aber das Blogger.com und Blogspot.com, die ja von Google betrieben werden nicht mal den Validatorcheck schaffen.