Open Source Shop Software xt eCommerce Templates Module SEO Support: : Schattengrafik Links Rechts Vom Main-div Platzieren

[phrench]

hallo!

ich experimentiere mit dem yaml template und möchte eine schattengrafik ähnlich DIESER (http://anonym.to/?https://www.stylebandits.com/shop/img/schatten_links.png) links und rechts vom "shop" poistionieren, so dass es folgendermassen aussieht: BEISPIEL (mit tabellen gelöst) (http://anonym.to/?https://www.stylebandits.com/shop/)? ich vermute, dass ich das mit einem schmalen div auf jeder seite und der schattengrafik als background erreiche, doch wie poistioniere ich an dieser stelle ein div?

was ich bisher geschafft habe (anfang der index.html datei. die bg-farbe dient nur der snichtbarkeit beim testen, wird später durch das hintergrundbild ersetzt und das ganze in ein .css ausgelagert):

{config_load file="$language/lang_$language.conf" section="index"}
<div id="page_margins">
<div style="background-color:#0FF; poistion:absolute; margin-left:-10px; width:10px; min-height:100%;"></div>
<div id="page" class="hold_floats">
...

leider kriege ich es auf der rechten seite überhaupt nicht hin. mit floats habe ich auch getestet...

any hints?

[DeeCoo]

würdest sowas gebrauchen können ?


<div style="poistion:absolute; left:33px; top:0px; width:39px; height:100%;">
images/linkerschatten.gif
</div>

<div style="poistion:absolute; left:800px; top:0px; width:39px; height:100%;">
images/rechterschatten.gif
</div>

<div style="poistion:absolute; left:72px; top:0px; width:725px; height:100%;">
{$content}
</div>

[phrench]

danke für die antwort. sieht gut aus (hab´s jedoch nicht ausprobiert). ich möchte es allerdings unbedingt zentriert haben.

gestern habe ich dann noch folgendes ausprobiert, was bis auf eine kleinigkeit das ist, was ich brauche:

<div style="width:880px; margin-left:auto; margin-right:auto;">

<div style="background-color:#0FF; float:left; width:10px; height:300px;"></div>
<div style="background-color:#0FF; float:right; width:10px; height:100%;"></div>

<div id="page_margins" class="clearfix">{$content}</div>

</div>

d.h. ich habe nochmals ein 880px-div um alles gemacht und dann zwei 10px-divs "vor" das content-div (860px) gestellt.

leider sind die beiden balken nicht snichtbar, wenn ich die non-breaking-spaces rausnehme. und auch die 100% höhe anweisung klappt nicht. wenn ich die höhe zu z.b. 300px zwinge, wird ausserdem ein teil vom $content, nämlich ab dem header, nach unten geschoben und es entsteht eine lücke (siehe angehängter screenshot) :(

gruss

[pufaxx]

Was für ein Aufstand ...

Mach daraus doch ein Hintergrundbild für den Body. Zentrieren, vertikal wiederholen, Ende Gelände.

Oder falls das aufgrund irgendwelcher Verläufe nicht klappt, kannst Du anderen Elementen 100% Breite geben. So lange diese Elemente keine Schrift enthalten (da dürfen aber natürlich andere Elemente mit Schrift drin sein) entstehen auch keine horizontalen Scrollbalken.

Ansonsten rate ich prinzipiell davon ab, fertige CSS (Cascading Style Sheets ) CSS
http://de.selfhtml.org/css/ (http://anonym.to/?http://de.selfhtml.org/css/) - Top CSS Einsteiger Seite
http://www.css4you.de/ (http://anonym.to/?http://www.css4you.de/) - CSS Reference-Layouts als echte "Arbeitsgrundlage" zu nehmen ... Da muss man schon genau wissen, was man tut.

Und immer dran denken: Ein Stylesheet fängt in der ersten Zeile an und hört in der letzten Zeile auf. Die ganzen kleinen "Nachbesserungen" (mal hier mehr Abstand, mal da andere Textausrnichtung etc., irgendwelche "Geheimtipps" oder ähnliches) - wirken immer mit anderen Anweisungen zusammen. Und nie alleine.

Das hier

<div style="width:880px; margin-left:auto; margin-right:auto;">

<div style="background-color:#0FF; float:left; width:10px; height:300px;"></div>
<div style="background-color:#0FF; float:right; width:10px; height:100%;"></div>

<div id="page_margins" class="clearfix">{$content}</div>

</div>


ist für sich genommen schon mal ziemlicher Käse, wie Du siehst können die 100% in der Höhe gar nicht interpretiert werden, weil das Ding floatet ...

Abgesehen davon (ich weiß jetzt nicht, was für Anweisungen für die Klasse clearfix bestimmt sind) müsste "page_margins" an der oberen Kante vom 880er-Div anfangen. Es sei denn, clearfix floatet nicht und beendet das Floating nach links UND rechts ... Dem Screenshot nach zu urteilen dürfte das der Fall sein.

Egal. Also: Greif Dir den Photoshop, leg eine 880 Pixel breite Datei an, einen Teil vom Schatten links rein kopieren, den anderen Teil rechts rein - Und daraus ein Hintergrundbild machen. Entweder als HG-Bild für den Body oder ala HG-Bild 880Px-Teil.

(Body-HG dürfte aber schon genügen - Der Schatten soll ja von oben bis ganz nach unten reichen, oder?)