✔ dynamische Bannergröße - 2 Grafiken

[Crusade]

Um mein Vorhaben zu Schildern,

Ich möchte ein Banner zentriert auf einer Webseite platzieren, dass 500px breit ist.
Zusätzlich habe ich eine Grafik, die man links und rechts an dieses Banner anfügen kann ( was zumindest im Grafikeditor einen nahtlosen Übergang ergibt ).
Diese Grafik soll nun links und rechts an dieses Banner angefügt werden, damit das Banner durchgehend wirkt egal wie groß die Bildschirm Auflösung ist.


Mit diesem Boxmodel sowie mit diversen Webseiten, die sich ansatzweise damit beschäftigen habe ich mich bereits versucht - leider blieb der Erfolg aus.. zumindest werde ich nicht schlau daraus.

Deswegen wende ich mich an dieser Stelle an Euch.

Das beste Ergebnis erreiche ich zur Zeit mit folgendem Code:

<div id="main-top"><div><div></div></div></div>

#main-top {
	height: 190px;
	background: url('forum_top_banner.jpg') repeat-x 0 0;
	position: relative;
	top: 2px;
}
#main-top div {
	height: 190px;
	background: url('forum_top_repeat.jpg') no-repeat top left;
}
#main-top div div {
	height: 190px;
	background: url('forum_top_repeat.jpg') no-repeat top right;
}

Vielleicht ists auch einfach nur ein kleiner Denkfehler, der mir im Weg steht

 

[Maik]

Hi,

der einzige Denkfehler, die mir da auffällt, sind die Hintergrundpositionsangaben für die beiden äußeren DIVs, da zuerst die horizontale und anschliessend die vertikale Position genannt wird.

Ansonsten sieht's doch gut aus.

 

[Crusade]

Das löst leider auch nicht das Problem.
Die Grafik "forum_top_banner.jpg" ist am linken Rand und wird von "forum_top_repeat.jpg" links überdeckt.

 

[Maik]

Dass sich das Hintergrundbild am linken Elementrand befindet, liegt dann wohl am rotmarkierten Wert für die horizontale Position:

#main-top {
    height: 190px;
    background: url('forum_top_banner.jpg') repeat-x 0 0;
    position: relative;
    top: 2px;
}

Mit 50% sollte das Hintergrundbild in der Mitte sitzen.

Ansonsten versuch es mal auf diese Weise:

#main-top {
    height: 190px;
    background: url('forum_top_repeat.jpg') repeat-x;
    position: relative;
    top: 2px;
}
#main-top div {
    width: 500px;
    height: 190px;
    background: url('forum_top_banner.jpg') repeat-x;
    position: relative;
    margin: 0 auto;
}

<div id="main-top">
     <div></div>
</div>

 

[Crusade]

Danke für die schnelle Hilfe.
Zu deiner Lösung bin ich auch schonmal gekommen, hatte diese aber verworfen da damit dieser Übergang verlohren geht.

Der Grundgedanke ist halt, dass die Grafik "forum_top_banner.jpg" immer in der Mitte ist und anschließend an den rechten und linken Rand dieser Grafik "forum_top_repeat.jpg" anschließt und (falls nötig) bis zum Rand des Browserfensters Dupliziert wird (das wie geschrieben den der Bannergrafik ausgehen).

Die Grafik rechts nach rechts zu duplizieren klappt auch ansich ohne Probleme nur die Linke nach links zu duplizieren... .

Ich bin auch schon kräftig am lesen und suchen, aber mit dieser Problematik finde ich keinen Anhaltspunkt.

Um es mal zu verdeutlichen habe ich es mal Hochgeladen.
http://www.donkamillos-workshop.de/-problem/gna.html
( das obere ist der Code, den ich gepostet hatte und der unter der, den du gepostet hast )
Man sieht bei beiden das Problematik, wenn man die Anzeige größer-kleiner skaliert.



Gibt es im CSS eventuel keine Möglichkeit soetwas zu realisieren ?

 

[Maik]

Hi,

das Problem liegt in diesem Fall nicht am CSS-Code, sondern wohl eher an der mittleren Grafik, die ja einen Teil der äußeren "Rand-Grafik" besitzt, was dann zu dem Ergebnis führt, wenn das Browserfenster skaliert wird, dass die "Anschlusspunkte" nicht exakt zueinander passen.

Ich häng hier mal eine überarbeitete Fassung an, in der ich die Grafik "forum_top_banner.jpg" beschnitten habe - vielleicht hilft sie dir weiter.

 

[Crusade]

Die Lösung ist fast schon zu einfach und ich wäre wohl nie darauf gekommen.

Danke Dir