Zum Inhalt springen

Listenansicht mit 3 Spalten

Erstellt am 11. März 2009 · 1 Antwort · letzte Antwort am 23. März 2009

Tags: HTML & CSS, Frage

Seula ·

Hallo,
ich stehe gerade vor folgendem Problem und finde einfach keine Lösung. Ich möchte bei meinem Shop eine Listenansicht implementieren, die 3 Spalten beinhaltet. Damit ihr euch das ganze besser vorstellen könnts hier ein paar Screenshots:

http://img3.imagebanana.com/view/422a7rb1/homepage.jpg

Die Liste sollte nun so angepasst werden, dass sie wie folgt aussieht

http://img3.imagebanana.com/view/jy7q233s/titus_homepage.jpg

Könntet ihr mir bitte mitteilen, wie ich den Code abändern muss?

Hier ein Ausschnitt der tt_products_css.html:

<!-- ###ITEM_LIST_TEMPLATE### begin
This subpart is used to display the regular list of products. It's also used by search-results.-->
<div class="floatbox_LIST">
	<!--###ITEM_CATEGORY_AND_ITEMS###-->
	<!--###ITEM_LIST###-->
	<!--###ITEM_SINGLE###-->
   
        
    <form method="post" action="###FORM_URL###" name="###FORM_NAME###">
    <div class="listitem">
          <h1 class="PRODUCT_TITLE_LIST"><!--###LINK_ITEM###-->###PRODUCT_TITLE###<!--###LINK_ITEM###--></h1> 
          <div class="PRODUCT_IMAGE_LIST">###PRODUCT_IMAGE###</div>
          <br />
	      <div class="web_price_LIST">###GW1B###Preis: ###PRICE_TAX### €</div>
    </div>
	</form>
    <!-- ###ITEM_SINGLE### end -->
    <!-- ###ITEM_LIST### end -->
	<!-- ###ITEM_CATEGORY_AND_ITEMS### end -->


	<div class="page_navigation">
    	<div class="page_prev"><!--###LINK_PREV###-->vorherige Seite<!--###LINK_PREV###--></div>
            <!-- ###LINK_BROWSE### begin -->[ ###BROWSE_LINKS### ]<!-- ###LINK_BROWSE### end-->
	    <div class="page_next"><!--###LINK_NEXT###-->nächste Seite<!--###LINK_NEXT###--></div>
	</div>
</div>
<!-- ###ITEM_LIST_TEMPLATE### end -->

Vielen Dank
Klemens

jschwierz ·

hallo,

kleine anregung: CSS!

gib der class="listitem" die eigenschaften

width: 33%;
(bzw. eine breite, die es erlaubt, das in deinem design 3 davon nebeneinander passen)
float: left;

damit solltest du schon ein wenig weiter kommen... so habe ich es zumindest gelöst 😉