Beiträge von hopsli

hopsli

Hallo Wolf,
danke für Deine Hinweise, das ist super!!! Nee, ich nehme die Kritik sehr produktiv auf, weiß ja, dass ich Nachholbedarf habe. Und danke, wenn ich Fragen habe, melde ich mich!
"Es ist ein bisschen geschmackssache aber ich bennene (wenn es überhaupt
nötig ist) meine bereiche über Klassen statt über ID's (die sind nämlich
nicht mehrfachverwendbar.. )."

Hi Wolf,
das ist für mich der Grund, warum ich IDs dort nehme, wo ich eine Positionierung über die ID vornehmen muss, siehe mein Layout. Mit class könnte ich das so nicht vornehmen. In der Tat nutze ich die IDs gerade weil sie nur einmalig vorkommen.
Oder liege ich da falsch?

hopsli

Danke

HTML

<!doctype html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="description" CONTENT="xxx">
 <meta name="ROBOTS" content="index, follow">
 <meta name="revisit-after" content="20 days">
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 <link rel="STYLESHEET" type="text/css" href="stil/style_home.css" />
 <link rel="STYLESHEET" type="text/css" href="stil/menuestyle.css" />
 <script type="text/javascript" src="js/scripts.js"></script>
 <script type="text/javascript" src="js/slideshow.js"></script>
<title>Titel</title>
</head>
<body onload="erstelleFader();">
<div id="logo"><a href="index.php"><img src="images/logo.gif" width="184" height="95" alt="xxx" /></a></div>
<nav id="menue">
	<ul>
  	<li class="haupt_hi"><a href="index.php">Home</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt"><a href="pfad.php">Link</a></li>
	</ul>
</nav>
<aside id="update">  
   <p>Letztes Update: 13.01.2015</p>
   <p><h1>Download</h1>
   <p class="fl"><a href="pdf/katalog.pdf" target="_blank">Hauptkatalog<br />(pdf)<br /><img src="images/katalog-2015.jpg" width="71" height="100" alt="Katalog 2015" title="Katalog 2015"  /></a></p>
   <p class="clear"></p><p class="ergaenz"><a href="klimaschutz/danke-an-die-kunden.php"><img src="images/medaille_home.jpg" width="130" height="100" alt="award" title="xxx"></a></p> 
   <p class="clear"></p>  <p><br /><br /><a href="http://www.facebook.com" target="_blank" class="facebook">Facebook</a><br /><br /><a href="sitemap.php">Sitemap</a><br /><br /></p>
</aside> 
<article id="introtext">
   <h1>Willkommen</h1>
   <p>Lorem ipsum dolor sit amet</p>
   <p>Consetetur sadipscing elitr:   , no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolor.</p>
   <ul><li> ed diam nonumy eirmod tempor invidunt ut labore </li>
   <li> set dolore magna aliquyam erat, sed diam voluptua.</li>
   <li> At vero eos et accusam et justo duo dolores et ea rebum.</li></ul>
   <p>Stet clita kasd gubergren!</p>
</article>
<div id="bildershow">
   <p id="slideshow"> </p>
</div>
<nav id="dreilinks_li">
 <a href="pfad.php">Link &gt;</a>&nbsp;&nbsp;&nbsp;
 <a href="pfad.php">Link &gt;</a>&nbsp;&nbsp;&nbsp;
 <a href="pfad.php">Link &gt;</a>
</nav>
<div id="unsereangebote"><h3>Unsere aktuellen Angebote:</h3></div>
<section id="teaserbereich">
	<article>
  	<div id="kasten1">
   	<header>
     	<a href="pfad.php"><img src="images/home_bild1.jpg" width="137" height="89" alt="Bild1" title="Bild1"  /></a>
     	<h2>&Uuml;berschrift Kasten1</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
  	</div>
	</article>
	<article>
   	<div id="kasten2">
   	<header>
     	<h2>&Uuml;berschrift Kasten2</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
     	<a href="pfad.php"><img src="images/home_bild2.jpg" width="137" height="89" alt="Bild2" title="Bild2"  /></a>
  	</div>
	</article>
	<article>
   	<div id="kasten3">
   	<header>
     	<h2>&Uuml;berschrift Kasten3</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
     	<a href="pfad.php"><img src="images/home_bild3.jpg" width="137" height="89" alt="Bild3" title="Bild3"  /></a>
   	</div>
	</article>
	<article>
  	<div id="kasten4">
   	<header>
     	<a href="pfad.php"><img src="images/home_bild4.jpg" width="137" height="89" alt="Bild4" title="Bild4"  /></a>
     	<h2>&Uuml;berschrift Kasten4</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
  	</div>
	</article>
 <div id="clear"></div>
</section><br>
<footer id="fussbereich"><p>Stet clita kasd gubergren, no sea takimata sanctus est <a href="mailto:#">Mail</a>
	&nbsp;&nbsp;&middot;&nbsp;&nbsp;<a href="sitemap.php">Sitemap</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;<a href="impressum.php">Impressum</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
	<a href="datenschutz.php">Datenschutz</a></p><br>
</footer>




</body>
</html>

Alles anzeigen

hopsli

Danke

hopsli

Sooo. Nun habe ich den Übeltäter gefunden: Ich habe das komplette Projekt nach der Zeichenfolge
ï»¿
abgesucht und die Datei gefunden, in der sie noch stand (also hatte ich doch nicht alle Dateien gecheckt). Rausgenommen - fertig.
Ist es aber so, dass dieses BOM immer nur am Anfang des Quellcodes vorkommt? Wenn ja, wäre es zum Glück ziemlich einfach, die fehlerhaften Seiten ausfindig zu machen, wie es bei mir ja der Fall war.

hopsli

Hallo,
ich validiere gerade die Seiten der Website und habe immer folgende Warnung:

"The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to
cause problems for some text editors and older browsers. You may want
to consider avoiding its use until it is better supported."

Unter http://www.w3.org/International/…der-mark.de.php habe ich gelesen, dass auch in den php-Includes ein BOM stecken kann. Ich habe alle php-Dateien, die ich includiert habe, angeschaut: diese drei merkwürdigen Sonderzeichen sind nirgends zu entdecken. Ich weiß eigentlich nicht, wonach ich noch suchen soll. Ich glaube, ich habe die ganze Problematik noch nicht ganz erfasst...

Hat jemand eine Idee dazu, worauf ich noch achten kann?

Danke!

hopsli

Hallo Basii,

ich habe einfach mal die Ansicht der kompletten Datei drangehängt. Die Div-Suppe ist gesichtet, aber ich wusste mit einigen Elementen nichts anzufangen, wie z.B.;
- mit dem Logo überm Menue (=nav) - sollte ich es dem Menue zuschlagen? Immerhin führt ein Klick zurück zur Home.
- mit der bildershow (es wechseln die Bilder)
- nav=klein bezieht sich auf die drei Links unterhalb des Willkommens-Artikels.
- div=Angebote ist im Prinzip die Überschrift zu den vier Teasern. Die vier Teaser habe ich als einzelne article deklariert und in einer section zusammengefasst.
- In meiner Frage ging es darum, dass nun diese Section mit den vier Teasern keine eigene Überschrift hat. Das blöde ist: sie gibt es, aber sie liegt außerhalb des als section definierten Bereiches, nämlich darüberhtml-seminar.de/woltlab/attachment/766/.

Mich würde sehr interessieren, wie Du es gliedern würdest, oder findest Du meine Aufteilung jetzt schon sinnvoll?

Gespannte Grüße
hopsli
Hallo Basiii, und alle anderen,
ich möchte mich nicht aufdrängen aber trotzdem nochmal nachfragen, ob das Bild zu unklar war. Ich könnte mir vorstellen, dass es auch andere interessieren könnte, wie Ihr Spezis meine Aufteilung findet.
Oder findet Ihr allein den Ansatz schon verkehrt?
Mir ist bewusst, dass die Aufteilung derzeit nicht nach einem responsive Design aussieht. das ist natürlich mein nächstes Ziel, vielleicht muss ich gehörig umbauen. Aber einen Schritt nach dem anderen...

hopsli

Hallo an Euch,
meine Seite habe ich validiert, und sie ist html5-konform, es gab nur zwei Warnungen:

Ich habe eine section gemacht, die inhaltlich keiner Überschrift bedarf.
Ohne Überschrift wirft mir der w3c-Validator aber diese Warnung aus:

"Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections."

Mit Tricks lässt sich da zwar auch eine Überschrift hineinschmuggeln (einen h3 mit id, den ich auf unsichtbar setze), aber wozu? Was ist besser, oder gibt es da kein besser oder schlechter: tricksen, oder mit dieser Warnung leben?

Eine weitere Warnung bekomme ich auch, aber die kriegt wohl jeder (oder?):
"Using experimental feature: HTML5 Conformance Checker."

Was meint Ihr: Kann ich zufrieden sein, so wie die Seite jetzt ist?

hopsli

So, nun habe ich den Fehler gefunden. Zum Hintergrund: Ich arbeite hier im lokalen Intranet. So lange ich dort schaute, stellte sich der Internet Explorer auf dumm. So bald ich, und das habe ich heute dann gemacht, die Seite ins Internet gespielt habe und dort geschaut habe, war sie genauso hübsch und richtig wie im Firefox.
Dieses Phänomen - und ich bin einfach nicht darauf gekommen bzw. wusste davon nichts - hat etwas mit den IE-'Einstellungen der Kompatibilitätsansicht' zu tun. Lokal reagiert der Internet Explorer anders als online.
Hier habe ich dann den entscheidenden Hinweis erhalten, um das Problem auszuschalten: http://www.peterkropff.de/allgemeines/ko…dus/problem.htm
Ich habe unter 'Extras'/Einstellungen der Kompatibiliätsansicht/ den Haken bei 'Intranetsites in Kompatibilitätsansicht anzeigen' herausgenommen. Dann hat alles bestens geklappt.
So. Das Problem ist gelöst.
Danke für Eure Hilfe, trotzdem! Ihr seid !!!

hopsli

Hallo an Euch alle,
sorry, meine Fehlerbeschreibung war kryptisch. Der css-Fehler war nicht das Problem, aber stimmt, das muss ich in Ordnung bringen. Danke für den Hinweis.
Nachdem ich am Freitag einfach nur noch verzweifelt war, habe ich den Gegentest auch nicht mehr ordentlich gemacht, jetzt merke ich: Beide Quellcodes machen im IE das, was sie sollen.
Aber in dem deutlich komplexeren Quellcode, den ich Euch ersparen wollte, macht der Internet Explorer in dieser schmalen Beispielversion zwar alles richtig.
Wenn ich dann aber noch den kompletten Content mit hineingebe, macht der IE 11 den klassischen Fehler:

HTML

<nav id="menue"></nav>
<ul>...</ul>
</nav><//nav>

Und das, während im Quellcode alles richtig steht.

Das war, was ich einfach nicht verstehe. Irgendwo muss ein Fehler sein, offensichtlich nicht an dieser Stelle, aber ich weiß nicht, worauf ich achten muss, um das Problem in den Griff zu bekommen.

Vielleicht habt Ihr eine Idee, was hier falsch laufe könnte, auch ohne Euch mit den 150 Zeilen Quellcode beschäftigen zu müssen. Dass es mit dem, was zwischen <nav> und </nav> steht, zu tun hat, schließe ich eigentlich aus.
Bitte entschuldigt diesen chaotischen Thread, er ist der Verzeiflung zu verdanken.

hopsli

Hallo,
ich bin neu hier und mit hmtl5 bin ich es auch.
Ich habe ein Problem mit dem Internet Explorer 11. Bei einer Testdatei zeigt er mir alles so an, wie ich will:

HTML

<!doctype html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <style>
body { background-color:#1F5BA3;font-family:Arial;color:#fff; }
#logo  { position:absolute; top:20px; left:20px; width:184px; height:94px;}




#menue {position:absolute;top:130px;left:20px;width:220px;border:0px solid #84B4ED;font-face:Verdana;overflow:visible;}
#menue ul { margin:0;padding:0; list-style: none; }
#menue li.haupt    		{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B; }
#menue li.haupt_hi 		{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B; }
#menue li.haupt_hi_s   	{position:relative; float:left; width:184px; background:#173D7B; }
#menue li.haupt_subm	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B;background-image:url(pf.gif); }
#menue li.haupt_hisubm  {position:relative; float:left; margin-bottom:-1px; width:184px; background:#102C59;background-image:url(pf_u.gif); }
#menue li.sub1 	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#102C59; }
#menue li.sub1hi   {position:relative; float:left; margin-bottom:-1px; width:184px; background:#102C59; }
#menue li.sub2   {position:relative; float:left; margin-bottom:-1px; width:184px; background:#39465B; }
#menue li ul { margin-top:-1px;}
#menue li a {display:block; color:#fff; text-decoration:none; border:1px solid #84B4ED; }
#menue li.haupt a, li.haupt_hi a, li.haupt_subm a, li.haupt_hisubm a  {padding:3px 5px;font-weight:bold;font-size:10pt;}
#menue li.haupt_hi a {color:#84B4ED;}
#menue li.sub1 a  {padding:3px 5px 3px 15px;font-weight:bold;font-size:9pt;}
#menue li.sub1hi a  {padding:3px 5px 3px 15px;font-weight:bold;font-size:9pt;color:#84B4ED;}
#menue li.sub2 a {padding:3px 5px 3px 20px;font-size:8pt;}
#menue li a:hover {background-color:#84B4ED;color:#fff; }
#menue .startli {color:#B9D5F8;}




img { border:0px;}
 </style>
 <script type="text/javascript" src="js/scripts.js"></script>
<title>Titel</title>
</head>




<body>

	<header id="logo"><a href="index.php"><img src="images/logo.gif" width="184" height="95" alt="logo" /></a></header>
	<nav id="menue">

<ul>
 <li class="haupt_hi"><a href="index.php">Home</a></li>
 <li class="haupt_subm"><a href="link.php">link</a></li>
 <li class="haupt_subm"><a href="link.php">link</a></li>
 <li class="haupt_subm"><a href="link.php">link</a></li>




	</nav>




</body>
</html>

Alles anzeigen

In meinem Ernstfall macht er aber etwas anderes, falsches. Ich werde noch wahnsinnig!!!
Schaut her:

HTML

<!doctype html>
<html lang="de">
<head>
 <meta charset="UTF-8">




 <style>
 	body { background-color:#1F5BA3;font-family:Arial;color:#fff; }
/* Home */
#logo  { position:absolute; top:20px; left:20px; width:184px; height:94px;}




#menue {position:absolute;top:130px;left:20px;width:220px;border:0px solid #84B4ED;font-face:Verdana;overflow:visible;}
#menue ul { margin:0;padding:0; list-style: none; }




#menue li.haupt_hi     	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B; }




#menue li.haupt_subm	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B;background-image:url(pf.gif); }







#menue li ul { margin-top:-1px;}
#menue li a {display:block; color:#fff; text-decoration:none; border:1px solid #84B4ED; }
#menue li.haupt a, li.haupt_hi a, li.haupt_subm a, li.haupt_hisubm a  {padding:3px 5px;font-weight:bold;font-size:10pt;}
#menue li.haupt_hi a {color:#84B4ED;}
#menue li a:hover {background-color:#84B4ED;color:#fff; }
#menue .startli {color:#B9D5F8;}




img { border:0px;}
 </style>




<title>Titel</title>
</head>




<body>

	<div id="logo"><a href="index.php"><img src="logo.gif" width="184" height="95" alt="Logo" /></a></div>
<nav id="menue">
<ul>
 <li class="haupt_hi"><a href="index.php">Home</a></li>
 <li class="haupt_subm"><a href="link1.php">Link 1</a></li>
 <li class="haupt_subm"><a href="link2.php">Link 2</a></li>
 <li class="haupt_subm"><a href="link3.php">Link 3</a></li>
 <li class="haupt_subm"><a href="link4.php">Link 4</a></li>
 <li class="haupt_subm"><a href="link5.php">Link 5</a></li>
 <li class="haupt_subm"><a href="link6.php">Link 6</a></li>
</ul>
</nav>




</body>
</html>

Alles anzeigen

Ich finde den Fehler nicht! Und ich bin leider noch sehr neu in Sachen html5...

Beiträge von hopsli

Section ohne Überschrift?

Section ohne Überschrift?

Byte-Order Mark found in UTF-8 File.

Byte-Order Mark found in UTF-8 File.

Byte-Order Mark found in UTF-8 File.

Section ohne Überschrift?

Section ohne Überschrift?

Internet Explorer 11 macht Murx (oder ich...)

Internet Explorer 11 macht Murx (oder ich...)

Internet Explorer 11 macht Murx (oder ich...)