Designänderungen nur über css-Dateien möglich?

[Matze]

Moin,

ich ändere auf meiner Webseite in unregelmäßigen Abständen den Header. Genauer gesagt betrifft es die Hintergrundgrafik und die Schrift, die darüber liegt. Das Problem ist, dass ich die Schrift nicht immer an der gleichen Position anzeigen lassen kann, sondern je nach Hintergrundbild unterschiedlich platziert werden muss. Grund ist der, dass ich keine "wichtigen" Bildausschnitte überdecken möchte. Um einen guten Kontrast zu haben, darf ich die Schriftfarbe natürlich auch nicht gleich lassen. Momentan löse ich das über verschiedene css-Dateien, doch das ist irgendwie nicht so das Wahre. Der neue Header lässt sich zwar relativ flott hinzufügen, aber diese ganzen css-Dateien stören, da es immer mehr werden.

Die css-Dateien sind so aufgebaut:

css_header_1.css:

Code:

.header {
   height: 200px;
   padding-bottom: 0px;
   background-image: url('images/header_top_1.jpg');
}

h1.sitetitle {
   padding-left: 30px;
   padding-top: 57px;
}

h1.sitetitle a {
   color: #000000;
}

.site_subtitle {
   padding-left: 30px;
   padding-top: 8px;
   padding-bottom: 68px;
   color: #000000;
}

Geht das irgendwie eleganter?

[Angel4585]

ich würd die schrift jetz in ein div packen und das per position:absolute positionieren

[alcaeus]

Zitat:

Zitat von Angel4585

ich würd die schrift jetz in ein div packen und das per position:absolute positionieren

Gnarf....und wo liegt da der Unterschied? Die CSS-Datei brauchst du immer noch :wall:

@Matze: du koenntest hoechstens die Elemente im HTML-Code stylen, aber ansonsten hast du keine andere Wahl. Also entweder du setzt den CSS-Code in die style-Property des jeweiligen Tags, oder du lieferst einen Style-Block im head-Bereich fuer den jeweiligen Header mit. Nachdem du eine Template-Engine verwendest, duerfte das kein Problem sein.

Greetz
alcaeus

[Matze]

Zitat:

Zitat von alcaeus

@Matze: du koenntest hoechstens die Elemente im HTML-Code stylen, aber ansonsten hast du keine andere Wahl.

Wenn ich dich richtig verstanden habe, benötge ich dann aber verschiedene Template-Dateien, oder?

Meine Header-Datei sieht momentan so aus:

Code:

<div class="header">
   <h1 class="sitetitle">[url="{U_HOME}"]{SITENAME}[/url]</h1>
   <h4 class="site_subtitle">{L_STUFF_SITE_SUBTITLE}</h4>
   <div class="navigation">
      <ul>
         
         <li class="btn {navi_links.BTN_CLASS}">
            [url="{navi_links.BTN_LINK}"]{navi_links.BTN_TITLE}[/url]
         
         
         <li class="float_none">
      [/list]         
      <div class="clear_both"></div>
   </div>
</div>

[S2B]

Wenn du es ganz einfach willst (ok, zuerst mal komplex und dann einfach *g*), könntest du die Variablen, die bei jedem Theme verändert werden müssen, in die Datenbank werfen und dann bei jedem neuen Theme einfach einen neuen Datensatz erstellen.

[Matze]

Also das finde ich auch nicht unbedingt einfacher. :stupid:

[Angel4585]

warum machst nicht einfach den Text aufs Banner drauf, also nicht als Text sondern direkt ins Bild?

[Matze]

Zitat:

Zitat von Angel4585

warum machst nicht einfach den Text aufs Banner drauf, also nicht als Text sondern direkt ins Bild?

Dann benötige ich pro auszuwählender Sprache ein eigenes Bild und nachträglich kann ich den Text dann auch nicht mehr ohne weiteres ändern.

[Phoenix]

Also Andy hat die Lösung eigentlich schon genannt.

CSS muss nicht zwingend in Dateien, sondern kann auch in der HTML-Seite selber ausgeliefert werden.
Dabei überschreiben die Angaben in der HTML-Seite die Angaben aus dem CSS-File, so sie denn die gleichen Attribute setzen.

Ergo: Die Image-URL kommt ja wohl aus deinem CMS.
Du packst in Dein Seiten-Template noch die CSS-Angaben für die Position und Farbe des Headers mit rein und nimmst das aus dem CSS-File raus.

Dann lässt Du Dein CMS neben der Image-URL auch noch die Position und Farbe in den CSS-Angaben innerhalb Deiner HTML-Seite ersetzen und that's it.

[Matze]

Hi Sebastian,

irgendwas scheine ich nicht ganz zu verstehen. ich habe es nun so aufgefasst, dass ich direkt in der Template-Datei den Style-Code mitgeben (style="..."), aber irgendwoher muss ich diesen ja nehmen. Ich habe es zwar nicht explizit gesagt, aber ich dachte, es wäre klar: Ich möchte es so haben, dass ich auch jederzeit wieder ein altes Headerbild einstellen kann. Ich möchte also nichts ersetzen müssen, was css anbelangt.