✔ Artikel so darstellen wie auf diesem Bild mit CSS

oh mann,

ich glaube bei mir wird das heute nix mehr. Meinst du wirklich das die par css befehle das so aus blenden?

Irgendwie fehlt mir der Glaube da dran. Ich werde auch für heute erst mal Schluss machen . Sitze schon viel zu lange an dem CSS Zeugs.

dir noch mal einen herzlichen Dank für deine Großartige und schnelle Unterstützung
 
Dann wird es Zeit, dich zum CSS-Glauben zu bekehren :)
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-06-13">

<title>tutorials.de | demo_bongartz</title>

<style type="text/css">
.product_desc {
float:right;
height:10.5em;
padding-right:4px;
width:152px;
}
.product_desc {
border-right:1px solid #E0E0E0;
}
.no-side-border {
border-right:medium none;
}
.base {
height:9px;
margin:0 9px 0 2px;
}
.base {
border-bottom:1px solid #E0E0E0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix { display: block }
</style>
<!--[if lte IE 7]>
<link href="http://www.purador.de/templates/purador/css/iehacks.css" rel="stylesheet" type="text/css">
<![endif]-->

</head>
<body>

<table width="600"><tbody>
  <tr>
      <td>
        <div class="clearfix">
          <div class="product_desc">
            bar
          </div>
          <span>foo</span>
        </div>
        <div class="base">
          &nbsp;
        </div>
      </td>
      <td>
        <div class="clearfix">
          <div class="product_desc no-side-border">
            bar
          </div>
          <span>foo</span>
        </div>
        <div class="base">
          &nbsp;
        </div>
      </td>
  </tr>
  <tr>
      <td>
        <div class="clearfix">
          <div class="product_desc">
            bar
          </div>
          <span>foo</span>
        </div>
        <div class="base">
          &nbsp;
        </div>
      </td>
      <td>
        <div class="clearfix">
          <div class="product_desc no-side-border">
            bar
          </div>
          <span>foo</span>
        </div>
        <div class="base">
          &nbsp;
        </div>
      </td>
  </tr>
</tbody></table>

</body>
</html>


mfg Maik
 
Morgen,

das ist schon mal sehr gut. Nur ih versteh da schon richtig, dass man das nur anwenden kann, wenn man mehr als 2 bzw. 4 Artikel hat. Oder irre ich mich da jetzt?
 
Moin,

worauf willst du hinaus?

Etwa, dass der Effekt an den Kreuzungspunkten der Artikelboxen bei einer ungeraden Anzahl flöten gehen würde, weil die benachbarte und darunter folgende Box fehlt?

Da irrst du dich nicht, und rufst eben die Boxen solange mit einem Platzhalter auf, bis ein Artikel darin aufgenommen wird, damit das "Ensemble" immer komplett ist.

mfg Maik
 
Ich se das Problem dadrin, wenn ich nur einen Artikel auf der Seite habe, das mindesten zwei oder noch mehr leer Platzhalter angezeigt werden. Und somit auch mehr Border als eigentlich nötig. Oder versteh ich das gerade falsch?

oben in deinem Beispiel, fehlt da nicht die Klasse: product_desc no-side-border?

Der nächste Schritt den ich machen muss, ist den folgenden Code so anzupassen, das die border erstellt werden. Und da frage ich mich gerade ob ich nur einmal den Bereich zeichen lassen muss oder ob ich da schon mehrmals die Tabelle erstellen muss für die unterschiedlihen Border. Ich hoffe du kannst mir folgen. Weiß nicht so genau wie ich das beschreiben soll.

Code: 
<table class="productPreview" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    {if $module_data.products_image!=''}<td class="productPreviewImage"><a href="{$module_data.products_link}">{img img=$module_data.products_image type=m_info class=productImageBorder alt=$module_data.products_name}</a></td>{/if}
    <td class="productPreviewContent">
		<h2><a href="{$module_data.products_link}">{$module_data.products_name}</a></h2>
		{if $module_data.date_available!=''}
		<ul class="info_info">
			<li class="infoInfo">{txt key=TEXT_PRODUCT_AVAILABLE} {$module_data.date_available|date_format:"%A, %B %e, %Y"}</li>
		</ul>
		{/if}
		{if $module_data.review_stars_rating}
			<div class="reviews_rating_light"><div class="reviews_rating_dark" style="width:{$module_data.review_stars_rating}%"></div></div>
		{/if}
		{if $module_data.products_short_description}<p>{$module_data.products_short_description}</p>
		<p>{/if}		</p>
		<p>{if $module_data.stock_image} </p>
		<p class="stockimage">{$module_data.stock_image.name}</p>
		{/if}
		<p>{if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'} </p>
		<p class="price">{$module_data.products_price.formated}</p>
		<p class="taxandshippinginfo">{if $module_data.products_shipping_link}<a href="{$module_data.products_shipping_link}" target="_blank" rel="nofollow">{txt key=TEXT_EXCL_SHIPPING}</a>{/if}</p>
		{if $module_data.base_price}<p class="vpe">{$module_data.base_price.price} {txt key=TEXT_SHIPPING_BASE_PER} {$module_data.base_price.vpe.name}</p>
		{/if}
		{/if}
		

		

		{if $module_data.allow_add_cart eq 'true'}
		{form type=form name=product action='dynamic' link_params=getParams method=post}
		{form type=hidden name=action value=add_product}
		{form type=hidden name=product value=$module_data.products_id}
		<div class="addtobasketlisting">
		</div>
		{form type=formend}
		{/if}
		<div id="detail"><a href="{$module_data.products_link}"><li>Details</li></a></div>
	</td>
  </tr>
</table>
 
bongartz hat gesagt.:
Ich se das Problem dadrin, wenn ich nur einen Artikel auf der Seite habe, das mindesten zwei oder noch mehr leer Platzhalter angezeigt werden. Und somit auch mehr Border als eigentlich nötig. Oder versteh ich das gerade falsch?
Zum Vergrößern anklicken....
Wenn dein Script X-Boxen in die Seite generiert, davon aber nur Y-Boxen mit Artikeln befüllt sind, lautet die Antwort: Ja.
bongartz hat gesagt.:
oben in deinem Beispiel, fehlt da nicht die Klasse: product_desc no-side-border?
Zum Vergrößern anklicken....
Nö.
bongartz hat gesagt.:
Der nächste Schritt den ich machen muss, ist den folgenden Code so anzupassen, das die border erstellt werden. Und da frage ich mich gerade ob ich nur einmal den Bereich zeichen lassen muss oder ob ich da schon mehrmals die Tabelle erstellen muss für die unterschiedlihen Border. Ich hoffe du kannst mir folgen. Weiß nicht so genau wie ich das beschreiben soll.
Zum Vergrößern anklicken....
Das mußt du schon mit dir selber ausmachen, was dir da recht ist, ob du nun die "unnötigen" Rahmen in der Seitendarstellung möchtest, oder eben nicht.

mfg Maik
 
Und wieso finde ich die Klasse product_desc no-side-border nicht bei den CSS? Oder muss man die nicht deklarieren?

Die sollte doch dafür da sein das bei den letzten Artikeln unten kein border mehr zu sehen ist oder? Bei deinem Beispiel sind diese aber zu sehen.
 
Da steht sie doch :suspekt:
HTML: 
...
      <td>
        <div class="clearfix">
          <div class="product_desc no-side-border">
            bar
          </div>
          <span>foo</span>
        </div>
        <div class="base">
          &nbsp;
        </div>
      </td>
...
CSS: 
.no-side-border {
border-right:medium none;
}

Für die letzte Artikel-Zeile, in der der untere Rahmen nicht angezeigt wird, erhält das DIV .base zusätzlich die Klasse .no-bottom-border - und diese fehlt in meinem heruntergebrochenen Beispielcode aus der Original-Seite :p

Ein kurzer Blick in den frei zugänglichen Quelltext der Webseite hätte dir aber auch diese Frage beantwortet.

mfg Maik
 
axo.

versteh ich das richtig das mein zwei Klassen kombinieren kann? Ich hatte nach dem gesamten Ausdruck gesucht, aber nix gefunden, jetzt wird mir auch klar warum ;-)
 
Die Anzahl der zu implementierenden Klassen ist im class-Attribut nicht limitiert.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück