Tags: «CSS»

CSS: Listenelemente nach x Elementen umbrechen

// 16102008 / Webprogrammierung / 3 Kommentare

CSS: Listenelemente nach x Elementen umbrechen

Nico hatte mir geschrieben, dass das Umbrechen von "li"s in einen nächsten Block auch mit CSS funktioniert (ich hatte es mit Javascript via jQuery realisiert).

{ weiterlesen: "" }

Read other interesting articles:

eBay Design Trick: So wird die Angebotsseite zum Hingucker!

// 02092008 / Allgemein, Mittagspause, Webprogrammierung / 13 Kommentare

eBay Design Trick: So wird die Angebotsseite zum Hingucker!

Mit ein paar CSS Kniffen lässt sich ein eBay Angebot auch "drumherum" ganz nett aufhübschen, z.B. mit ein paar Icons bei den Artikelmerkmalen oder einem großen Banner über dem Angebot. Hierzu werden die nachfolgenden CSS-Styles einfach in das ebay Angebot eingebunden.

{ weiterlesen: "" }

Read other interesting articles:

* html body {display: none;}

// 02092008 / CSS, Online Marketing, Webdesign / 2 Kommentare

* html body {display: none;}

* html body {display: none;}

[via satzansatz]

Read other interesting articles:

Neues CSS Stylesheet für das Joomla Template beez

// 01092008 / CSS, Joomla, Webdesign / 4 Kommentare

Neues CSS Stylesheet für das Joomla Template beez

Ich erstelle derzeit ein Stylesheet für das Joomla Template beez, das Ihr einfach gegen das standardmäßig mitgelieferte Stylesheet austauschen könnt und damit einen komplett neuen Template-Look erhaltet - ohne die index.php oder andere Dateien außer dem CSS (und dem images Ordner) anzufassen.

Damit soll gezeigt werden, dass man das beez Template sehr vielseitig einsetzen kann, nur indem - wie bei CSS Zengarden - das CSS abgeändert wird.

Ich war nämlich ziemlich begeistert vom beez Template, da hier die tabellenlastige html-Ausgabe von Joomla 1.5 so schön tabellenlos überschrieben wird (siehe html Ordner im Template Verzeichnis). Nachdem ich mit Angie Radtke - Co-Autorin des beez Templates - neulich telefoniert habe, sagte sie mir jedoch, der Fokus des Templates liege nicht auf dem html-Ordner im Template, sondern darauf, dass man jedes beliebige Layout mit beez realisieren könne, indem das CSS geändert wird.

Vorteil: Nix mehr php-Programmierung, sondern nur noch CSS Know How. Ideal für Webdesigner.

Nachteil: Bei ausgefalleneren Layouts doch eher was für CSS-Profis, die sicher mit float, position usw. umgehen können.

Jetzt fehlt nur noch ein bisschen Detailarbeit, dann ist das Stylesheet finito :-)

Read other interesting articles:

Tabulatoren in HTML

// 25082008 / CSS, Webdesign / ein Kommentar

Tabulatoren in HTML

Hätte gerne ein <tab/> Tag in HTML. Gibt's aber nicht. <table> will ich nicht. CSS ist mir zu aufwendig für einen kurzen Abschnitt. Und nun?

Zum Glück gibt es <pre></pre>, mit dem man getabbte Texte simulieren kann. Beispiel:

Smashing Magazin: The <hr /> Contest
Gewinn:           Wacom Intuos3 9X12 USB Tablet
Anforderung:      Tag stylen und einschicken

Sieht dann im Quelltext so aus:

<pre>
Smashing Magazin: The <hr /> Contest
Gewinn:           Wacom Intuos3 9X12 USB Tablet
Anforderung:      Tag stylen und einschicken
</pre>

Wer den Monospace Font nicht mag, schreibt einfach ein <pre style="font-familiy:Verdana, Arial, sans serif;"> o.ä. statt dem einfachen <pre>.

Einziger Wermutstropfen sind die vielen Leerzeichen hintereinander um den Text zurechtzurücken, aber das kann ich in diesem Falle verschmerzen.

Read other interesting articles:

Kleines Update für joomswanky

// 22082008 / Joomla / 4 Kommentare

Kleines Update für joomswanky

Das Joomla Template joomswanky hat ein kleines Update erfahren: Ich hatte das Style für's Paging vergessen; ist jetzt drin. Falls Ihr das Template schon installiert habt, reicht es einfach nur die CSS-Datei auszutauschen oder folgendes CSS hinzuzufügen:

ul.pagination {
list-style-type:none;
margin:10px 0px;
padding:4px 0px;
text-align:center;
background-color: #EEE;
}

ul.pagination li {
display:inline;
padding:2px 5px 0;
text-align:left;
}

ul.pagination li a {
padding:2px;
}

Download joomswanky 1.1

Read other interesting articles:

Free Joomla 1.5 Template Download: joomswanky

// 13082008 / Joomla / 25 Kommentare

Free Joomla 1.5 Template Download: joomswanky

Vor Kurzem habe ich bereits darauf hingewiesen, dass es hier bald ein kostenloses Joomla Template zum Download gibt. Et voilà :-)

Das Joomla Theme joomswanky basiert auf einem CSS Template Design von Free CSS Templates und nennt sich im Original swanky. Sinn und Zweck ist einfach, den Joomla typischen Layouts (bei denen man auf den ersten Blick erkennt, dass es sich um Joomla handelt) kontra zu bieten und zu zeigen, dass es auch anders geht.

{ weiterlesen: "" }

Read other interesting articles:

Styling für HTML-Tabellen: 30 Kostenlose CSS-Stylesheets

// 11082008 / CSS, Webdesign / 7 Kommentare

Styling für HTML-Tabellen: 30 Kostenlose CSS-Stylesheets

Da HTML Tabellen von Natur recht prüde aussehen, empfiehlt es sich sie per CSS zu stylen. Auf http://icant.co.uk/csstablegallery/ findet Ihr eine große Sammlung von CSS Styles für HTML Tabellen.

Da es dort jedoch keine direkte Vorschau der Styles gibt, einige Styles nicht richtig funktionieren und manche auch ganz übel aussehen, gibt's hier ein Best-Of inkl. Download-Link und Vorschau-Bildchen.

Das Styling für jede einzelne Tabelle befindet sich in einer kleinen CSS-Datei, die Ihr entsprechend downloaden könnt.

{ weiterlesen: "" }

Read other interesting articles:

Coming Soon: Free Joomla Template Download

// 31072008 / Joomla, Webdesign / 5 Kommentare

Coming Soon: Free Joomla Template Download

Kostenloses Joomla Template

Don't speak german? Don't worry: Just scroll down :-)

In Kürze könnt Ihr dieses CSS/HTML-Layout, das ich bei freecsstemplates gefunden habe (CC Lizenz), als kostenloses Joomla-Template hier downloaden. Eine der schönsten Neuerungen in Joomla 1.5 ist nämlich die Möglichkeit, die Formatierung der Inhalte im Joomla-Template einfach anzupassen (z.B. die Frontpage umzugestalten oder die Anzeige der einzelnen Artikel zu ändern) und das lässt sich an diesem Template im WordPress Layout ganz gut zeigen.

Ich ziehe diese / nächste Woche um daher müsst Ihr Euch zum Download leider noch ein paar Tage gedulden. Tipp: RSS-Feed abonnieren, dann kriegt Ihr auf jeden Fall Bescheid, sobald der Download online ist :-)

English:

The template you see above is a CSS/HTML-template by freecsstemplates, released under CC. I decided to make a free joomla template out of it because I like this layout and I think that it would be an approach to show you the possibility of Joomla 1.5 to customize the content output as you like (for example the frontpage or the articles).

I plan to release the download of the joomla template in one or two weeks because I'm moving this weekend and so there's no time to finish the template.

Read other interesting articles:

CSS Sprites: Mehr als nur link-hover Effekte

// 10072008 / Webdesign / Noch keine Kommentare

CSS Sprites: Mehr als nur link-hover Effekte

Was sind CSS Sprites?

Mit CSS Sprites wird man als Webentwicklerin im wahrsten Sinne des Wortes zum echten Pixelschubser. Das zu Grunde liegende Prinzip ist einfach: Der CSS-Background-Style für z.B. einen Absenden-Knopf enthält ein zusammengesetztes Bild, welches jeweils das Einzelbild für den normalen Zustand und für den hover-Zustand enthält. Beim hovern wird dann über background-position das sichtbare Stück Bild einfach um ein paar Pixel verschoben und  - ohne dass das ein neues Bild vom Server angefordert und geladen werden musste - wird das hover-Bild direkt dargestellt.

Beispielbild: Verschiedene Einzelbilder für normal, hover und active State eines Buttons in einem Bild kombiniert

Mit CSS Sprites komplette Webseiten beschleunigen

CSS Sprites erweitern oben genanntes Konzept, indem nicht nur zwei oder drei Einzelbilder in einem Bild kombiniert werden, sondern "unbegrenzt" viele.  Man kann auch sagen, dass die oben genannte Technik ein ganz simples CSS Sprite darstellt, d.h. viele von Euch arbeiten wahrscheinlich schon mit "CSS Sprites" ohne es bisher gewusst zu haben.

Kürzere Ladezeiten und Image-Preloading

Der Hauptvorteil ist zum einen eine kürzere Ladezeit, da die Anzahl der Server-Anfragen drastisch reduziert werden kann, denn diese Anfragen kosten nunmal einfach Zeit. Anstatt z.B. zwanzig Mal ein kleines Bild zu laden, wird einmal ein großes Bild geladen, dass alle kleinen Bilder enthält, und das spart definitiv Zeit. Zum anderen sind alle benötigten Bilder - auch die noch nicht sichtbaren - schon geladen und werden nicht erst vom Server angefordert, wenn sie gebraucht werden (sogenanntes Image-Preloading), was für hover-Effekte eben sehr vorteilhaft ist. (Man kann das natürlich auch mit Javascript realisieren, aber ich persönlich vermeide Javascript natürlich, wenn ich den gleichen Effekt mit CSS erzielen kann, da nicht extra ein Skript geladen werden muss.)

{ weiterlesen: "" }

Read other interesting articles:



  • www.goneo.de