ingeniumdesign blog » HTML/CSS http://blog.ingeniumdesign.de TYPO3, SEO und Magento Sat, 04 Feb 2012 13:43:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Silbentrennung per CSS http://blog.ingeniumdesign.de/2012/02/04/silbentrennung-per-css/ http://blog.ingeniumdesign.de/2012/02/04/silbentrennung-per-css/#comments Sat, 04 Feb 2012 13:43:56 +0000 basti http://blog.ingeniumdesign.de/?p=1081 Mit HTML bzw. CSS war es bisher noch nicht möglich mit Silbentrennung zu arbeiten. Hier die Befehle für die gängigen Browser:

body {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}
]]> http://blog.ingeniumdesign.de/2012/02/04/silbentrennung-per-css/feed/ 1 HTML – Responsive Webdesign Bücher http://blog.ingeniumdesign.de/2012/01/07/html-responsive-webdesign-bucher/ http://blog.ingeniumdesign.de/2012/01/07/html-responsive-webdesign-bucher/#comments Sat, 07 Jan 2012 17:39:31 +0000 basti http://blog.ingeniumdesign.de/?p=1063 Da ich auf der Suche nach guten “Responsive Webdesign” Büchern bin, sollte man wohl vor dem kauf die Beschreibung gut durchlesen!

Das Buch auf Amazon “Responsive Webdesign” wird zwar unter “Englische Bücher” gelistet, die Sprache ist aber Französisch!
Responsive Web design

Daher muss ich es mir wohl oder übel wo anders bestellen.
Dazu warte ich nun noch auf das Buch: Responsive Webdesign: Hochwertige Websites mit HTML 5, CSS3 und Webfonts erstellen

Habt Ihr noch Empfehlungen für mich, welches Buch zum Thema passen könnte?

 

]]> http://blog.ingeniumdesign.de/2012/01/07/html-responsive-webdesign-bucher/feed/ 0 HTML/CSS – Webfont Arial Black Windows 7 Problem http://blog.ingeniumdesign.de/2011/10/26/htmlcss-webfont-arial-black-windows-7-problem/ http://blog.ingeniumdesign.de/2011/10/26/htmlcss-webfont-arial-black-windows-7-problem/#comments Wed, 26 Oct 2011 07:17:59 +0000 basti http://blog.ingeniumdesign.de/?p=1031 Unter Windows 7 gibt es im HTML/CSS ein Problem mit der Schriftart/Webfont Arial Black, diese wird nicht angezeigt bzw. nicht richtig dargestellt. Abhilfe schafft ein Fallback auf die Schriftart: Arial mit font-weight: 900;

CSS:
font-family: “Arial Black”, Arial, Helvetica, sans-serif;
font-weight: 900;

]]> http://blog.ingeniumdesign.de/2011/10/26/htmlcss-webfont-arial-black-windows-7-problem/feed/ 1 Google-Fonts einbinden und verwenden http://blog.ingeniumdesign.de/2011/02/16/google-fonts-einbinden-und-verwenden/ http://blog.ingeniumdesign.de/2011/02/16/google-fonts-einbinden-und-verwenden/#comments Wed, 16 Feb 2011 09:06:45 +0000 basti http://blog.ingeniumdesign.de/?p=904 Für ein neues Projekt verwende ich die Lib von google-fonts ( http://code.google.com/webfonts ).

Funktioniert soweit ziemlich gut, würde mich freuen, wenn Ihre Eure Erfahrungen postet… hier noch eine kleine Anleitung zum einbinden.

Hier könnt Ihr euch die Schrift unter Download herunterladen und in den Windows-Fonts Ordner ablegen. Dann könnt Ihr die Schrift anhand von meta-Daten oder JavaScript einbinden.

Ich persönlich binde die Schrift lieber via JavaScript ein.

Klickt dazu auf “Use this font” -> “Advanced techniques” ( ganz unten ):

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Cabin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

im oberen Bereich: “WebFontConfig” könnt Ihr dann weitere Schriftarten hinzufügen.

Oder Ihr schreibt in den <head> Bereich diesen Link ein:

<link href=’http://fonts.googleapis.com/css?family=Cabin’ rel=’stylesheet’ type=’text/css’>

 

das CSS könnt Ihr dann wie immer bearbeiten!

h1 { font-family: ‘Cabin’, arial, serif; }

]]> http://blog.ingeniumdesign.de/2011/02/16/google-fonts-einbinden-und-verwenden/feed/ 0 Style input Feld type=”file” ( Durchsuchen ) http://blog.ingeniumdesign.de/2009/11/08/style-input-feld-type-file-durchsuche/ http://blog.ingeniumdesign.de/2009/11/08/style-input-feld-type-file-durchsuche/#comments Sun, 08 Nov 2009 11:14:39 +0000 basti http://blog.ingeniumdesign.de/?p=711 Anleitungen: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom http://www.quirksmode.org/dom/inputfile.html [ad#posting] ]]> http://blog.ingeniumdesign.de/2009/11/08/style-input-feld-type-file-durchsuche/feed/ 1 Internet Explorer 6 und png Bilder verwenden http://blog.ingeniumdesign.de/2009/07/15/internet-explorer-6-und-png-bilder-verwenden/ http://blog.ingeniumdesign.de/2009/07/15/internet-explorer-6-und-png-bilder-verwenden/#comments Wed, 15 Jul 2009 12:36:41 +0000 basti http://blog.ingeniumdesign.de/?p=539 In der index.html kommt im “head” Bereich dieser Code rein:
<!--[if IE 6]> <link rel="Stylesheet" href="ie6.css" type="text/css" /> <![endif]-->
[ad#posting] In dieser css Datei kommt nun dieser Code:
.classname { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bildpfad/dateiname.png', sizingMethod='scale'); background: none; }
Nun funktioniert im Internet Explorer 6.0 das png Bild [ad#posting]]]> http://blog.ingeniumdesign.de/2009/07/15/internet-explorer-6-und-png-bilder-verwenden/feed/ 1