✔ Artikel so darstellen wie auf diesem Bild mit CSS

[bongartz]

Hallo,

ich überlege schon die ganze Zeit wie man diese hervorgehoben Linien auf dem Bild machen kann mit Css und Border oder Images.



Mein Problem besteht dadrin dem CSS zu sagen, das es nur die Border anzeigen soll, wenn sich nebenan ein weiterer Artikel befindet. Wie man sehen kannst ist ja bei den Artikel in der rechten Spalte kein Border, sowie ganz oben und ganz unten bei den Artikeln. Ich habe wirklich schon Stunden lang überlegt, aber komme nicht darauf.

Danke für eure Hilfe

Gruß

Bongartz

 

[Maik]

Hi,

wo hast du denn diese Vorlage entdeckt? Ein Link zu ihr könnte hier mehr Aufschluß bringen, wie es vom Autor realisiert wurde.

mfg Maik

 

[bongartz]

Hi,

also so wie ich es ein schätze sind es border mit meinem Panding von 5 pixel, damit sie sich nicht in der Mitte treffen..

http://www.purador.de/Ringe/Edelstahl

 

[Maik]

Grafiken kommen hier tatsächlich nicht zum Einsatz.

Der horizontale Rahmen wird mit einem DIV namens ".base" erzeugt:

#product_display_overview .base {
border-bottom:1px solid #E0E0E0;
}

und der vertikale Rahmen mit dem DIV ".product_desc":

#product_display_overview table .product_desc {
border-right:1px solid #E0E0E0;
}

...
<td>
        <div class="clearfix">
          <div class="product_desc">
            ...                         
          </div>
	      ...
        </div>
        <div class="base">
          &nbsp;
        </div>
</td>
...

mfg Maik

 

[bongartz]

danke,

nur ich glaube nicht wenn ich das so mache, das dass reicht. da muss doch noch viel mehr hinterstecken.

 

[Maik]

Du kannst dir ja die einzelnen Stylesheet-Dateien zu Gemüte führen, um die übrigen Formatierungen in Erfahrung zu bringen.

Ich tippe da mal auf eine margin- und/oder padding-Deklaration.

mfg Maik

 

[bongartz]

mh ok,

ich habe da wohl gerade einen sehr großes Verständnis Problem. Wie kann man denn mit margin border ausblenden? Oder denke ih da gerade total falsch. Mir fehlt gerade so der logische Ansatz wie ich das machen soll.

 

[Maik]

Mit margin wird der Rahmen nicht ausgeblendet, sondern ein Außenabstand zwischen den Boxen erzeugt, sodass der Rahmen an den "Kreuzungen" nicht zusammenstößt.

mfg Maik

 

[bongartz]

ja ok, dann habe ich panding und margin verwechselt. aber mein Problem besteht ja dadrin zu verstehen, rein von der Logik, ohne if Abfragen. Wie man so etwas lösen kann.

 

[Maik]

So, ich hab nochmal die umfangreichen CSS-Dateien unter die Lupe genommen, und noch diese Formatierung für die beiden angesprochenen Boxen entdeckt:

#product_display_overview table .product_desc {
float:right;
height:10.5em;
padding-right:4px;
width:152px;
}

#product_display_overview .base {
height:9px;
margin:0 9px 0 2px;
}

Du solltest dir mal Firebug zulegen, um zukunftig solch interessante Webseiten, die bei dir Fragen zur technischen Umsetzung aufwerfen, eigenständig analysieren zu können

mfg Maik