Design für IE aufarbeiten - wie?

Status
Nicht offen für weitere Antworten.
Komisch. Wenn ich das hier validieren lasse:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
</head>
<body>
	<ul id="leftmenue">
		<li><a href="#">Test</a></li>
		<li><a href="#">Jurtenrunde</a>
			<ul id="subleft">
				<li><a href="#">Unterpunkt1</a></li>
				<li><a href="#">Unterpunkt2</a></li>
			</ul>
                </li>
		<li><a href="#">Singekreis</a></li>
		<li><a href="#">Schmerz Forum</a></li>
	</ul>
</body>
</html>

ist alles in bester Ordnung. Schaue ich mir das aber zu meiner Seite an, nicht. Das sagt zumindest der hier und jener. In der html Datei die ich nutze habe ich aber die verschachtelung genauso - verstehe daher nicht, dass es einmal geht und dann wieder nicht.

Gruß und Danke
Muckel
 
Scheinbar bist du "betriebsblind".

Deine Version:
Code:
<ul id="leftmenue">
		<li><a href="#">Test</a></li>
		<li><a href="#">Jurtenrunde</a></li>
			<ul id="subleft">
				<li><a href="#">Unterpunkt1</a></li>
				<li><a href="#">Unterpunkt2</a></li>
			</ul>
		<li><a href="#">Singekreis</a></li>
		<li><a href="#">Schmerz Forum</a></li>
	</ul>

Meine Version:
Code:
<ul id="leftmenue">
		<li><a href="#">Test</a></li>
		<li><a href="#">Jurtenrunde</a>
			<ul id="subleft">
				<li><a href="#">Unterpunkt1</a></li>
				<li><a href="#">Unterpunkt2</a></li>
			</ul>
                </li>
		<li><a href="#">Singekreis</a></li>
		<li><a href="#">Schmerz Forum</a></li>
	</ul>
Das Markup für eine verschachtelte Liste lautet nämlich:

Code:
<ul>
    <li>item 1
        <ul>
            <li>subitem 1.1</li>
        </ul>
    </li>
</ul>
 
Ja, bin wohl wirklich Betriebsblind. Das soll jetzt nicht nach jammern oder so klingen - ich nehme halt sehr viel Schmerzmittel, leider, denke das daher meine Konzentration nicht wirklich gut ist.

Gruß und Danke
Muckel
 
Guten Morgen,

ich muss heute eine Website abgeben (in der Berufsschule) und habe noch ein Problem mit den z-index bzw. der IE darstellung. Kann mir da jemand helfen? Meine style.css schaut so aus:
Code:
/*Style Datei für die Internetseite von Tobias Müller
Erstellt wurde diese Website für den Berufsschulunterricht
der Multimedia Berufsbildenden Schule Hannover, der Klasse
SYE07C. Die normale Seite von dem Autor ist unter 
http://jurtenrunde.de zu finden.*/

/*Die eigenschaften für die Seite */
body,html{
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif; /*Schriftgröße und Schriftart*/
	color:#000000; /*Schriftfarbe*/
	background-color:#ffffff; /*Hintergrundfarbe*/
	overflow: auto; /*Scralbalken*/
	background:url(Bilder/background3.gif); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:0 35px; /*Position Hintergrundbild*/
}

*{
	padding:0; /*Innenabstand*/
	margin:0; /*Außenabstand*/
	border:0; /*Rahmen*/
}

/*Seitengliederung
=================*/

#kopf {
	display:block;
	overflow:hidden;
	top:0;/*Abstand*/
	left:0;/*Abstand*/
	right:0;/*Abstand*/
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	
	background-color:#eeeeee; /*Hintergrundfarbe*/
	border-bottom: 1px solid #000000; /*Rahmen*/
}

* html #kopf {
	border:none;
	z-index:1;}

#titel { /*Titel der Seite*/
	display:block;
	overflow:hidden;
	height:90px;/*Höhe*/
	text-align:left;/*Einzug*/
	margin-left:180px;
	border:none;
}

* html #titel {
	border-left:200pxsolid #000000;
	border-right:150px solid #000000;
	z-index:2;}

#spur {
	display:block;
	overflow:hidden;
	padding-left:5px;
	border-top: 1px dashed #000000; /*Rahmen*/
	border-left: 1px dashed #000000; /*Rahmen*/
	border-right: 1px dashed #000000; /*Rahmen*/
	border-bottom: none;
	text-align:left;/*Einzug*/
	font-size:14px;
	line-height:15px;
	font-weight:bold;
}

* html #spur {
	border-left:200pxsolid #000000;
	border-right:150px solid #000000;
	z-index:2;}

#links {
	display:block;
	overflow:hidden;
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	float:left;/*Umlauf*/
	width:200px;/*Breite*/
	border:none;/*Rahmen*/
}

* html #links {
	border:none;
	z-index:1;}

#frei {/*Freiraum für die Grafik*/
	height:680px;
}

#content {
	overflow:hidden;
	border:none;
}

* html #content {
	border-left:200pxsolid #000000;
	border-right:150px solid #000000;
	z-index:2;}

#rechts {
	display:block;
	overflow:hidden;
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	float:right;/*Umlauf*/
	overflow:hidden;/*Scralbalken*/
	width:150px;/*Breite*/
	border:none;/*Rahmen*/
	text-align:right;/*Einzug des Inhalts*/
	background:transparent;/*Hintergrund*/
}

* html #rechts {
	border:none;
	z-index:3;}

#random {/*Platzhalter für das Bild...*/
	margin-top:0;/*Außenabstand*/
	margin-right:0;/*Außenabstand*/
	margin-left:5px;/*Außenabstand*/
	margin-bottom: 15px;/*Außenabstand*/
	padding:5px;/*Innenabstand*/
	background:transparent;/*Hintergrund*/
	border:none; /*Rahmen*/
	text-align:center;/*Einzug*/
}

#fuss {
	clear:both;
	display:block;
	overflow:hidden;
	left:0;/*Abstand*/
	right:0;/*Abstand*/
	margin:0;
	bottom:0px;
	padding:0;
	border: none; /*Rahmen*/
	text-align:center;/*Einzug*/
}

* html #fuss {
	border:none;
	z-index:1;}

/*Menues
=========*/

#kopf ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  height:20px; /*Höhe*/
  margin: 0 auto;
}

#kopf li{
  float:left;
  border-left: 1px solid #000000; /*Rahmen*/
  border-right: 1px solid #000000; /*Rahmen*/
}

#kopf li a{
  display:block; /*Art der Anzeige*/
  width:100px; /*Breite*/
  padding-left:5px;
  padding-right:5px;
  height:20px; /*Höhe*/
  line-height:20px; /*Zeilen Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:15px; /*Schrift Größe*/
}

#kopf li a:hover, li#active a{
  color:#eeeeee;
  background:#000000;
}

#rechts ul { /*rechtes Menue*/
	width:140px;
	list-style:none;
	text-align:right;
	margin-top:0;
	margin-left:10px;
	margin-right:5px;
	margin-bottom:0;
}

#rechts li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	border-right:1px dashed #000000;
	border-bottom:1px dashed #000000;
	background:transparent;
	display:block;
	color: #000000;
	text-decoration:none;
	
}

#rechts li a:hover {
	background:#eeeeee;
	border-top:1px dashed #000000;
	border-left:1px dashed #000000;
	font-weight:bold;
}

ul.submenue {
  max-width:130px;  
  list-style:none;
  text-align:left;
}

.submenue li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	background:#dddddd;
	color: #000000;
	text-decoration:none;
	
}

.submenue li a:hover {
	background:#eeeeee;
}

#links #menu  { /*linkes Menue*/
	width:140px;
	list-style:none;
	text-align:left;
	margin-top:0;
	margin-left:5px;
	margin-right:10px;
	margin-bottom:0;
}

#links #menu li a {
	height: 22px;
	line-height: 22px;
	text-align:left;
	border:none;
	background:transparent;
	display:block;
	color: #000000;
	text-decoration:none;
	
}

#links #menu li a:hover {
	background:#eeeeee;
	border:1px dashed #000000;
	font-weight:bold;
}

#links #listelinks {
  list-style-type:circle;
  list-style-position:outside;
  padding-left:20px;
}

/*Abstand zum Rand des div*/
#inhalt  {
	padding:10px;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	border: 1px dashed #000000;
}

/*Listen*/
#inhalt ul, ol {
	margin:20px;
}


/*Überschriften*/
#titel h1{color: #000000; font-size:35px; text-decoration:underline;}

#links h1 {color: #000000; margin:5px; text-align:left; font-size:20px; text-decoration:none; border-bottom:1px solid #000000;}

#inhalt h1 {color: #000000; margin-top: 10px; margin-left:0px; text-align:left; font-size:30px; text-decoration:none; border:none;}
#inhalt h2 {color: #000000; margin-top: 10px; margin-left:10px; text-align:left; font-size:25px; text-decoration:none; border:none;}
#inhalt h3 {color: #000000; margin-top: 10px; margin-left:20px; text-align:left; font-size:20px; text-decoration:none; border:none;}
#inhalt h4 {color: #000000; margin-top: 10px; margin-left:30px; text-align:left; font-size:18px; text-decoration:none; border:none;}
#inhalt h5 {color: #000000; margin-top: 10px; margin-left:40px; text-align:left; font-size:16px; text-decoration:none; border:none;}
#inhalt h6 {color: #000000; margin-top: 10px; margin-left:50px; text-align:left; font-size:14px; text-decoration:none; border:none;}

#rechts h1 {color: #000000; margin:5px; text-align:left; font-size:20px; text-decoration:none; border-bottom:1px solid #000000;}

/*Gestaltung des Textes*/
#titel p {font-size:20px; font-weight:bold; text-decoration:none; padding:5px;}
#links p {padding:5px;/*Innenabstand*/}
#inhalt {font-size:12px;}
#inhalt p {margin-top:10px;}
#rechts p {padding:5px;/*Innenabstand*/}

/*Link gestaltung*/
#inhalt a:link{color:#000000; font-size:12px; text-align:left; text-decoration: underline; border:0; margin:0;}
#inhalt a:visited{color:#666666; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a:hover{color:#666666; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a:active{color:#000000; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a img { border:0; }

/*Tabellen*/
#inhalt tabel {
	border:1px solid #000000;
	empty-cells:show;
	border-collapse:collapse
}

#inhalt tr {
	border:1px solid #000000;
}

#inhalt td {
	border:1px solid #000000;
	vertical-align:top;
	overflow:hidden;
	padding:5px;
}


/*Bilder*/

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* Ende Bilder */

/*Zitate*/
#inhalt blockquote {
  display:block;
  margin-top:10px;
  margin-left:40px;
  margin-right:20px;
  margin-bottom:10px;
  padding-top:5px;
  padding-left:5px;
  padding-right:53px;
  padding-bottom:5px;
  border-top:none;
	border-left: 4px solid #666666;
	border-right:none;
	border-bottom:none;
	font-size:15px;
	background-color:#eeeeee;
	background:url(Bilder/quote2.jpg); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:top right; /*Position Hintergrundbild*/
}
und die index.html schaut so aus:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Internetseite Tobias</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="kopf">
	<ul>
		<li><a href="index.htm">Startseite</a></li>
		<li><a href="autor.htm">Autor</a></li>
		<li><a href="hobbies.htm">Hobbies</a></li>
		<li><a href="impressum.htm">Impressum</a></li>
	</ul>
</div>

<div id="links">
	<div id="frei"><!-- Freiraum für die Grafik --></div>
  <h1>Information</h1>
  <ul id="listelinks">
    <li>Diese Seite wurde für den Berufsschulunterricht an der <a href="http://mmbbs.de">mmbbs</a> in Hannover erstellt. Des weiteren wird dieses Layout in 
  Verbindung mit dem <a href="http://wordpress-deutschland.org">WordPress de</a> auf der Internetseite des <a href="http://jurtenrunde.de/blog">Autors</a> verwendet.</li>
  </ul>
</div>
<div id="rechts">
	<div id="random"><img src="Bilder/lilieklein.jpg" alt="Lilie klein" /></div>
	<h1>Seiten</h1>
  <ul>
		<li><a href="index.htm">Startseite</a></li>
		<li><a href="autor.htm">der Autor</a>
			<ul class="submenue">
				<li><a href="autor.htm#daten">Daten & Fakten</a></li>
				<li><a href="autor.htm#nachweise">Referenzen</a></li>
			</ul>
		</li>
		<li><a href="hobbies.htm">Hobbies</a>
			<ul class="submenue">
				<li><a href="hobbies.htm#jugendbewegung">Jugendbewegugn</a></li>
				<li><a href="hobbies.htm#chatten">Stamm Chatten</a></li>
				<li><a href="hobbies.htm#gitarre">Gitarre spielen</a></li>
				<li><a href="hobbies.htm#programmieren">Programmieren</a></li>
			</ul>
		</li>
		<li><a href="bewertung.htm">Bewertung</a></li>
		<li><a href="impressum.htm">Impressum</a>
			<ul class="submenue">
				<li><a href="impressum.htm#haftung">Haftungsausschluss</a></li>
				<li><a href="impressum.htm#kontakt">Kontakt</a></li>
			</ul>
		</li>
	</ul>
</div>
<div id="content">
<div id="titel"><h1>Titel der Seite</h1>
	<p>Beschreibung der Seite</p>
</div>
<div id="spur">Start> Seite</div>
 <div id="inhalt">
	<h1>Herzlich Willkommen</h1>
	<p>Diese Internetseite ist im Rahmen des Berufsschulunterichts an der 
	<a href="http://mmbbs.de">Multimedia Berufsbildendenschule Hannover</a> entstanden und dient ausschließlich 
	Unterrichtsinhalten. Erstellt wurde diese Seite von <a href="http://jurtenrunde.de/blog/">Tobias Müller</a>.</p>
	<h1>weitere verwendung dieses Layouts</h1>
	<p>Das Layout dieser Seite wird auf der Internetseite <a href="http://jurtenrunde.de/blog/">jurtenrunde.de/blog</a> verwendet.
	Dort ist das Layout so auf gearbeitet, dass es über php Variabeln "dynamisch" wird. Durch die Administrationsoberfläche
	des <a href="wordpress-deutschland.org">Wordpress</a> hat man dann folgende Möglihckeiten:</p>
	<ul>
		<li>erstellung von Kategorien</li>
		<li>Beiträge schreiben</li>
		<li>feste Seiten schreiben</li>
		<li>Kommentare verwalten</li>
	</ul>
	<p>Durch verschiedene Plugins (=Erweiterungen) kann man das Wordpress mit vielen zusätzlichen Funktionen ausstatten.</p>
	<h1>validität und Barrierefreiheit</h1>
	<p>in der heutigen Zeit ist es sehr wichtig, die validität einer Seite einzuhalten, damit alle Browser die Seiten anzeigen können
	und somit gewährleistet ist, dass alle User auch gefallen ander Seite finden.</p>
	<p>Doch auch in unserem Land gibt es Menschen die ein Handicap haben und nicht einfach so lesen können und/oder eine
	Website bedienen können. Daher ist es wichtig, dass jedes Layout barrierefrei erstellt wird. Das W3C Konsorzium hat dazu klare
	Richtlinien erstellt, die ich zumindest auf dem Aufgearbeiteten Layout (=das für das Wordpress) einhalten will.</p>
	<p>Sinn und zweck ist es, dass der Inhalt einer Seite bei allen Auflösungen angeziegt werden kann und das der Inhalt
	Maschienen lesbar wird. So haben dann auch Menschen eine Chance die Seite zu nutzen, die eingeschränkt sind. Des weiteren
	werde ich eine Funktion einbauen, die es ermöglicht, die Schrift zu verkleinern oder zu vergrößern. Durch die Farbwahl meines
	Layouts habe ich eine Kontrastreiche Seite her gestellt, was das lesen vereinfacht.</p>
	<p>Die validität des Layouts habe ich über den validator von w3c.org und von selfhtml.org überprüft. Laut dieser Überprüfung ist
	dieses Layout valid.:</p>
</div></div>
<div id="fuss"><p>Alle Rechte an dieser Seite (Texte, Bilder und Layout) liegen bei dem <a href="impressum.htm">Autor</a>.</p></div>
</body>
</html>

Wäre euch sehr sehr dankbar!

Gruß Muckel
 
Hi,

es besteht hier kein Problem mit der Schichtpositionierung, sondern wohl eher mit der gesetzten Farbe für den rechten Rahmen:

Code:
* html #titel {
        border-left:200px solid #000000;
        border-right:150px solid #fff;
        z-index:2;}

* html #spur {
        border-left:200px solid #000000;
        border-right:150px solid #fff;
        z-index:2;}

* html #content {
        border-left:200px solid #000000;
        border-right:150px solid #fff;
        z-index:2;}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück