23A » HTML | CSS http://blog.davidgraesser.de code snippets and more... Tue, 08 Nov 2011 21:14:52 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Resizing iFrame http://blog.davidgraesser.de/2011/04/05/resizing-iframe/ http://blog.davidgraesser.de/2011/04/05/resizing-iframe/#comments Tue, 05 Apr 2011 14:27:21 +0000 dave http://blog.davidgraesser.de/?p=221 Folgende Funktion passt ein iFrame immer an die Größe der umliegenden Seite an:

  1. <script type=“text/javascript”>
  2. window.onresize = function(){autoIframe(“myIFrame”)};
  3.  
  4. function autoIframe(frameId) {
  5.    try{
  6.         frame = document.getElementById(frameId);
  7.         var realHeight = document.documentElement.clientHeight;
  8.         frame.style.height = realHeight + ‘px’;
  9.    }
  10.    catch(err){
  11.       window.status = err.message;
  12.    }
  13. }
  14. </script>

Funktioniert im IE6/8, Firefox 3/4

]]> http://blog.davidgraesser.de/2011/04/05/resizing-iframe/feed/ 0 Link-Sammlung CSS 3 http://blog.davidgraesser.de/2010/03/28/link-sammlung-css-3/ http://blog.davidgraesser.de/2010/03/28/link-sammlung-css-3/#comments Sun, 28 Mar 2010 16:33:19 +0000 dave http://blog.davidgraesser.de/?p=131 hier mal eine liste von seiten, die sich bei der entwicklung mit css 3 als nützlich herrausgestellt haben:
Übersicht der Browser-Unterstützung von CSS 3 Eigenschaften
CSS 3-Live Editor mit Cross-Browser-Regeln
CCS 3-Editor mit Vorschau und Browser-Kompatibilität
CSS 3 Gradient Code Generator
CSS 3 Border Radius Generator

]]> http://blog.davidgraesser.de/2010/03/28/link-sammlung-css-3/feed/ 0 Checkbox/Radiobox auswählen beim klicken auf den nebenstehenden Text http://blog.davidgraesser.de/2008/02/19/checkboxradiobox-auswahlen-beim-klicken-auf-den-nebenstehenden-text/ http://blog.davidgraesser.de/2008/02/19/checkboxradiobox-auswahlen-beim-klicken-auf-den-nebenstehenden-text/#comments Tue, 19 Feb 2008 09:58:13 +0000 dave http://blog.davidgraesser.de/?p=66
  1. <input type=“radio” name=“auswahl” id=“1_1″/>
  2. <label for=“1_1″>
  3.   Sampletext
  4. </label>
]]> http://blog.davidgraesser.de/2008/02/19/checkboxradiobox-auswahlen-beim-klicken-auf-den-nebenstehenden-text/feed/ 0 Ausgewählten Text einer Selectbox in einem anderem HTML-Element setzen http://blog.davidgraesser.de/2008/01/04/ausgewahlten-text-einer-selectbox-in-einem-anderem-html-element-setzen/ http://blog.davidgraesser.de/2008/01/04/ausgewahlten-text-einer-selectbox-in-einem-anderem-html-element-setzen/#comments Fri, 04 Jan 2008 14:59:26 +0000 dave http://blog.davidgraesser.de/?p=57 Schon zig mal gemacht und doch jedes mal aufs neue eine Frickelei:

  1. onchange=“$(‘hiddenText’).value = this.options[this.selectedIndex].text;”
]]> http://blog.davidgraesser.de/2008/01/04/ausgewahlten-text-einer-selectbox-in-einem-anderem-html-element-setzen/feed/ 0 Links mit Bildern durch CSS http://blog.davidgraesser.de/2007/04/22/links-mit-bildern-durch-css/ http://blog.davidgraesser.de/2007/04/22/links-mit-bildern-durch-css/#comments Sun, 22 Apr 2007 14:12:49 +0000 dave http://blog.davidgraesser.de/?p=13 Ich stand gerade vor dem Problem, das jeder Link mit einem kleinen Pfeil ausgestattet werden sollte. Im Ursprungszustand soll dieser Pfeil grau sein und beim Hover-Zustand weiß:
Links mit Grafik
Da ich jetzt nicht hinter jeden Link noch ein Bild einfügen wollte musste eine andere Lösung her und zwar wollte ich das ganze mit CSS lösen. Nach ein wenig Frickelei war es dann geschafft:

  1. a:link {
  2. color:#7f7f7f;
  3. text-decoration:none;
  4. background-image: url(../img/arrow-grey.gif);
  5. background-repeat: no-repeat;
  6. background-position:100% 54%;
  7. margin-right:10px;
  8. padding-right: 10px;
  9. }
  10. a:visited {
  11. color:#7f7f7f;
  12. text-decoration:none;
  13. background-image: url(../img/arrow-grey.gif);
  14. background-repeat: no-repeat;
  15. background-position:100% 54%;
  16. margin-right:10px;
  17. padding-right: 10px;           
  18. }
  19. a:hover {
  20. color:#FFFFFF;
  21. text-decoration:none;
  22. background-image: url(../img/arrow.gif);
  23. background-repeat: no-repeat;
  24. background-position:100% 54%;
  25. margin-right:10px;
  26. padding-right: 10px;
  27. }

Hier noch die beiden Grafiken zum nachbauen:
Pfeil weißPfeil grau

]]> http://blog.davidgraesser.de/2007/04/22/links-mit-bildern-durch-css/feed/ 0