Umlaute trotz um Umschreibung nicht angezeigt

Racer_J

Hallo zusammen,

in meinen Seiten werden bei allen Überschriften oder etwas größer definierten Schriften die Umlaute trotz Umschreibung (z.b.

HTML

&auml;

) nicht angezeigt. Dies ist irgendwie extrem komisch.

Hier mal meine CSS Style:

CSS

/* Global properties ======================================================== */
html, body {width:100%; padding:0; margin:0;}




body { 	 
	font: 14px/24px Tahoma, Geneva, sans-serif;
	color:#636f6f;
	min-width:1264px;
	background: #000;
}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.main {width:940px; margin:0 auto;}
/***********************************************************************/
a {text-decoration:none; cursor:pointer;text-decoration:none; }
a:hover {text-decoration:none;}




.button {background:#ef6f53; color:#fff; font-size:18px; line-height:24px; padding:4px 12px 10px 12px; display:inline-block;}
.button:hover {background:#636f6f; }




.link {color:#ef6f53; text-decoration:none; }
.link:hover {text-decoration:underline;}




.clr-1 { color:#fff;}




.text-1 {color:#fff; font-size:18px; line-height:24px;}




h2 { font-size:26px; line-height:32px; color:#fff; font-weight:normal;}
h3 { font-size:18px; line-height:24px; color:#fff; font-weight:normal;}




ul {margin:0; padding:0;list-style-image:none;}
ul.list-1 li {padding:0px 0 0px 12px; line-height:24px; background:url(../images/marker-1.gif) 0 9px no-repeat;}
ul.list-1 li a { font-size:14px; color:#636f6f; line-height:24px;}
ul.list-1 li a:hover {color:#ef6f53;}




ul.list-2 li {padding:0px 0 6px 15px; line-height:24px; background:url(../images/marker-3.gif) 0 9px no-repeat;}
ul.list-2 li a { font-size:14px; color:#fff; line-height:24px;}
ul.list-2 li a:hover {color:#ef6f53;}




/******************************************************************/
.clear {clear:both; line-height:0; font-size:0; width:100%;}
.wrapper {width:100%; overflow:hidden; position:relative}
.wrap {overflow:hidden; position:relative;}
.extra-wrap {overflow:hidden;}
.fleft {float:left;}
.fright {float:right;}
.img-indent {float:left; margin:3px 20px 0px 0;}	
.img-indent-2 {float:left; margin:8px 20px 0px 0;}	
.last {margin-right:0px !important; padding-right:0px !important;}




.top-1 {padding-top:38px;}
.top-2 {margin-top:14px;}
.top-3 {margin-top:20px;}
.top-4 {padding-top:30px;}
.top-5 {padding-top:22px;}
.top-6 {padding-top:19px;}




.left-1 { margin-left:12px;}
.left-2 { margin-left:24px;}




.bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;}




.pad-0 {padding:0px 0px 0px 0px;}
.pad-1 {margin:38px 0px 29px 0px;}
.pad-2 {margin:40px 0px 30px 0px;}




.p1 {padding-bottom:24px;}
.p2 {padding-bottom:17px;}
.p3 {padding-bottom:8px;}
.p4 {padding-bottom:14px;}
.p5 {padding-bottom:10px;}




/*********************************header*************************************/
header {width:100%; margin:0 auto; z-index:101; background:url(../images/header.gif) 0 0 repeat; padding:7px 0 12px 0; }




h1 {display:inline-block; z-index:100; float:left; }
.social-icons {overflow:hidden; float:right; padding:25px 0px 0px 0;}
.social-icons span {display:block; font-size:18px; line-height:24px; color:#636f6f; letter-spacing:-1px; margin:-3px 15px 0 0;text-align:right; float:left;}
.social-icons>div {float:right; overflow:hidden;}
.social-icons a {display:inline-block; width:23px; height:23px; float:right;}
.icon-1 {background:url(../images/icon-1.png) 0 0 no-repeat;}
.icon-2 {background:url(../images/icon-2.png) 0 0 no-repeat; margin-left:7px;}
.icon-3 {background:url(../images/icon-3.png) 0 0 no-repeat; margin-left:7px;}
.social-icons a:hover {background-color:#ef6f53;}







nav { width:940px; margin:0 auto; z-index:100; padding:5px 0px 11px 0px; }




ul.menu {display:inline-block;}
ul.menu li {float:left; line-height:24px; margin:0px 28px 0px 4px; }
ul.menu li a {font-size:18px; line-height:24px; color:#fff; text-transform:uppercase; display:inline-block; letter-spacing:-1px; }
ul.menu li a:hover , ul.menu li.current a { color:#ef6f53; }




/*********************************content*************************************/
#content {width:960px; margin:0 auto; padding:0px 0px 55px 0; position:relative;}







.box-1 a {background:url(../images/marker-2.gif) right 13px no-repeat #0c0c0c; font-size:26px; line-height:32px; color:#636f6f; letter-spacing:-1px; display:block; padding:5px 26px 12px 25px;}
.box-1 a:hover {background-color:#2f2929;}




.line {background:url(../images/line.png) 0 0 repeat-x; height:5px;}




.box-2 {overflow:hidden;}
.number {background:url(../images/number.png) 0 0 no-repeat; width:45px; height:58px; font-size:30px; color:#fff; line-height:36px; text-align:center; float:left; margin: 0 16px 0 0; padding-top:5px;}
.border-bot-1 {border-bottom:#333333 1px dotted; padding-bottom:20px; margin-bottom:16px;}




.box-3>div {float:left; width:276px; margin-right:56px; }




.box-4 {overflow:hidden; padding:10px 0 8px 0;}
.box-4 img {float:left; margin:3px 20px 0 0;}




.box-5>div {float:left; width:171px; margin-right:47px; }




.lists {overflow:hidden;}
.lists ul {float:left; width:286px; margin-right:32px;}




/****************************footer************************/
footer { width:940px; margin:0 auto; position:relative; overflow:hidden; padding:37px 0 40px 0; background:url(../images/line.png) 0 0 repeat-x;} 
footer h3 {padding-bottom:15px;}
.footer-col-1 {float:left; width:190px; padding:0 20px 0 0px;}
#form-search {margin:3px 0 0 0px; overflow:hidden; width:180px; background:#1a1a1a;}
#form-search span {display:block; margin-bottom:5px;}
#form-search input { width:140px; height:20px; font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#fff; border:none; background:transparent; vertical-align:top; padding:2px 5px 3px 10px; display: inline-block; float:left; }
#form-search a {float:right; background:url(../images/search.gif) 0 0 no-repeat #ef6f53; width:25px; height:25px; }
#form-search a:hover {background-color:#636f6f;}
.footer-col-2 {float:left; width:190px; padding:0 20px 0 0px;}
.footer-col-3 {float:left; width:180px; padding:0 64px 0 0px;}
dl.adrss { margin:0px 0 0px 0;}
dl.adrss dt {line-height:24px; margin-bottom:3px;}
dl.adrss dd span { width:52px; text-align:left; display:block; float:left; margin-right:12px; color:#fff;}
dl.adrss dd {}
dl.adrss dd a {}
dl.adrss dd a:hover {}
.footer-col-4 {float:left; width:276px; padding:3px 0px 0 0px;}













/**********************form**********************/
.map {width:276px; height:200px; margin-top:17px; }
.map iframe {width:276px; height:200px; }
dl.adr { margin-top:13px;}
dl.adr dt {margin-bottom:6px;}
dl.adr dd span { width:80px; display:block; float:left; color:#fff;}
dl.adr dd {}
dl.adr dd a {}
dl.adr dd a:hover {}
#form { margin: 17px 0 0px 0px; width:607px; }
#form input {border:#1a1a1a 1px solid; background:#1a1a1a; font-size:14px; font-family: Tahoma, Geneva, sans-serif; color:#fff; padding:3px 10px 3px 10px;outline: medium none;width: 511px; height:17px; float:left;}
#form textarea {border:#1a1a1a 1px solid; background:#1a1a1a; font-size:14px; font-family: Tahoma, Geneva, sans-serif; color:#fff; height: 249px;outline: medium none;overflow: auto; padding: 4px 0px 0px 10px;width:521px;resize:none;margin:0px 0 0 0;float:left;}
#form label {position:relative;display: block; min-height:30px; overflow:hidden;}
.btns {text-align:right; overflow:hidden; width:607px; }
.btns a {display:inline-block; margin:20px 0px 0 10px; width:88px; text-align:center;}
#form label strong {float:left; display:block; padding-top:3px; line-height:15px; width:74px; font-weight:normal; white-space:nowrap;}

Alles anzeigen

Vielen Dank im Voraus

Gruß

unkown-6363

Wie bräuchten eher deine *.html-Datei ...

kanufrosch

vermutlich hast du in deiner HTML-Datei eine andere Schriftcodierung eingestellt... Das müsstest du uns zeigen sonst können wir die nicht helfen, denn die css sagt da nichts weiter drüber aus...

Kanu

Racer_J

Ok, Entschuldigung.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
	<title>Home</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
	<link rel="stylesheet" type="text/css" media="screen" href="css/grid_12.css">
	<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
	<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
	<script src="js/jquery-1.7.min.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/tms-0.4.1.js"></script>
	<script src="js/cufon-yui.js"></script>
	<script src="js/cufon-replace.js"></script>
	<script src="js/Kozuka_L_300.font.js"></script>
	<script src="js/Kozuka_B_700.font.js"></script>
	<script>
		$(document).ready(function(){				   	
			$('.slider')._TMS({
				show:0,
				pauseOnHover:true,
				prevBu:'.prev',
				nextBu:'.next',
				playBu:false,
				duration:10000,
				preset:'zoomer',
				pagination:true,
				pagNums:false,
				slideshow:7000,
				numStatus:false,
				banners:'fade',
				waitBannerAnimation:false,
				progressBar:false
			})		
		});
	</script>
	<!--[if lt IE 8]>
   	<div style=' clear: both; text-align:center; position: relative;'>
     	<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       	<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    	</a>
  	</div>
	<![endif]-->
	<!--[if lt IE 9]>
   		<script type="text/javascript" src="js/html5.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
	<![endif]-->
</head>
<body>
  <!--==============================header=================================-->
	<header>
		<div class="main">
    		<h1><a href="index.html"><img src="images/logoheader.png" alt=""></a></h1>
        	<div class="social-icons">
            	<span>Follow Us:</span>
            	<div>                	
                	<a href="#" class="icon-3"></a>
            	</div>
        	</div>
        	<div class="clear"></div>
    	</div>
	</header>  
	<nav>  
    	<ul class="menu">
        	<li class="current"><a href="index.html">Home</a></li>
        	<li><a href="breeding.html">&Uuml;ber</a></li>
        	<li><a href="gaestebuch/index.php">G&auml;stebuch</a></li>
        	<li><a href="events.html">Events</a></li>
        	<li><a href="gallery.html">Gallerie</a></li>
        	<li><a href="contacts.php">Kontakt</a></li>
    	</ul>
    	<div class="clear"></div>
 	</nav>
 	<div id="slide">		
    	<div class="slider">
        	<ul class="items">
            	<li><img src="images/slider-1.jpg" alt="" /><div class="banner"><p class="extra-wrap"><strong>Helen Buchwald<span>Riding</span></p></div></li>
            	<li><img src="images/slider-2.jpg" alt="" /><div class="banner"><p class="extra-wrap"><strong>Helen Buchwald</strong><span>Looking forward...</span></p></div></li>
            	<li><img src="images/slider-3.jpg" alt="" /><div class="banner"><p class="extra-wrap"><strong>Helen Buchwald</strong><span>#</span></p></div></li>
        	</ul>
    	</div>	
    	<a href="#" class="prev"></a><a href="" class="next"></a>
 	</div> 
  <!--==============================content================================-->
	<section id="content"><div class="ic"></div>
   	<div class="container_12 top-1">
   		<div class="grid_4 box-1">
    		<img src="images/page1-img1.jpg" alt="">
        	<a href="#"><span class="clr-1">Über</span> mich</a>
    	</div>
    	<div class="grid_4 box-1">
    		<img src="images/page1-img2.jpg" alt="">
        	<a href="#"><span class="clr-1">Mein</span> Pferd</a>
    	</div>
    	<div class="grid_4 box-1">
    		<img src="images/page1-img3.jpg" alt="">
        	<a href="events.html"><span class="clr-1">Meine</span> Events</a>
    	</div>
    	<div class="grid_12">
    		<div class="line pad-1"></div>
    	</div>
    	<div class="grid_4">
    		<h2 class="p2">Willkommen!</h2>
        	<img src="images/page1-img4.jpg" alt="">
        	<p class="text-1 top-2 p3">Herzlich Willkommen auf meiner offiziellen Seite!</p>
        	<p>Ich begrüße euch herzlich auf meiner brandneuen Homepage. Hier erfahrt ihr alles über Termine, Infos etc.
			Ich halte euch immer auf dem laufenden, die Bilder werden auch aktualisiert.
			Falls ihr wollt, könnt ihr mir in mein Gästebuch schreiben!</p>
			<p>MFG</p>

    	</div>
    	<div class="grid_4">
    		<div class="left-1">
            	<h2 class="p4">News</h2>
            	<div class="wrap">
                	<div class="number">1</div>
                	<p class="extra-wrap border-bot-1"><span class="clr-1">Endlich!</span><br>
						Heute habe ich endlich Geburtstag! </p>
            	</div>
            	<div class="wrap">
                	<div class="number">2</div>
                	<p class="extra-wrap border-bot-1"><span class="clr-1">Homepage Umzug</span><br>
	Die neue Homepage ist nun endlich fertig, der Umzug hat begonnen!</p>
            	</div>
            	<div class="wrap">
                	<div class="number">3</div>
                	<p class="extra-wrap"><span class="clr-1">Neue Seite?</span><br>
	Ich gebe bekannt, das demnächst eine neue Homepage verfügbar sein wird!</p>					
				</div>
				<a href="events.html" class="button top-3">Mehr erfahren</a>
        	</div>
    	</div> 
    	<div class="grid_4">
    		<div class="left-2">
            	<h2 class="p4">Anstehende Events</h2>
            	<div class="wrap border-bot-1">
                	<img src="images/page1-img5.jpg" alt="" class="img-indent">
                	<p class="extra-wrap"><span class="clr-1">Geburtstag</span><br>
	<a href="#" class="link">May 22, 2013</a><br> Auch ein Event: Mein Geburtstag</p>
            	</div>
            	<div class="wrap border-bot-1">
                	<img src="images/page1-img6.jpg" alt="" class="img-indent">
                	<p class="extra-wrap"><span class="clr-1">Tunier XYZ</span><br>
	<a href="#" class="link">May 3, 2012</a><br> Tunier XYZ Beschreibung!</p>            	
				</div>
        	<a href="events.html" class="button top-3">Mehr erfahren</a>
			</div>
    	</div>   	
    	<div class="clear"></div>
   	</div>
	</section> 
<!--==============================footer=================================-->
  <footer>
   	  <div class="footer-col-1">
    		<h3>Warum ich?</h3>
        	<ul class="list-1">
        		<li>Slogan1</li>
            	<li>Viele Erfolge</li>

        	</ul>
    	</div>
    	<div class="footer-col-2">
    		<h3>Addresse</h3>
        	<dl class="adrss">
            	<dd><span>Land:</span>DE</dd>
            	<dd><span>Stadt:</span></dd>
            	<dd><span>Email:</span><a href="#" class="link">Email</a></dd>
        	</dl> 
    	</div>  
    	<div class="footer-col-3">
    		<h3>Newsletter</h3>
    		<form id="form-search" method="post">
          	<input type="text" value="" onBlur="if(this.value=='') this.value=''" onFocus="if(this.value =='' ) this.value=''"  /><a href="#" onClick="document.getElementById('form-search').submit()"></a>
        	</form>
    	</div>  
    	<div class="footer-col-4">
    		<p>© 2013<br>All Rights Reserved.<br>
 			<a rel="nofollow" href="http://www.templatemonster.com/" target="_blank" class="link">Website Template</a> by TemplateMonster.com</p>
			<p><strong>Coded by JB</strong></p>
    	</div>  
  </footer>	   	
<script>
	Cufon.now();
</script>
</body>
</html>

Alles anzeigen

Ist meine erste Homepage, noch ganz einfach. Viele Sachen sind noch nicht fertig (#), also bitte nicht meckern

Danke schon mal

Gruß

The Scout

Zitat

HTML

<p class="text-1 top-2 p3">Herzlich Willkommen auf meiner offiziellen Seite!</p>
        	<p>Ich begrüße euch herzlich auf meiner brandneuen Homepage. Hier erfahrt ihr alles über Termine, Infos etc. <!-- begrüße, über - Umlaute sind nicht maskiert -->
			Ich halte euch immer auf dem laufenden, die Bilder werden auch aktualisiert.
			Falls ihr wollt, könnt ihr mir in mein Gästebuch schreiben!</p> <!-- Gästebuch - Umlaut nicht maskiert -->

So, jetzt einfach nochmal alles durchgehen und schauen, welche Umlaute noch vergessen wurden. Und Zeilenumbrüche müssen mit

HTML

<br />

markiert werden. Als Tipp.

Schau mal nach, ob in deiner Navigation

HTML

<nav>  
    	<ul class="menu">
        	<li class="current"><a href="index.html">Home</a></li>
        	<li><a href="breeding.html">&Uuml;ber</a></li>
        	<li><a href="gaestebuch/index.php">G&auml;stebuch</a></li>
        	<li><a href="events.html">Events</a></li>
        	<li><a href="gallery.html">Gallerie</a></li>
        	<li><a href="contacts.php">Kontakt</a></li>
    	</ul>
    	<div class="clear"></div>
 	</nav>

Alles anzeigen

das Ganze korrekt dargestellt ist. Hier hast du die Umlute nämlich maskiert

Roland

HTML

<meta charset="utf-8">

wenn die datei auch so gespeichert wurde muss man nicht mal maskieren

Racer_J

Achso. Also wenn man das alles so

HTML

<meta charset="utf-8">

speichert, dann muss man nicht maskieren? Ok. Vielen Dank! Ich dachte nämlich schon, wieso das nicht geht.

Racer_J

Habe das jetzt so gemacht, also ganz normal geschrieben, aber trotz

HTML

<meta charset="utf-8">

geht das immer noch nicht. Die Umlaute werden nicht angezeigt!

The Scout

Zitat von Racer_J
Habe das jetzt so gemacht, also ganz normal geschrieben, aber trotz
HTML
<meta charset="utf-8">
geht das immer noch nicht. Die Umlaute werden nicht angezeigt!

Probier mal die Zeichenkodierung

HTML

<meta charset="iso-8859-1" />

Und hier noch ein wenig Lektüre zu dem Thema: Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen und Meta-Angaben zum Inhalt - Angabe zur Zeichenkodierung

Racer_J

Geht leider immer noch nicht

Langsam verzweifle ich...

cottton

HTML

<a href="#"><span class="clr-1">Über</span> mich</a> Über_1  &Uuml;ber_2

Zitat

Über_2

^funktioniert doch. (jedenfalls hier=)

EDIT:
immer nach dem ausschlussverfahren:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
	<title>Home</title>
	<meta charset="utf-8">







</head>
<body>
<a href="#"><span class="clr-1">Über</span> mich</a> Über_1  &Uuml;ber_2
</body>
</html>

Alles anzeigen

Ergibt:

Zitat

ï¿½ber mich ï¿½ber_1 Über_2

Und

HTML

<!DOCTYPE html>
<html>




<head>
    <title>Titel</title>




    <meta charset="ISO-8859-1">




</head>




<body>
<a href="#"><span class="clr-1">Über</span> mich</a> Über_1  &Uuml;ber_2
</body>
</html>

Alles anzeigen

Ergibt:

Zitat

Über mich Über_1 Über_2

lauras

Die Datei muss auch als UTF-8 abgespeichert sein! Die Deklaration des charsets im HTML reicht da nicht aus.

Racer_J

Und wie geht das per Notepad++? Da speichert der das doch automatisch so oder nicht?

Vorwerk

Zitat von Racer_J

Und wie geht das per Notepad++? Da speichert der das doch automatisch so oder nicht?

Bei deinem Editor ist höchstwahrscheinlich die Datei-Kodierung auf Ansi gestellt. Hier solltest du auf UTF-8 stellen und dann müsste der Editor die Umlaute richtig speichern. Allerdings solltest du dann nicht bei charset ISO-8859-1 eintragen. Das entstellt dann wieder deine Seiten.

feinshdens

Zitat von The Scout

So, jetzt einfach nochmal alles durchgehen und schauen, welche Umlaute noch vergessen wurden. Und Zeilenumbrüche müssen mit
<br />
markiert werden. Als Tipp.

stimmt nicht ! siehe

gerne

Jetzt mitmachen!