www.archive-de-2014.com » DE » M » MADDESIGNS

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 254 . Archive date: 2014-10.

  • Title: border-radius (runde Ecken) – CSS3 Adventskalender Tag 1 | maddesigns
    Descriptive info: border-radius (runde Ecken) CSS3 Adventskalender Tag 1.. Dezember 2010.. 9 Kommentare.. Runde Ecken (.. ) sind das langersehnte Feature, das CSS lange Zeit gefehlt hat.. Zumeist musste man auf Grafiken und abstruse HTML-Konstrukte zurückgreifen um zum gewünschten Ergebnis zu kommen.. Um einen kleinen Wermutstropfen vorweg zu nehmen, wer runde Ecken sauber im Internet Explorer 6-8 darstellen will, muss weiterhin auf Grafiken etc.. zurückgreifen, erst der IE9 setzt die Eigenschaft border-radius um.. Firefox und Webkit-Browser bieten durch den Einsatz von Vendor-Prefixen schon seit längerem die Möglichkeit border-radius einzusetzen.. Die Shorthand-Schreibweise ist ähnlich der padding- und margin-Shorthand-Schreibweise (z.. border-radius: 20px).. -moz-border-radius: 20px;.. -webkit-border-radius: 20px;.. /* aktuelle Webkitbrowser brauchen keinen Prefix mehr */ border-radius: 20px;.. Für individuelle Ecken sind die Schreibweisen zwischen -moz und -webkit Browser unterschiedlich:.. -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 20px; border-top-left-radius : 5px; border-top-right-radius: 10px; border-bottom-right-radius: 15px; border-bottom-left-radius: 20px;.. Wie bei padding und margin werden auch bei border-radius die verschiedenen Werte für den Radius im Uhrzeigersinn angegeben, also für die Ecken übersetzt: oben-links oben-rechts unten-rechts unten-links.. -moz-border-radius: 5px 10px 15px 20px; -webkit-border-radius: 5px 10px 15px 20px; border-radius: 5px 10px 15px 20px;.. Tabs mit abgerundeten Ecken oben erhält man mit der Angabe:.. -moz-border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;.. praktisches Beispiel:.. Suchformular Screenshot:.. IE-Ansicht (6-8):.. HTML:.. form class="searchForm" action="" method="post" input class="searchField" type="text" value="Suchwort eingeben.. " onfocus="if (this.. value == 'Suchwort eingeben.. ') {this.. value = '';}" onblur="if (this.. value == '') {this.. value = 'Suchwort eingeben.. ';}" / input class="searchButton" type="submit" value="Suchen" / /form.. CSS:.. searchForm {  ...   es im.. Webstandard-Blog.. mit.. Border-Radius Ungleiche Ecken CSS3 Adventskalender.. weiter.. Tweet.. Beitragsnavigation.. Vorheriger Beitrag.. CSS3 Adventskalender + Buchverlosung.. Nächster Beitrag.. CSS3 Adventskalender Tag 2.. 9 Gedanken zu border-radius (runde Ecken) CSS3 Adventskalender Tag 1.. Hans Christian Reinl.. sagt:.. Dezember 2010 um 10:58.. Ich finde es sehr gut, wie du alles zum Thema runde Ecken mit CSS3 beschreibst, auch wie man die einzelnen Ecken stylen kann usw.. Browsersupport ist dabei sehr wichtig.. Ich habe vor einiger Zeit einen kürzeren Artikel über das gleiche Thema geschrieben und zeige auf, wie man die abgerundeten Ecken auch im IE6-8 bekommen.. Eventuell interessant für den ein oder anderen.. source-access.. eu/blog/css3-abgerundete-ecken-fuer-boxen.. Pingback:.. 8 Online-Adventskalender für Webworker » t3n News.. Dezember 2010 um 13:39.. Ich will nicht zu viel vorweg nehmen, aber Runde Ecken für den IE 6-8 kommt nochmal genauer!.. Online-Adventskalender für Selbständige im Netz News Adventskalender, Selbständig, Online, Software, Tipps, Apps.. Vincent.. Dezember 2010 um 15:40.. Gut beschrieben werde es für meine andere Seite verwenden.. Chris.. Dezember 2010 um 17:59.. Tolle Idee mit dem Adventkalender.. Abgerundete Ecken kannte ich schon, aber der Rest von CSS3 ist noch ziemlich Neuland für mich.. Gustav.. Dezember 2010 um 18:06.. Guter Artikel.. Sicher kein Fehler, sich mit dem Thema detailierter zu beschaeftigen.. Werde auf jeden Fall die weiteren Posts im Auge behalten.. Michael.. Dezember 2010 um 21:37.. Bin sehr gespannt auf die nchsten Tage.. Werde auf jeden Fall täglich vorbei schauen.. Dezember 2010 um 21:39.. Morgen am 2.. Tag geht es im CSS3 Adventskalender bei.. http://webstandard.. kulando.. de/.. weiter! Was man mit runde Ecken (border-radius) noch so anstellen kann!.. Kommentare sind geschlossen.. Werk 83.. Pepo..

    Original link path: /border-radius-runde-ecken-css3-adventskalender-tag-1-288.html
    Open archive

  • Title: box-shadow (Schatten) – CSS3 Adventskalender Tag 5 | maddesigns
    Descriptive info: box-shadow (Schatten) CSS3 Adventskalender Tag 5.. 5.. 2 Kommentare.. Einen Schatten hinter Elemente zu generieren unterstützen heutzutage alle moderneren Browser, selbst für den Internet Explorer 6-8 kann man einen Schatten zaubern.. Wie schon im.. CSS3 Adventskalender Tag 3 linear-gradient (Hintergrundverlauf).. beschrieben, kommt auch hier wieder eine proprietäre CSS-Eigenschaft.. filter.. des IE zum Einsatz.. Die CSS3-Eigenschaft orientiert sich am Syntax des.. Angegeben wird der Versatz auf x- und y-Achse, der Blur-Faktor sowie die Farbe.. Auch hier kann man mit Transparenzen, also einem Alphawert arbeiten.. Der Versatz kann auch negative Werte annehmen, der Schatten wird dann in die andere Richtung generiert.. box_shadow { -moz-box-shadow: 5px 5px 5px #e2e2e2; /* FF3.. 5+ */ -webkit-box-shadow: 5px 5px 5px #e2e2e2;/*Saf3+, Chr*/ box-shadow: 5px 5px 5px #e2e2e2; /*Op10.. 5, IE 9, FF4*/ filter:progid:DXImageTransform.. Microsoft.. Shadow ⏎ (color=#e2e2e2, Direction=135, Strength=5); /* IE6-7 */ -ms-filter:"progid:DXImageTransform.. Shadow ⏎ (color=#e2e2e2, Direction=135, Strength=5)"; /* IE8 */ zoom:1; /* trigger hasLayout */ }.. Zudem ist es möglich kommagetrennt mehrere Schatten anzugeben:.. -moz-box-shadow : 0 1px 3px rgba(0, 0, 0,.. 8), ⏎ 0 3px  ...   Direction=135, Strength=5)"; -moz-box-shadow: 3px 3px 5px #30393D; -webkit-box-shadow: 3px 3px 5px #30393D; box-shadow: 3px 3px 5px #30393D; }.. searchField { /* Beispiel-Code von Tag 1 */.. -moz-box-shadow: inset 2px 2px 3px #30393D; -webkit-box-shadow: inset 2px 2px 3px #30393D; box-shadow: inset 2px 2px 3px #30393D; }.. In dem praktischen Beispiel ist der Schatten im input-Feld searchfield nicht hinter dem Feld, also unten rechts, sondern innerhalb, oben links.. Diese Ausrichtung wird durch das Wort.. inset.. festgelegt.. Mehrer Filter-Eigenschaften für die IE6-8 werden einfach hintereinander geschrieben.. Demo-Datei zu CSS3 box-shadow (Schatten) aufrufen.. Supported in Safari 3+, Chrome 3+, Firefox 3.. 5+, Opera 10.. 5+, IE 6-8 (filter), IE9 Beta.. Opera, IE9 und Firefox ab der Version 4 brauchen keinen Prefix mehr.. Am Tag 6 geht es im.. mit Text-Overflow, das Auslassungszeichen.. CSS3 Adventskalender Tag 4.. CSS3 Adventskalender Tag 6.. 2 Gedanken zu box-shadow (Schatten) CSS3 Adventskalender Tag 5.. Dieter.. Dezember 2010 um 12:40.. Danke! Die Filter-Lösung für den IE werde ich mal demnächst in meinem Blog ausprobieren.. text-shadow Text-Effekte CSS3 Adventskalender Tag 7 | maddesigns..

    Original link path: /box-shadow-schatten-css3-adventskalender-tag-5-413.html
    Open archive

  • Title: CSS3 Adventskalender + Buchverlosung | maddesigns
    Descriptive info: November 2010.. 94 Kommentare.. Alle Jahre wieder möchte man fast sagen Adventskalender an jeder Ecke.. Mal mit Schokolade, mal mit lustigen Figuren, mal mit 24 Bierdosen und manchmal selbstgebastelt.. Ich möchte dieses Jahr jeden Tag vor Weihnachten ein CSS3-Trick Türchen öffnen.. Es wird ab dem 01.. 12.. 10 mal kleine und mal größere Beispiele zum praktischen Einsatz von CSS3 geben.. Und obendrauf gibt es noch eine Verlosung für den Gabentisch.. Unter allen Teilnehmern, die hier einen Kommentar hinterlassen, verlose ich das englischsprachige.. Buch CSS3 For Web Designers von Dan Cederholm.. (Vorwort von Jeffrey Zeldman).. Ich wünsche allen Teilnehmern und Lesern viel Spaß!.. Update: Der.. beteiligt sich am CSS3 Adventskalender und legt noch ein Buch oben drauf! Es wird also im Wechsel Tag für Tag einen tolles CSS3-Tutorial hier im Blog und im Webstandard Blog geben.. Mehr Infos folgen.. Teilnahmeschluß ist der 24.. 2010 um 24 Uhr.. Der Rechtsweg ist ausgeschlossen.. Die Auslosung erfolgt unter Zuhilfenahme von random.. org.. re:publica 2011.. 94 Gedanken zu CSS3 Adventskalender + Buchverlosung.. k-sock.. November 2010 um 16:10.. Hatte auch schon ueberlegt mir das Buch zu bestellen.. Mich hatte nur das Web Designer davon abgeschreckt.. Ueber den Gewinn wuerde ich mich trotzdem freuen.. patrick.. November 2010 um 17:34.. Bin mal gespannt was für Tricks du da zeigen wirst!.. mario.. November 2010 um 18:47.. Würde mich auch über einen Gewinn freuen!.. Paulina.. November 2010 um 20:53.. Hallo!.. Super Idee! Ich glaube, ich kannte deine Website noch gar nicht.. Werd ich mir mal von zu Hause genauer anschauen.. Liebe Grüße,.. Philipp.. 30.. November 2010 um 10:47.. Auf jedenfall besser als Schokolade wie ich finde.. Beste Grüße.. Mathias.. November 2010 um 10:56.. So ein Buch unter dem Bäumchen wäre schon toll.. Klar möchte ich das Buch auch haben und poste deshalb einen Kommentar.. Ich habe mir bereits das letzte Buch von A Book Apart gesichert und finde e gelungen, wie Jeremy Keith einen Überblick über HTML5 gibt.. Sven.. Na auf den Kalender freue ich mich schon.. Den werde ich täglich besuchen.. padey.. November 2010 um 11:07.. Das mit dem Kalender hört sich echt Klasse an, freue mich drauf.. Fladi.. November 2010 um 11:11.. Na da bin ich ja mal sehr gespannt, was Du uns so präsentierst.. Christian.. November 2010 um 11:12.. CSS Trick kann man nie genug kennen und freue mich auf deine Veröffentlichungen.. Das Buch ist dann sicherlich noch die praktische Ergänzung dazu.. hauke.. November 2010 um 11:25.. Au, des Buch hát ich gerne.. Niklas Jordan.. November 2010 um 11:44.. Habe mir zwar gerade das eBook gegönnt, aber eine gedruckte Fassung wäre auch etwas feines.. Sebastian Grau.. November 2010 um 12:05.. Hallo Zusammen,.. über das Buch würde ich mich sehr freuen.. Vielen Dank und schon einmal frohe Feiertage!.. November 2010 um 12:06.. Cool, hoffe ich hab Glück.. Lars L.. November 2010 um 15:26.. Sehr schöne Idee! Bin sehr auf die Tutorials gespannt.. Jonas.. November 2010 um 15:29.. Coole Aktion, bin gespannt! =).. Sonnenblume333.. November 2010 um 15:32.. Super Idee.. toller Preis.. Liebe Grüße.. Michael C.. November 2010 um 16:30.. Da bin ich doch glatt dabei.. November 2010 um 16:56.. Coole Aktion, bin mal aufs 1 Türchen gespannt.. Gruß.. Michael T.. November 2010 um 17:09.. Eine tolle Idee mit dem CSS3 Adventskalender.. Und dann noch ein Buch zu gewinnen, da mach ich doch auch mal mit.. Nguyen.. November 2010 um 17:28.. Ich würde mich auf das Buch und die CSS Tricks sehr freuen! : ).. November 2010 um 17:57.. Hey eine tolle Sache, bin schon auf die kommenden Beiträge gespannt.. Michael Wagner.. November 2010 um 18:35.. Hi, ich würde mich auch über das Buch freuen, denn ich hab es mir schon öfters angeschaut, aber es ist zur Zeit nicht im Budget drin.. Bea.. November 2010 um 20:02.. Hallo,.. Spannend, das Buch waer schon toll.. Diek.. November 2010 um 21:25.. Spannende Lektüre für eine besinnliche Zeit.. Würde mich freuen! Euch eine schöne Adventszeit!.. Schriebmann.. November 2010 um 22:09.. Her mit dem Ding.. Acki.. November 2010 um 23:24.. Würde mich auch über ein Buch freuen, besonders da ich jetzt erst richtig mit dem Webdesignen starte.. CSS3-Adventskalender | Webseiten-Infos.. de.. Daniel.. Dezember 2010 um 01:37.. Mit einem guten Buch statt Schokolade lässt sich die Weihnachtszeit auch genießen.. Und man spart sich die Diät  ...   so ein tolles büchlein ergatter.. Sascha.. Dezember 2010 um 18:15.. Super! Ein CSS3-Adventskalender!.. Bin gespannt welche Tipps es noch geben wird.. Jens Steingröver.. Dezember 2010 um 18:21.. Super Sache mit dem Adventskalender.. Schau ich mir alles an!.. Anton.. Dezember 2010 um 20:00.. Freue mich schon.. Tolle Idee.. Dezember 2010 um 21:10.. da hast du Recht da muss ich gleich mal schauen, was da falsch ist.. Hanne.. Dezember 2010 um 08:14.. Tag 2 kann kommen!!! Tag 1 war grandios!.. Dezember 2010 um 08:32.. Tag 2 im Webstandard Blog:.. Border Radius Ungleiche Ecken CSS3 Adventskalender Tag 2.. Peggy.. Dezember 2010 um 09:22.. Ich würde mich auch über ein Buch freuen.. Tolle Aktion!.. Sören.. Dezember 2010 um 09:32.. Ja das Buch hört sich mal gut an.. Goerni.. Dezember 2010 um 10:43.. Klasse, der Adventskalender gefällt mir.. Und vor allem macht dieser hier mal nicht dick.. Über das Buch würde ich mich natürlich auch freuen!.. Jens.. Dezember 2010 um 12:03.. Woah das Buch will ich! Tolle idee mit dem CSSventskalender.. Dezember 2010 um 13:19.. Wäre ein nettes X-MAS Present (:.. Wolf.. Dezember 2010 um 16:06.. Super idee! Oft sind es die kleinen Dinge, die einen weiterbringen.. Das Buch passt farblich und inhaltlich sehr gut zu meinem Weihnachtsbaum.. Dezember 2010 um 16:09.. Klasse idee!.. Das Buch hät ich gern.. Tobias.. Dezember 2010 um 16:42.. Sehr schön! Bin erst heute auf den tollen Kalender gestoßen, aber jetzt muss ich ja jeden Tag mal reinschauen.. Das Büchlein würde mich ja auch reizen.. Jan Brinkmann.. Dezember 2010 um 21:47.. Klasse Idee, allein die Farbe von dem Buch sieht ja schon toll aus.. 3.. Dezember 2010 um 13:59.. Gibt´s das Spezial für Tag 3 noch nicht, ich finds nämlich nicht?.. Und kann man das Spezial für Tag 1 noch ansehen bzw.. wo?.. Dezember 2010 um 14:00.. Hab es gefunden.. Sorry.. Dezember 2010 um 15:10.. Ein Buch über CSS3? Haben wollen! Vielen Dank auch für den CSS3-Adventskalender! Eine gelungene Idee und die ersten Türchen waren schon sehr vielversprechend.. Katja.. Dezember 2010 um 18:20.. Danke für den schönen Adventskalender! Tolle Idee! Und über ein Buch würde ich mich auch freuen.. 4.. Dezember 2010 um 00:03.. Ich freu mich schon auf die weiteren Türchen!.. Hannes.. Dezember 2010 um 14:54.. Prima,.. so ein Buch wäre echt klasse!.. Sergiu.. Dezember 2010 um 15:35.. Hi,.. Finde die Aktion auch Klasse.. Kannte deinen Blog noch gar nicht.. Der Webstandard-Blog hat ja in dieser Richtung immer gute Tipps, die ich auch brac nachbaue.. ad.. 7.. Dezember 2010 um 08:43.. Feine Sache.. Sowohl CSS3, als auch das Buch.. Würde mich also freuen!.. Stooni.. Dezember 2010 um 10:39.. Gute Artikel, wie braucht man CSS, und die CSS3 Türchen coole Idee!.. -stooni.. Dezember 2010 um 11:17.. @Sergiu: Danke für das Kompliment!.. Ich hoffe maddesigns ist jetzt von dir abonniert worden ;o).. Rahlel.. Dezember 2010 um 12:44.. ich bin Anfängerine und würde gerne mehr wissen darum mach ich mit.. Danke für die tollen tips und die idee mit den Kalender.. Ich warte jeden Tag gespannt was als nächstes kommt.. Es weihnachtet sehr | Kathleen Linke.. knja.. Dezember 2010 um 01:08.. Wahnsinn was man so alles mit css3 machen kann! Ich wünsche mir nur, dass die alle Brauser auch mitmachen.. Und danke für Tutorial! Echt gut und hilfreich.. Björn.. 15.. Dezember 2010 um 21:58.. In der Tat,.. a book apart.. Frohe Weinachstzeit.. Germmare.. Dezember 2010 um 00:54.. Ich habe -indirekt- die CSS3-animations gesehen, ober-cool.. Ich werde das Buch auch ohne Verlosung wohl demnächst auf meinem Schreibtisch haben.. P.. S.. : Danke für die vielen Tipps !.. 22.. Dezember 2010 um 00:18.. Würde mich sehr über das Buch unterm Weihnachtsbaum freuen.. Der Kalender ist übrigens total interessant.. Nadine.. 23.. Dezember 2010 um 11:42.. *mitmach*.. Frohe Weihnachten @ll.. Dezember 2010 um 10:29.. Ein sehr gute Aktion, ich lern immer gern dazu wenn s um CSS geht.. Frohe Weihnachten.. Domi.. Dezember 2010 um 11:26.. Auf den letzten Drücker bin ich auch dabei!.. Frohe Weihnachten!.. Johannes.. Frohe Weihnachten euch allen.. Und wenn ich noch was gewinnen würde, wäre das ja schon toll.. Frank Weber.. Dezember 2012 um 17:58.. Hallo.. Feine Sache mit Eurem Kalender ist ja dieses Jahr etwas speziell wenn man bedenkt das am 20.. Dezember die Welt untergeht.. Eine schöne Adventszeit wünscht Euch aus der Schweiz..

    Original link path: /css3-adventskalender-buchverlosung-286.html
    Open archive

  • Title: TYPO3 4.5.4 Update – Überschriften Rendering Bug #not | maddesigns
    Descriptive info: TYPO3 4.. 5.. 4 Update Überschriften Rendering Bug #not.. Juli 2011.. UPDATE:.. Die Bugfix-Releases 4.. 3.. 13, 4.. 4.. 10 und 4.. 5 enthalten ein Kompatibilitätsfix für ältere Versionen wenn die Überschriftengenerierung über lib.. stdheader verändert wurde.. Wie heißt es doch so schön:.. Due to several security issues found in the TYPO3 Core, there was a combined release of TYPO3 4.. 12, 4.. 9 and 4.. ! Obwohl TYPO3 Updates in der Regel schnell von der Hand gehen, wenn man nichts an den Core-Dateien rumgeschraubt hat, sollte man immer mal in die.. Release-Notes.. schauen.. Ich muss jetzt mal den Oberlehrer spielen auf die aktuellen.. Release-Notes von TYPO3 4.. 9.. und.. verweisen.. Dort steht, dass das Rendering der Überschriften mit css_styled_content über lib.. stdheader.. 10 verändert wurde und nötigenfalls das TYPOscript angepasst werden muss!.. # Old lib.. 10.. 1 { insertData = 1 fontTag = h1{register:headerStyle}{register:headerClass} | /h1 } # New lib.. 1 { dataWrap = h1{register:headerStyle}{register:headerClass} | /h1 }.. Viele haben in ihren TYPO3-Projekten (so wie auch ich) das Rendering der Überschriften verändert/verbessert um z.. eine saubere Überschriften-Hierarchie von H1-H5 zu erhalten.. /** * header tags old - do not use! */ lib.. stdWrap.. dataWrap = | lib.. 1.. fontTag = h1 | /h1 lib.. 2.. fontTag = h2 | /h2 lib.. fontTag = h3 |  ...   Relaunch könnte besser sein.. „page.. speed = 1“.. Web Performance Optimierung 2011.. 9 Gedanken zu TYPO3 4.. 4 Update Überschriften Rendering Bug #not.. Lars.. Juli 2011 um 18:55.. schöne Scheisse, jetzt lohnt es sich echt langsam alle TS als file auszulagen um gescheit zu versionieren und mergen.. Markus.. August 2011 um 09:42.. gut das ich schon seit 3 jahren bei meinen projekten das zeug´s auslagere.. trotzallem ist sowas wirklich s******.. Thomas.. August 2011 um 11:50.. Danke für den Hinweis!.. Breaking changes im letzen TYPO3 Update | TYPO3 Blogger.. Steffen Gebert.. August 2011 um 13:42.. Was ist denn da bitte scheiße dran? Da hilft auch das auslagern in externe Dateien nichts, css_styled_content nutzt ihr ja trotzdem.. Das Rendering wurde (das sollte dieser Blogartikel ja eigentlich zeigen) nicht spaßeshalber geändert, sondern weil verdammt noch mal genau in der standardmäßigen css_styled_content Konfiguration das Sicherheitsproblem lag.. Weiteres Herumfluchen über die Kommentare erspare ich mir jetzt echt.. August 2011 um 09:59.. sobald man ein update auf 4.. 4 macht, muss man es bei allen projekten ändern meine kunden zahlen sowas nicht.. August 2011 um 10:08.. @Markus das ist schlecht, wenn deine Kunden nicht für ein Sicherheitsupdate zahlen wollen!.. Links 35 » WoWa-Webdesign Friedrichshafen, Bodensee.. Sabine.. 28.. September 2012 um 19:09.. @Sven: Danke! Genau das Problem hatte ich nach einem TYPO3 update!..

    Original link path: /typo3-4-5-4-update-uberschriften-rendering-bug-not-961.html
    Open archive

  • Title: Update | maddesigns
    Descriptive info: Schlagwort-Archiv: update..

    Original link path: /tag/update
    Open archive

  • Title: :last-child / :first-child Selektoren – CSS3 Adventskalender Tag 11 | maddesigns
    Descriptive info: :last-child / :first-child Selektoren CSS3 Adventskalender Tag 11.. 11.. Im Tag 11 des CSS3 Adventskalender betrachten wir die Struktur-Pseudoklasse.. :first-child.. :last-child.. näher.. Als Beispiel erstellen wir eine einfache ungeordneten Liste mit drei Listenpunkten:.. HTML.. ul li eins /li li zwei /li li drei /li ul.. li { color: red; font-weight: bold }.. Selektion des ersten Kindelements der Liste.. li:first-child { color: black }.. Selektion des letzten Kindelements der Liste.. li:last-child { color: #ffdc00 }.. Definition.. li:first-child.. bedeutet das erstes Kind seines Elternelements ul wird selektiert.. li:last-child.. bedeutet das letzte Kind seines Elternelements ul wird selektiert.. Alle modernen Browser (inkl.. IE9 beta) unterstützen die CSS3 Pseudo-Klasse :last-child.. Die Auswahl des ersten Kindelements mit.. wird bereits mit CSS2.. 1.. ab IE7.. unterstützt!.. Dadurch, dass der Pseudoselektor.. bereits  ...   ein Strich folgt (.. border-bottom.. ), nur nicht nach dem letzten News-Punkt.. Da könnte man auf die Idee kommen den CSS3 Pseudo-Selektor.. zu verwenden.. Das das erst im IE9 funktioniert, sollte man die Logik einfach umkehren um Browser ab IE7 zu unterstützen.. Bedeutet also, dass jeder News-Listenpunkt einen.. border-top.. erhält, und nur der erste eben nicht.. Demo-Datei zu :first-child :last-child aufrufen.. Am Tag 12 geht es um.. um.. Media-Queries.. pseudo.. CSS3 Adventskalender Tag 10.. CSS3 Adventskalender Tag 12.. 2 Gedanken zu :last-child / :first-child Selektoren CSS3 Adventskalender Tag 11.. Eckhard.. 19.. Januar 2012 um 19:35.. Geht auch in IE6-8 mit einer CSS-Expression:.. soziologie.. uni-halle.. de/unger/scripts/workshop_internet/fr_css_ie_child.. html.. Januar 2012 um 21:25.. dann doch lieber mit JS, wenn eh JS verwendet wird.. CSS Expressions beeinflussen die Performance:..

    Original link path: /last-child-first-child-selektoren-css3-adventskalender-tag-11-514.html
    Open archive

  • Title: Pseudo | maddesigns
    Descriptive info: Schlagwort-Archiv: pseudo..

    Original link path: /tag/pseudo
    Open archive

  • Title: optionale Silbentrennung für den TYPO3 Redakteur | maddesigns
    Descriptive info: optionale Silbentrennung für den TYPO3 Redakteur.. 27.. September 2010.. 19 Kommentare.. Oft steht man vor den gleichen Problemen: ein Wort ist zu lang und könnte doch sinnvoll per Bindestrich auf die neue Zeile getrennt werden, wenn es nötig ist.. Als Bespiel hatte ich das Wort Sehenswürdigkeit , dass in der Hauptnavigation zu lang gewesen wäre, aber bequem in die Footer-Navigation passt.. Update am Ende des Textes:.. Shy im RTE von TYPO3 4.. 5 verfügbar.. Wenn man jetzt in das Wort einen festen Bindestrich - einfügen würde (ich will gar nicht in die typografischen Feinheiten einsteigen ), würde das Wort, wenn der Platz zu gering wäre umgebrochen, andernfalls nicht und würde somit mit Bindestrich auf einer Zeile stehen: Sehens-würdigkeit unschön.. Silbentrennung in TYPO3? Das lässt sich leicht einfügen nur nicht so schüchtern.. Man nehme das.. HTML Entity.. shy;.. (.. s.. oft.. hy.. phen) und füge es an die passende Stelle ein.. Im TYPO3-Backend kann man die betreffende Seite über die Seiteneigenschaften bearbeiten.. Im Beispiel verwende ich das Feld Navigationstitel (nav_title) für die Menütexte.. Es funktioniert natürlich auch im title-Feld ist dan aber (bei Standard-Konfiguration) im title zu sehen.. Es empfielt sich ohnehin unterschiedliche Einträge für den Seitentitel und dem Navigationstitel zu verwenden (SEO).. Im Typoscript gibt man die Verwendung der Navigationstexte im TMENU wie folgt an:.. lib.. mainNavigation { 10 = HMENU 10 { entryLevel = 0 1 = TMENU 1 { wrap = ol class="nav clearfix" id="mainnav" | /ol noBlur = 1 NO = 1 NO { wrapItemAndSub = li | /li ATagTitle.. field = description // nav_title // title stdWrap.. field = nav_title // title # darf nicht gesetzt sein, sonst wird Text ausgegeben stdWrap.. htmlSpecialChars = 0.. }.. } }.. Der entscheidene Teil: nehme den Menütext wahlweise aus dem Feld nav_title oder title.. mainNavigation.. NO.. field = nav_title // title.. Hier noch ein Screenshot für die Silbentrennung im TYPO3:.. Links die automatische Trennung im Hauptmenü, rechts wird nicht getrennt, da hier mehr Platz zur Verfügung steht.. Kennt jemand eine Möglichkeit für die Silbentrennung im TYPO3 RTE?.. Update 26.. 10:.. Für den RTE gab es bisher keine Möglichkeit dieser Silbentrennung, das Entity shy; wurde beim Speichern des Textes in die Datenbank entfernt.. Diesen Bug hatte Peter beim verantwortlichen Entwickler des TYPO3 RTE eingereicht (.. http://bugs.. typo3.. org/view.. php?id=16087.. ).. Da ich dieses Feature unterstützenswert fand, habe ich die Entwicklung zusammen mit Peter auch finanziell unterstützt.. Das Feature wurde umgehend vom RTE-Maintainer Stanislas Rolland umgesetzt und floss in den aktuellen TYPO3-Core ein.. In der Version TYPO3 4.. 5 wird  ...   Entwickler.. Den gleichen Trick kann man auch anwenden, um sehr lange Strings umbrechen zu lassen.. Zum Beispiel URLs oder Windows Pfade.. Einfach hinter jedem Slash automatisch ein einfügen.. Sven Burkert.. Oktober 2010 um 03:36.. Es gibt noch die Erweiterung hyphenator im TER, diese sollte alle Texte automatisch per JavaScript trennen.. Selbst ausprobiert habe ich die Erweiterung aber nicht.. Die Doku sieht aber vielversprechend aus.. Guido.. 18.. Oktober 2010 um 11:30.. Wie sieht das denn mit Suchmaschinenoptimierung aus?.. Wenn nun shy das Wort trennt liest Google das dementsprechend aus oder wird shy vernachlässigt?.. Oktober 2010 um 11:50.. Hallo Guido!.. Wenn ich den Beitrag bei.. Gurkcity Webdesign Blog.. richtig lese, kann Google damit umgehen.. Was ja Sinn macht, denn das shy ist ja nur für die optische Trennung gedacht.. 21.. Oktober 2010 um 11:22.. Hat schon jemand eine Möglichkeit gefunden, shy auch im RTE von TYPO3 zu nutzen?.. Oktober 2010 um 11:34.. aktuell nicht, aber ich bin dran!.. PS: bitte keine Hyphenator.. js verwenden, siehe:.. http://quickblog.. weisshart.. info/blocksatz-silbentrennung-und-screen-reader.. Oktober 2010 um 12:15.. Was genau heißt ich bin dran ? Baust du an einer Erweiterung/Patch?.. j4k3.. Dezember 2010 um 11:47.. Hallo Sven,.. vielen Dank für deine Mühe und die finanzielle Unterstützung des Features.. Ich versuche gerade für ein Projekt die shy-Silbentrennung im Fließtext umzusetzen, und verzweifele an der Gefräßigkeit des RTE.. Werde dann wohl mal ein Update der Installation fahren müssen.. Dezember 2010 um 23:47.. Hallo danke für den Hinweis.. Nur: Wie gibt der Redaktuer das shy denn ein? Und wo muss in der Konfiguration das shy erlaubt werden? Ich bekomme das shy da nicht rein.. Januar 2011 um 20:46.. Um Himmels Willen! Ich habe eben nach einem Update auf 4.. 6 mal ein bisschen in einer Installation herumprobiert und jetzt ist alles noch viel schlimmer als vorher: Mein RTE wandelt jetzt beim Speichern die s in - um.. Mit andern Worten: ich habe gar keine Möglichkeit mehr, die Silbentrennung zu erzeugen, geschweige denn, den Text nachzubearbeiten!.. Habe ich was falsch gemacht, gibt es da noch was zu beachten oder ist die Implementierung des Feature einfach nur in die Hose gegangen?.. Januar 2011 um 20:55.. …und gleich noch ein Eintrag hinterher: Opera und Safari verhalten sich wie beschrieben, wenn man mit dem Firefox im Backend unterwegs ist, verhält sich die Sache anders: die SHY-Entities sind auch im Quelltext nicht sichtbar.. So war das nicht gedacht, oder?.. 31.. Januar 2011 um 09:40.. Ich habe das Feature selbst noch nicht testen können, aber vielleicht hast du ja ein Demo-Link für mich, dann schau ich mal..

    Original link path: /optionale-silbentrennung-fur-den-typo3-redakteur-244.html
    Open archive

  • Title: Redaktion | maddesigns
    Descriptive info: Schlagwort-Archiv: redaktion..

    Original link path: /tag/redaktion
    Open archive

  • Title: Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13 | maddesigns
    Descriptive info: Individuelle Checkbox Radio Inputs – CSS3 Adventskalender Tag 13.. 13.. Dezember 2011.. Um es vorweg zu nehmen, beim Stylen von Input-Feldern muss man aus Usability-Gesichtspunkten Vorsicht walten lassen.. Der normale User ist an das Aussehen der Formular-Elemente in seinem OS/Browser gewöhnt.. Wenn die Input-Felder nun stark von der gewohnten Umgebung abweichen, ist er skeptischer beim Ausfüllen von Formularen und bricht u.. den Prozess sogar ganz ab.. (Quelle: Internet).. Auch wenn man es wollte, einige Formular-Elemente lassen sich zudem nur schwerlich, bis gar nicht cross-browser-konform stylen, z.. das.. input[type="file"].. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse.. :checked.. beinhaltet.. Als erstes erstellen wir ein kleines HTML5-Formular.. form class="comment-form" action="#" method="post"> fieldset> ol> li> h3>War das Tutorial nützlich? sup title="Das ist ein Pflichtfeld">* /sup> /h3> input id="radio_yes" type="radio" value="ja" name="radio" required> label for="radio_yes">Ja /label> input id="radio_no" type="radio" value="nein" name="radio" required> label for="radio_no">Nein /label> /li> li> input type="checkbox" name="ckeck" id="check" value="japp" required> label for="check">Ja, ich habe das Tutorial auch gelesen.. sup title="Das ist ein Pflichtfeld">* /sup> /label> /li> li> input type="submit" name="submit" id="submit" value="Absenden"> /li> /ol> /fieldset> /form>.. Das Formular braucht zunächst ein wenig Grundgestaltung.. fieldset { border: none; margin: 0; padding: 0; } ol { list-style-type: none; margin: 0; padding: 0; } li { padding: 1em 0; } label { cursor: pointer; }.. Wie schon erwähnt, ist es fast unmöglich die Input-Types einheitlich zu stylen.. Deshalb werden wir die Input-Felder über.. background-clip.. ausblenden und das folgende.. label.. mit dem Styling versorgen.. input[type="checkbox"], input[type="radio"] { position: absolute; clip: rect(0,0,0,0); }.. Jetzt sind die Input-Felder der Checkbox und auch die Radio-Buttons nicht mehr sichtbar, aber grundsätzlich noch für die Tasterturbenutzung erreichbar (Stichwort: barrierefrei).. Da der Browser uns jetzt allerdings kein visionelles Feedback mehr geben kann, wenn die Checkbox oder Radio-Buttons fokusiert werden, verlegern wir das Verhalten auf das folgende Label.. Wenn das Input-Feld fokusiert wird, wird das folgende.. fett dargestellt:.. input[type="checkbox"]:focus  ...   0 0; }.. Da im Beispiel ein HTML5-Formular mit dem Attribut.. required.. in den Inputs verwendet wurde, wird die browserseitige Validierung aktiv, wenn keine Option ausgewählt wurde, sowie wenn die Checkbox nicht aktiviert wurde.. Diesen Pseudo-Status kann ebenfalls stylen, ist allerdings in den verschiedenen Browsern mit Browser-Präfixen implementiert.. Am Beispiel von Firefox, kann man.. :-moz-ui-invalid.. verwenden:.. input[type="checkbox"]:-moz-ui-invalid + label { background: transparent url("s-checkbox.. png") no-repeat 0 -32px; color: red; } input[type="checkbox"]:-moz-ui-invalid + label:after { content: '.. Das HTML5-Formular mit individuellen Radio-Buttons.. Browser-Support.. Der verwendeten Pseudo-Selektoren sind bereits in CSS 2.. 1 spezifiziert, allerdings erst vollständig implementiert mit dem Release des IE9.. Weitere Infos zu dieser Technik gibt es beim CSS Ninja (Ryan Seddon) im Artikel ".. Custom radio and checkbox inputs using CSS.. " und in Lea Verou's Vortrag ".. CSS3 Secrets.. ".. checkbox.. form.. radio-button.. CSS3 Adventskalender 2011 – Tag 12.. CSS3 Adventskalender 2011 – Tag 14.. 4 Gedanken zu Individuelle Checkbox Radio Inputs – CSS3 Adventskalender Tag 13.. Adventskalender am 13.. Dezember F-LOG-GE.. Dezember 2011 um 17:38.. Sehr interessanter Ansatz.. Damit das Formular in älteren Browsern nicht komplett funktionsunfähig wird, könnte man allen Selektoren ein :not(root) oder ähnliches anhängen, damit z.. die Anweisung zum verstecken der checkbox von älteren Browsern wie dem IE 9 ignoriert wird.. Statt :-moz-ui-invalid funktioniert in allen aktuellen Browsern übrigens auch ein einfaches :invalid.. siehe.. http://jsfiddle.. net/jNptL/.. 14.. Dezember 2011 um 09:51.. http://selectivizr.. com/.. habe ich in einem Projekt für die Unterstützung der älteren Browser benutzt, aber das :not(root) muss ich mir mal ansehen.. Das :invalid funktioniert bei Feldern, die required sind nicht so schön, wie ich finde, die sind sofort :invalid besser geeignet ist :invalid bei Text-Inputs die ein pattern-Attribut haben, denke ich.. Michael van Laar.. Dezember 2011 um 00:32.. Sehr cooles Tutorial.. Da ich Selectivizr ohnehin grundsätzlich in alle Websites einbinde, kann ich das auch vollumfänglich überall verwenden.. Gleich mal beim Relaunch meiner eigenen Website nächste Woche hineinbasteln..

    Original link path: /individuelle-checkbox-radio-inputs-1396.html
    Open archive

  • Title: :checked | maddesigns
    Descriptive info: Schlagwort-Archiv: :checked..

    Original link path: /tag/checked
    Open archive





  • Archived pages: 254