[gestoppt] Eigener Banner zentriert darstellen

[elmi42-melle]

Moin,
pure Langeweile treibt mich dazu am Design herumzupfuschen und mich langsam (ganz langsam) in CSS einzuarbeiten.
Meine aktuelle Frage:
Wie und wo setze ich meinen Banner immer mittig UND angepasst an die jeweilige Bildschirmauflösung des Besuchers?

http://elmi42.homelinux.net/

Gruß
Michael

[yellowled]

Wie und wo setze ich meinen Banner immer mittig UND angepasst an die jeweilige Bildschirmauflösung des Besuchers?

Das lässt sich natürlich pauschal kaum beantworten.

Ich gehe mal vom Code Deines Blogs aus:

Code: Select all

<div id="serendipity_banner">
<h1>...</h1>
<h2>...</h2>
</div>

Du hast derzeit header_logo.png als Hintergrundgrafik zu h1 zugewiesen - ich würde das ändern und header_logo.png als Hintergrund zu #serendipity_banner zuweisen:

Code: Select all

#serendipity_banner {
background: url({TEMPLATE_PATH}img/header_logo.png) no-repeat center center;
[...]
}

Obacht, TEMPLATE_PATH funktioniert natürlich nur in s9y-Templates, und auch da nur in der style.css, nicht in eventuellen weiteren Stylsheets!

YL

[HadleyB]

So, kurze Tipps, so vom wegen Oberlehrer on:

Das Impressum darf kein Download sein. Nicht jeder kann PDFs lesen, es muss mit einem Klick auf dem Bildschirm erscheinen. Setzt Du Banner ein, wird Deine HP automatisch gewerblich (ja, so ist das schon bei einem einzigen Banner, wenn damit Geld verdient werden soll. Dies gilt auch für Empfehlungen, z.B. Amazonlinks). Dein Impressum braucht dann zwingend die Angabe der Steuernummer und des Finanzamtes. Der Kontaktbutton muss ebenfalls mit einem Blick erkennbar sein (wenn gewerblich, also mit Banner).


Bin schon wieder weg....

mfg
HadleyB

[elmi42-melle]

Code: Select all

#serendipity_banner {
background: url({TEMPLATE_PATH}img/header_logo.png) no-repeat center center;
[...]
}

YL

Moin,
okay das hätte ich so nie gefunden.
A) Ist Background, für mich, etwas im Hintergrund liegendes und hat, für mich, nichts mit dem Banner zu tun.
B) Desweiteren hatte ich bei der Suchmaschine nichts gefunden was auf center center hindeutet. Ich gehe mal davon aus das der erste für die Zentrierung oben/unten und der zweite für links/rechts ist (oder umgekehrt).
C) Zumindest kann ich mit no-repeat etwas anfangen <freu>.


Tja ... dafür also vielmals Danke.
Dennoch bleibt nun das Problem das die beiden Links h1 und h2 (?) nicht ebenfalls unterhalb des Banner sitzen.
Achherrje, programmieren ist irgendwie nicht mein Ding.

Nachtrag: Ich habe h1 und h2 nun mittels top und left an die Position geschoben, aber dafür gibt es doch bestimmt auch etwas wie center?

Gruß
Michael

[elmi42-melle]

So, kurze Tipps, so vom wegen Oberlehrer on:
Dein Impressum braucht dann zwingend die Angabe der Steuernummer und des Finanzamtes. Der Kontaktbutton muss ebenfalls mit einem Blick erkennbar sein (wenn gewerblich, also mit Banner).
[/i]

Moin HadleyB,
erstmal vielen Dank. Ich freue mich immer wenn mir jemand einen Hinweis gibt, was in diesem lustigen Lande so angesagt ist.
Warum nicht jedermensch ein PDF lesen kann, verschliesst sich mir dabei ... aber okay, ich habe den Müll auch noch als Artikel vorliegen.

Deine Aussage was die Steuernummer betrifft, ist so leider nicht vollkommen richtig.
Es genügt vollends wenn die Steuer-ID eingetragen wird.
Aber du hast schon recht, ich habe den Part vergessen.

Danke Dir,
Gruß
Michael

[yellowled]

Setzt Du Banner ein, wird Deine HP automatisch gewerblich (ja, so ist das schon bei einem einzigen Banner, wenn damit Geld verdient werden soll. Dies gilt auch für Empfehlungen, z.B. Amazonlinks).

Das gilt selbstverständlich nur für Banner, die in irgendeiner Form dem Geldverdienst dienen - nicht für Banner im Sinne von "breite Grafik im Kopfbereich, die der Illustration dient"

YL

[yellowled]

Warum nicht jedermensch ein PDF lesen kann, verschliesst sich mir dabei ... aber okay, ich habe den Müll auch noch als Artikel vorliegen.

Nun, zum einen muss zur Anzeige einer PDF-Datei ein Programm installiert sein, welches PDF-Dateien anzeigen kann. Das ist nicht auf jedem System »ab Werk« der Fall. Darüber hinaus sind PDF-Dateien in Webseiten meines Wissens z.B. nicht mit Screenreadern lesbar, aber da mag ich flscha liegen.

YL

[yellowled]

A) Ist Background, für mich, etwas im Hintergrund liegendes und hat, für mich, nichts mit dem Banner zu tun.

Witzig: Für mich ist das, was Du da einbaust, eine Hintergrundgrafik und hat für mich nichts mit einem Banner zu tun Als Banner bezeichne ich Grafiken, die zum Verlinken auf andere Webseiten, z.B. zu Werbezwecken, verwendet werden - das, was Du da einbaust, ist für mich eine Headergrafik.

Es steht Dir natürlich frei, das Banner als <img> einzubinden - allerdings ist es dann deutlich komplizierter, es so zu positionieren, wie Du es haben möchtest ...

B) Desweiteren hatte ich bei der Suchmaschine nichts gefunden was auf center center hindeutet. Ich gehe mal davon aus das der erste für die Zentrierung oben/unten und der zweite für links/rechts ist (oder umgekehrt).

Korrekt.

Achherrje, programmieren ist irgendwie nicht mein Ding.

Weder (X)HTML noch CSS sind Programmiersprachen

Nachtrag: Ich habe h1 und h2 nun mittels top und left an die Position geschoben, aber dafür gibt es doch bestimmt auch etwas wie center?

Bei position: absolute;? Nein. Versucht mal für h1 und h2 als Ausgangspunkt left: 300px; - Deine top-Werte sind schon recht stimmig

YL

[elmi42-melle]

A) Ist Background, für mich, etwas im Hintergrund liegendes und hat, für mich, nichts mit dem Banner zu tun.

Witzig: Für mich ist das, was Du da einbaust, eine Hintergrundgrafik und hat für mich nichts mit einem Banner zu tun Als Banner bezeichne ich Grafiken, die zum Verlinken auf andere Webseiten, z.B. zu Werbezwecken, verwendet werden - das, was Du da einbaust, ist für mich eine Headergrafik.

Hmmm Headergrafik ... jo das passt. Aber du hast natürlich vollkommen recht was die Definition Background betrifft. Für mich war es dennoch nicht auf den ersten Blick erkennbar.

Achherrje, programmieren ist irgendwie nicht mein Ding.

Weder (X)HTML noch CSS sind Programmiersprachen

Jau .. ne iss klar .. verwirr die Katze.

Nachtrag: Ich habe h1 und h2 nun mittels top und left an die Position geschoben, aber dafür gibt es doch bestimmt auch etwas wie center?

Bei position: absolute;? Nein. Versucht mal für h1 und h2 als Ausgangspunkt left: 300px; - Deine top-Werte sind schon recht stimmig

Hmmm ... ja gut, top (also Abstand zu oben) war fast okay.
Das "Problem" ist ja eigentlich eher das ich gerne Headergrafik inklusive h1 und h2, abhängig von den Monitordarstellungen des Besuchers, grundsätzlich mittig haben möchte.

Wenn ich nun, wie derzeit nur die Position mittels left festlege, so würde doch h1 und h2 bei einer kleineren/grösseren Auflösung sich nach rechts/links verschieben?!

YL

Gruß
Michael

[elmi42-melle]

Erstmal alles zurück.
Das Design wurde immer schlimmer.
Auf meinem Notebook in einer Auflösung von 800x640 war es eine optische Katastrophe.
Ich habe nun ein anderes fertiges Design installiert und werde nun erstmal auf die Lieferung des Buches warten.

Danach möchte ich dann meinen Blog, meinem Taiji anpassen.

Dennoch vielen Dank für die Hilfe.
Alles Liebe,
Michael

[yellowled]

Achherrje, programmieren ist irgendwie nicht mein Ding.

Weder (X)HTML noch CSS sind Programmiersprachen

Jau .. ne iss klar .. verwirr die Katze.

(X)HTML ist eine Markupsprache (wie die Abkürzung HTML schon besagt), CSS eine Stylesheetsprache. Beiden fehlen wesentliche Eigenschaften einer Programmiersprache wie etwa Schleifen.

YL

[elmi42-melle]

Moin YL,

nochmals Danks für die Kurzerklärung warum beide Sprachen, keine Programmiersprachen sind. Der Hinweis mit den Schleifen rückte es in das rechte Licht.

Gruß
Michael