Template anpassen, Header Transparent, Hintergrund Weiß etc

Deutsches Forum
1

Hallo, und zwar baue ich gerade einen Shop auf nur komme ich leider bei der Html nicht weiter.

Im Anhang ist unser erster Entwurf zu sehen, das Problem ist jetzt die ganze sache an die oxid.css anzupassen :rolleyes:

Die Idee war den Hintergrund mit den Mustern als wiederholbares Element zu benutzen was sich einfach an die jeweilige Bildschirmauflösung anpassen kann und das Logo sowie das Feuer Transparent drüber zu legen.

Das Logo habe ich bereits als .png hochgeladen und zentriert.

Jetzt möchte ich den gesammten Header transparent machen nur das Problem ist wenn ich das soweit anpasse ist der rest der Seite auch Transparent (body, etc.)

Momentan sieht die Seite also so aus http://zulu13.de/

Gibt es eine möglichkeit das der Hintergrund der gesammten Seite später anfängt damit der Header Transparent bleibt aber der Rest weiterhin einen Hintergrund hat?

Ich habe schon versucht der #Body eine Farbe zuzuweisen was aber den Rest der Seite nicht eingeschlossen hat.

Oder hat jemand eine andere Idee um das Design am besten umzusetzen?

Freue mich über jede Hilfe :smiley:

Design Entwurf:

http://zulu13.de/out/basic/img/4-lila_zulu.jpg

Teil der oxid.css:

/* Layout */
div#page { width:980px;margin:0px auto 0;padding:0;position: relative;background:transparent;}
div#header { clear:both; background:#transparent;}
div#content { clear:both; background:url(bg/bd_ce_.gif) repeat-y;}
div#path { margin:0 0 0 195px;background:#ffffff;padding:15px 0 0 0;border-bottom:1px solid #e2e2e2;color:#555555;}
div#body { margin:0 210px 50px 190px;padding:10px 0 0 0;}
div#left { float:left; width:180px;background:#ffffff;border-right:4px solid #e2e2e2;}
div#right { float:right; width:204px;background:#ffffff;}
div#footer { clear:both; background:#ffffff;}
div.clear {clear: both;}

/* Blank pages, popups */
div#body.plain {margin: 0; padding: 0; width: auto;}

/* + layout - header */
#header div.bar .fixed {min-width:184px;border-right:1px solid #ffffff;float:left;}

div.bar.oxid {background:transparent;text-align: center}
div.bar.oxid .logo {padding:18px 0;float:none;margin:0 auto;display:block;}
div.bar.oxid dl.box {min-height: 98px;min-width:150px;margin:0 0 1px 2px; padding-bottom: 5px;}

2

Um einen Hintergrund hinzuzufügen, gibt es sicherlich viele Möglichkeiten.
Ich habe es als eine einfach zu realisienede Möglichkeit einmal so gemacht, daß ich im page.tpl vor dem header.tpl einen extra div eingefügt habe

[{capture append="oxidBlock_pageBody"}]
    [{if $oView->showRDFa()}]
        [{ include file="rdfa/rdfa.tpl" }]
    [{/if}]
   <div id="container1">  
    </div>

In der oxid.css habe ich diesen div dann die

position: absolute;

zugewiesen.

Vielleicht hilft Dir dieser Ansatz? Wie hast Du denn dieses Vorschau-Bild gemacht, da funktioniert es ja schon.

3

Das Vorschau Bild hat mein Grafiker gemacht , das hat absolut nix mit einer funktionierend Seite zu tun.

Gruss.,

4

Z.B.
div#page{
margin-top: 200px;
…

dann hast du einen Abstand. Dann:

div.bar.oxid {
position: absolute;
top: -200px;
…

Damit schiebst du das Logo in diesen Abstand. Musst aber schauen ob div.bar.oxid noch irgendwo anders verwendet wird.

5

Habe das nun anders realisiert, ich habe nun nur noch das Problem, das ich einen 2. Hintergrund einfügen will der sich ständig wiederholen kann, die Grafiken sind dafür alle vorhanden nur ein funktionierender Code fehlt mir noch das habe ich leider noch nicht hin bekommen.

Die ganze Geschichte sieht momentan so aus http://zulu13.de/ und nun will ich einfach bei dem Background die Flammen mit einen 2. Hintergrund weiterführen der sich dann ständig wiederholen lässt.

Wie bekomme ich das am besten hin?

Beste Grüße.

6

Ich würde noch einen div einfügen mit dem margin-top, so daß es an das erste Bild angrenzt.
Dann brauchst Du ein Bild, daß du kacheln kannst.
Und in der css bekommt dieser div noch position: absolute; & width: 100%; & background-repeat:repeat-y;