Kann mir jemand helfen? Boxen in Footer verschieben

Hallo ihr da am PC,

Ich versuche schon Stunden aus der _right.tpl die Boxen Top of the Shop; Mein Konto; Schnäppchen und den Newsletter in die footer.tpl zu integrieren.

Mein Versuche beschreibe ich lieber nicht, die sehen auf jedenfall fürchterlich aus. Die Texte sind zwar da aber die Boxen nicht.

Ist es den möglich die Boxen in den Footer nebeneinander zu plazieren? Was muss ich tun? Muss die CSS auch angepasst werden? Wie muss ich vorgehen?

Hallo Heide,

das sieht deswegen fürchterlich aus, da im CSS die Boxen für den Footer nicht definiert sind. Du musst für den Footer deswegen eigene CSS Regeln erstellen. Möglich ist alles, wenn man Ahnung von CSS und HTML hat, dürfte das innerhalb 10 Minuten von Statten gehen :slight_smile:

Viele Grüße vom Chris

Das ist ja interessant! Ich gehe mal davon aus dass in der CSS dieser Teil dafür zuständig ist. Bitte korriegieren wenn ich mich irre:

/* + layout - right */
#right strong.h2 {display: block;}
#right strong.h2{position:relative;border-left:4px solid #1b1c1c;background:#e2e2e2;padding:10px 5px 5px;margin:0;color:#ffffff;background-image:url(bg/head_right.png);background-repeat:no-repeat;}
#right strong.h2 a {text-decoration: none; color: #555555}
#right strong.h2 a:hover {text-decoration: underline;}
#right div.box {border-left:4px solid #1b1c1c;padding:7px 10px;background-color:#F5DEB3}
#right div.box p{padding:7px 10px;}
#right .form label {color:#555555;display:block;margin:0 0 3px;}
#right .form input.txt {width: 176px; margin:0 0 3px;}
#right .form input.txt.openid{width: 159px;}
#right .form span.btn input {width: 179px;}
#right .form a.link {display:block;margin:0 0 3px;}

#right div.forms strong.h2 {background-color: #ffffff;color:#555555;border-left-color:#1b1c1c;}
#right div.forms strong.h2 a{color:#ffffff;}
#right div.forms div.box{border-left-color:#1b1c1c;background-color:#F5DEB3;}

#right .listitem {margin: 2px 0 7px; padding-left: 66px; position: relative; min-height: 45px; height:auto; color: #555555; width: 114px;}
#right .listitem .picture{position: absolute; display: block; left: 0; top: 0; width: 56px; height: 42px; text-align:center; background: #ffffff; border: 1px solid #e2e2e2;}
#right .listitem a.title{overflow:hidden;width:108px;display:block;}
#right .listitem a {text-decoration: none; color: #555555;}
#right .listitem a:hover {text-decoration: underline;}
#right .listitem tt {display: block;}
#right .actions {margin: 3px 0 5px;}
#right .actions a {display: block;}

#right .listitem.bargain a.link {color: #555555;}

#right .listitem.rightlist {border-bottom: 1px solid #e2e2e2; height:auto;}
#right .listitem.rightlist.lastinlist {border: none; margin-bottom: 3px;}
#right .listitem.rightlist .price{font-size: 14px; font-weight: bold; color: #555555; margin: 16px 24px 9px 0; width: 90px; position: relative;}
#right .listitem.rightlist .price a {font-weight: normal; color: #555555;}
#right .listitem.rightlist .price a:hover {color: #555555;}
#right .listitem.rightlist .price .tocart{ width: 18px; height: 16px; position: absolute; left: 92px; top: 0;}
#right .listitem.rightlist .price .btn{ width: 20px; height: 18px; margin:0; border:0;background: transparent url(bg/buttons_ce_.gif) 0 0 no-repeat;padding: 0;cursor:pointer;}
#right .listitem.rightlist .link {background: url(bg/oxid_ce_.gif) no-repeat 0 -385px;padding-left:14px;font-size:10px;text-decoration:none;color: #555555 !important; line-height:1.1em;}
#right .listitem.rightlist .link:hover {text-decoration: underline;}

Und dieser Bereich muss in den footer (css) rein.? Damit wäre es allerdings untereinander. Bleibt nur noch zu klären wie man diesen Teil nebeneinander hin bekommt.

Werde mir nächste Woche von Video2Brain ne lern DVD für CSS kaufen…und noch eine für jquery

Hi Priester,

ne, ganz so einfach isses nicht. Am besten isses, wenn Du um jede Box ein DIV rummachst, das meinetwegen auch <div class=“column”></div> heißt, somit hast Du einen prima Einstiegspunkt, bzw. Marker, um daraufhin Dein CSS aufzubauen, ich hab das auf meiner Seite so ähnlich gemacht, siehe die Boxen ganz unten auf der Startseite.

Naja, ob die Bücher da wirklich helfen ist fraglich, learning bei doing und nachsehen im Internet unter css4you hilft da schon gewaltig. Du wirst Dir in den nächsten Jahren bestimmt noch sehr viel Erfahrung draufschaufeln, das bringt Dir dann am meisten :slight_smile:

Allerbeste Grüße vom Chris

Hast recht Chris. Learning by doing ist immer noch das Beste. Ich werde mal das versuchen was Du beschrieben hast.

Bis dann…

So…stehe kurz vor der Kapituladingsda!

Dieser Teil aus der right.tpl zeig den Top of the Shop an:

[{ if $oView->getTop5ArticleList() }]
    <strong class="h2" id="test_RightSideTop5Header">
        [{ oxmultilang ident="INC_RIGHTITEM_TOPOFTHESHOP" }]
        [{if $rsslinks.topArticles}]
            <a class="rss" id="rss.topArticles" href="[{$rsslinks.topArticles.link}]" title="[{$rsslinks.topArticles.title}]"></a>
            [{oxscript add="oxid.blank('rss.topArticles');"}]
        [{/if}]
    </strong>
    <div class="box">
        <div>[{include file="inc/top_items.tpl" }]</div>
    </div>
[{ /if }]

Das habe ich dann in den footer reinkopiert. So…nun wird mir da schon was angezeigt…[B]BLOß DER REST NICHT![/B] :confused:

Die Boxen fehlen noch und die Überschrift. Muss ich in der css in diesem Bereich noch was einfügen?

/* + layout - footer*/
#footer a{text-decoration: none;color:#ffffff}
#footer a:hover{text-decoration: underline;}
#footer .shopicons {padding: 0 20px;position:relative;top:-300px;}
#footer .footertext {position:relative;top:-250px;text-align: center; font-size: 10px; padding: 5px 0; clear: both;color:#555555}
div.bar.copy{ height:13px;background:#fc6634;border-top:1px solid #ffffff;color:#ffffff;padding:5px 10px 5px 200px;background-image:url(bg/navileiste_footer.png);}
div.bar.copy a{color:#ffffff;}
div.bar.shop{ background:#1b1c1c;color:#555555;padding:8px 190px 10px 180px;text-align: center;-moz-border-radius:5px;}
div.bar.shop a{color:#555555;margin:0 7px;}
div.bar.icons{text-align: right;}
div.bar.copy div.right {float: right; color: #ffffff;}

was fehlt mir noch? Ausser das Wissen.

Hier der Versuch:

Für den Footer müssen die Elemente im CSS definiert werden, die von der Top-of-the-Shop-Anzeige verwendet werden.

also entsprechend dann z.Bsp ergänzen:

#footer strong.h2 { gewünschte Werte einfügen}
#footer div.box { gewünschte Werte einfügen }

und so weiter.

Die einzelnen Elemente zeigt dir das Addon Firebug im Firefox (mit Element untersuchen).

So…ich bin nun soweit gekommen:

in der css steht das:

.footerinfo_lang{
  color: #fff;
  background: #252628;
  margin: 10px 12px 0 12px;
  padding: 10px;
  border: 1px solid #555;
  width: 200px;
  position: relative;
  left: -10px;
  height: 210px;
  top: -264px;
}

Im der footer.tpl dieses:

    <div class="footerinfo_lang">
	 [{ if $oView->getTop5ArticleList() }]
    <strong class="h2" id="test_RightSideTop5Header">
        [{ oxmultilang ident="INC_RIGHTITEM_TOPOFTHESHOP" }]
        [{if $rsslinks.topArticles}]
            <a class="rss" id="rss.topArticles" href="[{$rsslinks.topArticles.link}]" title="[{$rsslinks.topArticles.title}]"></a>
            [{oxscript add="oxid.blank('rss.topArticles');"}]
        [{/if}]
    </strong>
    <div class="box">
        <div>[{include file="inc/top_items.tpl" }]</div>
    </div>

Ergebniss:

Aber sorecht will dass mit dem Text nicht funktionieren.

Schau Dir mal mit Firebug an, welche “class” das Element hat. Du wirst feststellen, dass dort <div class=“listitem”> steht.
Mit dieser “class” / Klasse kannst Du das Element via CSS ansprechen.

Vergleiche dazu dann mal die Eintrag aus dem Top-of-the-shops in der rechten Inhaltsspalte.
http://zadeck.de/Eco-Fashion/

Dort ist das so in etwa hinterlegt: #right .listitem { Styleregeln }

Du musst dann also diese Werte auch beim Footer angeben: #footer .listitem { Styleregeln }

So kannst Du nacheinander die benötigten Elemente durchdefinieren.

Ok.Ich teste mal weiter. Werde aber heute nicht mehr mein Ergebniss posten. Weil ich dazu einpaar Stunden brauche. :smiley:

Morgen poste ich dann wieder.

Du kannst übrigens die neuen Werte direkt in Firebug eintragen und den Effekt begutachten (im rechten Teilfenster). Wenns dann passt, kannst Du das in die echte CSS übernehmen.

Muss doch noch mal posten. ICH HABS GESCHAFT!

Danke Dir für die Tips.

Na Super…zu früh gefreut. Jetzt wird mir dass aber in der Detailsansicht vom Artikel nicht im Footer angezeigt.

Das dürfte aber eher an der Template-Steuerung als am CSS liegen.

Die Infobox wird nicht geladen, hast Du was am Template geändert? Musst Du dann dort auch machen.

…öhm, vergiss es was ich gesagt habe, schau mal hier:

http://www.oxid-esales.com/forum/showthread.php?t=6613

Hi,

das habe ich probiert wie beschrieben. Das Resultat ist, dass wenn ich auf Detailsansicht klicke, dass ich wieder zurück zu Home gelange und die Detail nicht angezeigt werden. In Module im Admin habe ich details => xttop5 eingegeben und gespeichert. Die Dazu gehörige php Datei liegt auch auf dem Server.

http://www.oxid-esales.com/forum/showthread.php?t=3106&highlight=top+of+the+shop#post40147

Funktioniert auch nicht. Jetzt kann ich nicht mal mehr noch einen Shop neu installieren bei Profihost. Die Tabellen werden nicht angelegt bzw. nur 5 Stück. Die haben wohl was geändert.