Amazon Banner 1.6

NEW ! - Kristof Bilder

Unter Bildergallerie Kristof gibt es neue Bilder von unserem Kleinen!

Container oder Box zentrieren

Um eine Box mittig zum übergeordneten Objekt auszurichten sind mir zwei unterschiedliche CSS Formatierungsmöglichkeiten bekannt.

Eine Möglichkeit besteht darin, die Rechten und Linken Rand auf AUTO zu setzen. Das funktioniert recht gut in den meisten Browsern mit CSS2 Unterstützung. Zwingend erforderlich ist die Angabe eines Wertes für die Breite (width)

Der Peek-a-boo Bug

Entsteht bei einem variablen Container in der Breite mit einer Box darin bei der z.B. float:left gesetzt ist. Der die innere Box umfliessende Content ist einfach nicht sichtbar. Du kannst die Seite sooft reloaden wie du willst... Ein scrollen (wenn möglich) der Seite lässt den Text hervortreten. Hier mal kurz die Syntax in Kurzform

CSS Hacks

IE7 Zoom Funktion

Im IE7 können sie ausser der Schriftgröße auch die ganze Seite zoomen, inklusive Grafiken und anderer Elemente. Wenn Links im Text mit einem HOVER Effekt versehen werden und diesen eine Hintergrundfarbe zugewiesen wird, kann es passieren, dass diese Hintergrundfarbe beim zoomen nicht mehr über den Links positioniert ist und sich auch der Text verschiebt.

Attributselektoren

Eine Besonderheit an diesem Template sind die Attributselektoren aus der CSS-3 Spezifikation.

Diese ist zwar noch nicht Standard, jedoch werden diese von Firefox, SeaMonkey, Safari und IE7 unterstützt. Insofern ist das Risiko, dass diese Spezifikationen in die endgültige Version von CSS-3 übernommen werden relativ gering.

a[href^="http:"] {
padding-right:10px;
background: url(../images/externallinks.gif) no-repeat right top;
}
a[href^="http://www.babydo.de"], a[href^="http://babydo.de"]{
padding-right:0;
background-image:none;
}
a[href^="mailto:"] {
padding-right:10px;
background: url(../images/email.gif) no-repeat right top;
}

Einige Joomla Templates die ich erstellt habe arbeiten mit diesen Selektoren, ich weise aber ausdrücklich darauf hin, das nicht alle Browser diese korrekt darstellen.

FIR - Fahrner Image Replacement

FIR ist die ursprüngliche Bildersetzungsmethode schafft aber auf Grund der Einschränkungen in Bezug auf Barrierefreiheit einige Probleme. Der zu ersetzende Text wird in einen eigenen SPAN-Bereich gesetzt.

<p> <span> zu ersetzender Text </span> </p>

Dem p-Bereich wird nun das Hintergrundbild zugewiesen.

p { background:url(image.gif) no-repeat; }

Der Inhalt des SPAN-Bereiches wird ausgeblendet.

span {display:none};

Probleme gibt es mit einigen (nicht allen) Bildschirmlesegeräten, die den Text ignorieren. FIR funktioniert unter Internet Explorer 5+, Opera 5+, Netscape 6+ und Safari.

SuperHTML Web Studio 8.5 ist ein professioneller, deutschsprachiger HTML/Webeditor, der unter anderem zur Erstellung von Homepages, Webseiten, Webanwendungen und CMS-Templates geeignet ist.

SuperHTML Web Studio ist in erster Linie ein Code-basierter Editor, der volle Kontrolle über den Quellcode und maximale Flexibilität und Präzision bietet. Speziell für HTML-Dokumente steht aber auch ein bequemer WYSIWYG-Modus zur Verfügung, der besonders für Anfänger mit wenig HTML-Kenntnissen geeignet ist. Das Programm unterstützt alle gängigen Sprachen aus dem Webumfeld wie HTML, XHTML, XML, CSS, JavaScript, PHP, Perl, Ruby, WML u.v.m. und ist damit ein unverzichtbares Werkzeug für jeden professionellen Webentwickler. Weiterhin ist SuperHTML Web Studio vollständig Unicode-fähig und kann Dokumente für alle Zeichensätze und Sprachen bearbeiten und erstellen (ANSI, UTF-8 und UTF-16).

Testversion downloaden? Hier!


Unterkategorien

Die Entwicklung von Cascading Stylesheets (CSS) bleibt nicht stehen und so liegt der Entwurf für CSS 3 bereits seit längerem auf dem Tisch des World Wide Web Consortium (W3C). Diese nächste Generation beinhaltet zahlreiche Verbesserungen, die die Layoutentwicklung entscheidend beeinflussen werden.

CSS Templates zur freien Verwendung.

Grundlegende CSS Techniken - wie Bildersetzung, Selektoren und CSS Hacks

Beschreibung von SuperHTML als HTML und CSS Editor

feed-image