Archiv

Archiv für die Kategorie ‘CSS’

Aufklappbares und zuklappbares div Element (jQuery)

7. November 2012 3 Kommentare

Will man für den Nutzer erweiterte, zusätzliche Informationen beim Laden der Seite ausblenden und nur bei einer bestimmten Aktion bzw. Event einblenden, wie zum Beispiel durch einen Klick (on click) oder durch Drüberfahren (on mouse over) mit dem Mauszeiger, dann kann man dafür ein kleines Javascript nutzen. Per CSS wird das div Element nach dem Laden der Webseite vorerst unsichtbar gemacht, ist jedoch im HTML Quelltext enthalten. Sehr schön kann man dafür dann jQuery mit bereits vorhandenen Effekten wie dem Slide einsetzen.

Bei Mausklick einen Layer öffnen (jQuery)

2. November 2012 Keine Kommentare

Detailierte und zusätzliche Informationen zu einem Thema auf einer Webseite kann man per Klick auf einen Link in einem Layer bzw. Popup anzeigen lassen. Das macht in vielen Fällen Sinn, weil man den Nutzer nicht sofort mit Sachen bombadiert, die für ihn eher uninteressant sein könnten.

Banner (div) außerhalb des Contents positionieren

26. März 2012 11 Kommentare

In CSS gibt es viele Möglichkeiten ein Banner rechts oder links außerhalb der Seite und somit außerhalb des Contents zu positionieren. Auf vielen Webseiten werden gerne interne Werbebanner platziert, die auf eigene statt fremnde Angebote oder Seiten verlinken. Besonders bei Aktionen, Sonderangeboten oder neuen Artikeln kann man so die Aufmerksamkeit der Kunden auf diese „Hightlights“ lenken. CSS bietet verschiedene Methoden ein DIV mit einem Banner in einem bestimmten Bereich außerhalb des eigentlichen Contentbereichs zu platzieren.

Text neben Bild vertikal ausrichten (zentrieren)

23. Februar 2012 Keine Kommentare

Zu einem guten Artikel macht sich ein schönes zur Thematik passendes Bild im Content ganz gut und intensiviert die Vorstellungskraft des Lesers. In einer HTML Seite kann der Text beliebig positioniert werden. Der Text kann entweder oberhalb oder unterhalb, aber genauso rechts oder links, d.h. fließend neben dem Bild platziert werden. Bei der Platzierung von Textinhalt auf Webseiten bedarf es einer Ausrichtung.

DIV-Container über volle Höhe (height: 100%)

12. Februar 2012 2 Kommentare

Ab und zu verlangt ein Web Design (Layout) bei der Umsetzung, dass ein Bereich, wie zum Beispiel der Contentbereich über die volle Höhe der Auflösung geht. Hat der Nutzer zum Beispiel eine 1024 x 768 Pixel Bildschirmauflösung, dann soll das Design über die volle Höhe gestreckt werden, auch wenn der Inhalt der Seite sebst nur eine Höhe von 200 Pixeln einnimmt.