✔ Design für IE aufarbeiten - wie?

Muckel1986 · 7. Januar 2008

Guten Abend,

ich habe es nun mit der Variante probiert, mit der man die style.css erweitert umd jenes, was sich berechnet. Meine index.php schaut nun so aus:

Code:

<?php header('Content-Type: text/html; charset=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" lang="de" xml:lang="de">
<?php
$startzeit = explode(" ", microtime());
$startzeit = $startzeit[0]+$startzeit[1];
?>
<head>
<title>jurtenrunde.de, muckels-fahrtenleben.de, muckels-leben.de ~ der Jugendbewegung verschrieben</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<div id="mitte">
<?php include ("page.php");?>
</div>
<div id="ecke"></div>
<div id="oben">
<?php include ("head.php");?>
</div>
<div id="bild"><!--Logo--></div>

<div id="links" class="spalte">
<!-- Hauptmenue -->
<?php include ("menue.php");?>
</div>

<div id="rechts" class="spalte"> 
<!-- Zitate -->
<?php include ("zitate.php");?>

</div>
<!-- footer einfügen -->
<?php include ("footer.php");?>
</body>
</html>

und meine style.css so:

Code:

body {
	overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
	font-size:15px; /*Schriftgröße*/
}
#ecke {
	position: absolute; /*Positionsart*/
	top: 0; /* Abstand zum oberen Fensterrand */
	left: 0px; /* Abstand zum linken Fensterrand */
	padding: 0; /*Abstände*/
	background: url(Bilder/winter2.gif);/*Hintergrundbild*/
	background-color: #666666; /*Hintergrundfarbe*/
	width: 150px; /*Breite*/
	height: 105px;
	border-bottom: 1px solid #000000;
}
#oben {
	position: absolute; /*Positionsart*/
	top: 0; /* Abstand zum oberen Fensterrand */
	left: 150px; /* Abstand zum linken Fensterrand */
	right: 150px; /* Abstand zum rechten Fensterrand */
	height: 105px; /* Blockhöhe */
	padding: 0; /* Interpretation Boxmodell! */
	overflow: hidden; /* Scrollbalken unterbinden */
	background: url(Bilder/backgorund1.gif);/*Hintergrundbild*/
	background-color: #000000; /*Hintergrundfarbe*/
	color: #FF6600;/*Schriftfarbe*/
	margin: 0;/*abstände*/
	text-align:center;/*Textausrichtung*/
	font-size:20px;/*Schriftgröße*/
	font-weight:bold;/*Fettdruck*/
	border-bottom: 1px solid #000000;
		/* nur für IE: */
		width: expression((document.body.clientWidth - 300) + "px");
		/* left-Wert + right-Wert = 0 */
}
/*H1 Überschrift im Header*/
#oben h1 {color: #FF6600; text-align:center; font-size:28px; text-decoration:none;}

#bild {
	background: url(Bilder/kothefluss-klein.gif);/*Hintergrundbild*/
	background-repeat:no-repeat;/*Hintergrundbild wirderholen aus*/
	background-position:bottom;/*Hintergrundbild anordnen*/
	background-color: #000000;/*Hintergrundfarbe*/
	position: absolute;/*positionierung*/
	top: 0;/*abstand oben*/
	right: 0;/*abstand rechts*/
	width: 150px;/*breite*/
	height: 105px;/*höhe*/
	padding: 0;/*Abstände*/
	overflow: hidden;/**/
	color:#cccccc;/*Schriftfarbe*/
	border-bottom: 1px solid #000000;
}

#links {
	position: absolute;/*positionierung*/
	top: 105px; /* Abstand zum oberen Fensterrand */
	left: 0; /* Abstand zum linken Fensterrand */
	bottom: 0px; /* Abstand zum unteren Fensterrand */
	background: url(Bilder/backgorund2.gif);/*Hintergrundbild*/
	background-color: #cccccc;/*Hintergrundfarbe*/
	width: 150px; /* Blockbreite */
	padding: 0; /* Interpretation Boxmodell! */
	overflow: auto; /* Scrollbalken, falls notwendig */
		/* nur für IE: */
		height: expression((document.body.clientHeight - 105) + "px");
				/* top-Wert + bottom-Wert = 105 */
}

#mitte {
	position: absolute; /*positionierung*/
	top: 105px; /* Abstand zum oberen Fensterrand */
	left: 150px; /* Abstand zum linken Fensterrand */
	bottom: 45px; /* Abstand zum unteren Fensterrand */
	right: 150px; /* Abstand zum rechten Fensterrand */
	overflow: auto; /* Scrollbalken, falls notwendig */
		/* nur für IE: */
		width: expression((document.body.clientWidth - 300) + "px");
				/* left-Wert + right-Wert = 300 */
		height: expression((document.body.clientHeight - 150) + "px");
				/* top-Wert + bottom-Wert = 150 */
}

#rechts {
	background: url(Bilder/backgorund3.gif);/*Hintergrundbild*/
	background-color: #000000; /*Hintergrundfarbe*/
	position: absolute; /*oisitinsart*/
	top: 105px; /* Abstand zum oberen Fensterrand */
	bottom: 0; /* Abstand zum unteren Fensterrand */
	right: 0; /* Abstand zum rechten Fensterrand */
	width: 150px; /* Blockbreite */
	padding: 0; /* Interpretation Boxmodell! */
	overflow: hidden; /* Scrollbalken unterdrücken */
	color: #a7a7a7;/*Schriftfarbe*/
	margin: 0;
	text-align:right;/*text ausrichtung*/
		/* nur für IE: */
		height: expression((document.body.clientHeight - 105) + "px");
				/* top-Wert + bottom-Wert = 105 */
}

#unten {
	position: absolute; /*Positionsangabe*/
	left: 150px; /* Abstand zum linken Fensterrand */
	bottom: 0; /* Abstand zum unteren Fensterrand */
	right: 150px; /* Abstand zum rechten Fensterrand */
	height: 45px; /* Blockhöhe */
	padding: 0; /* Interpretation Boxmodell! */
	overflow: hidden; /* Scrollbalken unterbinden */
	background-color: #ffffff;/*Hintergrundfarbe*/
	margin: 0;/*Abstände*/
	text-align:center;/*Textausrichtung*/
	font-size:15px;/*Schriftgröße*/
	line-height: 15px;/*Zeilenhöhe*/
	border-top: 1px solid #000000;
		/* nur für IE: */
		width: expression((document.body.clientWidth - 300) + "px");
				/* left-Wert + right-Wert = 300 */
}

/*Absatz einrückung bei den Zitaten*/
*.zitat {
padding-left: 3.5px;
}

/*Allgemeines Layout*/
/*Links spalte*/
*.spalte a:link{color:#a7a7a7; text-align:left; text-decoration: underline; border:0; margin:0;}
*.spalte a:visited{color:#cccccc; text-align:left; text-decoration: underline;border:0; margin:0;}
*.spalte a:hover{color:#000000; text-align:left; text-decoration: underline;border:0; margin:0;}
*.spalte a:active{color:#a7a7a7; text-align:left; text-decoration: underline;border:0; margin:0;}

/*Überschriften Farben, ausrichtungen, größe,*/
h1 {color: #000000; margin: 0; text-align:left; font-size:30px; text-decoration: underline;}
h2 {color: #000000; margin: 0; text-align:left; font-size:25px; text-decoration: underline;}
h3 {color: #000000; margin: 0; text-align:left; font-size:20px; text-decoration: underline;}
h4 {color: #000000; margin: 0; text-align:left; font-size:18px; text-decoration: underline;}
h5 {color: #000000; margin: 0; text-align:left; font-size:16px; text-decoration: underline;}
h6 {color: #000000; margin: 0; text-align:left; font-size:14px; text-decoration: underline;}

/*Links*/
a:link{color:#000000; text-align:left; text-decoration: underline;}
a:visited{color:#999999; text-align:left; text-decoration: underline;}
a:hover{color:#000000; text-align:left; text-decoration: underline;}
a:active{color:#000000; text-align:left; text-decoration: underline;}

/*Zitate*/
blockquote {
	background: #CCCCCC;
	border-left: 5px solid #666666; /*legt für die Zitate einen Rahmen fest*/
}

Mein Problem ist nun, das ich abweichend vom tutorial oben nicht nur die beiden Spalten und ein div in der Mitte habe, sondern das dort drei divs sind. (ecke, oben und bild). Ich denke das ein Problem an jenen liegt.

Wie muss ich die divs ecke und bild berechnen? Der Firefox zeigt bei mir alles noch richtig an. Im IE (ich glaube Version 6 unter Win2000) ist das ganze noch ein wenig kaputt. Das div unten ist zwar unten, wenn ich scrale, scralt es mit und nicht nur das div mitte. Die Spalten funktionieren auch noch nicht.

Liegt das am Quirksmodus? Wenn ja, wie mache ich das mit dem Quirksmodus richtig?

Gruß und vielen Dank
Muckel

P.S. ein Bild wie es bei mir im IE ausschaut gibt es hier: design

Maik · 7. Januar 2008

Es gibt mehrere Möglichkeiten, um das Dokument dem IE im Quirksmodus zu übergeben, und im Tutorial werden sie auch genannt.

Eine weitere ist, vor der Dokumenttyp-Deklaration (Variante "Strict") einen HTML-Kommentar einzufügen:

Code:

<?php header('Content-Type: text/html; charset=iso-8859-1'); ?>
<!-- put IE into Quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Muckel1986 · 7. Januar 2008

Vielen Dank für deine Hilfe! Es funktioniert! Du kannst es unter http://jurtenrunde.de/test/ sehen. Leider sagt mir der Validierungsservice von validome.org und von http://jigsaw.w3.org das die Seite nicht mehr valid ist. Teilweise bezieht sich das auch auf die Berechnungen - kann das so sein? Wie kann ich die dort auf geführten Fehler richtig beheben?

Gruß und Danke
Muckel

Maik · 7. Januar 2008

Wenn du das Stylesheet validieren willst, solltest du besser die andere vorgestellte Technik aus dem Tutorial verwenden.

Das invalide HTML-Markup steht aber in keinem Kontext zum Stylesheet, und zu den Fehlern werden auch die Gründe genannt.

Muckel1986 · 7. Januar 2008

In der zweiten Variante finde ich Angaben wie diese:

Code:

  * html #mitte {
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border-top-width: 150px;	/* = Kopfzeilenhöhe */
  	border-left-width: 200px;	/* = Spaltenbreite links */
  	border-bottom-width: 50px;	/* = Fußzeilenhöhe */
  	border-right-width: 100px;	/* = Spaltenbreite rechts */
  	border-style: solid;
  }

wieso kann ich diese Angaben nicht direkt zu #mitte einfügen?

Code:

#mitte {
	position: absolute;
  	top: 150px;		/* Abstand zum oberen Fensterrand */
  	left: 200px;		/* Abstand zum linken Fensterrand */
  	bottom: 50px;		/* Abstand zum unteren Fensterrand */
  	right: 100px;		/* Abstand zum rechten Fensterrand */
  	overflow: auto;		/* Scrollbalken, falls notwendig */
}

also daraus dann das machen:

Code:

#mitte {
	position: absolute;
  	top: 150px;		/* Abstand zum oberen Fensterrand */
  	left: 200px;		/* Abstand zum linken Fensterrand */
  	bottom: 50px;		/* Abstand zum unteren Fensterrand */
  	right: 100px;		/* Abstand zum rechten Fensterrand */
  	overflow: auto;		/* Scrollbalken, falls notwendig */
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border-top-width: 150px;	/* = Kopfzeilenhöhe */
  	border-left-width: 200px;	/* = Spaltenbreite links */
  	border-bottom-width: 50px;	/* = Fußzeilenhöhe */
  	border-right-width: 100px;	/* = Spaltenbreite rechts */
  	border-style: solid;
}

?

Maik · 7. Januar 2008

Weil die Regeln im Star-HTML-Hack (* html #mitte) ausschliesslich für den IE gedacht sind, und von den übrigen Browsern nicht gelesen / ausgeführt werden sollen.

Und da du vorhin den "Conditional Comment" erwähnt hattest, wäre dies ein Anwendungsbeispiel, um diese IE-spezifischen Regeln darin auszulagern.

Muckel1986 · 7. Januar 2008

Gut, vielen Dank für dein Hilfe! Das Beispiel ist ja ein wenig anders. Den footer so anordnen, wie ich ihn habe, bekomme ich noch hin.

Aber ich habe oben ja nicht nur ein div, sondern drei. Könntest Du mir das vielleicht so ab ändern?

Sprich ich habe

obenlinks, oben mitte, obenrechts
links, mitte, rechts
unten

links und rechts sollen bis ganz unten führen und unten ist unter der mitte, aber auch ganz unten.

Naja, morgen ist ein weiterer Tag, da werd ich es weiter probieren.

Vielen Dank!
Muckel

Maik · 8. Januar 2008

Guten Morgen

So lautet nun das Stylesheet:

Code:

html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          border: 0;
          padding: 0;
}

body {
        overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
        font-size:15px; /*Schriftgröße*/
}

#ecke {
        position: absolute; /*Positionsart*/
        top: 0; /* Abstand zum oberen Fensterrand */
        left: 0px; /* Abstand zum linken Fensterrand */
        padding: 0; /*Abstände*/
        background: url(Bilder/winter2.gif);/*Hintergrundbild*/
        background-color: #666666; /*Hintergrundfarbe*/
        width: 150px; /*Breite*/
        height: 105px;
        border-bottom: 1px solid #000000;
        margin: 0;
        z-index:5;
}

#oben {
        position: absolute; /*Positionsart*/
        top: 0; /* Abstand zum oberen Fensterrand */
        left: 150px; /* Abstand zum linken Fensterrand */
        right: 150px; /* Abstand zum rechten Fensterrand */
        height: 105px; /* Blockhöhe */
        padding: 0; /* Interpretation Boxmodell! */
        overflow: hidden; /* Scrollbalken unterbinden */
        background: url(Bilder/backgorund1.gif);/*Hintergrundbild*/
        background-color: #000000; /*Hintergrundfarbe*/
        color: #FF6600;/*Schriftfarbe*/
        margin: 0;/*abstände*/
        text-align:center;/*Textausrichtung*/
        font-size:20px;/*Schriftgröße*/
        font-weight:bold;/*Fettdruck*/
        border-bottom: 1px solid #000000;
}

* html #oben {
position:absolute;
left:0;
width:100%;
z-index:4;
border-left:150px solid #000;
border-right:150px solid #000;
}

/*H1 Überschrift im Header*/
#oben h1 {color: #FF6600; text-align:center; font-size:28px; text-decoration:none;}

#bild {
        background: url(Bilder/kothefluss-klein.gif);/*Hintergrundbild*/
        background-repeat:no-repeat;/*Hintergrundbild wirderholen aus*/
        background-position:bottom;/*Hintergrundbild anordnen*/
        background-color: #000000;/*Hintergrundfarbe*/
        position: absolute;/*positionierung*/
        top: 0;/*abstand oben*/
        right: 0;/*abstand rechts*/
        width: 150px;/*breite*/
        height: 105px;/*höhe*/
        padding: 0;/*Abstände*/
        margin: 0;
        overflow: hidden;/**/
        color:#cccccc;/*Schriftfarbe*/
        border-bottom: 1px solid #000000;
        z-index:5;
}

#links {
        position: absolute;/*positionierung*/
        top: 105px; /* Abstand zum oberen Fensterrand */
        left: 0; /* Abstand zum linken Fensterrand */
        bottom: 0px; /* Abstand zum unteren Fensterrand */
        background: url(Bilder/backgorund2.gif);/*Hintergrundbild*/
        background-color: #cccccc;/*Hintergrundfarbe*/
        width: 150px; /* Blockbreite */
        padding: 0; /* Interpretation Boxmodell! */
        margin: 0;
        overflow: auto; /* Scrollbalken, falls notwendig */
}

* html #links {
position:absolute;
top:0;
left:0;
height:100%;
border-top:105px solid #000;
z-index:4;
}

#mitte {
        position: absolute; /*positionierung*/
        top: 105px; /* Abstand zum oberen Fensterrand */
        left: 150px; /* Abstand zum linken Fensterrand */
        bottom: 45px; /* Abstand zum unteren Fensterrand */
        right: 150px; /* Abstand zum rechten Fensterrand */
        overflow: auto; /* Scrollbalken, falls notwendig */
        margin: 0;
        padding: 0;
}

* html #mitte {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-top:105px solid #000;
border-bottom:45px solid #000;
border-left:150px solid #000;
border-right:150px solid #000;
z-index:1;
}

#rechts {
        background: url(Bilder/backgorund3.gif);/*Hintergrundbild*/
        background-color: #000000; /*Hintergrundfarbe*/
        position: absolute; /*oisitinsart*/
        top: 105px; /* Abstand zum oberen Fensterrand */
        bottom: 0; /* Abstand zum unteren Fensterrand */
        right: 0; /* Abstand zum rechten Fensterrand */
        width: 150px; /* Blockbreite */
        padding: 0; /* Interpretation Boxmodell! */
        overflow: hidden; /* Scrollbalken unterdrücken */
        color: #a7a7a7;/*Schriftfarbe*/
        margin: 0;
        text-align:right;/*text ausrichtung*/
}

* html #rechts {
position:absolute;
top:0;
right:0;
height:100%;
border-top:105px solid #000;
z-index:4;
}

#unten {
        position: absolute; /*Positionsangabe*/
        left: 150px; /* Abstand zum linken Fensterrand */
        bottom: 0; /* Abstand zum unteren Fensterrand */
        right: 150px; /* Abstand zum rechten Fensterrand */
        height: 45px; /* Blockhöhe */
        padding: 0; /* Interpretation Boxmodell! */
        overflow: hidden; /* Scrollbalken unterbinden */
        background-color: #ffffff;/*Hintergrundfarbe*/
        margin: 0;/*Abstände*/
        text-align:center;/*Textausrichtung*/
        font-size:15px;/*Schriftgröße*/
        line-height: 15px;/*Zeilenhöhe*/
        border-top: 1px solid #000000;
}

* html #unten {
position:absolute;
left:0;
bottom:0;
width:100%;
border-left:150px solid #000;
border-right:150px solid #000;
z-index:2;
}

Muckel1986 · 8. Januar 2008

Vielen vielen lieben Dank! Es funktioniert! Eine letzte Frage habe ich noch. Und zwar habe ich unten Bilder, die verlinkt sind. Dort hatte ich im Bild Tag border="0" stehen, um den Rahmen weg zu bekommen. Laut http://www.validome.org/validate ist das aber nicht valid.

Wie kann ich den Rahmen weg bekommen, so das es trozdem valid ist? Am besten auch in der style.css, wenn das geht.

Gruß und vielen Dank
Muckel

Maik · 8. Januar 2008

Mahlzeit

Code:

a img { border:0; }

✔ Design für IE aufarbeiten - wie?

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Neue Beiträge