blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Archive for the ‘CSS’ Category

Erstellen einer Tabelle mit dynamisch hervorgehobenen Spalten

Sonntag, September 23rd, 2007

Auf askthecssguy.com wird anhand einer Preisliste demonstriert wie man eine Tabelle mit hervorgehobenen Spalten erstellen kann.

In Kombination mit einem Formular finde ich das Ganze auch sehr interessant.

<input type=”file” /> via CSS durch eine Grafik ersetzen

Samstag, Februar 3rd, 2007

Ich war heute auf der Suche nach einer Möglichkeit ein <input type=”file” /> durch eine Grafik zu ersetzen die beim anklicken den Dateibrowser öffnet. Im IE funktioniert das relativ einfach, man nimmt ein Bild das bei onclick ein per CSS ausgeblendetes <input type=”file” /> mit javascript:element.click(); anklickt und schon wird der Dateibrowser geöffnet.

Läuft aber halt nur im IE so. Im Firefox funktioniert das absolut gar nicht. Hat wohl sicherheitstechnische Hintergründe und muss ja auch gar nicht sein, denn es kann noch viel einfacher und eleganter umgesetzt werden wie Dave Clark bewiesen hat.

Man kann auch mit CSS ein <input type=”file” /> Element durch eine Grafik ersetzen die beim anklicken den Dateibrowser öffnet. Im Prinzip wird hier nur getrickst und man quasi an der Nase herumgeführt, denn hier ist das was man sieht nicht das was tatsächlich da ist. Man sieht ein Bild, klick aber auf ein durchsichtiges <input type=”file” /> Element.

Und das Prinzip ist echt super simpel. Man nimmt einen <div> und legt in diesen das <input type=”file” /> und einen weiteren <div>. Den äusseren <div> positioniert man relative um das in ihm liegende <input type=”file” /> absolute positionieren zu können. Für das <input type=”file” /> definiert man eine sehr große Schrift (zB. 30px). Damit bekommt der <input type=”file” /> Button einebeträchtliche Größe. Zusätzlich wird der Button absolute oben rechts positioniert.

Auf das <input type=”file” /> Element folgt ein weiterer <div>. Dieser erhält die Höhe und Breite der gewünschten Grafik welche dann auch als background eingebunden wird. Und jetzt kommt der Trick:
Der äusserste <div> bekommt nun auch die Breite der Grafik. Dadurch wird nun die Schaltfläche des <input type=”file” /> über das Bild gelegt, alles was überstehen würde wird mit overflow:hidden; abgeschnitten. Jetzt liegt die Schaltfläche auf der Grafik. Damit wir nun die Grafik sehen können muss einfach das <input type=”file” /> Element mittels opacity:0; für den Firefox und mit filter: alpha(opacity: 0); für den IE durchsichtig gemacht werden, bleibt dabei aber klickbar.

CSS:
div.uploader {
  position: relative;
  width: 28px;
  height: 26px;
  overflow: hidden;
}
input.uploadbox {
  position: absolute;
  right: 0;
  font-size: 30px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity: 0);
}
div.uploader_img {
  background: transparent url(uploader.gif) no-repeat scroll left bottom;
  white-space: normal;
  width: 28px;
  height:26px;
}

HTML:
<div class="uploader">
  <input class="uploadbox" type="file" />
  <div class="uploader_img">
  </div>
</div>

Und so sieht der neue Filebrowser Button aus diesem Beispiel aus:

Select tag overlap in IE, Part II

Mittwoch, Mai 17th, 2006

Wer schomal versucht hat ein Javascript PopUpMenü über einer Selectbox zu platzieren wird schnell gemerkt haben das im IE die Selectboxen immer über dem PopUpMenü liegen. Nicht schön und hat mich selber schonmal fast zur Verzweiflung gebracht.

Tanny O’Haley hatte mir damals schon eine funktionierende Lösung für dieses Problem liefern können. Nun geh er mit seinem Artikel “Select tag overlap in IE, Part II” in eine neue Runde um diesem Grauen ein Ende zu bereiten.

The Triple-X hack …

Montag, Februar 20th, 2006

an exclusive CSS filter for IE7

In Search of the Holy Grail

Donnerstag, Februar 2nd, 2006

Auf alistapart.com ist vor ein paar Tagen ein sehr lesenswerter Artikel über mehrspaltige CSS Layouts veröffentlicht worden.

Focus Slide Navigation

Sonntag, Januar 8th, 2006

http://www.sgclark.com/sandbox/focusslide/

FACE

Mittwoch, Dezember 21st, 2005

Faruk’s Animated CSS Enhancements

Check it, don’t select it

Mittwoch, Dezember 21st, 2005

checklist-samples


88,166 Spam-Kommentare
blockiert von
Akismet