✔ Artikel so darstellen wie auf diesem Bild mit CSS

B

bongartz

Mitglied
Hallo,

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

Untitled 3.png

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
 
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
 
Grafiken kommen hier tatsächlich nicht zum Einsatz.

Der horizontale Rahmen wird mit einem DIV namens ".base" erzeugt:
CSS: 
#product_display_overview .base {
border-bottom:1px solid #E0E0E0;
}

und der vertikale Rahmen mit dem DIV ".product_desc":
CSS: 
#product_display_overview table .product_desc {
border-right:1px solid #E0E0E0;
}
HTML: 
...
<td>
        <div class="clearfix">
          <div class="product_desc">
            ...                         
          </div>
	      ...
        </div>
        <div class="base">
          &nbsp;
        </div>
</td>
...


mfg 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
 
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.
 
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
 
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.
 
So, ich hab nochmal die umfangreichen CSS-Dateien unter die Lupe genommen, und noch diese Formatierung für die beiden angesprochenen Boxen entdeckt:

CSS: 
#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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück