Farbige Infobox für eBay-Auktions und 'mich'-Seiten Informationen in Textform sind meist langweilig anzusehen. Eine Möglichkeit dies zu ändern sind farbige Boxen. Mit ein wenig CSS und HTML lässt sich jeder Text etwas ansprechender darstellen. CSS-Code: Der CSS-Code kommt an den Anfang der Artikelbeschreibung in das HTML Feld. <style type="text/css"> .box1{ background-color:#ffbfbf; padding: 10px; color: #666666; font-family: monospace, Verdana, sans-serif; font-size: 10pt; text-align: justify; border: 1px solid #ff0000; } </style> HTML-Code: Der HTML-Code kommt an die Stelle an der die Box später erscheinen soll. <div class="box1"> <!-- Start Inhalt Box1 --> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at massa eget magna ultricies porttitor. Vivamus ipsum. Morbi dignissim. Donec augue magna, dapibus eget, pharetra et, interdum a, diam. Nulla ultricies, justo et luctus ultrices, risus turpis mollis ligula, eu tincidunt felis diam sit amet lacus. In hac habitasse platea dictumst. Donec congue scelerisque erat. <!-- Ende Inhalt Box1 --> </div><p> Ergebniss: Weitere Farbbeispiele: <style type="text/css"> .box2{ background-color:#bfbfe5; padding: 10px; color: #666666; font-family: monospace, Verdana, sans-serif; font-size: 10pt; text-align: justify; border: 1px solid #000099; } </style> <div class="box2"> <!-- Start Inhalt Box2 --> Maecenas tempor blandit lorem. Suspendisse arcu. Curabitur laoreet tortor id nisi. Nam nec nunc eu tortor bibendum iaculis. Pellentesque at odio eget lacus sollicitudin mollis. Integer pellentesque tristique mauris. Donec et odio. Pellentesque risus lectus, euismod sit amet, tincidunt a, fermentum ut, ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <!-- Ende Inhalt Box2 --> </div><p> <style type="text/css"> .box3{ background-color:#fff2bf; padding: 10px; color: #666666; font-family: monospace, Verdana, sans-serif; font-size: 10pt; text-align: justify; border: 1px solid #ffcc00; } </style> <div class="box3"> <!-- Start Inhalt Box3 --> Proin eget lorem ac purus iaculis tempus. Maecenas condimentum. Suspendisse vulputate, est et auctor vehicula, leo orci interdum nunc, ut elementum augue mauris at orci. Ut vulputate, quam vulputate aliquam viverra, nunc nisi tincidunt elit, viverra pulvinar lorem purus ut augue. Sed et eros non lacus varius sollicitudin. Quisque nec quam et neque viverra sollicitudin. <!-- Ende Inhalt Box3 --> </div><p> <style type="text/css"> .box4{ background-color:#e5f2bf; padding: 10px; color: #666666; font-family: monospace, Verdana, sans-serif; font-size: 10pt; text-align: justify; border: 1px solid #99cc00; } </style> <div class="box4"> <!-- Start Inhalt Box4 --> Vestibulum sagittis, ipsum sed sollicitudin bibendum, odio urna molestie velit, ut pharetra dolor orci sed nulla. Nullam feugiat tellus. Aenean quis sapien. Curabitur dignissim odio a est. Sed fermentum consequat lacus. Donec placerat laoreet lectus. Aliquam at purus vitae mauris commodo tristique. Curabitur eu libero. In hac habitasse platea dictumst. <!-- Ende Inhalt Box4 --> </div><p> Zur Übersicht

Bookmarks: