HTML: UTF8 zeigt keine Umlaute

Dieses Thema im Forum "Webdesign" wurde erstellt von icke-sein, 27. März 2014 .

Schlagworte:
  1. 27. März 2014
    Zuletzt bearbeitet: 6. April 2014
    Guten Tag zusammen,

    ich bin langsam echt am verzweifeln, ich bin noch ein recht frischer Anfänger,deswegen nehmt mir das nicht übel.
    Auf meiner Webseite werden keine umlaute angezeigt. Wo liegt das Problem - UTF-8 Tag hab ich doch drin ? add_default_charset ist auch on.


    index.php
    Spoiler
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    
    </head>
    
    <body>
    
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster"/>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <div class="header_top">
     <div class="header_left"></div>
     <div class="header_middle"></div>
     <div class="header_right"></div>
     <div class="header_end"></div>
     
     <div id="content">
     <a href='#' ><span class="Lobster" >Neuigkeiten</span></a>
     <a href='#' ><span class="Lobster">Der Laden</span></a>
     <a href='#' ><span class="Lobster">Galerie</span></a>
     <a href='#' ><span class="Lobster">Gravuren</span></a>
     <a href='#' ><span class="Lobster">Über uns</span></a>
     <a href='#' ><span class="Lobster">Kontakt</span>
     </div>
     
     <div class="xcontent">
     
     <?php include "neosmart-stream/setup.php";
     $nss->streamCSS();
     $nss->includeFile('jquery.js');
     $nss->streamJS();
     $nss->show();?>
     
     </div>
     
    </div>
    
    </body>
    </html>

    style.css
    Spoiler
    HTML:
    @charset 'UTF-8';
    
    /* CSS Document */
    body {
     background-image: url(img/bg.gif);
    }
    
    .design {
     position:relative;
     top:20px;
    }
    
    .header_top {
    
     margin-left: auto; 
     margin-right: auto; 
     background-image: url(img/1.jpg);
     width: 1150px;
     height: 63px;
     background-repeat:no-repeat
    }
    
    .header_left {
     position:relative;
     top:63px;
     float: left;
     background-image: url(img/2.jpg);
     width: 99px;
     height: 166px;
     background-repeat:no-repeat
    }
    
    .header_middle {
     position:relative;
     top:63px;
     float: left;
     background-image: url(img/3.jpg);
     width: 397px;
     height: 166px;
     background-repeat: no-repeat;
    }
    
    .header_right {
     position: relative;
     top: 63px;
     float: left;
     background-image: url(img/4.jpg);
     width: 654px;
     height: 166px;
     background-repeat: no-repeat;
    }
    
    .header_end {
     position: relative;
     top: 61px;
     float: left;
     background-image: url(img/5.jpg);
     width: 1150px;
     height: 61px;
     background-repeat: no-repeat;
     box-shadow: 0px 13px 6px -6px #141414;
    }
    
    @import url(href"http://fonts.googleapis.com/css?family=Lobster");
    
    [class="Lobster"]:before { font-family: 'Lobster'}
    *{
    -webkit-font-smoothing:antialiased;
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    }
    #content {
     position: relative;
     white-space: nowrap;
     min-height: 33px;
     width:100%;
     top: 310px;
    }
    #content a {
     background-image: linear-gradient(#485258, #30383c);
     width: 191px;
     height: 38px;
     position: absolute;
     top: 0;
     text-decoration: none;
     padding-top: 9px;
     outline-width: 0px;
     z-index: 990;
     color: #eceff1;
     text-align: center;
     line-height: 1.2;
     display: block;
     font-family:"Lobster", "Lobster", sans-serif;
    }
    #content a:not(.active) {
    
     box-shadow:
     inset 0 1px 1px rgba(255,255,255, 0.1),
     inset 0 -1px 0px rgba(0,0,0, 0.2),
     0 9px 16px 0 rgba(0, 0, 0, 0.3),
     0 4px 3px 0 rgba(0, 0, 0, 0.3),
     0 0 0 1px rgba(0,0,0,.2);
    
     text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47;
    }
    #content a:not(.active):hover,
    #content a:not(.active):focus {
     color: #86c6ef;
     text-shadow: 0 0 2px rgba(255,255,255,.2);
    }
    #content a:not(.active):active { 
     color: #86c6ef !important;
     background: #313335;
     text-shadow: 0 0 21px #618398, 0 0 15px #618398, 0 0 2px #fff, 0 0 1px #000, 0 0 5px #618398;
     color: #86c6ef;}
    #content a.active,
    #content a:active {
     box-shadow: 
     0 9px 16px 0 rgba(0, 0, 0, 0.1),
     0 0 0 1px rgba(0,0,0,.6), 
     0 2px 1px 0 rgba(255,255,255, 0.05), 
     inset 0 0 4px 3px rgba(0,0,0, 0.2), 
     inset 0 0 10px rgba(0,0,0,.5);
     background: #313335;
     text-shadow: 0 0 5px #618398,0 0 21px #618398, 0 0 15px #618398, 0 0 2px #fff, 0 0 1px #000, 0 0 5px #618398, 0 -1px 0 #fff, 0 1px 0 #000;
     color: #86c6ef;
    }
    #content a.active:before,
    #content a:active:before {
     position: absolute;
     background: linear-gradient(to bottom, #485258 0%,#485258 15%,#86c6ef 50%,#86c6ef 50%,#86c6ef 51%,#30383c 85%,#30383c 100%); /* W3C */
     display: block;
     content: "";
     width: 1px;
     height: 36px;
     top: 1px;
     left: -2px;
     box-shadow:0px 0 0px rgba(134,199,239,.2), 0px 0 1px rgba(255,255,255,.2),0px 0 5px rgba(255,255,255,.4);
    }
    #content a.active:after,
    #content a:active:after {
     position: absolute;
     display: block;
     content: "";
     width: 1px;
     height: 36px;
     top: 1px;
     right: -2px;
     background: linear-gradient(to bottom, #485258 0%,#485258 15%,#86c6ef 50%,#86c6ef 50%,#86c6ef 51%,#30383c 85%,#30383c 100%); /* W3C */
     box-shadow:0px 0 0px rgba(134,199,239,.2), 0px 0 1px rgba(255,255,255,.2),0px 0 5px rgba(255,255,255,.4);
    }
    #content a:last-child:active:after{box-shadow:0 0 0;background:transparent}
    #content a:first-child:active:before{box-shadow:0 0 0;background:transparent}
    #content a.active { z-index: 1000 }
    #content a:active { z-index: 999 }
    #content a:last-of-type {
     -webkit-border-radius: 0 7px 7px 0;
     -moz-border-radius: 0 7px 7px 0;
     -ms-border-radius: 0 7px 7px 0;
     -o-border-radius: 0 7px 7px 0;
     border-radius: 0 7px 7px 0;
    }
    #content a:first-of-type {
     -webkit-border-radius: 7px 0 0 7px;
     -moz-border-radius: 7px 0 0 7px;
     -ms-border-radius: 7px 0 0 7px;
     -o-border-radius: 7px 0 0 7px;
     border-radius: 7px 0 0 7px;
     left: 0;
    }
    #content a:nth-of-type(2) { left: 191px }
    #content a:nth-of-type(3) { left: 382px }
    #content a:nth-of-type(4) { left: 573px }
    #content a:nth-of-type(5) { left: 764px }
    #content a:nth-of-type(6) { left: 955px }
    #content a:nth-of-type(7) { left: 1146px }
    #content a:nth-of-type(8) { left: 1337px }
    #content a i:before {
     margin-left: 2px;
     font-size: 22px;
    }
    #content a i.icon-bar-chart:before {
     font-size: 20px;
     margin-top: 0px;
    }
    #content a i.icon-sync:before {
     font-size: 20px;
     margin-left: 3px;
     margin-top: 1px;
    }
    #content a i.icon-download:before {
     font-size: 19px;
     margin-top: 1px;
     margin-left: 4px;
    }
    
    .xcontent{
     position: relative;
     width:100%;
     top:145px;
     float:left;
     text-align:center;
     box-shadow: 0px 13px 6px -6px #141414;
     background-color:rgba(0, 0, 0, 0.50); 
     -moz-box-shadow: inset 0 0 8px 2px rgba(0,0,0, .6);
     -webkit-box-shadow: inset 0 0 8px 2px rgba(0,0,0, .6);
     box-shadow: inset 0 0 8px 2px rgba(0,0,0, .6);
     border-radius: 15px;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
    }
     
  2. 27. März 2014
    AW: UTF8 - keine Umlaute

    du musst die datei auch als utf-8 abspeichern.
    wie man das macht variiert je nach editor.
     
  3. 28. März 2014
    AW: HTML: UTF8 zeigt keine Umlaute

    wenn du mit den umlauten fertig bist, dann schau dir mal ausdruck + rechtschreibung unter dem reiter "über uns " an. ganz schrecklich!
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.