CSS, IE, Opera und andere Kleinigkeiten

Biggi · Post by **Biggi** » Tue Oct 03, 2006 9:40 pm

Hallo zusammen,

ich bin neu in dieser Runde und befasse mich eigentlich zum ersten Mal mit einem solchen Blogsystem. Bisher hatte ich ein kleines, nettes News-Skript genutzt und einfach per include in meine HTML-Seiten eingebunden. Da sich in letzter Zeit Kommentar-Spam häufte und das tägliche Löschen wirklich keinen Spaß mehr gemacht hat, hab ich mich im Netz über die verschiedenen Blogsysteme schlau gemacht und bin hier bei Euch hängen geblieben

Nun hatte ich ein paar Tage Urlaub und hab mich ziemlich mühsam nach dem Motto "Versuch macht klu(ch)g" durch die Anpassung eines Templates an mein Design gehangelt. Die meisten Dinge habe ich auch bereits durch die Suchfunktion hier im Forum bewerkstelligen können.

Aber jetzt geht mir langsam die Puste aus. Sprich: ich weiß nicht mehr weiter. Ein paar Kleinigkeiten möchte ich noch anpassen, weiß aber nicht, wie das funktioniert. Deshalb hoffe ich auf Eure Hilfe.

Der wichtigste Punkt, der erheblich stört ist folgender:
ich habe per HTML-Nugget meine Navigationsleiste der übrigen Seiten in das Template eingebunden. Die Navigationsleiste hat eine eigene CSS-Datei, damit die Buttons einen Hintergrund haben, der beim Mouseover heller oder dunkler wird.

Nun wird mir im IE der Hintergrund der Buttons an verschiedenen Stellen ins Logo gedrückt. Siehe hier:

Wenn man auf Archive (Juli) oder beim oberen Eintrag auf Kommentare klickt, erscheinen im Logo noch mehr von den Hintergrundbildern der Buttons und werden mit Text gefüllt

Hier übrigens die URL:
http://www.bildmomente.de/carpediem/

Da ich mich mit CSS nicht wirklich gut auskenne und es wie gesagt nur über trial & error ändern kann, hab ich keinen Schimmer, wie diese Zerstörung des Logos entsteht und bitte dafür um einen Rat.

Außerdem würde ich gerne die Zeile unterhalb des Eintrags, die "Geschrieben von... um ..." direkt unterhalb des Eintrag-Titels haben. Kombiniert mit dem Datum des Tages. Also von unterhalb des Eintrags über den Eintrag. Und beide Angaben, also Titel und Autor-Angaben sollten dann gemeinsam auf dem Hintergrundbild, das jetzt hinter dem Titel liegt, zu sehen sein. Ist das machbar?

Was mich noch erheblich stört, ist die Tatsache, daß die Kommentare so aufgelistet sind, daß zuerst der Kommentartext erscheint und darunter der Name und die weiteren Daten des Autors. Ich hätte es gern anders herum. Erst der Autor, dann der Text. Außerdem möchte ich die Kommentare gerne optisch besser voneinander trennen. Am liebsten so, wie es in meinem Gästebuch der Fall ist, das Ihr unter dem Menüpunkt "Kontakt" finden könnt. Jeder Kommentar in einem eigenen Rahmen.

Wenn ich diese Punkte noch anpassen könnte, wäre ich wirklich froh. Ansonsten ist dieses System wirklich klasse. Die Möglichkeiten, die sich hier über Plugins und Verwaltung bieten, sind für mich unschlagbar und kein Vergleich zu der ziemlich unkomfortablen Lösung, die ich vorher mit meinem Newsskript hatte. Deshalb ein dickes Dankeschön für dieses tolle kostenlose System!

Viele Grüße, Biggi

stm999999999 · Post by **stm999999999** » Tue Oct 03, 2006 10:08 pm

Mit dem CSS kenne ich mich nicht gut genug aus, aber gucke Dir das mal in Opera an, da sieht das noch eigenartiger aus.

Wobei Deine Homepage und auch http://www.bildmomente.de/carpediem.php im IE und auch Opera wunderbar aussieht. Eigenartig.

Zum Rest:

Kennst Du Dich ein wenig mit HTML/CSS aus?

Egal, wirf mal einen Blick in die tpl-Dateien im Ordner Deines gewählten Templates:

index.tpl: da kannst Du vielleicht direkt den HTML-Code Deines Kopfbereiches einbauen.

entry.tpl: Hier kannst Du die Stelle fürs Datum etc. einfach verschieben.

comments.tpl: hier kannst Du den Kommentartext hinter die Autor-Angaben verschieben.

Allgemein, was zum Thema templates und ihr Auf- und Umbau wurde gerade hier gepostet:

http://www.s9y.org/forums/viewtopic.php ... highlight=

stm999999999 · Post by **stm999999999** » Tue Oct 03, 2006 10:08 pm

Mit dem CSS kenne ich mich nicht gut genug aus, aber gucke Dir das mal in Opera an, da sieht das noch eigenartiger aus.

Wobei Deine Homepage und auch http://www.bildmomente.de/carpediem.php im IE und auch Opera wunderbar aussieht. Eigenartig.

Zum Rest:

Kennst Du Dich ein wenig mit HTML/CSS aus?

Egal, wirf mal einen Blick in die tpl-Dateien im Ordner Deines gewählten Templates:

index.tpl: da kannst Du vielleicht direkt den HTML-Code Deines Kopfbereiches einbauen.

entry.tpl: Hier kannst Du die Stelle fürs Datum etc. einfach verschieben.

comments.tpl: hier kannst Du den Kommentartext hinter die Autor-Angaben verschieben.

Allgemein, was zum Thema templates und ihr Auf- und Umbau wurde gerade hier gepostet:

http://www.s9y.org/forums/viewtopic.php ... highlight=

Biggi · Post by **Biggi** » Tue Oct 03, 2006 10:23 pm

Hallo Stephan,

danke für Deine Hinweise. Daß die übrigen Seiten in allen Browsern ziemlich gut aussehen, liegt daran, daß ich die Seiten mit einem recht guten Wyswig-Editor gestalte, der mir im Hintergrund den Quelltext erstellt. Meine eigenen HTML-Kenntnisse sind nicht besonders gut, weil ich eben meist graphisch arbeite. Natürlich kann ich inzwischen so einiges anpassen, aber ich würde mir nicht zutrauen, eine Webseite von Hand zu schreiben

Sobald ich aber auf solche Anpassungsgeschichten stoße, hangele ich mich so weit ich kann, schon irgendwie durch und hab dabei auch eine ziemliche Geduld, aber hier komme ich nun eben einfach nicht weiter.

Die von Dir genanten *.tpl-Dateien habe ich mir bereits angesehen, benötige in diesen Fällen aber eine ganz konkrete Anweisung, weil ich mir inzwischen durch meine eigenen Verschiebereien schon einiges zerschossen hatte. Deshalb wäre ich froh, wenn mich hier wirklich jemand für die angesprochenen Punkte an die Hand nehmen könnte

Trotzdem vielen Dank!

Gruß, Biggi

stm999999999 · Post by **stm999999999** » Tue Oct 03, 2006 10:35 pm

dann fangen wir mal damit an, daß Du uns verrätst, welches Template Du nutzt.

Biggi · Post by **Biggi** » Tue Oct 03, 2006 10:39 pm

Weia... Hab ich das vergessen zu erwähnen?

Also: es erscheint bei mir im Verzeichnis als "Competition", aber eigentlich heißt es wohl "Coffee Cup". Schon diese zwei Bezeichnungen haben mich anfangs verwirrt

Biggi · Post by **Biggi** » Fri Oct 06, 2006 8:24 pm

Ich bin inzwischen nach vielen weiteren Versuchen etwas weiter gekommen. Habe mir auch den Opera runtergeladen und war geschockt über das, was ich gesehen habe

Inzwischen habe ich keine von diesen dubiosen Spiegelungen mehr im Logo.

Im IE und im Firefox sieht das Template relativ gut aus, obwohl ich im Firefox über dem Logo noch immer einen Rand habe, den ich mir nicht erklären kann.

Was mir aber am meisten Kopfzerbrechen macht, ist die Tatsache, daß die Menüleiste im Opera nicht unter dem Logo sitzt, sondern am Boden der Seite.

Ich bitte Euch deshalb nochmal ganz herzlich um Eure Hilfe, da ich alleine nicht mehr weiter komme und jetzt am Wochenende Zeit habe, mich wieder darum zu kümmern.

Auch zu den anderen oben erwähnten Punkten habe ich noch keine Lösung.

Ich würde mich riesig freuen, wenn sich jemand die Zeit nehmen würde, der sich mit CSS und den weiteren Anpassungen, die nötig sind, auskennt, denn ich würde gerne meine anderen alten Einträge einfügen und endlich aktuell weiter schreiben

Danke!

Grüße, Biggi

Post by **yellowled** » Fri Oct 06, 2006 9:11 pm

Biggi wrote:Im IE und im Firefox sieht das Template relativ gut aus, obwohl ich im Firefox über dem Logo noch immer einen Rand habe, den ich mir nicht erklären kann.

Code: Select all

#serendipity_banner {
margin-top : auto; 
margin-left : auto; 
margin-right : auto; 
margin-bottom : auto; 
[...]

.serendipity_banner ist der Container, dem Dein Logo als Hintergrundbild zugewiesen ist. Zumindest den margin-top müsstest Du also vermutlich auf 0 setzen, eventuell auch den margin-top für body.

Biggi wrote:Was mir aber am meisten Kopfzerbrechen macht, ist die Tatsache, daß die Menüleiste im Opera nicht unter dem Logo sitzt, sondern am Boden der Seite.

Stimmt. Wobei mich das nicht so sehr wundert, denn 1. sitzt der Code für diese Menüleiste im head des HTML-Codes (da gehört er nicht hin) und 2. sieht der Code irgendwie krank aus (was wahrscheinlich daran liegt, dass er in eine Tabelle verpackt ist, die ich auf einen kurzen Blick nicht recht sortiert bekommen habe).

Irgendwie scheinst Du mir den Code für die Menüleiste nicht wirklich per HTML-Nugget eingebunden zu haben, denn dann würde er in der Seitenleiste sitzen. Überprüfe bitte noch einmal, wie die Menüleiste eingebunden wurde - irgendwas scheint da kolossal schief gelaufen zu sein. Hast Du den Code eventuell per Hand in eine .tpl-Datei eingefügt? Woher stammt überhaupt der Code für diese Menüleiste, die Tabelle sieht mir ziemlich kaputt aus ..?

Biggi wrote:Auch zu den anderen oben erwähnten Punkten habe ich noch keine Lösung.

Könntest Du die nochmal kurz und ohne Screenshot auflisten, das wäre leichter zu lesen

Biggi wrote:Ich würde mich riesig freuen, wenn sich jemand die Zeit nehmen würde, der sich mit CSS und den weiteren Anpassungen, die nötig sind, auskennt

Ich geb mir Mühe, aber ich kann gerade am Wochenende nix verprechen

Biggi · Post by **Biggi** » Fri Oct 06, 2006 11:14 pm

Danke schön, daß Du Dich dieses Mißgeschicks annehmen willst

Ich hab den von Dir vorgegebenen Code verglichen und er ist genauso in der style.css des templates vorhanden. Daran kann es also nicht liegen.

Ich denke eher, daß es an dem css-code liegt, den die Navigationsleiste mitbringt.

Die Navigationsleiste ist eine html-Tabelle, die wie folgt als html-Klotz eingebunden ist. Für den html-Klotz habe ich das Event-Plugin "Sample" benutzt. Beschreibung dazu:
HTML-Code für den head-Bereich (HTML-Kopf Klotz)
Beschreibung:
Beinhaltet HTML-Code der im HEAD-Bereich des Blogs eingebunden werden kann, z.B. für Meta-Tags oder JavaScripts.

Die CSS-Datei, die wiederum die Inhalte der Tabelle bestimmt lautet wie folgt:
http://www.bildmomente.de/nugget_css.htm

Vielleicht findest Du da irgendwo einen Ansatz dafür, weshalb im Firefox oben ein Abstand zum Logo ist und der Opera die Leiste unten anzeigt.

Alles andere läßt sich ja vielleicht später noch lösen.

Ich kann mir schon denken, daß das alles ein ganz schönes Durcheinander ist, aber ich komme da alleine wirklich nicht raus...

Danke für Deine Mühe!

Grüße, Biggi

Post by **yellowled** » Sat Oct 07, 2006 1:11 am

Biggi wrote:Ich hab den von Dir vorgegebenen Code verglichen und er ist genauso in der style.css des templates vorhanden. Daran kann es also nicht liegen.

Natürlich ist er das - da habe ich ihn ja her

Dabei ging es allerdings ausschließlich um den Rand über dem Logo. Das Logo ist dem Container #serendipity_banner als Hintergrundbild zugewiesen. In deinem Stylesheet ist für diesen Container ein margin-top: auto angegeben, und auch body als übergeordnetem Element ist kein margin zugewiesen. Daher wird als margin-top für dieses Element der Standardwert des Browsers verwendet. Dieser ist nicht 0, also ist über dem Hintergrundbild ein Rand. (Im Übrigen finde ich diesen Rand überhaupt nicht störend, im Gegenteil.)

Äh ... moment mal, habe ich Dich die Ganze Zeit mißverstanden? Ging es um den Rahmen um die Buttons der Menüleiste?

Biggi wrote:Für den html-Klotz habe ich das Event-Plugin "Sample" benutzt. Beschreibung dazu:
HTML-Code für den head-Bereich (HTML-Kopf Klotz)
Beschreibung:
Beinhaltet HTML-Code der im HEAD-Bereich des Blogs eingebunden werden kann, z.B. für Meta-Tags oder JavaScripts.

Das hatte ich befürchtet. Da liegt ein Verständnisproblem vor: Dieses Plugin ist dazu da, Daten in den sogenannten head der vom Blog "produzierten" HTML-Dateien einzubinden. Der Head ist aber ausdrücklich nicht der Platz für tatsächliche Seiteninhalte. Im Head wird z.B. der Titel einer Seite untergebracht, Links zu Stylesheet(s) usw., aber eben keine Inhalte - Inhalte stehen im sogenannten body der Seite. Mitunter möchte man zusätzliche Angaben in den head einbinden, und genau dafür ist dieses Plugin da: Damit man solche Angaben bequem über die Verwaltungsoberfläche einbinden kann, ohne .tpl-Dateien editieren zu müssen.

Was Du möchtest, ist aber zunächst mal folgendes: Den HTML-Code (die Tabelle) für die Menüleiste in den body der Seite einbinden. Dafür gibt es meines Wissens kein Plugin, dazu müssen wir an die .tpl-Dateien des von Dir verwendeten Themes. Aber dafür brauchen wir zunächst einmal vernünftigen, korrekten HTML-Code für diese besagte Tabelle. Daher auch meine Frage, woher Du den HTML-Code für dieses Menü, diese Tabelle hast, denn dieser Code ist so nicht korrekt. Ist der Code von Dir, hast Du ihn irgendwoher kopiert, mit einem WYSIYWG-Editor gebastelt oder wie?

Im Übrigen würde ich persönlich dazu raten, diese Menüleiste komplett anders umzusetzen. Der CSS-Code für das Menü sollte sich ziemlich 1:1 auch ohne eine Tabelle umsetzen lassen. Aber dafür habe ich frühestens Sonntag Zeit

Biggi · Post by **Biggi** » Sun Oct 08, 2006 10:06 am

Guten Morgen

Nach ganz viel Fummelei und bis morgens um 3:00 Uhr andauerndem Trial & Error hab ich gestern doch schon so einiges bewirken können. Eure Denkanstösse hier und die Suche im Forum haben mir dabei sehr viel geholfen.

Für mich sieht es jetzt im IE, im Firefox und im Opera ganz annehmbar aus. Vielleicht mag das ja nochmal jemand testen? Daß die Höhe der Seite noch in IE und den anderen beiden Browsern um wenige Pixel unterschiedlich ist, damit kann ich wohl leben. Auf jeden Fall ist jetzt aber die Navigationsleiste da, wo sie sein soll und das Blog ist optisch somit den übrigen Seiten angepaßt.

Man soll eben doch nie sagen, daß man etwas nicht kann.

Selber durchwurschteln dauert zwar um Stunden länger, aber dafür ist das Erfolgserlebnis klasse

Danke also für die bisherigen Tipps. Wenn ich dann doch nochmal was habe, das ich nach einer durchgemachten Nacht noch nicht hingekriegt habe, melde ich mich nochmal

Allen einen schönen Sonntag!

Grüße, Biggi

Manja · Post by **Manja** » Sun Oct 08, 2006 6:12 pm

Hallo Biggi,

ja, die Menüleiste sieht jetzt auch im IE vernünftig aus (im Firefox war es ja schon vorher in Ordnung). Um nochmal auf dein Problem mit dem Rand oben zurückzukommen: wie ich sehe, hast du schon an der richtigen Stelle angesetzt und in der CSS-Datei deines Themes bei body die Werte "margin" und "padding" verändert. Bei "margin" hast du allerdings den Wert "1" hingeschrieben - ohne Einheit. Hier weiß der Browser also nicht, was du meinst. Wenn du dort

Code: Select all

margin: 0;

einsetzt, dann sind die äußeren Ränder weg. Wenn die Ränder links und rechts bleiben sollen, dann kannst du einen zweiten Wert einsetzen für links und rechts:

Code: Select all

margin: 0 5px;

In diesem Fall hast du oben und unten keinen Rand, links und rechts 5px. Allerdings solltest du dann in der CSS-Datei die Werte html und body nicht zusammenschreiben, sondern body einzeln den margin-Wert zuweisen. Da html und body ineinander verschachtelt sind, würde in der jetzigen CSS-Notation beiden der margin-Wert zugewiesen und somit addiert. Der Einfachheit halber kannst du im CSS den Wert "html" weglassen und nur "body" stehen lassen.

Grüße, Manja

Biggi · Post by **Biggi** » Sun Oct 08, 2006 6:44 pm

Hallo Manja,

vielen Dank! Das hatte ich glatt übersehen... Ich habs jetzt geändert.

Html und body zusammen zu benennen, habe ich gestern gemacht, als ich hier im Forum nach einer Möglichkeit suchte, wie ich meinen Scrollbalken für den IE so eingefärbt bekomme, wie auf den übrigen Seiten. Wenn ich das richtig verstanden habe, dann geht es nur auf die Art, daher diese Variante

Gruß, Biggi